JavaScript
1、概述
javaScript是一门脚本语言，他和java没半毛钱关系，有java二字就是为了蹭java热度。
现今最新版本已经到es6版本
但是大部分浏览器还只停留在支持es5代码上
开发环境–线上环境，版本不一致
2、快速入门
2.1、引入JavaScript
1、内部标签
<script>
//...
</script>
2、外部引入
xxx.js
....
在HTML中引入JavaScript
<script src="js/xxx.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<!-- scipt标签内，写JavaScript代码 -->
<!-- <script>
alert("hello word");
</script>-->
<!-- 外部引入 -->
<!--注意：script标签，必须成对出现-->
<script src="js/hello.js"></script>
<!--不用显示定义type,默认就是text/javascript-->
<script type="text/javascript">
//...
</script>
</head>
<body>
<!--这里也可以存放-->
</body>
</html>
2.2、基本语法入门
浏览器必备调试须知：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zfj8q4Sv-1594047839490)(E:\许浩文件备份\笔记\web\4S%O6SPGT15DDNZ87@K}[RV.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1.定义变量 变量类型var 变量名 =变量值；
var score = 65;
// alert(name);
// 2.条件控制
if (score > 60 && score < 70) {
alert("及格");
} else if (score > 70 && score < 80) {
alert("良好");
} else {
alert("优秀");
}
//console.log(score) 在浏览器的控制台打印变量！ 相当于System.out.println
</script>
</head>
<body>
</body>
</html>
2.3、数据类型
数值，文本，图形，音频，视频。。。
变量：不能以数字开头
js不区分小数和整数，Number
123 // 整数123
123.1 // 浮点数123.1
1.123e3 // 科学计数法
-99 // 负数
NaN // not a number
Infinity // 无限大
字符串
‘abc’ “abc”
布尔值
true false
逻辑运算
&&
||
!
比较运算符
=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，才判断为true）
注意：
- 一般不使用==
- NaN==NaN，这个与所有的数值不相等，包括自己
- 只能通过.isNaN(NaN)来判断这个数是否是NaN
浮点数问题
console.log((1/3)==(1-2/3)) false
尽量避免使用浮点数进行运算，存在精度问题！
Math.abs(1/3-(1-2/3))<0.000001 true
null和undefined
- null 空
- undefined 未定义
数组
java的数组必须同类型，js不需要相同类型
// 保证代码的可读性，尽量使用[]
var arr = [1,true,null,"hello"];
new Array(1,true,null,"hello")
取数组下标：如果越界了就会显示：undefined
对象
对象是大括号，数组是中括号,属性之间用逗号隔开
var person = {
name: "许浩",
age: 19,
tags: ["xh","yxx"]
}
取对象的值
person.name
person.age
person.tags[0]
2.4、严格检查模式strict
前提：IDEA支持ES6语法
‘use strict’;严格检查模式，预防JavaScript的随意性导致的一些问题
必须写在JavaScript的第一行
局部变量建议都使用let去定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA支持ES6语法
'use strict';严格检查模式，预防JavaScript的随意性导致的一些问题
必须写在JavaScript的第一行
局部变量建议都使用let去定义
-->
<script>
'use strict';
// 全局变量
i = 1;
var u = 1;
// ES6中局部变量用 let 定义
let o = 1;
</script>
</head>
<body>
</body>
</html>
3、数据类型
3.1、字符串
1、正常字符串我们使用单引号或者双引号包裹
2、注意转移字符 \
\' 打印'
"\n" 换行
"\t" 制表
"\u3e2d" \u#### Unicode字符
"\x41" Ascll字符
3、多行字符串编写
//tab 上的引号键
var msg=
`
hello
world
你
世界
`
4、模板字符串
// 字符串拼接
let name = "xuhao";
let msgs = `你好，${name}`;
5、字符串长度
str.length
6、字符串的可变性，不可变
7、大小写转换
student.toUpperCase() //转换为大写
student.toLowerCase() //转换为小写
8、获取字符下标
student.indexOf("a")
9、截取字符串
student.substring(1) //从第一个字符串开始截取
student.substring(1,3) //[1,3)
3.2、数组
Array可以包含任意数据类型
var arr=[1,2,3]
1、长度
arr.length
注意：如果给arr.length赋值，数组大小会发生变化，如果赋值小于原长度，数据就会缺失
2、indexOf
arr.indexof(2)
3、slice（）
截取Array的一部分，返回一个新数组，类似于String中的subString
4、push() pop() --尾部
push(): 压入到尾部
pop(): 弹出尾部的一个元素
5、unshift() shift() --头部
unshift(): 压入到头部
shift(): 弹出头部的一个元素
6、排序 sort()
arr=["b","a"]
arr.sort()
arr=["a","b"]
7、元素反转 reverse()
arr=["b","a","d"]
arr.reverse()
arr=["d","a","b"]
8、拼接 concat()
arr.concat([1,2,3])
[1, 2, 3, 1, 2, 3]
arr
[1, 2, 3]
注意：concat()并没有修改数组，只是会返回一个新的字符串
9、连接符join
打印拼接数组，使用特点的字符串连接
arr=["a","b"]
arr.join("-")
"a-b"
10、多维数组
arr=[["a","b"],[1,2]]
arr[1][1]
2
3.3、对象
若干个键值对
JavaScript中所有的键都是字符串，值是任意对象
let|var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}
let person = {
name: "xuhao",
age: 3,
email: "110@qq.com"
}
js中的对象，{…}表示一个对象，键值对描述属性xxx：xx，多个属性之间用“，”隔开，最后一个属性不加逗号
1、对象复制
person.name="yangxinxin"
yangxinxin
person.name
yangxinxin
2、使用一个不存在的对象属性，不会报错 undefined
person.js
undefined
3、动态的删减属性 delete
delete person.name
true
4、动态的添加属性
person.haha="js"
"js"
person
{name: "xuhao", age: 3, email: "110@qq.com", js: "js"}
5、判断属性值是否在这个对象中
"age" in person
true
//继承
true
6、判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty("toString")
false
person.hasOwnProperty("age")
true
3.4、流程控制
if 判断
let age = 3;
if (age > 3) {
alter("笑")
} else {
alter("哭泣")
}
while循环
while (age<100){
console.log(age);
}
do{
console.log(age);
}while (age<100)
for循环
for (let i = 0; i < 100; i++) {
console.log(i)
}
forEach循环
var age=[12,13,14,15,16];
age.forEach(function (value) {
console.log(value)
})
for…in 循环
var age=[12,13,14,15,16];
for (var num in age){
if(age.hasOwnProperty(num)){
console.log(age[num]);
}
3.5、Map和Set
ES6的新特性
Map：
// ES6
// 学生的成绩，学生的名字
// var names=["tom","jack"];
// var socres=[100,90];
// new Map();
// new Set();
var map = new Map([['tom', 100], ['jack', 90]]);
var score = map.get("tom"); // 通过key获得value
map.set("admin", 80); // 设置值
map.delete("tom"); // 删除值
Set：无序不重复的集合
var set=new Set([1,2,3,4,4]); // set可以去重
set.add(5); // 添加元素
set.delete(4); // 删除元素
set.has(3); // 查看是否包含某个元素，包含则返回true
3.6、iterator
ES6新特性
遍历数组，使用for of可以遍历内容，使用for in可以遍历所有元素的下标
var arr=[3,4,5];
for (let x of arr){
console.log(x);
}
遍历map
var map=new Map([["tom",19],["jack",20]]);
for (let x of map){
console.log(x);
}
遍历set
var set=new Set([5,6,6,7]);
for (let x of set){
console.log(x);
}
4、函数
4.1、定义函数
定义方式一
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return代表函数结束，返回结果
如果没有执行return，函数执行完也会返回结果，结果就是undefined
定义方式二
var abs = function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
调用函数
abs(10) // 10
abs(-10) // 10
参数问题：JavaScript的函数可以传任意个参数，也可以不传递参数
参数尽量是否存在的问题？
假设不存在参数，如何规避？ --抛出异常
function abs(x) {
// 手动抛出异常
if (typeof x !== 'number') {
throw "Not a Number";
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
arguments
arguments代表传递进来的所有的参数是一个数组
function abs(x) {
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数
rest可变参数
ES6新特性，获取除了已经定义的参数之外的所有参数
function aa(a,b,...rest) {
console.log("a->"+a);
console.log("b->"+b);
console.log(rest);
}
4.2、变量的作用域
在JavaScript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用。
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突。
内部函数可以访问外部函数的成员，反之则不行。
假设内部函数变量和外部函数变量重名，则由内向外找，当内外存在重名的函数变量时，内部函数会屏蔽外部的函数变量，类似于**“就近原则”**。
提升变量的作用域
function fun() {
var x="x"+y;
console.log(x)
var y="y";
}
fun()结果：xundefined
说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升变量y的赋值
// fun2类似于fun
function fun2() {
var y="y";
var x="x"+y;
console.log(x)
y="y";
}
规范：所有变量的定义都放在函数的头部，便于代码维护
全局函数
全局变量
x = 1;
全局对象 window
// 全局对象
var x = "xxx";
alert(x);
alert(window.x); // 默认所有的全局变量，都会自动绑定在window对象下
alert()这个函数本身也是一个window变量
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(123);
JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用域范围内找到，就会向外查找，如果在全局作用域没有找到，则报错RefrenceError
规范
由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，则会产生冲突。
解决方法：
// 全局唯一变量
var xhkongjian = {};
// 定义全局变量
xhkongjian.name = "xuhao";
xhkongjian.add = function (a, b) {
return a + b;
}
局部作用域 let
使用var定义的变量是全局变量
function aaa() {
for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log(i+1); // Uncaught ReferenceError
}
ES6 let关键字，可以解决局部作用域冲突的问题，建议使用let去定义局部作用域的变量
常量 const
ES6 引入常量关键字const
4.3、方法
定义方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
var xuhao = {
name: "xuhao",
birth: 2000,
// 方法
age: function () {
// 今年-出生年
var now = new Date().getFullYear();
return now - this.birth;
}
}
// 属性
xuhao.name
// 方法，一定要带（）
xuhao.age()
this.代表什么？
this是无法指向的，是默认指向调用它的那个对象
function getAge() {
// 今年-出生年
var now = new Date().getFullYear();
return now - this.birth;
}
var xuhao = {
name: "xuhao",
birth: 2000,
// 方法
age: getAge
}
// xuhao.age() 20
// getAge() NaN this指的是window
apply
在js中可以控制this指向，相当于指针，感觉很像java里面的反射
getAge().apply(xuhao,[]); // 两个参数，this指向的对象，传入的参数
5、内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof []
"object"
typeof {}
"object"
typeof NaN
"number"
typeof true
"boolean"
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(); // 时间戳 1970 1.1 0:00:00~现在的毫秒数1593586801935
console.log(new Date(1593586801935)); //时间戳转为时间
转换
now.toLocaleString();
"2020/7/1 下午3:00:01"
now.toGMTString();
"Wed, 01 Jul 2020 07:00:01 GMT"
5.2、JSON
json 是什么
早期，所有数据传输习惯用XML文件
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript一切皆为对象，如何js支持的类型都可以用JSON来转换
格式：
- 对象都用{}
- 数组都用[]
- 所有键值对都用key：value
JSON字符串和js对象的转换
var user={
name:"xuhao",
age:18,
sex:'男'
};
// 对象转换为json字符串{} "{"name":"xuhao","age":18,"sex":"男"}"
var jsonUser=JSON.stringify(user);
// json 字符串转换为对象 参数为 json 字符串
var obj=JSON.parse('{"name":"xuhao","age":18,"sex":"男"}');
JSON 和 jS 对象的区别
var obj= {a:"hello",b:"world"};
var json = '{"a":"hello","b":"world"}';
6、面向对象编程
6.1、什么是面向对象编程
JavaScript、java、c#。。。面向对象；JavaScript有些区别
类：模板
对象：具体的实例
JavaScript原型对象，类似于继承
var Student = {
name: "xuhao",
age: 18,
run: function () {
console.log(this.name + "--->running");
}
};
var yxx = {
name: "yangxinxin"
};
// yxx的原型对象是Student
yxx.__proto__ = Student;
class 继承
class关键字，是在ES6引入的
1、定义一个类，属性，方法
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert("hello")
}
}
class pupil extends Student {
constructor(name, grade) {
super(name);
this.grade = grade;
}
myGrade() {
alert("我是小学生");
}
}
var xiaohong = new Student("xiaohong");
var xiaoming = new pupil("xiaoming", 1);
本质：查看对象原型，其实还是一个__ proto __
原型链
__ proto __
7、操作BOM对象（重点）
浏览器介绍
JavaScript和浏览器关系？
JavaScript诞生就是为了能够让他在浏览器上运行
BOM：浏览器对象模型
window
window 代表浏览器窗口
window.alert(1)
undefined
window.innerHeight // 内部高度
344
window.innerWidth // 内部宽度
150
window.outerHeight // 外部高度
464
window.outerWidth // 外部宽度
641
Navigator （了解）
Navigator，封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36 Edg/83.0.478.58"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36 Edg/83.0.478.58"
navigator.platform
"Win32"
大多数时候，我们不会使用Navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width
1536 px
screen.height
864 px
location
location代表当前页面的URL信息
host: "ntp.msn.cn"
href: "https://ntp.msn.cn/"
protocol: "https:"
reload: ƒ reload() // 刷新网页
location.assign("https://www.csdn.net/") // 设置新的地址
document
document代表当前的页面，HTML DOM文档树
document.title
"微软 Bing 搜索 - 国内版"
document.title="许浩"
"许浩"
获得具体的文档树结点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl id="app">
<dt>java</dt>
<dd>javaEE</dd>
<dd>javaSE</dd>
</dl>
<script>
var dl=document.getElementById('app');
</script>
</body>
</html>
获取cookie
document.cookie
服务器端可以设置cookie：httpOnly
history
history 代表浏览器的历史记录
history.back() // 前进
history.forward() // 后退
8、操作DOM对象（重点）
DOM：文档对象模型
核心
浏览器网页就是一个Dom树形结构
- 更新：更新Dom节点
- 遍历dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
通过name，class，标签获得的都是数组元素，只有id获得的是单个具体的元素
获得dom节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">"p1"</p>
<p class="p2">"p2"</p>
</div>
<script>
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById("father")
var child = father.children; // 获取父节点下的所有节点
// father.firstChild
// father.lastChid
</script>
</body>
</html>
这是原生代码，之后尽量都使用jQuery
更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById("id1");
</script>
操作文本
- id1.innerText=“许浩”
- id1.innerHTML="< strong>123< /strong>"
操作css
id1.style.color='red' // 属性使用字符串包裹
"red"
id1.style.fontSize='200px' // 下划线 转 驼峰命名
"200px"
id1.style.padding='2em'
"2em"
删除结点
删除结点的步骤：先获取父节点，在通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">"p1"</p>
<p class="p2">"p2"</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.paretElment;
father.removeChild(self)
</script>
father.removeChild(p1)
注意：删除多个结点的时候，children是在时刻变化的
插入节点
我们获得某个Dom节点，假设这个dom节点是空的，我们通过innerText就可以增加一个元素，但是这个DOM节点已经存在元素了，我们就不能这么做了，因为会覆盖原来的所有节点。
追加
<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); // js追加到list
</script>
创建一个新的标签，实现插入
<script>
var js = document.getElementById("js"); // 已经存在节点
var list = document.getElementById("list");
//通过js 创建一个新的节点
var newP = document.createElement('p'); // 创建一个p标签
newP.id = 'newP';
newP.innerText = 'nihao';
// 创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
// 对body进行修改
var body = document.getElementsByTagName('body');
body[0].style.backgroundColor = '#32f';
// insert
var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
// 要包含的节点，insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
</script>
9、操作表单（验证）
表单是什么 form DOM 树
- 文本框 text
- 下拉框 < select >
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- 。。。
表单目的：提交信息
获取要提交的信息
<body>
<form action="post">
<p>
<span>用户名：</span> <input type="text" id="username">
</p>
<!--单选框的值，就是定义好的-->
<p>
<span>性别：</span>
<input type="radio" name="sex" value="男" id="boy">男
<input type="radio" name="sex" value="女" id="girl">女
</p>
</form>
<script>
var input_text = document.getElementById("username");
var boy_radio = document.getElementById("boy");
var girl_radio = document.getElementById("girl");
// 得到输入框的值
input_text.value
// 修改输入框的值
input_text.value = "杨欣馨"
// 对于单选框，多选框等等，boy_radio.value只能取到当前的值
boy_radio.checked; // 查看返回的结果，如果为true，则被选中
boy_radio.checked = true; // 赋值
</script>
</body>
提交表单。md5加密密码，表单优化
<!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>
<!--表单绑定提交事件
onsubmit提交一个绑定检测的函数 true，false
将这个表单返回给表单，使用onsubmit来接收
-->
<form action="www.baidu.com" method="post" οnsubmit="return method()">
<p>
<span>用户名：</span>
<input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span>
<!--<input type="password" id="password" name="password">-->
<input type="password" id="input-password">
</p>
<!--通过隐藏域提交-->
<input type="hidden" id="md5-password" name="password">
<!--绑定事件 onclick 被点击-->
<button type="submit" οnclick="meothod()">提交</button>
<!-- <input type="submit">-->
<input type="reset">
</form>
<script>
function meothod() {
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);*/
var md5pwd = document.getElementById("md5-password");
md5pwd.value = md5(pwd.value);
// 当返回值为true时则通过提交，false则阻止提交
return false;
}
</script>
</body>
</html>
10、jQuery
jQuery库里面包含大量的JavaScript的函数
如何获取jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入jQuery-->
<script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
</head>
<body>
</body>
</html>
初体验jQuery
公式：$(selector).action()
selector选择器是css的选择器
action():功能方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入jQuery-->
<script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我有福利</a>
<!--
公式：$(selector).action()
selector选择器是css的选择器
action():功能方法
-->
<script>
$("#test-jquery").click(function () {
alert("hello,world");
})
</script>
</body>
</html>
选择器
// 原生js，选择器少，麻烦
// 标签
document.getElementsByTagName("");
// id
document.getElementById("");
// 类
document.getElementsByClassName("");
// jQuery css 中的选择器都可以使用
// 标签选择器
$("").click();
// id选择器
$("#id1").click();
// 类选择器
$(".class1").click();
文档工具：https://jquery.cuishifeng.cn/
action
鼠标事件，键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2"
src="https://lib.baomitu.com/jquery/3.5.0/jquery.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).readOnly(function () {
})*/
$(function () {
$("#divMove").mousemove(function (e) {
$("#mouseMove").text("x:" + e.pageX + "y:" + e.pageY)
})
});
</script>
</body>
</html>
操作Dom
节点文本操作
$(".js").text(); //获取值
$(".js").text("文本"); //设置值
$(".js").html(); //获取值
$(".js").html("<strong>123</strong"); //设置值值
css的操作
$(".js").css("color","red") // 设置css
元素的显示和隐藏：本质display：none
$(".js").hide() // 隐藏
$(".js").show() // 显示
1923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
