JavaScript学习
1、引入JavaScript
1.1、内部标签
- 直接写在html文件里面
<script>
...
</script>
1.2、外部引入
- 又一个js文件 ， 比如abs.js
- 然后在html文件中引入js文件就可以了
<script src="abc.js"></script> //这里面的内容写在html里面
1.3、测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script>-->
<!-- alert("Hello World!");//弹窗-->
<!-- </script>-->
<!-- 外部引入-->
<script src = "js/qj.js"></script>
</head>
<body>
</body>
</html>
2、快速入门
2.1、基本语法
<script>
var score = 71;
if(score > 60 && score < 70) {
alert("60-70");
} else if(score > 70 && score < 80) {
alert("70-80");
} else {
alert("other");
}
//浏览器控制台打印 console.log(score);
</script>
2.2、浏览器控制台
- F12打开
- 浏览器控制台打印 console.log(score);
2.3、数据类型
变量
- 不以数字开头就可以了
number
- js不区分小数整数， Number
123//整数
123.1 //浮点数
1.123e3 //科学计数法
-99 //复数
NaN // not a number 不是一个number的意思
Infinity //无限大
比较运算符
=
== 等于（类型不一样，值一样，也相等，返回true)
=== 绝对等于（需要类型了值都一样）
- 这是js的一个缺陷，坚持不要使用===
须知：
- NaN === NaN， NaN这个与所有的数字不相等，包括他自己
- 只能通过 isNaN(NaN) 来判断是否是NaN
浮点数问题：
console.log((1/3) === (1-2/3)) -- > false 精度丢失
- 尽量不要使用浮点数，会丢失精度
比较两个浮点数是否相等，可以看他们的差值是否小于一定的值
Math.abs(1/3 - (1-2/3)) < 0.00000001
null和undefine
- null 空
- undefine 未定义
数组
- 类型不一样也可以
var arr = [1,2,3,4,5,'hello', null, true]
new Array(1,2,3,'hello', true)//这样也可以，不过推荐第一种
- java中的类型必须一样
对象
//Person p = new Person();
var person = {
name:"wuyan",
age: 12,
tags: ['js', 'java', 'web'] //数组
}
- 取值直接用person.name这样子就可
2.4严格检查模式
<!--
'use strict'; 严格检查模式， 语法javascript的随意是导致的一些问题，必须写在js的第一行，
-->
<script>
'use strict';
let i = 1; <!--局部变量用let去定义， var也可以，不过是es6以前的写法了-->
</script>
3、数据类型
3.1 字符串
-
正常的字符串使用单引号或者双引号包裹
-
注意转义字符 \
-
多行字符串的编写
<!--tab建上面的那个--> var msg = ` hello world 你好啊 ` -
模板字符串
- ${a} 取a的值
//tab let name="daiziru"; let age ="3"; let msg = `你好啊， ${name}` -
string的不可变性
- 不可以str[0] = 1这样子赋值，赋值不成功
-
大小写的转换
student.toUpperCase(); student.toLowerCase(); -
indexOf() 和 charAt()
"student".indexOf('t');//获取t的下标 "student".charAt(3); //返回索引出的字符 -
z字符串的截取 substring
[) student.substring(1); //从第一个字符开始截取到最后一个字符 student.substring(1, 3);//从第一个开始，截取到第二个 [1,3)
3.2 数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6,"ef", null]
arr[0] = 0;
-
长度
js中字符串的长度可以直接赋值改变
arr.length -
indexOf， 通过元素的值获取该元素的下标
```js arr.indexOf(2) //获取数组中2所在的位置 ``` -
slice() 截取Array的一部分， 返回一个新的数组， 类似于String 中的substring
-
数组元素的压入与弹出
尾部： push() :压入一个元素到数组的尾部 pop(): 弹出尾部元素 头部： unshift():压入一个元素到头部 shift():弹出数组头部的元素 -
排序和反转
```js var arr = ['B','A','C'] arr.sort()//排序 (3) ['A', 'B', 'C'] arr.reverse()//反转 (3) ['C', 'B', 'A'] ``` -
concat() 数组的拼接
arr.concat([1, 2, 3]) (3) ['A', 'B', 'C', 1, 2,3]注意，这里拼接返回的是一个新的数组，原来的数组任然存在
-
连接符 join
['A', 'B', 'C'] arr.join('-') "A-B-C" -
多维数组
arr = [[1,2],[3,4],[5,6]] arr.length---> 3 arr[1][1] ---> 4
3.3 对象
var 对象名 = {
属性名 ： 属性值，
属性名 ： 属性值，
属性名 ： 属性值
}
//定义了一个person对象，他有四个属性
var person = {
name:"wuyan",
age:3,
email:"2242975806@qq.com",
score:0
}
-
使用一个不存在的对象，不讳 报错！ undefine
-
Js中的所有的键都是字符串，值是任意对象
-
动态增加和删除属性
delete person.name //删除了name这个属性 person.haha = "haha" ？、直接增加了一个haha属性 -
判断属性值是否存在这个对象中！ xxx in xxx
'age' in person -->true 'toString' in person -->true //继承 -
判断一个属性是否是这个对象自身拥有的 ， haqsOwnProperty()
person.hasOwnProperty('toSting') false person.hasOwnProperty('age') true
3.4 流程控制
forEach循环
var age = [12,2,3,654,34,23]
age.forEach(function(value) {
console.log(value)
})
3.5 Map 和Set
Map: 键值对
var map = new Map([['tom',100], ['jack', 30], ['hahha', 80]]);
var name = map.get('tom'); //通过key获取value
map.set('admin', 2134);//新增或者修改
map.delete('tom');//删除
Set: 无序，自动去重
var set = new Set([1, 2,3 ,4,6]);
set.add(8)
set.delete(1);
console.log(set.has(3)); //判断是否含有一个元素
3.6 迭代器 iterator
使用iterator来遍历Map和Set
遍历数组：
var arr = [1, 2, 3]
for(let x of arr) {
console.log(x)
}
遍历map
var map = new Map([['tom',100], ['jack', 30], ['hahha', 80]]);
for(let x of map) {
console.log(x);
}
遍历set
var set = new Set([1, 2,3 ,4,6]);
for(let x of set) {
console.log(x)
}
4. 函数
4.1 定义函数
定义方式一：
function abs(x) {
if(x > 0) return x;
else return -x;
}
定义方式二：
var abs = function(x) {
if(x > 0) return x;
else return -x;
}
arguments是一个判断参数个数的关键字，有时候我们想用多余的参数进行附加操作，需要排除前面的参数， arguments,length 是获取参数的个数
rest的使用：
以前
if(arguments.length > 2) {
for(var i = 2; i < arguments.length; i++)
}
ES6引入的新特性，获取除了已经定义的参数之外的所有参数
function aaa(a, b,...rest) {
console.log(a);
console.log(b);
console.log(rest);//剩下的所有参数
}
4.2 变量的作用域
全局变量： 所有的全局变量都与window绑定
全局对象window
let x = 'xxx';
alert(x);
alert(window.x);
alert()这个函数本身也是一个window变量
let 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);//成功
规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同js文件，使用了相同的全局变量，冲突–>如何减少冲突？
//唯一的全局变量
var wuyan = {};
//定义局部变量
wuyan.name = 'yujf';
wuyan.add = function(a, b) {
return a + b;
}
- 把自己的代码全部放入我自己定义的唯的空间名字中，降低全局命名冲突的问题
局部作用域 let
for(var i = 0 ; i < 10; i++) {
console.log(i);
}
console.log(i);
//如果使用var定义的变量，循环结束后竟然还可以使用，使用let定义的话就不可以，所以建议使用let
常量const ： 定义的值是常量，不可以修改
4.3 方法
定义方法
方法就是把函数放在对象里面，对象只有两个东西，属性和方法
var person = {
name:'wuyan';
birth:2000;
age:function() {
//今年-出生的年
var now = new Date().getFullYear();
return now-this.birth;
}
}
//属性
person.name
//方法
person.age()
this代表什么？ 拆开上面的代码看看
function getAge(){
//今年-出生的年
var now = new Date().getFullYear();
return now-this.birth;
}
var person = {
name:'wuyan';
birth:2000;
age:getAge
}
//person.age() ->可以
getAge() ->不可以
this是无法指向的，是默认指向调用它的那个对象
apply()方法
在js中可以控制this的指向
function getAge(){
//今年-出生的年
var now = new Date().getFullYear();
return now-this.birth;
}
var person = {
name:'wuyan';
birth:2000;
age:getAge
}
getAge.apply(person,[]);//this指向了person,参数为空
5、内部对象
5.1 Date
标准对象
typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
<script>
var now = new Date();
now.getFullYear();
now.getMonth();
now.getDate();//日
now.getDay(); //星期几
now.getHours();
now.getSeconds();
now.getTime();//时间戳，世界统一， 1970:01:01:0:00开始到现在的毫秒数
console.log(new Date(1632623528803));
</script>
转换：
new Date(1632623528803)
Sun Sep 26 2021 10:32:08 GMT+0800 (中国标准时间)
now.toLocaleDateString()
'2021/9/26'
now.toLocaleTimeString
ƒ toLocaleTimeString() { [native code] }
now.toLocaleTimeString()
'上午10:32:52'
5.2 JSON
早期，所有的数据传输习惯使用xml文件！
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript 一切皆为对象，任何js支持的类型都可以用json来表示
格式：
- 对象 {}
- 数组 []
- 所有的键值对都是用 key : value
<script>
var person = {
name:"daiziru",
age: 3,
qq: "2242975806@qq.com"
}
//对象转化为JSON对象， json 应该是一个字符串
var jsonUser = JSON.stringify(person);
console.log(jsonUser); //{"name":"daiziru","age":3,"qq":"2242975806@qq.com"}
//JSON 转化为对象
var p = JSON.parse('{"name":"daiziru","age":3,"qq":"2242975806@qq.com"}');
console.log(p);
/* Objectage: 3
name: "daiziru"
qq: "2242975806@qq.com"
[[Prototype]]: Object
* */
</script>
var obj = {a:"hello", b:"hi"}; js对象
var json = '{"a":"hello", "b":"hi"}'; JSON对象
5.3 Ajax
- 原生的js写法 xhr异步请求
- jQuey 封装好的方法 $("#name").ajax("")
- axios 请求
6、面向对象编程
javaScript的对象：
- 类： 模板
- 对象： 具体实例
一： 原型对象
原型：
<script>
var student = {
name:"wuyan",
age: 3,
run: function() {
console.log(this.name + "run...");
}
};
var xiaoming = {
name:"xiaoming"
};
//原型对象 xiaoming 的原型对象是 student
xiaoming.__proto__= student;
//xiaoming.run();
let Bird = {
fly: function() {
console.log(this.name + "fly....");
}
}
xiaoming.__proto__ = Bird;
</script>
class类
<script>
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert("hello")
}
}
let ziru = new Student();
ziru.hello();
</script>
继承
<script>
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert("hello")
}
}
class zitong extends Student {
constructor(name, grade) {
super(name);
this.grade = grade;
}
myGrade() {
alert("成绩不及格， 50分");
}
}
let ziru = new Student();
ziru.hello();
let xiaohong = new zitong();
xiaohong.myGrade();
原型链
7、操作BOM对象(重点)
- 浏览器介绍
JavaScript诞生就是为了能够让他在浏览器中运行!
BOM： 浏览器对象模型
- window
window代表浏览器窗口
window.alert(1)
undefined
window.innerHeight //内部和外部的高度和宽度
577
window.innerWidth
552
window.outerHeight
824
window.outerWidth
1536
- 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.platform
'Win32'
不建议使用 navigator 对象， 会被别人修改
- screen
screen代表屏幕尺寸
screen.width
1536
screen.height
864
- location
location 代表当前页面的URL信息
属性 说明
href ： 声明了当前显示文档的完整URL，与其他location属性只声明部分URL不同，把该属性设置为新的URL会使浏览器读取并显示新的URL的内容
protocol ： 声明了URL的协议部分，包括后缀的冒号。例如：http:
host ： 声明了当前URL中的主机名和端口部分。例如：www.baidu.com:80
hostname ： 声明了当前URL中的主机名。例如：www.baidu.com
port ： 声明了当前URL中的端口部分。例如：80
pathname ： 声明了当前URL中的路径部分。例如：news/index.jsp
search ： 声明了当前URL的查询部分，包括前导问号。例如：?id=123&password=xxxx
hash ： 声明了当前URL中锚的部分，包括前导符（#）。例如：#top,指定在文档中锚点的名称
host: "www.baidu.com"
href: "https://www.baidu.com/" //网页链接
protocol: "https:"
reload: ƒ reload() //重新加载网页
assign: ƒ assign()//设置新的网址
location.assign('https://www.bilibili.com/') //跳转网页
- documen
document代表当前的网页， HTML, DOM文档树
document.title
'哔哩哔哩 (゜-゜)つロ 干杯~-bilibili'
document.title = "你好"
'你好'
document.title
'你好'
获取具体的文档树节点：
<body>
<dl id="app">
<dt>java</dt>
<dd>javaee</dd>
<dd>javase</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取cookie
document.cookie
'BIDUPSID=D354B314775C4E6BD780F854B242BD99; PSTM=1631197786; BAIDUID=D354B314775C4E6B8FB8597C03D09CF1:FG=1; BD_UPN=12314753; BD_HOME=1; H_PS_PSSID=34653_34447_34067_31660_34655_34712_34600_34584_34504_26350_34727_34691_34670; delPer=0; BD_CK_SAM=1; PSINO=1; H_PS_645EC=d26dXKPg0giEnfZ4ZAWEgDlzqO7nOHUrqlAWr8uxRkjQzy7vVSbBhpH8nWw; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BA_HECTOR=04052h20ahahagalt91gl119p0q'
劫持cookie的原理
我们访问的网页中有位置的js代码，这个代码劫持我们的cookie
<script src="a.js"></script>
服务端可以设置cookie: httpOnly
- history
history代表浏览器的历史
history.back() //后退
history.foeward() //前进
8. 操作DOM对象（重点）
核心
浏览器网页就是一个DOM树形结构！
- 更新： 更新DOM节点
- 遍历Dom节点，得到Dom节点
- 删除： 删除一个Dom节点
- 添加： 添加一个新的节点
要操作这个节点，就先获得这个Dom节点.
1、获取dom节点
var h1 = document.getElementsByTagName('h1');//通过标签类型,注意这里获取到的是一个数组
let p1 = document.getElementById('p1');//通过id
let p2 = document.getElementsByClassName('p2');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head><body>
<div id="father">
<h1>标题</h1>
<p id="p1">pa</p>
<p class="p2">pw</p>
</div>
<script>
var h1 = document.getElementsByTagName('h1');//通过标签类型
let p1 = document.getElementById('p1');//通过id
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
let childrens = father.children;
//father.firstchild
//father.lastchild
</script>
</body>
</html>
执行获取结果：
console.log(childrens)
VM76:1 HTMLCollection(3) [h1, p#p1, p.p2, p1: p#p1]0: h11: p#p12: p.p2length: 3p1: p#p1[[Prototype]]: HTMLCollection
undefined
这是原生代码，之后我们会使用JQ
- 更新节点
<body>
<div id="div1">
</div>
<script>
var div1 = document.getElementById('div1');
</script>
</body>
操作文本
div1.innerText = '123456'修改文本的值div1.innerHTML='<strong>123</strong>'可以解析html文件标签
操作js
div1.innerText = '123456'
'123456'
div1.style.fontSize = '20px'
'20px'
div1.style.color = 'red'
'red'
2、删除节点
<div id="father">
<h1>标题</h1>
<p id="p1">pa</p>
<p class="p2">pw</p>
</div>
<script>
var self = document.getElementById('p1');
var father = self.parentElement;//获取父节点
father.remove(self);
//删除节点的过程是动态的,删除第一个之后，就剩两个了，所以会报错
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注意删除的时候,children是时刻变化的，删除节点的时候一定要注意
3、创建或者插入一个节点
我们获得某个Dom节点的时候，假如这个节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点的元素已经存在，我们就不可以这样子干了！会产生覆盖。
- 追加节点：
<body>
<p id="js">JavaScript</p>
<div id="div">
<p id="ee">javaEE</p>
<p id="se">javaSE</p>
<p id="me">javaME</p>
</div>
<script>
let js = document.getElementById('js');
let div = document.getElementById('div');
div.appendChild(js);
</script>
</body>
我们定义的第一个p标签本来是在div外面的，现在我们实现了移动到div标签里面了
-
创建一个标签，实现插入节点
let newCode = document.createElement('p');//创建一个p标签
newCode.id = 'newp'; //给标签加上id
newCode.innerText = 'Helloworld';
//上面三行操作相当于 <p id="newp">Helloworld</p>
div.appendChild(newCode);
-
创建一个script标签
let myscript = document.createElement('script');
myscript.setAttribute('type', 'text/JavaScript');
myscript.innerText ='Hello';
//<script type="text/JavaScript">Hello</script>
div.appendChild(myscript)
- 修改body的背景颜色
let myStyle = document.createElement('style');
myStyle.setAttribute('id','text');
myStyle.innerHTML = 'body {background-color : red}';
document.getElementsByTagName('body')[0].appendChild(myStyle);
//上面的代码相当于下面的代码
<Style>
body {
background : red;
}
</Style>
- 子节点插入到子节点的前面
这些子节点必须是同一个父节点
<body>
<p id="js">JavaScript</p>
<div id="div">
<p id="ee">javaEE</p>
<p id="se">javaSE</p>
<p id="me">javaME</p>
</div>
<script>
let js = document.getElementById('js');
let ee = document.getElementById('ee');
let me = document.getElementById('me');
let div = document.getElementById('div');
div.insertBefore(js,ee); //js到ee前面，这两个节点都必须是div的子节点
div.insertBefore(me,ee);
console.log(div);
</script>
</body>
9、操作表单
表单是什么 form DOM树
- 文本框 text
- 下拉框
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
<body>
<form action="post">
<div id="b">你好</div>
<p>
<span id="a">用户名:</span>
<input type="text" id="username">
</p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="weman" id="girl">女
</p>
</form>
<script>
let input_text = document.getElementById('username');
let boy_radio = document.getElementById('boy');
let girl_radio = document.getElementById('girl');
input_text.value = '12345'; //直接设置值
boy_radio.checked; //查看返回值，true或者false
</script>
<body>
<form action="#" method="post"> <!--#是提交到当前网页-->
<p>
<span>用户名:</span>
<input type="text" name="username" id="username">
</p><p>
<span>密 码:</span>
<input type="text" name="password" id="password">
</p>
<!-- 绑定事件，onclick（）點擊发生-->
<button type="submit" onclick="a()">提交</button>
</form>
<script>
function a() {
let name = document.getElementById('username');
let passward = document.getElementById('password');
console.log(name.value);
console.log(password.value);
}
</script>
在浏览器中的NetWork中可以看到这个请求已经活获得了
那么我们应该如何对密码进行加密呢！！！！
- 引入md5工具类
<!--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>
<!--MD5工具类-->
<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" name="username" id="username">
</p><p>
<span>密 码:</span>
<input type="text" name="password" id="password">
</p>
<!-- 绑定事件，onclick（）點擊发生-->
<button type="submit" onclick="a()">提交</button>
</form>
<script>
function a() {
let name = document.getElementById('username');
let pwd = document.getElementById('password');
console.log(name.value);
console.log(pwd.value);
//MD5加密
pwd.value = md5(pwd.value);
console.log(pwd.value);
}
</script>
</body>
</html>
发现引入后，我们的密码已经被打包为加密字符串了，提高了安全性
表单加密密码比较好的写法 --MD5
- onsumbit : 表单提交绑定事件 ， 不要漏了一个 return
<!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" onsubmit="return a()"> <!--#是提交到当前网页-->
<p>
<span>用户名:</span>
<input type="text" name="username" id="username">
</p><p>
<span>密 码:</span>
<input type="password" id="input-password">
</p>
<input type="hidden" name="password" id="md5-password" > <!--注意要有name这一项属性才可以获取到值-->
<!-- 绑定事件，onclick（）點擊发生-->
<button type="submit">提交</button>
</form>
<script>
function a() {
let name = document.getElementById('username');
let pwd = document.getElementById('input-password');
let md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以通过验证表单的内容，true就是通过提交， false阻止提交
return true;
}
</script>
</body>
</html>
10、 JQuery
引入JQuery
- 网上寻找在线 JQuery cdn 引入就好
- 下载JQuery文档，导入到项目里面
//在线引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
//内部引入
<script src="lib/jquery-3.6.0.js"></script>
-
使用公式 $(selector).action()
selector : 就是css里面的第三个选择器，
action: 就是需要执行的事件
<body>
<a href="" id="test-jquery">点击我</a>
<script>
$('#test-jquery').click(function () {
alert("1");
})
</script>
</body>
jq选择器
-
原生的js 选择器
document.getElementsByTagName() //标签 document.getElementsById() //id document.getElementsByClassName() //类 -
JQuery选择器
$('p').click();//标签选择器 $('#id1').click();//id选择器 $('.class1').click();//类选择器 -
文档工具站： https://jquery.cuishifeng.cn/
事件
写一个例子，获取当前鼠标的坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动鼠标获取坐标</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#div1 {
width: 500px;
height: 500px;
border: 3px solid yellow;
border-radius: 250px;
text-align: center;
line-height: 500px;
}
</style>
</head>
<body>
坐标: <span id="move"></span>
<div id="div1">在这里移动鼠标可以获取到坐标</div>
<script>
$(function() { //页面加载完响应事件
$('#div1').mousemove(function (e){
$('#move').text('X:'+ e.pageX + ' Y:'+ e.pageY);
})
});
</script>
</body>
</html>
jquery操作dom节点
- 节点文本操作
<body>
<ul id = test>
<li id="java">Java</li>
<li name="python">python</li>
</ul>
<script>
$('#test li[name=python]').text(123) //设置值
$('#test li[name=python]').text() //获取值 '123'
$('#test').html('<strong>123</strong>')
$('#test').html()
$('#java').css({"color":"red"});
$('#test li[name=python]').css("color","red");
</script>
</body>
- css操作
$('#java').css({"color":"red"});
$('#test li[name=python]').css("color","red");
- 元素的显示和隐藏 : 本质是
display: none
$('#test li[name=python]').show();
$('#test li[name=python]').hide();
- 未来学习 ajax()
小技巧： 看源码，拿别人的模板
- 如何巩固js 看源码（JQuery 游戏源码）
n">
[外链图片转存中…(img-AXT4wO7Z-1632753526289)]
jquery操作dom节点
- 节点文本操作
<body>
<ul id = test>
<li id="java">Java</li>
<li name="python">python</li>
</ul>
<script>
$('#test li[name=python]').text(123) //设置值
$('#test li[name=python]').text() //获取值 '123'
$('#test').html('<strong>123</strong>')
$('#test').html()
$('#java').css({"color":"red"});
$('#test li[name=python]').css("color","red");
</script>
</body>
- css操作
$('#java').css({"color":"red"});
$('#test li[name=python]').css("color","red");
- 元素的显示和隐藏 : 本质是
display: none
$('#test li[name=python]').show();
$('#test li[name=python]').hide();
- 未来学习 ajax()
小技巧： 看源码，拿别人的模板
- 如何巩固js 看源码（JQuery 游戏源码）
2021、09、27
1056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
