JavaScript

最新推荐文章于 2024-03-29 09:27:47 发布

westdream丶

最新推荐文章于 2024-03-29 09:27:47 发布

阅读量464

点赞数

本文链接：https://blog.csdn.net/c1017722787/article/details/113704979

版权

本文详细介绍了JavaScript的基础知识，包括数据类型、变量、条件控制、循环、函数、对象、数组、字符串、正则表达式等。还深入讲解了ES6的新特性，如let、const、Map和Set。此外，探讨了JavaScript与浏览器的关系，如DOM操作、BOM对象、AJAX以及面向对象编程。最后，提到了jQuery库的使用。文章旨在提供一个全面的JavaScript学习路线图。

摘要由CSDN通过智能技术生成

JavaScript

1.什么是JavaScript

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。

HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

2. 快速入门

2.1 引入JavaScript

内部标签引入

将javaScript代码直接写在script标签内，注释和java注释一样
```
<script>
    //这就是js代码
alert('hello world!');
</script>
```

外部引入

和css代码的style.css外部引入一样，在html中引入外部js文件

<!--注意：script标签必须成对出现-->
<script src="js文件路径"></script>

<!--不用显示定义type,script内也默认是javascript代码-->
    <script type="text/javascript"></script>

2.2 基本语法入门

变量类型就只有一个var代表所有变量类型

 // 1.定义变量    变量类型  变量名 = 变量值;
var num = 1;
var name = "zhangsan";

条件控制和java类似

var score = 75;
if(score>60 && score<70){
              alert("60~70");
        }else if(score>70 && score<80){
               alert("70~80");
        }else{
            alert("other");
        }

浏览器的Console界面中可以在控制台进行调试程序

//console.log(score)在浏览器的控制台打印变量，相当于java中的sout
var score = 85;
console.log(score);

浏览器的Souces界面中可以进行断点调试,鼠标点击要调试的行号，刷新页面就可以在最右侧窗口进行断点的步入调试
浏览器的Elements是html和css信息，常用来复刻网络界面；Console调试javascript；Souces打断点；Nerwork有网络信息，常用来抓包；Application查看存储Cookie信息；

2.3 数据类型

数值，文本，图形，音频，视频…

变量
```
//所有变量类型都是var
```
number

js不区分小数和整数，统一用Number表示

123    // 整数123
123.1  // 浮点数123.1
1.123e3// 科学计数法
-99    // 复数
NaN    // not a number 不是一个数字
Infinity // 表示无限大

字符串
```
'abc'

"abc"
```
布尔值
```
true
    
false
```

逻辑运算

&&  与：一假全假

||  或：一真全真

!   非：取反

比较运算符（重要！)

=    赋值

==   等于（类型不一样，值一样，也会判断为true)
    
===  绝对等于（类型一样，值一样，结果才为true)

这是一个JS的缺陷，坚持不要使用== 比较，而是用三个等于号 ===去比较

NaN与所有的数值都不相等，包括自己,可以通过isNaN()方法来判断这个数是否是NaN
```
> NaN===NaN
> false

> isNaN(NaN)
> true
```
浮点数精度问题：
```
console.log((1/3)===(1-(2/3)))
flase
```
尽量避免使用浮点数进行运算，会存在精度问题
```
Math.abs(1/3-(1-2/3))<0.000000000000001
true
```
null和underfine
- null 空
- underfine 未定义
数组

Java中数组元素必须是一系列相同数据类型的对象，而JavaScript则不需要这样
```
//为了保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,"hello",null,true];

new Array(1,2,3,4,"hello",null,true);
```
取数组下标，如果越界了，就会输出undefined

对象

对象是大括号{}，数组是中括号[]

每个属性之间使用逗号隔开，最后一个不需要添加

// Person person = new Person(1,2,3,4,5);

var person = {
    name:"张三",
    age:3,
    tags:['js','java','web','...']
}

取对象的值

> person.name
>"张三"
>person.age
>    3
>person.tages
>(4) ["js", "java", "web", "..."]

2.4 严格检查格式

ES6规范下

'use strict’必须写在JavaScript的第一行，预防JavaScript的随意性导致产生的一些问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
  ‘use strict'：严格检查模式，预防JavaScript的随意性导致产生的一些问题
   必须写在JavaScript的第一行
   
  局部变量建议都使用let去定义
-->
    <script>
        'use strict';
        //全局变量var 局部变量let 常量const
       let i = 1;
    </script>
</head>
<body>

</body>
</html>

3.数据类型

3.1 字符串

正常字符串我们使用单引号’'或者""

注意转义字符 \

\'       输出引号
\n       换行
\t       Tab键
\u4e2d   \u#### Unicode字符，u4e2d代表‘中’字
\x41     Ascll字符'A'

多行字符串编写

//此处为Tab键上方的单反引号
var msg = 
    `hello
world
你好
世界`;

模板字符串 ${}

let name = "zhangsan";
let age = 3;

les msg = `你好，${name}`

字符串长度
```
str.length
```

字符串的可变性，不可变

> console.log(student[0])
> s
> student[0] = 1
> 1
> console.log(student)
> student

大小写转换

//注意，这里是方法不是属性
student.toUppercase()
student.toLowerCase()

字符串切片

[)  //左闭右开区间
 student.substring(1) // 从第一个字符串截取到最后一个字符串
 student.substring(1,3) //[1,3)

3.2 数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6] //通过下标取值和赋值
arr[0]
arr[0] = 1

数组的长度
```
arr.length
```
注意：假如给arr.length赋值，数组大小就会发生变化，即js数组长度是动态可变的，如果赋值过小，元素就会丢失。

获得下标索引

> arr.indexOf(2) //返回2的数组下标
> 1

slice() 数组切片，截取Array的一部分，返回一个新数组，类似于String中的substr
```
arr.slice(2,5)
```
可以使用push和pop方法操作数组尾部，类似于栈的出入栈操作
```
push: 压入到尾部
pop：从尾部弹出
```
unshift和shift从头部(下标小的一边)出入数组元素
```
unshift：压入到头部
shift：从头部弹出
```
排序sort()
```
arr = ["b","c","a"];

arr.sort();
```
元素反转
```
arr.reverse()
```
数组拼接 concat()

arr = ["c","b","a"]
arr.concat([1,2,3])
> ["c","b","a",1,2,3]
arr   //arr并没有改变
["c","b","a"]

注意：concat()并没有修改数组，只是会返回一个新的数组

连接符 join

使用特定的字符串连接数组

arr = ["c","b","a"]
arr.join('-')
> "c-b-a"

多维数组

arr = [[1,2],[3,4],["5","6"]];

arr[1][1]
> 4

填充方法fill

```javascript
arr.fill(1)
> [1,1,1]
```

数组：存储数据（会实现增删改查）

3.3 对象

若干个键值对

var 对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}

//定义一个person对象，它有四个属性！
var person{
   name:"zhangsan",
       age:3,
           email:"xxxx@qq.com",
               score:0
}

js中对象，{…}表示一个对象，键值对表述属性xxx:xxx，多个属性之间使用逗号隔开，最后一个属性不要加逗号！

JavaScript中的所有键都是字符串，值是任意对象

对象赋值

person.name = "lisi"
> "lisi"
person.name
> "lisi"

使用一个不存在的对象属性，不会报错！
```
person.haha
> undefined
```
动态的删减属性

通过delete删除对象的属性
```
delete person.name
> true
```
动态的添加属性

直接给新的属性添加值即可
```
person.haha = "haha"
> "haha"
```
判断属性值是否在这个对象中

属性 in 方法
```
'age' in person
```

true

//继承
‘toString’ in person

true

判断一个属性是否是这个对象自身拥有的

hasOwnProperty()

person.hasOwnProperty('toString')
> false

person.hasOwnProperty('age')
> true

3. 4 流程控制

if判断

var age = 3;

if(age > 3){ // 第一个判断
    alert("haha");
}else if(age < 5){ // 第二个判断
    alert("kuwa~");
}else{
    alert("kkkk~");
}

while循环，避免程序死循环

while(age < 100){
    age = age + 1;
    console.log(age);
}

for循环

for(let i=0;i<100;i++)
    console.log(i);

forEach循环

var arr = [1,3,5,7,9]

//函数
age.forEach(function (value)){
            console.log(value);
            }

for in循环

for(var 数组下标 in 对象){}

for(var index in age){
    if(age.hasOwnProperty(index)){
        console.log("存在");
        
        console.log(age[index]);
    }
}

==ES6新特性：==for of循环

var arr = [3,4,5]
//直接打印值而不是数组下标
for(var x of arr){
    console.log(x);
}

3.5 Map和Set

ES6的新特性

var name = new Map()/Set()

Map集合

//ES6 Map集合
      var map = new Map([['tom',100],['jack',90],['zhangsan',80]]);

     //get()：通过key获得value
      var name = map.get('tom');
      console.log(name);

      //set()：设置新的或修改键值对
      map.set('admin',123456);
      console.log(map);

      //delete()：删除键值对
      map.delete("tom");

Set无序不重复的集合
```
```javascript
```
var set = new Set([3,1,1,1,1]);

//add(): 增加元素
set.add(2);

//delete(): 删除元素
set.delete(1);

//has()：判断是否包含该元素
console.log(set.has(3));
```

使用for of 遍历Map和Set集合

var map = new Map(["tom",100],["jack",90]);
//遍历Map
for(let x in map){
    console.log(x);
}

var set = new Set([1,3,5,7]);
//遍历Set
for(var x of set){
    console.log(x);
}

3.6 iterator迭代器

ES6新特性

4. 函数

4.1 定义函数

定义方式一

例如：

绝对值函数(类似于c语言的定义?)

function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

一旦执行到return代表函数结束，返回结果

如果没有执行return，函数执行也会返回结果，结果就是undefined

定义方式二

var abs = function(x){
    if(x>=0){
        return x;
    }
    else{
        return -x;
    }
}

function(x){…} 这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数

调用函数

abs(10);
> 10
abs(-10);
> 10

参数问题：JavaScript可以传任意个参数，也可以不传参数

如果不存在参数，可以手动抛出异常规避

var abs = function(x){
    //手动抛出异常来判断
    if(typeof x!= 'number'){
        throw 'Not a number';
    }
    
    if(x>=0) 
        return x;
    else 
        return -x;
}

arguments

arguments是一个JS免费赠送的关键字，代表传递进来的所有参数，是一个可打印的数组

var abs = function(x){
 
 console.log("x=>"+x);
 //打印传递进来的参数
 for(var i = 0;i<arguments.length;i++){
     console.log(arguments[i]);
 }
 
 if(x>=0)
     return x;
 else
     return -x;
}

rest

ES6新特性

获取除了已经定义的参数之外的所有参数 ,即接收剩余的参数

//rest数组存放除a,b以外的参数值
function aaa(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

rest 参数只能写在最后面，必须用…标识。

4.2 变量的作用域

在javascript中，var定义的变量实际是有作用域的,假设在函数体中声明，则在函数体外不可以使用

function f(){
    var x = 1;
    x = x + 1;
}

x = x + 2;  //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function f1(){
    var x = 1;
    x = x + 1；
}

function f2(){
    var x = 'A';
    x = x + 1;
}

内部函数可以访问外部函数的成员，反之则不行

function f1()
{
    var x = 1;
    
    //内部函数可以访问外部函数的成员，反之则不行
    function f2(){
        var y = x + 1; //2
    }
    
    var z = y + 1; //Uncaught ReferenceError: y is not defined
}

假设内部函数变量和外部函数的变量重名
```
function f1(){
    var x = 1;
    function f2(){
        var x = 'A';
        console.log("inner"+x); //innerA
    }
    console.log("outer"+x); //outer1
    f2();
}
```
假设在JavaScript中函数查找变量从自身函数开始，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量双亲委派机制。
提升变量的作用域
```
function f1(){
    var x = "x" + y;
    console.log(x);
    var y = "y";
}
```
输出结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
```
function f2(){
    var y;
    
    var x = "x" + y;
    console.log(x);
    y = "y";
}
```
这个是在JavaScript建立之初就存在的特性，养成规范：所有的变量定义都放在函数头部，便于代码维护。

自我感觉和C++变量调用类似，先声明后调用
全局函数

//var定义全局变量
var x = 1;

function f(){
    console.log(x);
}
f();
console.log(x);

全局对象 window

var x = 'xxx';
alert(x);
//默认所有的全局变量都会自动绑定在window对象下；
alert(window.x);

alert()这个函数本身也是一个window变量

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，则会报错RefrenceError

var x = 'XXX';
var old_alert = window.alert;
//old.alert(x);
window.alert = function(){
    
};
//发现alert()失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

规范

由于我们的所有全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，就会冲突，怎么减少冲突？

//唯一全局变量
var MyApp = {};

//定义全局变量
MyApp.name = 'admin';
MyApp.add = function(a,b){
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，就可以降低全局命名冲突的问题

jQuery机制就是和上面类似，所有的代码命名都放在jQuery{}，为了书写方便，可以用${}代替。

局部作用域 let

function f(){
    for(var i=0;i<100;i++){
        console.log(i);
    }
    console.log(i+1); //问题：i出了这个作用域还可以使用
}

ES6新规范

引入let关键字，解决了局部作用域的冲突问题.

function f(){
    for(let i=0;i<100;i++)
        console.log(i);
    
    //Uncaught ReferennceError:i is not defined
    console.log(i+1);
}

引入常量const关键字

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量：建议不要修改这样的值。
```
var PI = 3.14;
```
ES6规划引入常量关键字const代表常量，定义后就不允许更改 ( C++ ？)。
```
const PI = 3.14;
```

4.3 方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西：属性和方法。

var my{
    name:"张三",
        birth:2000,
            //方法
            age:function (){
                var now = new Date.getFullYear();
                return now - this.birth;
            }
}

//调用属性
my.name;
//调用方法,一定要带上括号()
my.age();

this代表什么？拆开上面的代码看看~

function getAge(){
    var now = new Date().getFullYear();
    return now-this.girth;
}

var my ={
    name:"张山",
    birth:2000,
    age:getAge
}

//my.age()   ok
//getAge()   NaN   window

在Java中this属性是无法指向的，是默认指向调用它的那个对象；但是在JavaScript中,apply方法可以控制this的指向

apply：所有函数都有的方法，可以改变this的指向

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth();
}

var my = {
    name:"张三",
        birth:2000,
            age:getAge
};

var xiaoming = {
    name:"小明",
    birth:2000,
    age:getAge
};

// my.age() ok

getAge.apply(xiaoming,[]); //this指向了xiaoming，参数为空

所以定义方式为：function + 方法名(参数){...};

5. 内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1 Date

基本使用

  var now = new Date();
    console.log(now);
    now.getFullYear();// 年
    now.getMonth()// 月
    now.getDate();// 日期
    now.getDay();// 星期几
    now.getHours();// 时
    now.getMinutes();// 分
    now.getSeconds();// 秒



    // 时间戳 全世界统一 从1970 1.1 0:00:00 开始到现在的毫秒数
    now.getTime();
    //通过时间戳获取时间
    console.log(new Date(1611995670571));

转换

now = new Date(1611995670571);
> Sat Jan 30 2021 16:34:30 GMT+0800 (中国标准时间)
now.toLocaleString()
> 2021/1/30下午4:41:23
now.toGMTString()
> "Sat, 30 Jan 2021 08:41:23 GMT"

5.2 JSON

JSON是什么

早期，所有数据传输习惯使用XML文件
1. JSON(JavaSscript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。
2. 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
3. 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示

格式
对象都用 {}
数组都用 []
所有的键值对都使用 key:value

JSON字符串和JS对象的转换:

JSON.stringify(object):对象转换为json字符串

JSON.parse('json字符串'):json转换为对象

var user = {
   name:"zhangsan",
   age:3,
   sex:'男'
}

//对象转换为json字符串 {"name":"zhangsan","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

//json 字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"zhangsan","age":3,"sex":"男"}');

JSON和JS对象的区别

//JSON本质上是一个字符串，所有key都要写成字符串格式
var json = '{"a":"hello","b":"hellob"}'

var obj = {a:'hello',b:'hellob'}

5.3 Ajax

原生的js写法，xhr 异步请求
jQuery封装好的方法 $("#name").ajax("")
axios 请求

6. 面向对象编程

原型

javascript、Java、c#…面向对象的语言；

类：模板
对象：具体的实例

在JavaScript中需要转换思维方式

以前的方式，原型：

//原型对象
var Student{
    name:"zhangsan",
        age:3,
            run:function(){
console.log(this.name+" run......");
            }
};

var xiaoming{
    name:"xiaoming";
}

//小明的原型是Student
xiaoming.__proto__ = Student;

//然后xiaoming可以调用Student中的run方法
xiaoming.run();

ES6新特性 Class继承

class关键字是在ES6引入的

定义一个类，类里面要有属性和方法

//定义一个学生类
class Student{
    //构造器不一样
    constructor(name){
        this.name = name;
    }
    //方法直接命名
    hello(){
        alert('hello');
    }
}


//使用这个类，和Java类似
var xiaoming = new Student("xiaoming");
xiaoming.hello();

var xiaohong = new Student("xiaohong");
xiaohong.hello();

继承

class XiaoStudent extends Student{
    constructor(name,grade){
        //继承必须使用父类中的属性或者方法
        super(name);
        this.grade = grade;
    }
    
    myGrade(){
        alert("我是一名小学生");
    }
}

var xiaoming = new XiaoStudent("xiaoming",2);

本质：还是查看对象原型[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mCFVreVm-1612535112403)(C:\Users\CYL\AppData\Roaming\Typora\typora-user-images\image-20210203133334675.png)]

__proto__:Student指向Student

原型链

prototype：设置原型方法属性，所有儿子孙子都可以使用

__ proto __：可以输出所有祖先在原型里存的方法属性

constructor：获取创造自己的构造函数，相当于获取自己的父母

7. 操作BOM对象(重点)

BOM(Browser Object Model)浏览器对象模型,主要指一些浏览器内置对象如：window、location、navigator、screen、histor等对象，用于完成一些操作浏览器的特定API。

浏览器介绍

JavaScript和浏览器的关系

JavaScript的诞生就是为了能够让它在浏览器中运行！

BOM：浏览器对象模型

IE 6~11
Chrome
Safari
FireFox

window

window代表浏览器窗口

> widow.alert()2
> underfined
//内部窗口
> window.innerHeight
> 258
> window.innerWidth
> 919
//外部窗口
> window.outerHeight
> 994
> window.outWidth
> 919

Navigator(不建议使用)

Navigator封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会被人为修改！

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸分辨率

screen.height
864
screen.width
1536

location (重要)

location代表当前页面的URL信息

//主机
host:"www.baidu.com"
//链接
href:"https://www.baidu.com"
//协议
protocol:"https:"
//重新加载 reload()
reload:f reload()
//设置新的地址
location.assign('https://www.googole.com/')

document (重要)

document 代表当前的页面，HTML DOM文档树

document.title
    "百度一下，你就知道"
document.titlt = 'MyWorld'
    "MyWorld"

获取具体的文档树节点，和CSS选择器结合

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
var dl = document.getElementById('app');
</script>

document.getElementById对应id选择器

获取cookie

document.cookie
"BIDUPSID=2C9C6DDBED90995A10A181854F4EBC27; PSTM=1585717367; BAIDUID=2C9C6DDBED90995A4F8F191D8681049A:FG=1; sugstore=0; COOKIE_SESSION=189560_0_4_2_14_1_1_0_3_1_0_0_352005_0_0_0_1603614720_0_1603804256%7C9%230_0_1603804256%7C1; BAIDUID_BFESS=AD446035777D74D9C5BFC591167EDC21:FG=1; ZD_ENTRY=google; BD_HOME=1; H_PS_PSSID=33425_33518_33241_33272_31660_33584_26350; BD_UPN=12314753; BA_HECTOR=2l01040k8524a1a44g1g1kinl0q"

劫持cookie的原理

www.taobao.com

<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器-->

服务器端可以设置cookie:httpOnly 可以保证服务器的安全

history (不介意使用)

获取浏览器的历史纪录

history.back() //后退到页面

history.forward() //前进到页面

8. 操作DOM对象 (重点)

DOM(Docment Object Model)：文档对象模型，针对HTML和XML文档的一个API，通过DOM可以去改变文档

DOM模型将整个文档看成一个树形结构，并用document对象表示该文档。

DOM规定文档中的每个成分都是一个节点(Node):

文档节点(Document)：代表整个文档
元素节点(Element)：文档中的一个标记
文本节点(Text)：标记中的文本
属性节点(Attr)：代表一个属性，元素才有属性

核心

浏览器网页就是一个DOM树形结构

更新：更新DOM节点
遍历：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点

要操作一个DOM节点，就必须要先获得这个DOM节点

获得DOM节点

document.getElementById()id选择器、document.getElementByTagName()标签选择器、document.getElementByClassName()类选择器

<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>

<script>
    //对应css选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    var children = father.children; //获取父节点下的所有子节点

    var firstChild = father.firstChild;
    var lastChild = father.lastChild;
</script>
</body>

这是原生代码，之后我们尽量都是用jQuery();

更新节点

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1');

</script>

操作文本：

id1.innerText = '123' 更新文本的值
id1.innerHTML = '<strong>123</strong>' 可以解析HTML文本标签

操作CSS样式：

<script>
    var id1 = document.getElementById('id1');
    id1.innerText = 'abc';
</script>

id1.style.color ='yellow' 更改文本颜色
id1.style.fonSize = '20px' 更改文字大小

等等

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

removeChild()

<div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>

<script>
var self = document.getElementById('id');
    var father = p1.parentElement;

    //删除节点
    father.removeChild(self);
    
    //删除是一个动态的过程
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。

插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素了；但是如果这个DOM节点已经存在元素了，我们就不能这么干，会产生覆盖。

追加 appendChild()：

<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
var js = document.getElementById('js');
    var list = document.getElementById('list');
    
    list.appendChild(js);//将id=js的标签加到list之中
</script>

父元素.appenChild(子元素)

创建一个新的标签，实现插入

<script>
  var js = document.getElementById('js');
    var list = document.getElementById('list');
    
    //通过JS 创建一个新的节点
    var newP = document.createElement('p');// 创建一个p标签
    newP.id = 'newP'; //设置标签id
    newP.innerText = 'Hello,World';
    
    //插入到list
    list.appendChild(newP);
</script>

setAttribute(key,value)通过这个属性，可以在标签中设置任意的值

var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');

//上面的代码等价于
<script type="text/javascript"></script>

// 可以创建一个Style标签
    var myStyle = document.createElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:chartreuse}';//设置标签内容

    //getElementsByTagName()返回的是一个数组元素
    document.getElementsByTagName('head')[0].appendChild(myStyle);

insertBefore

<script>
    var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    var list = document.getElementById('list');

    //要包含的节点，insertBefore(newNode,targetNode)
    list.insertBefore(js,ee); //把js节点插入到ee节点前面，即在ee前面插入js节点


</script>

9.操作表单（验证）

表单是什么 form DOM树

文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

获得要提交的信息

document.getElementById('标签的id名称').value/name/id

<script>

   var input_text = document.getElementById('username');

//   得到输入框的值
   console.log(input_text.value);

//   修改输入框的值
   input_text.value = '123';

    //获得单选框的值
   var boy = document.getElementById('man');
   var girl = document.getElementById('women');
    //根据每个单选框的checked属性判断
   function chooseSex(){
       if(boy.checked === true)
           console.log("男");
       else
           console.log("女");
   }
</script>

提交表单，md5加密密码，表单优化

<!--
  表单绑定提交事件 onsubmit
  onsubmit = 绑定一个提交检测的函数，true,false
  将这个结果返回给表单，使用 onsubmit 接受！
  onsubmit = "return f()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return f()" target="_self">
    <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span>
        <input type="password" id="input-password" name="password">
    </p>
    <input type="hidden" id="md5-password" name="password">
<!--    按钮绑定事件 onclick 被点击-->
    <button type="submit" >提交</button>
</form>

<script>
    function f(){
        alert(1);
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');


        md5pwd.value = md5(pwd.value);

    //    可以校验判断表单内容，true就是通过提交，false就是阻止提交
        return true;
    }
</script>

10. jQuery

jQuery是一个库，里面封装了大量的JavaScript函数

引入方式

在线引入jQuery

浏览器搜索 CDN jQuery，然后复制在线的jQuery引用链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--不用下载，在线引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</body>
</html>

官网下载然后导入到项目的lib库下面，development是开发者版本，product是压缩生产版本

使用方式

公式:$('selector').action

selector就是css中的选择器，使用起来和css中使用方法一样，比如：类选择器$(.clsss)，id选择器$(#id)，标签选择器$(div)。action就是要执行的事件

<a href="#" id="test-jQuery">点我</a>
<script>
    //$符号代表jQuery,选择器要用单引号括起来，click是执行的事件
$('#test-jQuery').click(function (){
  alert('hello,jQuery');
  })
</script>

选择器selector

//原生js,选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();


//jQuery css中的选择器全部都能使用
$('p').click();//标签选择器
$('#id1').click();///id选择器
$('.class1').click();//class选择器

事件action

鼠标事件，键盘事件，其他事件

鼠标事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eOFeBVae-1612535112408)(C:\Users\CYL\AppData\Roaming\Typora\typora-user-images\image-20210205213930103.png)]
1. mousedown() 鼠标按下
2. mouseleave() 鼠标离开，只有在鼠标指针离开被选元素后，才会触发mouseleave事件
3. mousemove() 鼠标移动
4. mouseout() 不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout()事件
5. mouseover() mouseover 事件在鼠标移动到选取的元素及其子元素上时触发
6. mouseenter() mouseenter 事件只在鼠标移动到选取的元素上时触发。
7. mouseuo() 当在元素上放松鼠标按钮时，会发生 mouseup 事件
  
  例如：
  
  获取鼠标当前的一个坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse：<span id="mouseMove"></span>
<div id="divMove">在这里移动鼠标试试</div>

<script>
    //当网页元素加载完毕之后，响应事件
    $(function(){
          $('#divMove').mousemove(function (e){
              $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
          })
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3hksqKlJ-1612535112409)(C:\Users\CYL\AppData\Roaming\Typora\typora-user-images\image-20210205215830139.png)]

操作DOM对象

节点文本操作：

 $('#nav-bar ul li[class=my]').text(); //.text()获得值（文本）
 $('#nav-bar ul li[class=my]').text('重新设置的值'); //设置值

 $('#nav-bar ul li[class=my]').html();  //.html()获得html文本
 $('#nav-bar ul li[class=my]').html('<stromg>123</strong>'); //设置html值

css的操作:

$('#nav-bar').css("color,"red");

$(selector).css("key","value")

元素的显示和隐藏：

本质就是css中把属性设置成 display:none

 $('#nav-bar ul li[class=my]').show();   //显示元素

 $('#nav-bar ul li[class=my]').hide();   //隐藏元素

操作BOM对象

$(window).width()
$(windos).height()

$(screen).width()
$(screen).height()

westdream丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫