地址：https://www.bilibili.com/video/BV1JJ41177di
一、初识JavaScript
二、快速入门
2.1 引入JS
-
内部标签
-
外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- js写在 script 标签中 ---- 可以写在head或者body里面 -->
<!--<script>-->
<!-- alert("hello,world");-->
<!--</script>-->
<!-- 也可以外部引入 注:script必须成对出现是闭合标签-->
<script src="JS/li.js"></script>
</head>
<body>
</body>
</html>
2.2 基本语法及调试，控制台使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- JS严格区分大小写 -->
<script>
//1. 定义变量
// var num = 1;
// var name = "li";
// alert(name);
//2. 条件控制
if(2>1){
alert("true");
}else {
alert("false")
}
</script>
</head>
<body>
</body>
</html>
JS调试：浏览器中调试
打断点，刷新网页
2.3 数据类型
变量类型都是 var
- JS不区分小数和整数，都是Number
123 // 整数
123.1 // 浮点数
1.324e3 //科学计数法
-99 // 复数
NaN // not a number
Infinity //无穷大
- 字符串
‘abc’ “abc” - 布尔值
true false - 逻辑运算
&& //与
|| //或
! //非
- 比较运算！！！！！重要
= //赋值
== //值一样，类型不一样也为true
=== //绝对相等，值一样，类型一样才会为true
这是JS的一个缺陷，坚持不要用==比较
须知：
- NaN===NaN结果为false，NaN与所有数值不相等包括自己
- 只能通过isNaN(NaN)来判断
浮点数问题：
(1/3)===(1-2/3) //结果为false；
可以用如下来判断：
Math.abs(1/3-(1-2/3)<0.000000001)
-
null和undefined
null–空
undefined–未定义 -
数组
java中是一系列相同类型的对象
JS中可以是任何类型
JS中如果数组越界会显示undefined
- 对象
对象是大括号，数组是中括号
每个属性之间用逗号隔开，最后一个不需要添加
var person{
name="li",
age=10,
arr=[1,2,"hello"]
}
取对象的值也是，对象.属性
2.4 严格检查模式
- 前提IDEA设定使用ES6
'use strict'表示严格检查模式，预防JS的随意性导致的错误- 必须写在第一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 前提IDEA设定使用ES6
'use strict' 表示严格检查模式，预防JS的随意性导致的错误
必须写在第一行
局部变量建议使用let定义
-->
<script>
'use strict'
let i = 1;
</script>
</head>
<body>
</body>
</html>
三、数据类型
3.1 字符串
- 正常字符串使用单引号或者双引号包裹
- 注意转义字符
\' //引号
\n //换行
\t //制表
\u4e2d //中，unicode编码\u####
\x## //ascii编码
- 两个·号包裹可以换行写字符串
模板字符串：
// ${变量名}
var name='li';
//仍然是飘号
var msg = `nihao ${name}`
console.log{msg}
字符串长度：
string.length
字符串不可变性
大小写转换：
str.toUpperCase();
str.toLowerCase();
str.indexOf('');
字符串截取
substring();
3.2 数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6]
- 长度
arr.length
注意：给arr.length赋值，数组大小就会发生变化
- indexOf，通过元素获得下表索引
arr.indexOf(2);
-
slice() ,截取数组一部分。返回一个新数组，类似与substring
-
push()，pop() 尾部
push()在尾部添加元素
pop()在尾部弹出元素 -
unshift(), shift() 头部
unshift()在头部添加元素
shift()在头部弹出元素 -
排序 sort()
-
元素倒序排列 reverse()
-
concat() 连接两个数组
注意：原来数组不变，返回连接后的数组 -
连接符 join()
arr.join('-');
//打印拼接数组1-2-3-4-5-6
- 多维数组
3.3 对象
JS中所有键都是字符串，值都是任意对象
若干个键值对
var 对象名={
属性名:属性值,
属性名:属性值
}
var person{
name:"li",
age:3
}
js对象，{…}表示一个对象，键值对描述属性
- 对象赋值
person.name = 'wang'
- 使用一个不存在的对象属性不会报错！
person.haha
undefined
- 动态删减属性
delete person.name
true
- 动态添加属性,直接给新的属性添加值即可
person.haha='haha'
- 判断某个属性是否在这个对象中！xxx in xxx！！
JS中所有键都是字符串，值都是任意对象
'age' in person
true
//继承
'toString' in person
true
- 判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false
3.4 流程控制
- if判断
- 循环–for while
- forEach循环
var arr=[123,4,45,54,3,32,35,2,354]
arr.forEach(function(value){
console.log(value)
})
- for…in–不推荐–这里的index是索引不是值
var arr=[123,4,45,54,3,32,35,2,354]
// 这里的num是索引不是值
for(var index in arr){
console.log(arr[index])
}
- for…of----这里的num是值
var arr=[123,4,45,54,3,32,35,2,354]
// 这里的num是索引不是值
for(var num of arr){
console.log(num)
}
3.5 Map和Set
Map和Set是ES6中的新特性
- Map
var map = new Map([['tom',100],['jack',90],['haha',80]]);
// 取值
var score = map.get('tom');
// 设置值
map.set('admin',123)
//删除值
map.delete('tom')
- Set–无序不重复的集合
// 结果中只有3，1
var set = new Set([3,3,1,1])
// 增加2
set.add(2);
// 删除1
set.delete(1);
// 判断是否包含元素
console.log(set.has(3));
3.6 iterator
可参考：https://www.cnblogs.com/weilan/p/7002088.html
使用iterator遍历迭代Map和Set
Array可以采用下标进行循环遍历，Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了iterable类型，Array、Map、Set都属于iterable类型。
具有iterable类型的集合可以通过新的for … of循环来遍历。
遍历数组— 使用for…of
var arr=[123,4,45,54,3,32,35,2,354]
// 这里的num是索引不是值
for(var num of arr){
console.log(num)
}
遍历Map----使用for…of 可以遍历
var map = new Map([['tom',100],['jack',90],['haha',80]]);
// 打印出来的就是键值对
for (let x of map){
console.log(x)
}
遍历Set----使用for…of 可以遍历
var set = new Set([3,3,1,1])
for (let x of set){
console.log(x)
}
遍历map和set使用for… in不行，要使用for… of
四、函数及面向对象
4.1 函数定义及变量作用域
方法：对象里面的函数，对象（属性，方法）
函数：函数
函数定义方式一：
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
参数问题：js可以传任意个参数，也可以不传参数，都不会报错
参数不存在如何规避？？
加一条判断语句，对参数类型进行判断
多个参数如何解决？？
arguments是js赠送的关键字，可以获取所有的参数
var abs =function(x){
arguments.length//参数多少,可以用for循环遍历
if(x>=0){return x;}
else{return -x;}
}
问题：arguments包含所有参数，我们有时候想使用多余的参数来进行附加操作？？
rest是ES6的新特性，可以获取多余参数
function aaa(a,b,...rest){
console.log(a);
console.log(b);
console.log(rest);
}
rest只能写在最后面，用…标识
变量的作用域
- var定义变量是有作用域的
函数体内声明，则在函数体外不可以使用
function aa(){
var x = 1;
x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined
说明var定义的变量是有作用域的。
-
内部函数可以访问外部函数的成员，反之则不行
-
内部函数和外部函数重名
则，由 ’内‘ 向 ’外‘ 查找 -
提升变量作用域
function qj(){
var x="x" + y;
console.log(x)
var y = "y"
}
//结果 xundefined
说明js执行引擎自动提升了y声明但不会提升y的赋值。
全局变量
x = 1；
function f(){
console.log(x);
}
f();
console.log(x);
全局对象window
var x = "xxx";
window.alert(x);
window.alert(window.x)//效果一样
var x = 'xxx';
window.alert(x);
var old_alert = window.alert();
old_alert(x);
window.alert = function(){
}
//发现alert失效了
window.alert(123)
//恢复
window.alert = old_alert;
window.alert(456);
js实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数范围内找到，就会向外查找，如果在全局作用域内都没有找到，报错RefrenceError
规范
由于所有全局变量都会绑定到window，如果不同的js文件，使用了相同的全局变量，就会产生冲突，如何能减少冲突？？
// 唯一全局变量
var kuangapp={}
// 定义全局变量
kuangapp.name = "kuang";
kuangapp.add = function(a,b){return a+b;}
把自己定义的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题
局部作用域let
function aaa(){
for (var i = 0; i < 10; i++){
console.log(i);
}
console.log(i);//输出11？？？？
}
let关键字解决局部冲突问题
function aaa(){
for (let i = 0; i < 10; i++){
console.log(i);
}
console.log(i);//此时会报错
}
常量const
ES6中引入常量关键字
4.2 方法
定义方法
方法就是把函数放到对象里面，对象只有两个东西：属性和方法
var kuangshen = {
name:"li",
birth : 2000,
age : function(){
var now = new Date().getFullYear();
return now - this.birth;
}
}
//属性
kuangshen.name
//方法，一定要带()
kuangshen.age()
this始终指向调用它的人
拆开看：
function getAge(){
var now = new Date().getFullYear();
return now - this.birth;
}
var kuangshen = {
name:"li",
birth : 2000,
age : getAge
}
//kuangshen.age()--------ok
//getAge()------NaN window 对象没有birth
apply
可以控制js中this的指向
function getAge(){
var now = new Date().getFullYear();
return now - this.birth;
}
var kuangshen = {
name:"li",
birth : 2000,
age : getAge
}
getAge.apply(kuangshen,[]);
//将getAge中this指向kuangshen，kuangshen需要的参数为空，因此第二个参数为[]
4.3 闭包（难点）
4.4 箭头函数（新特性）
↓↓↓↓↓↓↓下面是面向对象↓↓↓↓↓↓↓
面向对象
JS、Java、C#。。。面向对象；JS有些区别
- 类：模板
- 对象：具体的实例
在JS中需要换一下思维方式！
原型（可以理解为父类）：
var Student={
name:"li",
age:3,
fly:function(){
console.log(this.name+"fly...")
}
var xiaoming.__proto__ = Student; // xiaoming的原型是Student
xiaoming.fly //结果 xiaoming fly...
}
4.6 class继承（新特性）
ES6 引入的 class 关键字
- 定义一个类，属性、方法
class Student{
constructor(name){
this.name = name;
}
hello(){
alert{'hello'}
}
}
var xioaming = new Student("xiaoming");
var xioahong = new Student("xiaohong");
- 继承
class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello')
}
}
class xiaoStudent extends Student{
constructor(name,score){
super(name);
this.score = score;
}
myScore(){
alert("我的分数是" + this.score)
}
}
var xiaoming = new xiaoStudent("xiaoming",3);
4.7 原型链继承（难）
五、常用对象
标准对象
用typeof判断对象类型
typeof 123
'number'
typeof abc
'undefined'
typeof 'abc'
'string'
typeof 'a'
'string'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
5.1 Date
基本使用
var now = new Date();
now.getFullYear(); //年
now.getMonth(); //月 0-11
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //时间戳 1631936292990
console.log(new Date(1631936292990)) //Sat Sep 18 2021 11:38:12 GMT+0800 (中国标准时间)
转换
now.toLocaleString() //调用的是方法不是属性
'2021/9/18 上午11:38:12'
now.toGMTString()
'Sat, 18 Sep 2021 03:38:12 GMT'
5.2 JSON
- JSON是一种轻量级的数据交换格式
- 简洁和清晰的层次结构使得JSON成为理想的数据交换格式
在JS中一切皆对象，任何JS支持的类型都可以用JSON来表示；
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对都使用 key:value
JSON字符串和JS对象的转换：
var student={
name: "li",
age: 3,
score: 100
}
var stuJson = JSON.stringify(student) //{"name":"li","age":3,"score":100}
var s = JSON.parse('{"name":"li","age":3,"score":100}');
5.3 Ajax
- 原生的js写法，xhr 异步请求
- jQuery封装好的方法
- axios 请求
六、操作DOM元素
DOM：文档对象模型
核心
浏览器网页就是一个DOM树形结构
- 更新：更新Dom节点
- 遍历：遍历，得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个Dom节点
操作Dom节点必须要先获得这个Dom节点
6.1 获得Dom节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h1>标题一</h1>
<p id="p1">段落一</p>
<p class="p2">段落二</p>
</div>
<script>
document.getElementsByTagName("h1");
//结果：HTMLCollection [h1]
document.getElementsByTagName("p");
//结果：HTMLCollection(2) [p#p1, p.p2, p1: p#p1]
document.getElementById("p1");
//<p id="p1">段落一</p>
document.getElementsByClassName("p2");
//HTMLCollection [p.p2]
father.children; //所有子节点
father.firstElementChild; //第一个子节点
father.lastElementChild; //最后一个子节点
</script>
</body>
</html>
6.2 更新Dom节点(中的内容和样式)
修改内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="id1"></div>
<script>
var id1 = document.getElementById("id1")
id1.innerText='123'; //界面插入123
id1.innerHTML="<strong>234</strong>"; //界面插入加粗的234,会覆盖上面的语句
</script>
</body>
</html>
修改样式：
id1.style.color='red' //内容变为红色
'red'
id1.style.fontSize='50px' // 字体大小变为50px
'50px'
6.3 删除Dom节点
删除节点步骤：先获取父节点，再通过父节点删除自己
常见方法有如下两种：
1，通过自己self获得父节点father再删除自己self
2，获得父节点后通过的孩子索引进行删除（注意，这是动态过程）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">段落一</p>
<p class="p2">段落二</p>
</div>
<script>
var self = document.getElementById("p1");
var father = self.parentElement;
father.removeChild(self); //
// 方式二，注意其动态性
// father.removeChild(father.children[0])
// father.removeChild(father.children[0])
</script>
</body>
</html>
6.4 插入Dom节点
我们获得了某个DOM节点，假设这个DOM节点是空的，我们可以通过insertHTML就可以增加一个元素，但是这个DOM节点已经存在元素了，我们就不能这么干了！！！会产生覆盖
此时可用追加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JS</p>
<div id="list">
<p id="me">javame</p>
<p id="se">javase</p>
<p id="ee">javaee</p>
</div>
<script>
var js = document.getElementById("js");
var list = document.getElementById("list");
list.append(js); //追加。。。
</script>
</body>
</html>
创建一个新的标签并追加：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">JS</p>
<div id="list">
<p id="me">javame</p>
<p id="se">javase</p>
<p id="ee">javaee</p>
</div>
<script>
//创建一个新的标签
var newP = document.createElement("p");
newP.id = "new";
// 也可以通过**newP.setAttribute('键','值')设置**----------通用方式
newP.innerHTML="<strong>新建标签</strong>";
// 结果是<p id="new" style="font-weight: bold">新建标签</p>
list.append(newP);
</script>
</body>
</html>
newP.setAttribute(‘键’,‘值’)
七、操作BOM元素
BOM:浏览器对象模型
浏览器介绍
js的的诞生就是为了让他在浏览器中运行
- IE 6~11
- Chrome
- Safari
- FireFox
- Opera
7.1 window
window代表浏览器窗口
window.alert(1)
window.innerHeight
410
window.innerWidth
1075
window.outerHeight
877
window.outerWidth
1090
7.2 navigator
navigator封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
大多数不会使用navigator对象，因为会被人为修改！！！
7.3 screen
代表屏幕
screen.width
1536
screen.height
864
7.4 location(重要)
location代表当前页面的URL信息
location
location.reload(); //刷新界面
location.assign("URL") //跳转到URL指定的界面
7.5 document
document代表当前页面，HTML DOM 文档树
document.title
'百度一下，你就知道'
可以获取具体的文档树节点
document.getElementById('app'); //获取id=app的节点
获取cookie
document.cookie
可以通过这个来获取用户的cookie
服务器端可以设置cookie：httpOnly
7.6 history
history代表浏览器的历史记录
history.back() //前进
history.forward() //后退
7.7 操作表单(验证问题)
在客户端验证可以避免服务器压力过大
表单是什么 form DOM树
- 文本框 text
- 下拉框 < select >
- 单选框 radio
- 多选框 checkbox
- 隐藏框 hidden
- 密码框 password
- …
表单的目的：提交信息
获得提交文本信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
<p>
<span>用户名</span> <input type="text" id="username">
</p>
<p>
<!-- 多选框的值就是定义好的value值 ， 不是展示出来的值 -->
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy" checked>男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
var text = document.getElementById("username");
text.value; //获取文本框的值
//'hello'
text.value = 123456; //设置文本框的值
//123456
</script>
</body>
</html>
获得提交选择框的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
<p>
<span>用户名</span> <input type="text" id="username">
</p>
<p>
<!-- 多选框的值就是定义好的value值 ， 不是展示出来的值 -->
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy" checked>男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
var boy_radio = document.getElementById("boy");
var girl_radio = document.getElementById("girl");
// 对于单选框，多选框等固定值的表单boy_radio.value只能获取当前的值，获取不到选中的值
// boy_radio.checked // boy_radio是否被选中
// true
// girl_radio.checked // gir_radio是否被选中
// false
// boy_radio.checked = true // 设置boy_radio被选中
// true
// girl_radio.checked = true // 设置girl_radio被选中
// false
</script>
</body>
</html>
提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
<p>
<span>用户名：</span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="password" name="password">
</p>
<!-- <input type="submit" value="提交了">-->
<button type="submit" onclick="a()">提交</button>
</form>
<script>
function a() {
var uname = document.getElementById("username")
var pwd = document.getElementById("password")
console.log(uname.value); //打印提交的用户名
console.log(pwd.value); //打印提交的密码
}
</script>
</body>
</html>
用户名和密码都是明文，如何解决？？？MD5加密
别人抓到了包也得不到密码
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
<p>
<span>用户名：</span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="password" name="password">
</p>
<!-- <input type="submit" value="提交了">-->
<button type="submit" onclick="a()">提交</button>
</form>
<script>
function a() {
var uname = document.getElementById("username")
var pwd = document.getElementById("password")
console.log(uname.value); //打印提交的用户名
console.log(pwd.value); //打印提交的密码
// MD5加密
pwd.value = md5(pwd.value)
console.log(pwd.value);
}
</script>
</body>
</html>
MD5加密—高级
用户提交瞬间密码不会变长
使用隐藏框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入MD5-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return a()"><!--此处使用οnsubmit="return a()"提交 ，可以判断，，不用submit提交-->
<p>
<span>用户名：</span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="input_password">
</p>
<input type="hidden" id="md5_password" name="password">
<button type="submit">提交</button>
</form>
<script>
function a() {
var uname = document.getElementById("username");
var input_pwd = document.getElementById("input_password");
var md5_pwd = document.getElementById("md5_password");
// pwd.value = md5(pwd.value); //用户提交时密码会瞬间变长，用户体验不好,,使用隐藏表单，如下
md5_pwd.value = md5(input_pwd.value);
// 可以校验表达那内容，true就是通过提交，，false阻止提交
return ture;
}
</script>
</body>
</html>
提交成功，跳转到百度
7.8 操作文件
八、jQuery
8.1 jQuery初体验
jQuery是封装了大量JavaScript函数的库
引入方式：
- 本地：官网下载，用script标签引入，如下：
< script src=“jquery-1.10.2.min.js”>< /script> - 网络：搜索jQueryCDN加速，用script标签引入，如下：
< script src=“https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”>< /script>
jQuery使用格式-----$(selector).action()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 本地引入jQuery -->
<script src="lib/jquery-3.5.1.js"></script>
<!-- 链接引入 -->
<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
</head>
<body>
<a href="" id="test_jquery">点我</a>
<script>
//原始方法---a标签加 οnclick="a()"
// function a() {
// alert('hello');
// }
//jQuery使用格式-----$(selector).action()
$('#test_jquery').click(function () {
alert('test_jquery')
});
</script>
</body>
</html>
8.2 jQuery选择器
选择器网址：https://jquery.cuishifeng.cn/
// 原生js选择器
//标签选择器
document.getElementsByTagName();
//id选择器
document.getElementById();
//类选择器
document.getElementsByClassName();
// jQuery的选择器
$('p').click(); //p标签选择器
$('#id1').click(); //id选择器
$('.class1').click(); //class选择器
$('p').click(); //p标签选择器
8.3 jQuery事件
参考网址：https://jquery.cuishifeng.cn/
鼠标事件
<!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>
// 当网页元素加载完毕之后，响应事件
// 复杂写法--$(document).ready(function () {})
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX + ' y' +e.pageY)
})
})
</script>
</body>
</html>
8.4 jQuery操作DOM元素
节点文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<ul id="test_ul">
<li class="js">JavaScript</li>
<li name="book">Python</li>
</ul>
<script>
$('#test_ul li[name=book]').text(); //获取值
$('#test_ul li[name=book]').text('111111'); //设置值
$('#test_ul li[name=book]').html(); //获取值
$('#test_ul li[name=book]').html('111111'); //设置值
</script>
</body>
</html>
css操作
$('#test_ul li[name=book]').css("color","red"); // 设置css样式
// 元素的显示和隐藏----原理是用了css中的display
$('#test_ul li[name=book]').show();
$('#test_ul li[name=book]').hide();
小技巧
- 学习JS----看jQuery框架源码，看游戏源码
- 学习HTML和CSS----扒网站，全都down下来，对应修改看效果
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
