JavaScript笔记

最新推荐文章于 2024-05-19 02:32:57 发布

墩墩吃坚果

最新推荐文章于 2024-05-19 02:32:57 发布

阅读量89

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/cc_1113/article/details/126277751

版权

仅为学习记录，方便回顾复习，如有侵权请联系删除！

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--外部引入
       注意：script标签必须成对出现
       别写成<script/>的形式，容易出BUG
    -->
    <script src="../js/qj.js"></script>
    <!--不用显示定义type，也默认就是javaScript-->
    <script type="text/javascript"></script>
</body>
</html>

2.2 基本语法入门

JavaScript严格区分大小写

lesson01/html/second.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--JavaScript严格区分大小写-->
<script>
    // 1.定义变量  (可以按照Java的代码规范)
    var num = 1;
    alert(num);
    // 2. 条件控制
    var score = 80;
    if (score >= 60 && score < 70) {
        alert("成绩合格");
    } else if (score >= 70 && score < 80) {
        alert("成绩良好");
    } else if (score >= 80 && score < 90) {
        alert("成绩优秀");
    } else if (score >= 80 && score < 90) {
        alert("成绩非常优秀");
    } else {
        alert("成绩不合格");
    }
    console.log(score); /*在浏览器的控制台打印变量*/
</script>
</body>
</html>

2.3 严格检查格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    前提：IDEA需要设置支持ES6语法
        'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
        'use strict'必须写在JavaScript的第一行！
        局部变量建议都使用let去定义~
    -->
    <script>
        'use strict';
        // 局部变量用let定义
        let i=1
        //ES6 let
    </script>

</head>
<body>
</body>
</html>

2.4 区分var和let

（1）作用域不一样，var是函数作用域，而let是块作用域，也就是说，在函数内声明了var，整个函数内都是有效的，比如说在for循环内定义了一个var变量，实际上其在for循环以外也是可以访问的。

（2）而let由于是块作用域，所以如果在块作用域内（比如说for循环内）定义的变量，在其外面是不可被访问的，所以let用在for (let i; i < n; i++)是一种很推荐的写法。

3、数据类型

数值、文本、图形、音频、视频

number：js不区分小数和整数

123	// 整数123
123.123 // 浮点数
1.123e3 // 科学计数法
-99 // 负数
NaN // not a number
Infinity // 表示无限大

3.1 字符串

1、正常字符串我们使用单引号，或者双引号包裹

2、注意转义字符 \

\'
\n //换行
\t //制表符
\u4e2d // \u#### Unicode字符
\x31 // ascii字符

3、多行字符串编写

let msg = '
			Hello
            World
		'
		console.log(msg)

4、模板字符串（字符串的拼接）

let name = "林克时间";
console.log(`你好,${name}`); //注意不是单引号，而是tab键上方的 ` 符号

//result: 你好,林克时间
//与EL表达式类似，不使用'+'进行连接字符串

5、字符串长度

<script>
        "use strict"
        let student = "student";
        //获取字符串长度
        console.log(student.length);
        //获取字符串指定下标的值
        console.log(student[2]);
        //字符串的可变性测试：不可变
        student[2] = "a";
        console.log(student);
</script>

6、大小写转换

/*注意，这里是方法，是有返回值的，并非属性。转换后的结果是返回值，需要将返回值进行输出*/
/*转换为大写*/
student.toUpperCase();
/*转换为小写*/
student.toLowerCase();

7、student.indexOf(‘t’)

/*返回指定字符的下标*/
console.log(student.indexOf('t'));
/*result: 1*/

8、截取字符串

/*从start到最后*/
console.log(student.substr(2));

/*从start开始向后length个字符*/
console.log(student.substr(2,4));

/* 左闭右开截取 [start,end) 结果包括start 不包括end */
console.log(student.substring(2,5));

3.2 数组

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

1、定义数组

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

2、数组的长度

arr.length

数组的长度是可变的，可以改变某个位置的值

<script>
    "use strict";
    let arr = [1, 2, 3, 4, 5, 6, 7];
    arr[2] = 90;
    console.log(arr);
</script>
<!--
输出结果：[1,2,90,4,5,6,7]
-->

注意：假如给 arr.length 赋值，数组大小就会发生改变，如果赋值过小，元素就会丢失。

arr.length=10;
console.log(arr);
//result: [1,2,90,4,5,6,7, empty x 3]

3、indexOf：获得元素的下标

console.log(arr.indexOf(5));
//result: 4

4、slice：字符串的截取

类似 String 中 substring

// 从start开始取，取到最后
let arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr.slice(2));//输出：[3,4,5,6,7]

// 左闭右开，从start开始取，取到end之前
let arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr.slice(2,4));//输出：[3,4]，length是2

5、push()、pop()，向数组尾部压入或弹出

let arr = [1, 2, 3, 4, 5, 6, 7];
arr.push("a","b");
console.log(arr);//输出：[1, 2, 3, 4, 5, 6, 7, 'a', 'b']

arr.pop();
arr.pop();
console.log(arr);//输出：[1, 2, 3, 4, 5, 6, 7]

6、unshift、shift 向数组头部压入或弹出

let arr = [1, 2, 3, 4, 5, 6, 7];
arr.unshift("a","b","c");
console.log(arr);//输出：['a', 'b', 'c', 1, 2, 3, 4, 5, 6, 7]

arr.shift();
arr.shift();
console.log(arr);//输出：['c', 1, 2, 3, 4, 5, 6, 7]

7、排序

let arr = ['c', 1, 2, 3, 4, 5, 6, 7];
console.log(arr.sort());//输出：[1, 2, 3, 4, 5, 6, 7, 'c']

8、反转

let arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr.reverse());//输出：[7, 6, 5, 4, 3, 2, 1]

9、连接两个数组concat()

let arr = [1, 2, 3, 4, 5, 6, 7]
console.log(arr.concat([8,9,10]));//输出：[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

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

10、连接符join

打印拼接字符，使用特定的字符串连接

let arr = [1, 2, 3, 4, 5, 6, 7]
console.log(arr.join("yes"));//输出：1yes2yes3yes4yes5yes6yes7

11、打印多维数组

arr = [[1,2],[3,4],["a","b"]];
console.log(arr[2][1]);//输出：b
/*
arr[0][0]=1		arr[0][1]=2
arr[1][0]=3		arr[1][1]=4
arr[2][0]=a		arr[2][1]=b
*/

3.3 对象

由若干个键值对组成。

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

let 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值,
    ...
}

<script>
	let person = {
        name: "林克",
        age: 16,
        sex: 'M',
        score: 100
    }
    console.log(person);	//输出{name: '林克', age: 16, sex: 'M', score: 100}
</script>

1、给对象的属性赋值

person.name = "小蓝";
person.age = 23;

/*  result:
    {name: "小蓝", age: 23, sex: "M", score: 96}
*/

2、使用一个不存在的属性时不报错，而是输出undefined

person.haha;	//输出：undefined

3、动态的删减属性

delete person.name;
console.log(person);
//输出：{age: 16, sex: 'M', score: 100}

4、动态添加属性

//直接给新的属性添加值即可
person.ha = "hello";
console.log(person);
//输出：{age: 16, sex: 'M', score: 100, ha: 'hello'}

5、判断某个属性是否在该对象中

console.log('age' in person);//输出：true
console.log('a' in person);//输出：false

//继承
console.log('toString' in person);//输出：true

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperity()

console.log(person.hasOwnProperty("toString"));//输出：false
console.log(person.hasOwnProperty("age"));//输出：true

3.4 流程控制

1、if 判断

<script>
    "use strict";
    let age = 6;
    if (age < 3) {
        alert("小乖乖");
    } else if (age < 8) {
        alert("中乖乖");
    } else {
        alert("大乖乖");
    }
</script>

2、循环

while循环

let age = 6;
while (age < 50) {
    age = age + 1;
    console.log(age);
}

for循环

for (let i = 0; i < 50; i++) {
    console.log(i);
}

3.5 Map和Set

ES6新特性。

1、Map

<script>
    let map = new Map([['link',99],['zelda',95],['paya',80]]);
    //通过key获得value
    let score = map.get('link');
    console.log(score);   //99
    //添加一个键值对
    map.set('admin',123);
    console.log(map);   //{'link' => 99, 'zelda' => 95, 'paya' => 80, 'admin' => 123}
    //删除key对应的value
    map.delete('paya');
    console.log(map);   //{'link' => 99, 'zelda' => 95, 'admin' => 123}
</script>

2、Set

<script>
    let set = new Set([1, 3, 4, 1, 3, 2]);
    console.log(set); //Set(4) {1, 3, 4, 2}
    //删除某个值
    set.delete(3);
    console.log(set); //Set(3) {1, 4, 2}
    //添加一个值
    set.add(90);
    console.log(set); //Set(4) {1, 4, 2, 90}
    //判断某个值是否在集合内
    console.log(set.has(3)); //false
    console.log(set.has(90)); //true
</script>

3.6 iterator 迭代器遍历

1、遍历数组

let num = [1, 3, 5];
for (let x of num) {
    console.log(x);
}
//输出
// 1
// 3
// 5

2、遍历Map

let map = new Map([["link", 90], ["zelda", 95], ["paya", 80]]);
for (let m of map) {
    console.log(m);
}
//输出
// ['link', 90]
// ['zelda', 95]
// ['paya', 80]

3、遍历Set

let set = new Set([4, 3, 7, 89, 4, 3, 7, 5]);
for (let s of set) {
    console.log(s);
}
//输出
// 4
// 3
// 7
// 89
// 5

4、函数

4.1 定义一个函数

定义方式一

//定义一个绝对值函数
function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}
console.log(abs(-9));   //9

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

在JavaScript中，如果没有执行return，函数执行完也会返回结果，返回NaN或者undefined。

定义方式二

let abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};
console.log(abs(-90));   //90

方式一是 function 函数名( ){ }。

方式二是 function (){}，属于匿名函数，let abs = function (x){}，把结果值赋给abs。则通过abs就可以调用函数。

关键字 arguments

代表传递进函数里的所有参数是一个数组

let abs = function (x) {
    console.log("x=>" + x);
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
};
console.log(abs(-90));
/*输出结果
x=>-90
-90
undefined
*/

遍历 arguments 数组时会包含已经使用的参数。

在实际操作中我们在不看源代码的前提下往往不知道使用了几个参数，如何知道有多少个参数没有被使用呢？

关键字 rest

rest 关键字，是 ES6 引用的新特性，获取除了已经定义的参数之外的所有参数。是arguments 关键字的升级版。

let tom = function (a, b, ...rest) {
    console.log("a=>" + a);
    console.log("b=>" + b);
    console.log(rest);
};
console.log(tom("ya", "haha", "gaje","kurok","Deku"));
/*输出
a=>ya
b=>haha
(3) ['gaje', 'kurok', 'Deku']
*/

4.2 变量作用域

在JavaScript 中，var 定义的变量是有作用域的，只在函数体内有效，函数体外定义是无效的。

假设在函数体中声明，想要在函数体外使用该变量，则需要用到闭包技术。

function f() {
    var x = 5;
    x = x + 1;
}
console.log(x = x + 2);
/*输出
Uncaught ReferenceError: x is not defined
*/

4.3 方法

方法就是在对象里的函数

定义方法

"use strict";
let person = {
    name: "link",
    sex: "M",
    birth: 2017,
    //方法就是在对象里的函数
    age: function () {
        let now = new Date().getFullYear();
        return now - this.birth;
    }
};
console.log(person.name);
console.log(person.age());
/*输出
link
5
*/

this代表什么？

"use strict";
function getAge() {
    let now = new Date().getFullYear();
    return now - this.birth;
}
let person = {
    name: "zelda",
    sex: "F",
    birth: 2017,
    age: getAge
}
console.log(person.age());
console.log(getAge());  //调用该方法时,this 指向的是全局，全局没有birth变量
/*输出  
5
Uncaught TypeError: Cannot read properties of undefined (reading 'birth')
*/

this默认指向调用它的对象。

关键字apply

在 js 中控制 this 的指向

"use strict";
function getAge() {
    let now = new Date().getFullYear();
    return now - this.birth;
}
let person = {
    name: "zelda",
    sex: "F",
    birth: 2017,
    age: getAge
}
console.log(person.age());
console.log(getAge.apply(person,[])); //this：指定对象person，参数为空

/*输出  
5
5
*/

5、内部对象

5.1 标准对象

console.log(typeof 123);  //输出：number
console.log(typeof '123');  //输出：string
console.log(typeof []);   //输出：object
console.log(typeof {});   //输出：object
console.log(typeof NaN);   //输出：number
console.log(typeof Math.abs);   //输出：function
console.log(typeof undefined);   //输出：undefined

5.2 Date

基本使用

let date = new Date();
console.log(date);   //  Tue Aug 09 2022 08:08:07 GMT+0800 (中国标准时间)
console.log(date.getFullYear());    //年：2022
console.log(date.getMonth());    //月 0~11 ：7
console.log(date.getDate());    //日：9
console.log(date.getDay());    //周几：2
console.log(date.getHours());    //小时：8
console.log(date.getMinutes());    //分钟：8
console.log(date.getSeconds());    //秒：7

5.3 Json对象

1、Json是什么？

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。简单来说：json 就是一种在各个编程语言中流通的数据格式，负责不同编程语言中的数据传递和交互。

在 javascript 中，一切皆为对象，任何 js 支持的类型都可以用 JSON 表示，只需要记准格式：

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

2、Json字符串和js对象转化

var user = {
    name: "link",
    age: "16",
    sex: "male"
}
console.log(user);	//{name: 'link', age: '16', sex: 'male'}

//js对象转换为 JSON字符串
var jsonUser = JSON.stringify(user);
console.log(jsonUser);	//{"name":"link","age":"16","sex":"male"}

//JSON字符串转换为对象
var obj = JSON.parse('{"name":"link","age":16,"sex":"male"}');//单双引号错开使用
console.log(obj);	//{name: 'link', age: 16, sex: 'male'}

5.4 AJAX

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

6、面向对象编程

7、操作BOM对象（重点）

javascript 和浏览器关系？
JavaScript 诞生就是为了能够让他在浏览器中运行

BOM (Browser Object Model) 浏览器对象模型

浏览器内核

Edge
Chrome
Safari
FireFox
Opera

第三方浏览器：

QQ浏览器
360浏览器

7.1 window对象（重要）

window 代表浏览器窗口

7.2 Navigator（不建议使用）

Navigator封装了浏览器的信息，大多数时候，我们不会使用 navigator 对象，因为会被人为修改!
不建议使用这些属性来判断和编写代码。

7.3 screen对象

代表屏幕尺寸

screen.height;	//864
screen.width;  //1536

7.4 location(重要)

location代表当前页面的URL信息

访问百度，在控制台输入location

> location
Location {
ancestorOrigins: DOMStringList, 
href: 'https://www.baidu.com/', 
origin: 'https://www.baidu.com', 
protocol: 'https:', host: 'www.baidu.com', …
}

控制台设置新的地址进行跳转

location.assign('http://www.bilibli.com')

7.5 document

document 代表当前的页面，HTML是怎么展示的？——> HTML DOM文档树

document.title="zelda";

控制台输入document.title获得当前页面标签名

获取具体的文档树节点

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

<script>
    let elementById = document.getElementById('app');
    console.log(elementById);
</script>
<!--控制台输出
<dl id="app">
    <dt>Java</dt>
    <dt>JavaSE</dt>
    <dt>JavaEE</dt>
</dl>
-->

获取Cookie

//控制台输入
document.cookie

7.6 history

代表浏览器的历史记录，不建议使用。

history.back() //后退
history.forward() //前进

8、操作DOM对象（重点）

DOM文档对象模型(Document Object Model)

浏览器网页就是一个 DOM 树形结构，层层嵌套。

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

DOM节点：就是源代码中的各个标签，body、div、a、p…

要操作一个 DOM 节点，就需要先获取这个DOM 节点。

8.1 获得DOM节点

<div id="father">
    <h2>我是标题</h2>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    let h2 = document.getElementsByTagName('h2'); //通过标签名获得文档树
    console.log(h2);  // HTMLCollection [h2]

    let p1 = document.getElementById('p1');
    console.log(p1);  // <p id="p1">p1</p>

    let p2 = document.getElementsByClassName('p2');
    console.log(p2);  // HTMLCollection [p.p2]

    let father = document.getElementById('father');
    console.log(father);
    /*
    <div id="father">
    <h2>我是标题</h2>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
    </div>
    */

    //获取父节点下的所有子节点
    let children = father.children;
    console.log(children);  // HTMLCollection(3) [h2, p#p1, p.p2, p1: p#p1]
</script>

8.2 更新DOM节点

<div id="id1"></div>

<script>
    //先获取DOM节点
    let div = document.getElementById('id1');
    //进行相应的修改
    //向div中添加元素
    div.innerText = '123';
    //可以解析HTML文本
    div.innerHTML='<strong>456</strong>';

    //设置css样式
    div.style.color = 'red';
    div.style.fontSize = '200px';
</script>

innerHTML和innerText的区别

innnerHTML用来获取标签元素或设置标签元素，包含文本和Html标签。在读取元素的时候，会将文本和Html标签一起读取出来；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，会解析Html标签，只显示文本，而不将标签显示出来。

innerText用来设置或获取标签内文本内容, 但它去除Html标签。在读取元素的时候，只会读取文本；在设置元素的时候，会覆盖掉原来的元素中文本和标签，如果新的内容包含标签，不会解析Html标签，也就是说，里面的标签并不是html中的标签，而只是一个文本。

8.3 删除DOM节点

删除节点的步骤：先找到父节点,通过父节点删除该 DOM 节点。

<div id="father">
    <h2>我是标题</h2>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //先找到该DOM节点
    let p1 = document.getElementById('p1');
    //进而找到该DOM节点的父DOM节点
    let father = p1.parentElement;
    //通过父DOM节点删除其DOM节点
    father.removeChild(p1);
</script>

注意：删除多个节点的时，Children 是在时刻变化的。例如删除第一个子节点后，原来的第二个节点就移动到了第一个节点的位置，删除多个节点的时候需要注意。

8.4 插入节点

append追加

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

下面实现追加节点

<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let js = document.getElementById('js');     //已存在节点
    let list = document.getElementById('list');
    list.appendChild(js);
</script>

如果追加的节点是已存在的，则会移动这个节点。

创建一个新的标签，实现追加

<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>
    //创建一个新的节点进行插入
    let newP = document.createElement('p');
    //给新的节点设置id
    newP.id = 'newP';
    //给新的节点添加内容
    let content = newP.innerHTML = 'Java';
    //根据设置的id进行追加
    list.appendChild(newP);
</script>

页面输出内容

insertBefore

插入到前面

<!--实现把 JavaScript 插入到 div 中的 JavaEE 前面-->
<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>
    let ee = document.getElementById('ee');
    let js = document.getElementById('js');
    let list = document.getElementById('list');

    //list：要包含的节点（参数顺序就是输出顺序）
    list.insertBefore(js, ee); //这个函数只接受两个参数
</script>

页面输出内容

9、操作表单

表单是什么？form----DOM树

文本框：text
下拉框：select
单选框：radio
复选框：checkbox
隐藏域：hidden
密码框：password
提交前验证：onsubmit
…

表单的目的：提交信息

下面写一个表单

<form method="post">
    <p>
        <span>用户名：</span><input type="text" id="username"/>
    </p>
    <!--多选框的值就是定义好的value-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"/>男
        <input type="radio" name="sex" value="woman" id="girl"/>女
    </p>
</form>
<script>
    let input_text = document.getElementById("username");
    let boy_radio = document.getElementById("boy");
    let girl_radio = document.getElementById("girl");
    //打印输入框的值
    console.log(input_text.value);
    //修改输入框的值
    input_text.value = "value";
    //对于单选框，多选框等固定的值，boy_radio.value只能取到当前的值
    let boySelected = boy_radio.checked; //查看返回的结果，是否为true，为true则被选中
    girl_radio.checked = true;//赋值
</script>

onsubmit的使用，在提交表单前执行一段JavaScript，并根据返回结果是true或false来决定是否提交表单。

οnsubmit="true"时，提交表单，默认为true。

οnsubmit="false"时，不提交表单。

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

<!--
action表示提交到哪里,#表示当前页
-->
<form action="#" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username"/>
    </p>
    <p>
        <span>密码：</span>
        <input type="password" id="password"/>
    </p>
    <input type="hidden" id="md5-password" name="password"/>
    <!--绑定事件onclick被点击-->
    <button type="submit">提交</button>
</form>
<script>
    function aaa() {
        alert(1);
        let username = document.getElementById("username");
        let pwd = document.getElementById("password");
        let md5pwd = document.getElementById("md5-password");
        //MD5算法
        //pwd.value = md5(pwd.value);
        md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容，true就是允许提交，false就是阻止提交
        return true;
    }
</script>

10、jQuery

javaScript 和 jQuery的关系？
jQuery库，里面存在大量的 JavaScript 函数

10.1 获取jQuery

官网下载地址：https://jquery.com/download/

文档工具站：http://jquery.cuishifeng.cn/

进入页面后右键另存为即可下载。

将下载下来的文件移动到java工程的文件夹中

导入jQuery

<!--导入jQuery-->
<script src="../lib/jquery-3.6.0.js"></script>

10.1 jQuery的选择器

新建 jQueryStudy.html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入jQuery-->
    <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--
    $就代表jQuery，()内是选择器
    公式：$(selector).action()
-->
<a href="" id="text-jQuery">点我</a>
<script>
    //选择器就是css选择器，#+id
    $('#text-jQuery').click(function () {
        alert('hello,jQuery!');
    });
</script>
</body>

原生js的选择器少，麻烦不好记

//根据标签名选择
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

jQuery则可以直接使用css中的全部选择器！

$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器

10.2 jQuery的事件

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

鼠标事件

mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入jQuery-->
    <script src="../lib/jquery-3.6.0.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>
        //当前网页元素加载完毕之后，响应事件
        //$(document).ready(function(){})
        
        //选择divMove这个元素，设置鼠标移动事件，事件内容为在mouseMove中输出文本，文本为坐标
        $(function(){
            $('#divMove').mousemove(function (e){
                $('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
            })
        });
    </script>
</body>

10.3 操作DOM

1、节点文本操作

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入jQuery-->
    <script src="../lib/jquery-3.6.0.js"></script>
</head>
<body>
    <ul id="test-ul">
        <li class="js">JavaScript</li>
        <li name="python">Python</li>
    </ul>

    <script>
        //document.getElementById(''); 原本得这样写，太麻烦
        //jQuery的写法
        $('#test-ul li[name=python]').text();//获得值
        $('#test-ul li[name=python]').text('设置值');//设置值
        $('#test-ul').html();//获得值
        $('#test-ul').html('<strong>123</strong>');//设置值
    </script>
</body>

浏览器控制台测试：

$('#test-ul li[name=python]').text();
> "Python"
$('#test-ul li[name=python]').text('设置值');

$('#test-ul li[name=python]').text();
>"设置值"

浏览器控制台输出结果

2、CSS的操作

$('#test-ul li[name=python]').css({"color":"red"});

3、元素的显示和隐藏

本质 display:none

$('#test-ul li[name=python]').toggle(); //切换，显示变为隐藏，或者隐藏变为显示


// 元素的显示
$('#test-ul li[name=python]').show();
// 元素的隐藏
$('#test-ul li[name=python]').hide();

小技巧

1、如何巩固JS（看jQuery源码，看游戏源码！）

2、巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果~）

useMove’).text(‘x:’+e.pageX+“y:”+e.pageY)
})
});

```

[外链图片转存中…(img-82DQhWLf-1660175390376)]