01、聊聊JavaScript这个东西 1、概述 JavaScript是一门世界上最流行的脚本语言

一个合格的后端人员，必须要精通JavaScript

2、历史 ECMAScript可以理解为JavaScript的一个标准

最新版本已经到es6

但是大部分浏览器还只停留在支持es5代码上

开发环境~线上环境，版本不一致

02、基本使用及HelloWorld 1、引入JavaScript 内部标签

1 2 3 外部引入

我的第一个JavaScript程序.html

Title

<!--<script>
    alert('hello,world')
</script>-->

<!--外部引入-->
<!--注意：script标签必须成对出现-->
<script src="js/qj.js"></script>

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 qj.js

alert('hello world'); 1 03、浏览器控制台使用

Title

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 04、数据类型快速浏览变量

var 变量名 1 number

js不区分小数和整数，number

123 //整数 123.1 //浮点数 1.123e3 //科学计数法 -99 //负数 NaN // not a number Infinity //表示无限大 1 2 3 4 5 6 字符串

‘abc’

“abc”

布尔值

true

false

逻辑运算

&& //两个都是真，结果为真 || //一个为真，结果为真 ! //真即假，假即真 1 2 3 比较运算符

= 赋值，不是比较运算符 == 等于（类型不一样，值一样，也会判断为true） === 绝对等于（类型一样，值一样，结果true） 1 2 3 这是一个js的缺陷，坚持不要使用==比较

注意：

NaN===NaN，结果为false,这个与所有的数值都不相等，包括自己只能通过isNaN(NaN)来判断这个数是否是NaN 浮点数问题

console.log((1/3)===(1-2/3)) 结果为false 1 2 尽量避免使用浮点数进行运算，存在精度问题

console.log(Math.abs((1/3)-(1-2/3))<0.00000000001) 结果为true,可以用这种方式运算 1 2 null和undefined

null 空 undefined 未定义数组

java的数值必须是相同的类型的对象，js中不需要这样

//保证代码的可读性，尽量使用 [] 定义 var arr = [12,3,'hello',null, true];

new Array(1,2,3,'hello',null, true); 1 2 3 4 取数据下标，如果越界了，就会undefined

对象

对象是大括号，数组是中括号

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

var person = { name : 'zyy', age : 18, tags : ['java', 'css']} 1 2 3 4 取对象的值

person.age 18 1 2 05、严格检查模式strict

Title

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 06、字符串类型详解正常字符串使用单引号或者双引号包裹

注意转义字符\

' \n \t \u4e2d \u#### unicode字符 \x41 Ascll字符 1 2 3 4 5 多行字符串编写

let msg = hello nihao zyy 1 2 3 4 5 模板字符串

let name = "zyy"; let msg = hello ${name}; console.log(msg); //hello zyy 1 2 3 字符串长度

let str = "student"; console.log(str.length); // 7 1 2 大小写转换

//注意，这里是防范，不是属性 str = "student" str.toUpperCase() //STUDENT str.toLowerCase() //student 1 2 3 找字符的对应字符串中的下标

//str = "student" console.log(str.indexOf('s')) //0 1 2 截取字符串

// [) str = "student" console.log(str.substring(0)) //student console.log(str.substring(1)) //tudent console.log(str.substring(1,2)) //t 1 2 3 4 07、数组类型详解 Array可以包含任意的数据类型

长度

//arr = [1, 2, 3, 4, "1", "5"] arr.length //6 1 2 注意：假如给arr.length赋值,数组大小就会变化，如果赋值过小，元素就会丢失

通过元素获得下标索引

//arr = [1, 2, 3, 4, "1", "5"] arr.indexOf(1) //0 arr.indexOf("1") //4 1 2 3 字符串“1”和数字1是不同的

slice() 截取Array的一部分，返回一个新的数组，类似于string的substring

//arr = [1, 2, 3, 4, "1", "5"] arr.slice(1,3) //[2, 3] 1 2 push() pop() 尾部

//push 压入到尾部 //pop 弹出尾部的一个元素 //arr = [1, 2, 3, 4, "1", "5"] arr.push(6) //[1, 2, 3, 4, "1", "5", 6] arr.pop() // [1, 2, 3, 4, "1", "5"] 1 2 3 4 5 unshift() shift() 头部

//unshift 压入到头部 //shift 弹出头部的一个元素 //arr = [1, 2, 3, 4, "1", "5"] arr.unshift(0) //[0, 1, 2, 3, 4, "1", "5"] arr.shift() //[1, 2, 3, 4, "1", "5"] 1 2 3 4 5 排序sort()

//arr = [4, 3, 2, 1] arr.sort() //[1, 2, 3, 4] 1 2 元素反转 reverse()

//arr = [1, 2, 3, 4] arr.reverse() //[4, 3, 2, 1] 1 2 concat()

并没有修改原数组，只是返回一个新的数组

//arr = [4, 3, 2, 1] arr.concat(6,7)//[4, 3, 2, 1, 6, 7] arr//[4, 3, 2, 1] 1 2 3 连接符join

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

//arr = [4, 3, 2, 1] arr.join(',')//"4,3,2,1" arr //[4, 3, 2, 1] 1 2 3 多维数组

arr2 = [[1,2],[3,4]] arr2[0][0]//1 1 2 数组：存储数据（如何存，如何取，方法都可以自己实现！）

08、对象类型详解若干个键值对

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

//定义了一个person对象，他有三个属性 let person = { name: "zyy", age: 18, sex: "男" } 1 2 3 4 5 6 7 8 9 10 11 12 js中对象，{…}表示一个对象，键值对描述属性xxx:xxx,多个属性之间用逗号分隔，最后一个属性不加逗号

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

对象赋值

//person = {name: "zyy", age: 18, sex: "男"} person.age = 20 //person = {name: "zyy", age: 20, sex: "男"} 1 2 使用一个不存在的对象属性，不会报错！undefined

//person = {name: "zyy", age: 18, sex: "男"} person.haha //undefined 1 2 动态的删减属性

//person = {name: "zyy", age: 18, sex: "男"} delete person.sex //person = {name: "zyy", age: 20} 1 2 动态的添加,直接给新的属性添加值即可

//person = {name: "zyy", age: 20} person.sex = "男" //person = {name: "zyy", age: 18, sex: "男"} 1 2 判断属性值是否在这个对象中 xxx in xxx

//person = {name: "zyy", age: 18, sex: "男"} "name" in person //true 'toString' in person // true 'hah' in person //false 1 2 3 4 判断一个属性是由是这个对象自身拥有的

//person = {name: "zyy", age: 18, sex: "男"} person.hasOwnProperty('toString') //false person.hasOwnProperty('name') // true 1 2 3 09、分支和循环详解 if判断

let age = 3; if (age < 3) { console.log('kuwa~') } else if (age < 18) { console.log('haha') } else { console.log('a') } 1 2 3 4 5 6 7 8 while循环，避免程序死循环

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

do { age = age + 1; console.log(age) } while (age < 100) 1 2 3 4 5 6 7 8 9 10 11 for循环

let age = 3; for (let i = 0; i < 100; i++) { age = age + 1; console.log(age) } 1 2 3 4 5 forEach循环

let arr = [1,2,3,4,5,6,7]; arr.forEach(function (value) { console.log(value) }); 1 2 3 4 for…in

let arr = [1,2,3,4,5,6,7]; for(let num in arr) { console.log(arr[num]) } 1 2 3 4 for…of

let arr = [3,4,5]; for(let i of arr) { console.log(i) } 1 2 3 4 10、Map和Set集合 es6的新特性

Map

let map = new Map([['张三',100],['李四',90],['王五',80]]); map.get('张三'); //通过key获取value map.set('赵六',99); //新增或者修改 map.delete('王五'); //删除 map.clear; //清空 1 2 3 4 5 Set:无序不重复的集合

let arr = [3,4,5]; for(let i of arr) { console.log(i) } 1 2 3 4 遍历Map

let map = new Map([['张三',100],['李四',90],['王五',80]]); for (let i of map) { console.log(i); } 1 2 3 4 遍历Set

let set = new Set([1,2,3,4]); for (let i of set) { console.log(i) } 1 2 3 4 12、函数的定义和参数获取定义函数定义方式一

绝对值函数

function abs(x) { if (x >= 0) { return x; } else { return -x; } } 1 2 3 4 5 6 7 一旦执行到return代表函数结束，返回结果！

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

定义方式二

let abs = function(x) { if (x >= 0) { return x; } else { return -x; } } 1 2 3 4 5 6 7 function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！

方式一和方式二等价

调用函数

abs(10); //10 abs(-10);//10 1 2 参数问题：JavaScript可以传任意个参数，也可以不传参数~

参数进来是否存在问题?假设不存在参数，如何规避

let abs = function(x) { //手动抛出异常 if (typeof x !== 'number') { throw 'not a number' } if (x >= 0) { return x; } else { return -x; } } 1 2 3 4 5 6 7 8 9 10 11 arguments

arguments是一个js免费赠送的关键字

代表，传递进来的所有的参数，是一个数组！

rest

以前

let fun = function(a,b) { for (let i = 2; i < arguments.length; i++) { //... } } 1 2 3 4 5 es6引入的新特性，获取除了已经定义的参数之外的所有参数~

let fun = function(a,b,...rest) { console.log(a); console.log(b); console.log(rest); } 1 2 3 4 5 rest参数只能写在最后，必须用…标识。

13、变量的作用域、let、const详解在JavaScript中，var定义变量实际是有作用域的

假设在函数体中声明，则在函数体外不可以使用（非要想实现的话，后面可以研究一下闭包）

function f() { var x = 1; x = x + 1; } //Uncaught ReferenceError: x is not defined x = x + 2; 1 2 3 4 5 6 如果两个函数使用相同的变量名，只要在函数内部，就不冲突

function f() { var x = 1; x = x + 1; } function f2() { var x = 2; x = x + 2; } 1 2 3 4 5 6 7 8 内部函数可以访问外部函数的成员，反之则不行

function f() { var x = 2;

function ff() {
    var y = x + 1;
}

//Uncaught ReferenceError: y is not defined
var z = y + 1;

} 1 2 3 4 5 6 7 8 9 10 假设，内部函数变量和外部函数的变量重名

function f() { var x = 2;

function ff() {
    var x = 'a';
    console.log('inner' + x);//innera
}

console.log('outer' + x);//outer2
ff();

}

f(); 1 2 3 4 5 6 7 8 9 10 11 12 13 假设JavaScript中函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function f() { var x = 'x' + y; //xundefined console.log(x); var y = 'y'; } f(); 1 2 3 4 5 6 7 结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

function f() { var y; var x = 'x' + y; //xundefined console.log(x); y = 'y'; } f(); 1 2 3 4 5 6 7 8 这个是在JavaScript建立之初就存在的特性，养成规范，不要乱放，便于代码维护

function f() { var x = 1, y = x + 1, z;//undefined //之后用 } 1 2 3 4 5 6 全局函数

//全局变量 var x = 1; function f() { console.log(x) } console.log(x) f(); 1 2 3 4 5 6 7 全局对象window

//全局变量 var x = 1; alert(x); alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下 1 2 3 4 alter()这个函数本身也是一个window变量

//全局变量 var x = 1; window.alert(x); var old_alter = window.alert; old_alter('2'); window.alert = function () {

} //alert失效了 window.alert('3'); window.alert = old_alter; //alert恢复了 window.alert('4'); 1 2 3 4 5 6 7 8 9 10 11 12 13 JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找。如果在全局作用域都没有找到，报错ReferenceError

规范

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

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

//定义全局变量 zyy.name = '张三'; zyy.add = function (a,b) { return a + b; } 1 2 3 4 5 6 7 8 把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~

局部作用域

function f() { for (var i = 0; i < 10; i++) { console.log(i); } console.log(i+1);//问题，1出了这个作用域还可以使用 } 1 2 3 4 5 6 es6 let关键字，解决局部作用域冲突问题！

function f() { for (let i = 0; i < 10; i++) { console.log(i); } console.log(i+1);//Uncaught ReferenceError: i is not defined } 1 2 3 4 5 6 建议都使用let去定义局部作用域

常量 const

在es6之前，怎么定义常量：只要用全部大写字母命名的变量就是常量，建议不要修改这样值

var PI = '3.14' console.log(PI); PI = '3';//可以改变这个值 console.log(PI); 1 2 3 4 在es6引入常量关键字const

const PI = '3.14' //只读变量 console.log(PI); PI = '3';//Uncaught TypeError: Assignment to constant variable. 1 2 3 14、方法的定义和调用、apply 定义方法

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

let zyy = { name: '张三', birth: 1993, age: function () { let now = new Date().getFullYear(); return now - this.birth; } } //属性 zyy.birth; //方法，一定要带() zyy.age(); 1 2 3 4 5 6 7 8 9 10 11 12 this代表什么?拆开上面的代码看看

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

let zyy = { name: '张三', birth: 1993, age: getAge } //zyy.age() 可以调用 //getAge() NaN 1 2 3 4 5 6 7 8 9 10 11 12 this是无法指向的，是默认指向调用它的那个对象。

apply

在js中可以控制this指向

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

let zyy = { name: '张三', birth: 1993, age: getAge }; //zyy.age() 可以调用 //getAge() NaN //getAge.apply(zyy, []);//this 指向了zyy,参数为空 1 2 3 4 5 6 7 8 9 10 11 12 13 15、Date日期对象标准对象

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 基本使用

let now = new Date();//Sun May 30 2021 21:45:07 GMT+0800 (中国标准时间) now.getFullYear();//年 2021 now.getMonth();//月 0-11 now.getDate();//日 now.getDay();//星期几 0-6 0：星期天 now.getHours();//时 now.getMinutes();//分 now.getSeconds();//秒 now.getTime();//时间戳全世界统一 1970 1.1 00:00:00 毫秒数

console.log(new Date(1622382307167));//时间戳转为时间 1 2 3 4 5 6 7 8 9 10 11 转换

now = new Date(); Sun May 30 2021 21:52:22 GMT+0800 (中国标准时间) now.toLocaleString() //注意，调用的是一个方法，不是一个属性 "2021/5/30下午9:52:22" now.toGMTString() "Sun, 30 May 2021 13:52:22 GMT" 1 2 3 4 5 6 16、JSON对象 json是什么？

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

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

格式：

对象都用{} 数据都用[] 所有的键值对都是用key:value json字符串和js对象的转化

let user = { name: "zyy", age: 18, sex: "男" }

//对象转化为json字符串 "{"name":"zyy","age":18,"sex":"男"}" let jsonUser = JSON.stringify(user)

//json字符串转化为对象参数为json字符串 let obj = JSON.parse("{"name":"zyy","age":18,"sex":"男"}"); 1 2 3 4 5 6 7 8 9 10 11 很多人搞不清楚，json和js对象的区别

let obj = {a:'a',b:'b'}; let json = {"a":"a","b":"b"}; 1 2 Ajax 原生的js写法 xhr异步请求 jQuery封装好的方法 ${“#name”}.ajax(“”) axios请求 17、面向对象原型继承什么是面向对象

JavaScript、java、C# 面向对象：JavaScript有些区别

类：模板

对象：具体的实例

在JavaScript这个需要大家换一下思维方式

原型：

let student = { run: function () { console.log(this.name + "run..."); } }

let xiaoming = { name: "小明" }

let bird = { fly: function () { console.log(this.name + "fly..."); } }

//小明的原型是student xiaoming.proto = student;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 18、面向对象class继承 class继承

function student(name) { this.name = name; }

//给student新增一个方法 student.prototype.hello = function () { alert('hello'); } 1 2 3 4 5 6 7 8 class关键字，是es6引入的

定义一个类：属性，方法 //定义一个学生的类 class student { constructor(name) { this.name = name; }

hello() {
    alert('hello')
}

}

let xiaoming = new student('小明'); let xiaohong = new student('小红'); xiaoming.hello(); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 继承 class student { constructor(name) { this.name = name; }

hello() {
    alert('hello')
}

}

let xiaoming = new student('小明'); let xiaohong = new student('小红');

class xiaoStudent extends student { constructor(name, grade) { super(name); this.grade = grade; }

myGrade() {
    alert('我是小学生')
}

}

let xiaoxiao = new xiaoStudent('小小',1);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 本质：查看对象原型

原型链

proto

19、操作BOM对象（重点）浏览器介绍

JavaScript和浏览器关系？

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

BOM:浏览器对象模型

浏览器

IE Chrome Safari Firefox 三方

QQ浏览器 360浏览器 window （重点）

window代表浏览器窗口

window.alert(1) undefined window.innerHeight 936 window.innerWidth 150 window.outerHeight 1056

//可以调整浏览器窗口试试 1 2 3 4 5 6 7 8 9 10 Navigator （不建议使用）

Navigator封装了浏览器的信息

navigator.appName "Netscape" navigator.appVersion "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36" navigator.platform "Win32" 1 2 3 4 5 6 7 8 大多数时候我们不会使用navigator对象，因为会被人为修改！

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

screen

screen.width 1920 //1920px screen.height 1080 //1080px 1 2 3 4 location （重要）

location代表当前页面的URL信息

host: "www.baidu.com" href: "www.baidu.com/?tn=4003951…" protocol: "https:" reload: ƒ reload() // 刷新网页 //设置新的地址 location.assign('blog.csdn.net/zhayuyao') 1 2 3 4 5 6 document （内容：DOM）

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

document.title "百度一下，你就知道" document.title='zyy' "zyy" 1 2 3 4 获取具体的文档树节点

Title

java: javase; javaee

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 获取cookie

document.cookie "BIDUPSID=E915D8DAC0FCA4159DF81414176EBD43; PSTM=1618281055; BAIDUID=E915D8DAC0FCA415F0B2ABB582D30135:FG=1; BAIDUID_BFESS=E915D8DAC0FCA415F0B2ABB582D30135:FG=1; COOKIE_SESSION=76_0_3_0_3_1_0_0_2_1_0_0_499551_0_7_0_1619848144_0_1619848137%7C4%230_0_1619848137%7C1; BDRCVFR[6dKjv_d7L5b]=j0fMgDzVGufPHFbmyqMULR8mvqV; BD_HOME=1; H_PS_PSSID=31660; BD_UPN=12314753; BA_HECTOR=a0a42h0h0g800h2kq91gblmi20r" 1 2 劫持cookie原理

www.taobao.com

1 2 服务器端可以设置cookie:httpOnly

history （不建议使用）

history代表浏览器的历史记录

history.forward() //前进 history.back()//后退 1 2 20、获得DOM节点（重点） DOM:文档对象模型

核心

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

更新：更新DOM节点遍历DOM节点：得到DOM节点删除：删除一个DOM节点添加：添加一个新的DOM节点要操作一个DOM节点，就必须要先获取这个DOM节点。

获得dom节点

Title

标题1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 这是原生代码，之后我们尽量都使用JQuery();

21、更新DOM节点更新节点

Title

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 操作文本

id1.innerText='123'修改文本的值 id1.innerHTML='234' 可以解析html文本标签操作css

id1.style.color='red' //属性使用字符串包裹 "red" id1.style.fontSize='50px' //下划线转驼峰命名 "50px" id1.style.padding='1em' "1em" 1 2 3 4 5 6 22、删除DOM节点删除节点

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

Title

标题1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

23、创建插入DOM节点插入节点

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

追加

Title

javascript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 创建一个新的标签

Title

javascript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 insertBefore

Title

javascript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 24、获得和设置表单的值表单是什么？ from DOM树

文本框 text 下拉框 select 单选框 radio 多选框 checkbox 隐藏域 hidden 密码框 password 。。。表单的目的：提交信息

获得要提交的信息

Title

用户名：

性别：男女

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 25、表单提交验证及前端密码MD5加密提交表单 MD5加密密码表单优化

Title

用户名：

<p>
    <span>密码：</span><input type="password" id="input-password">
</p>
<!--密码建议通过隐藏域提交-->
<input type="hidden" id="md5-pwd" name="password">
<!--绑定事件 onclick被点击-->
<!--<button type="submit" οnclick="f()">提交</button>-->
<button type="submit">提交</button>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 26、初识JQuery及公式 JavaScript

JQuery库，里面存在大量的JavaScript函数

获取JQuery

中文文档

Title

点我

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27、JQuery选择器选择器

Title

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 28、JQuery事件事件

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

Title #divMove { width: 500px; height: 500px; border: 1px solid red; } </style> mouse:

在这里移动鼠标试试

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 29、JQuery操作Dom元素操作DOM

节点文本操作

Title

JavaScript
Python

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 css操作

Title

JavaScript
Python

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 元素的显示和隐藏：本质display:none

Title

JavaScript
Python

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 测试

$(window).width()$ (window).height() $('#test-ul li[name=python]').toggle() 1 2 3

JavaScript | 青训营笔记

标题1

标题1