JavaScript
一、什么是JavaScript
1.1 概述
JavaScript是一门世界上最流行的脚本语言
1.2 历史
略
二、快速入门
2.1 引入JavaScript
-
内部标签
<script> alert("hello world!"); </script> -
外部引用
test.js
alert("hello world");test.html
<script src="test.js"></script>测试代码：html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- script标签，写JavaScript代码 --> <!-- <script>--> <!-- alert("hello world!");--> <!-- </script>--> <!-- 外部引用 --> <!-- 注意：script标签必须成对出现 --> <script src="js/js01.js"></script> <!-- 不用显示定义type，也默认就是text/javascript --> <script type="text/javascript"></script> </head> <body> <!--这里也可以存放JavaScript代码--> </body> </html>
2.2 基本语法入门
<!-- JavaScript严格区分大小写 -->
<script>
// 1、定义变量 ：变量类型 变量名 = 变量值;
var num = 1;
var name = "zhangsan";
// 2、条件控制
var score = 66;
if (score >= 60) {
if (score == 100) {
alert("满分");
} else if (score < 100 && score > 90) {
alert("优秀")
} else {
alert("及格")
}
}
// console.log(变量名) 在浏览器的控制台打印变量！
</script>2.3 数据类型
变量
var 变量名 = 变量值;
var name = "zhangsan";
var age = 2;- number
- JavaScript不区分小数，统一使用Number
123 // 整数123
123.4 // 浮点数123.4
1.23e3 // 科学计数法
-99 // 负数
NaN // not a number 不是一个数字
Infinity // 表示无限大- 字符串
'abc'
"abc"- 布尔值
true
false- 逻辑运算
&& 两个都为真，结果为真
|| 一个为真，则结果为真
！ 取反- 比较运算符
= 赋值
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）这是js的缺陷，坚持不要使用 == 比较。
须知：
-
NaN 与所有的数值都不相等，包括自己。
NaN === NaN // false -
智能通过 isNaN(NaN) 来判断这个数是否是 NaN
浮点数问题：
console.log((1/3) === (1 - 2/3)); // false尽量避免使用浮点数进行计算，存在精度问题
console.log(Math.abs(1/3 - (1-2/3)) < 0.000000001); // true- null 和 undefined
- null 空
- undefined 未定义
-
数组
Java的数组必须是一系列相同类型的对象，JavaScript中不需要这样。
// 保证代码的可读性，尽量使用[] var arr = [1, 2, 3, hello, null, true]; new Array(1, 2, 3, 'hello');取数组下标：如果越界，就会undefined
-
对象
对象是大括号，数组是中括号。
- 每个属性之间使用逗号隔开，最后一个属性不需要
var person = {
name: "zhangsan",
age: 2,
tags: ['js', 'java', 'web', '……']
}取值
person.name
>"zhangsan"
person.age
>22.4 严格检查模式
-
‘use strict’; 严格检查模式，预防JavaScript随意性导致的一些问题
-
前提：idea 需要支持 ES6 语法
-
必须写在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;
// ES6中，使用let,局部变量
let i = 1;
</script>
</head>
<body>
</body>
</html>三、数据类型
3.1 字符串
-
正常的字符串使用单引号或者双引号包裹
-
注意转义字符 \
\' \n \t \u4e2d \u#### Unicode字符 "\x41" ASCII字符 -
多行字符串编写
// Tab 键上面，Esc下面那个键 var msg = ` hello world 你好 ` -
模板字符串
let name = "zhangsan"; let age = 3; let msg = `${age}岁的${name},你好！` -
字符串长度
consloe.log(str.length) 字符串长度 -
字符串的可变性，不可变
-
大小写转换
// 注意：这里是方法，不是属性 consloe.log(str.toUpperCase()) 大写 consloe.log(str.toLowerCase()) 小写 -
获取指定元素的下标
str.indexOf('t'); -
截取元素 substring
str.substring(1); // 从第一个字符串截取到最后一个字符串 str.substring(1, 3); // 包含前面不包含后面[1, 3)
3.2 数组
Array 可以包含任意的数据类型
var arr = [1, 2, 3, 4, 5]; // 通过下表取值和赋值-
长度
arr.length注意：假如给 arr.length 赋值，数组大小就会发生变化，如果赋值过小，元素就会消失。
-
indexOf 通过元素获得下标索引
arr.indexOf(2); 1字符串的 “1”和数字 1 是不同的。
-
slice() 截取Array的一部分，返回一个新数组，类似于 String 中的 substring
-
push，pop 尾部
arr.push('a', 'b'); // 压入元素到尾部 arr.pop(); // 弹出尾部的一个元素 -
unshift()，shift() 头部
arr.unshift('a', 'b'); // 压入元素到头部 arr.shift(); // 弹出头部的一个元素 -
排序 sort()
arr.sort() [object Array]: [1, 2, 3, 4, 5, "a", "b"] -
元素反转 reverse()
arr.reverse() [object Array]: ["b", "a", 5, 4, 3, 2, 1] -
拼接 concat()
arr.concat('h', 'o'); [object Array]: ["b", "a", 5, 4, 3, 2, 1, "h", 'o'] arr [object Array]: ["b", "a", 5, 4, 3, 2, 1]注意：concat() 并没有修改数组，只是返回了一个拼接后的新数组
-
连接符 join()
打印拼接数组，使用特定的字符串连接
arr.join('-'); "b-a-5-4-3-2-1" -
多维数组
arr = [[1, 2], [3, 4], ['a', 'b']]; arr[1][1] 4
3.3 对象
若干个键值对
var 对象名 = {
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
}
var person = {
name: "zhangsan",
age: 13,
score: 100,
email: 'zhangsan@sina.com'
}JavaScript 中的对象，用 {} 括起来，键值对描述属性，多个属性之间使用逗号隔开，最后一个属性不加逗号。
JavaScript中的所有的键都是字符串，值是任意对象！
-
对象赋值
person.name = 'lisi'; "lisi" person.name "lisi" -
使用一个不存在的对象属性，不会报错！
person.sex undefined -
动态的删减属性 delete
delete person.name true person -
动态的添加，直接给新的属性添加值即可
person.name = 'wangwu'; "wangwu" -
判断属性值是否在这个对象中 xxx in xxx
'age' in person
true
// 继承
'toString' in person
true-
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('age') true person.hasOwnProperty('toString'); false
3.4 流程控制
- if 判断
let age = 3;
if (age > 3) {
alert('haha')
} else if(age > 2) {
alert('wawa')
}else {
alert('~~~')
}-
while循环，尽量避免程序死循环
let age = 3; while (age < 100) { age += age; console.log(age); } do { age += age; console.log(age); } while(age < 100); -
for循环
let age = 3; for (let i = 0; i < 10; i++) { age += age; console.log(age); }forEach循环
var arr = [1, 2, 3, 4, 5]; // 函数 arr.forEach(function (value) { console.log(value); }) -
for … in
// for (var index in object) {} var arr = [1, 2, 3, 4, 5]; for (var num in arr) { console.log(num); }
3.5 Map 和 Set
ES6 的新特性
-
Map
var map = new Map([['zhangsan', 90], ['lisi', 70], ['wangwu', 100]]); var name = map.get('zhangsan');// 通过 key 获得 value map.set('admin', 150);// 添加或修改一对key-value map.delete('lisi'); // 删除一个元素 console.log(name); -
Set：无序不重复集合
// Set可以去重 var set = new Set([1, 2, 3, 3, 3, 3]); set.add(4);// 添加 set.delete(3);// 删除 console.log(set.has(2));// 判断是否有某个元素
3.5 iteration
遍历数组
var arr = [1, 2, 3, 4];
// 通过 for of 实现打印值 / for in 打印下标
for (var num of arr) {
console.log(num);
}遍历Map
var map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (var m of map) {
console.log(m);
}遍历Set
var set = new Set([1, 2, 3, 4, 5]);
for (var s of set) {
console.log(s);
}四、函数及面向对象
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参数问题：JavaScript 可以传任意个参数，也可以不传递参数
参数进来是否存在的问题？
假设不存在参数，如何规避？
function abs(x) {
// 手动抛出异常
if (typeof x !== 'number') {
throw 'Not a number';
}
if(x >= 0) {
return x;
}else {
return -x;
}
}arguments
arguments是一个JavaScript免费赠送的关键字，代表传递进来的所有的参数，是一个数组！
function abs(x) {
console.log('x = ' + x);
for (var i = 0; i < arguments.length; i ++) {
console.log(arguments[i]);
}
if(x >= 0) {
return x;
}else {
return -x;
}
}问题：arguments 包含所有的参数，我们有时候想使用多余的参数进行附加操作，需要排除已有参数。
rest：ES6 引入的新特性，获取除了已经定义的参数之外的多有参数
function add(a, b, ...rest) {
// 以前
// if (arguments.length > 2) {
// for (var i = 2; i < arguments.length; i ++) {
// // 具体操作
// }
// }
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}注意： rest 参数只能写在最后面，必须用 … 标识。
4.2 变量的作用域
再JavaScript中，var 定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用。(可以使用闭包)
function f() {
var i = 1;
i += 1;
}
i = i + 1;// ReferenceError: i is not defined如果两个函数都使用了相同的变量名，只要在函数内部，就不冲突
function f1() {
var i = 1;
i += 1;
}
function f2() {
var i = 1;
i += 1;
}内部函数可以访问外部的成员，外部的函数不能访问内部的成员。
假设内部函数变量和外部函数的变量重名，函数查找变量从自身函数开始，由内向外查找，内部函数会屏蔽外部函数的变量。
提升变量的作用域
function f() {
var x = 'x' + y;
console.log(x);// 输出结果：undefined
var y = 'y';
}结论：JavaScript 执行引擎，自动提升了 y 的声明，但不会提升变量 y 的赋值。
规范：所有的变量定义都放在函数的头部，不要乱放，便于代码的维护。
全局函数
// 全局变量
var i = 1;
function f() {
console.log(i)；// 1
}
f();
console.log(i)；// 1全局对象 window
// 默认所有的全局变量，都会自动绑定在 window 对象下
var i = 'hello';
alert(window.i);
window.alert(i);// alert() 这个函数本身也是一个window变量JavaScript 实际上只有一个全局作用域，任何变量（函数也可以视为变量）假设没有在函数作用范围找到，就会向外查找，如果在全局作用域都没有找到，就会报错 ReferenceError。
规范：
由于所有的全局变量都会绑定到 window 上，如果不同的 JavaScript 文件使用了相同的全局变量，就会发生全局命名冲突。
所以会将自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。
// 唯一全局变量
var XXXApp = {};
// 定义全局变量
XXXApp.name = 'zhangsan';
XXXApp.add = function (a, b) {
return a + b;
}局部作用域 let
function f() {
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i);// 11 问题：i 出了这个作用域还可以使用
}ES6 let 关键字，解决局部作用域冲突问题
function f() {
for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log(i);// ReferenceError: i is not defined
}建议都是用 let 去定义局部作用域的变量。
常量 const
在 ES6 之前定义常量：只有用全部大写字母命名的变量就是常量，建议不要修改这样的值。
var PI = '3.14';
console.log(PI);
PI = '4.13';// 可以改变这个值
console.log(PI);在 ES6 引入了常量关键字 const
const PI = '3.14';// 只读变量
console.log(PI);
// PI = '4.13'; 报错TypeError: invalid assignment to const `PI'4.3 方法
定义方法
方法就是把函数放在对象里面，对象只有两个东西：属性和方法
var person = {
name: 'zhangsan',
birth: 2000,
age: function () {
var nowYear = new Date().getFullYear();
return nowYear - this.birth;
}
}
调用：
person.name // 属性
person.age() // 方法，一定要带括号this. 代表什么？
始终指向调用它的对象
function getAge() {
var nowYear = new Date().getFullYear();
return nowYear - this.birth;
}
var person = {
name: 'zhangsan',
birth: 2000,
age: getAge
}
// person.age() 调用成功
// getAge() NaN this指向windowapply
在 JavaScript 中可以控制 this 指定的对象
function getAge() {
var nowYear = new Date().getFullYear();
return nowYear - this.birth;
}
var person = {
name: 'zhangsan',
birth: 2000,
age: getAge
};
// person.age() 调用成功
// getAge() NaN
getAge.apply(person, []); // this 指向了 person，参数为空五、内部对象
标准对象
typeof 123
"number"
typeof 'abc'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof [1, 2]
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"5.1 Date
基本使用
var now = new Date();// Date Fri Mar 20 2020 18:50:14 GMT+0800 (中国标准时间)
now.getFullYear(); // 年
now.getMonth(); // 月 0-11 代表月
now.getDate();// 日
now.getDay();// 星期几
now.getHours();// 时
now.getMinutes();// 分
now.getSeconds();// 秒
now.getTime();// 1584701414219 时间戳 全世界同一 1970-01-01 00：00：00
// 时间戳转时间
console.log(new Date(1584701414219));// Date Fri Mar 20 2020 18:50:14 GMT+0800 (中国标准时间)
转换
now.toLocaleString()
"2020/3/20 下午6:50:14"
now.toGMTString()
"Fri, 20 Mar 2020 10:50:14 GMT"5.2 JSON
JSON是什么？
早期，所有数据传输习惯使用XML文件！
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript中一切皆为对象，任何JavaScript支持的类型都可以用JSON来表示；
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对都使用 key:value
var person = {
name: 'zhangsan',
age: 20,
sex: '男'
}
// 对象转换为字符串
var jsonPerson = JSON.stringify(person);// "{\"name\":\"zhangsan\",\"age\":20,\"sex\":\"男\"}"
// json 字符串转换为对象，参数为 json 字符串
var obj = JSON.parse("{\"name\":\"zhangsan\",\"age\":20,\"sex\":\"男\"}");JSON 和 JavaScript 的区别
// js对象
var obj = {a:'a', b:'b'};
// JSON对象 是一个字符串 key:value
var json = '{\'a\':\'a\', \'b\':\'b\'}';六、面对对象编程
什么是面向对象
- 类：模板
- 对象：具体的实例
原型：
var Student = {
name: "zhangsan",
age: 20,
run : function () {
console.log(this.name + "会跑")
}
};
var lisi = {
name: "lisi"
};
// 原型对象
lisi.__proto__ = Student;
var Bird = {
name: 'bird',
fly: function () {
console.log(this.name + "会飞！！！")
}
};
// 原型对象
lisi.__proto__ = Bird;function Studrnt(name) {
this.name = name;
}
// 给 Studrnt 添加一个方法
Studrnt.prototype.run = function () {
console.log("run……")
};
class 继承
class 关键字，是在ES6 引入的
-
定义一个类，属性，方法
// ES6 之后 class Student { constructor(name) { this.name = name; } run() { console.log("run……"); } } var zhangsan = new Studrnt("zhangsan"); var lisi = new Studrnt("lisi"); // 调用 lisi.run(); -
继承
class Person { constructor(name) { this.name = name; } run() { console.log("run……"); } } class Student extends Person { constructor(name, age) { super(name); this.age = age; } myAge() { console.log("我的年龄是：" + this.age); } } var zhangsan = new Person("zhangsan"); var lisi = new Student("lisi", 20);
本质：查看对象原型
原型链
__proto__七、操作BOM对象
浏览器介绍
JavaScript 和 浏览器 的关系？
JavaScript 诞生就是为了能够让他在浏览器中运行！
BOM：浏览器对象模型
- IE 6~11
- Chrome
- Safari
- FireFox Linux
三方：
- QQ浏览器
- 360浏览器
window
window 代表 浏览器窗口
window.alert(1)
undefined
window.innerHeight
263
window.innerWidth
736
window.outerHeight
616
window.outerWidthNavigator
Navigator 封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows)"
navigator.appCodeName
"Mozilla"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64; rv:68.0) Gecko/20100101 Firefox/68.0"
navigator.platform
"Win32"大多数时候，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些东西来判断和编写代码。
screen 代表屏幕的尺寸
screen.width
1280
screen.height
720location
location 代表当前页面的 URL 信息
host: "www.baidu.com"
href: "https://www.baidu.com/index.php?tn=monline_3_dg"
protocol: "https:"
reload: function reload() // 刷新网页
// 设置新的地址
location.assign('https://www.taobao.com/')document
document 代表当前页面
document.title
"百度一下，你就知道"
document.title = '标题'
"标题"获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>获取cookie
document.cookie
"BAIDUID=057868A6F7284E0D80EBAAE24B7DD30B:FG=1; BIDUPSID=057868A6F7284E0D19A6E80CDE02EA9E; PSTM=1581751739; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; COOKIE_SESSION=458927_1_3_3_5_2_0_0_2_1_1_0_1543849_0_0_0_1583305048_1583571829_1584702336%7C9%230_1_1583571808%7C1; BDRCVFR[Fc9oatPmwxn]=aeXf-1x8UdYcs; delPer=0; BD_CK_SAM=1; PSINO=7; H_PS_PSSID=30963_1438_21089_30908_31086; BD_HOME=1; BD_UPN=13314752"history
代表浏览器的历史纪录
history.back() // 后退
history.forward() // 前进八、操作DOM对象
DOM：文档对象模型
核心
浏览器网页就是一个 DOM树形结构！
- 更新：更新 Dom 节点
- 遍历 Dom 节点：得到 Dom 节点
- 删除：删除一个 Dom 节点
- 添加：添加一个新的节点
要操作一个 Dom 节点，就必须要先获得这个 Dom 节点。
获得Dom节点：
<div id="father">
<h1>h1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1 = document.getElementsByTagName('h1');// 通过标签名获取节点
var p1 = document.getElementById('p1');// 通过id获取节点
var p2 = document.getElementsByClassName('p2');// 通过class获取节点
var father = document.getElementById('father');
var childrens = father.children;// 获取父节点下的所有子节点
father.firstChild;// 获取父节点下的第一个子节点
father.lastChild;// 获取父节点下的最后一个子节点
</script>这是原生代码，之后尽量使用jQuery。
更新节点
<div id="d1">
</div>
<script>
var d1 = document.getElementById('d1');
</script>操作文本
d1.innerText = '124';// 修改文本的值
"124"
d1.innerHTML = '<strong>123</strong>';// 可以解析HTML文本标签
"<strong>123</strong>"操作JavaScript
d1.style.color = 'red';
"red"
d1.style.fontSize = '50px';
"50px"
d1.style.padding = '2px';
"2px"删除节点
删除节点的步骤：先获取父节点，然后通过父节点删除自己。
<div id="father">
<h1>h1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self = document.getElementsById('p1');
var father =p1.parentElement;// 获得父节点
father.removeChild(self);// 移除子节点
// 删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
</script>注意：删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意。
插入节点
我们获得了某个 Dom 节点，假设这个 Dom 节点是空的，我们通过 innerHTML 就可以增加一个元素，但如果这个 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');
// 将 js 移动到 list 中，追加到最后
list.appendChild(js);
</script>创建一个新的标签，实现插入
var newP = document.createElement('p');// 创建一个p标签
newP.id = 'newP';
newP.innerText = 'hello world!';
// 创建一个标签节点，通过setAttribute可以设置任意的值
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
list.appendChild(newP);
// 可以创建一个style标签
var myStyle = document.createElement('style');// 创建一个空的style标签
myStyle.setAttribute('style', 'text/css');
myStyle.innerHTML = 'body{background-color: red}';// 设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);insert
var js = document.getElementById('js');
var ee = document.getElementById('ee');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode, targetNode)
list.insertBefore(js, ee);九、操作表单（验证）
表单是什么？ form DOM树
- 文本框 text
- 下拉框 < select >
- 单选框 radion
- 多选框 checkbox
- 隐藏框 hidden
- 密码框 password
- ……
表单的目的：获得信息
获得要提交的信息
<form action="#" method="post">
<p></p>
<span>用户名：</span>
<input type="text" id="username">
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" id="boy">男
<input type="radio" name="sex" 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 = '123';
// 对于单选框，多选框等固定的值，boy_radio.value只能取到设定的值
boy_radio.checked;// 查看是否被选中，true为选中
girl_radio.value = true;// 赋值
</script>提交表单，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>
<!--
表单绑定事件
οnsubmit= 绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用 onsubmit 接收
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return f();">
<p>
<span>用户名：</span>
<input type="text" id="username" name="username">
<p>
<p>
<span>密码：</span>
<input type="password" id="input_pwd">
<p>
<input type="hidden" id="md5_pwd" name="password">
<input type="submit" value="提交">
</form>
<script>
function f() {
alert('提交');
var uname = document.getElementById('username');
var pwd = document.getElementById('input_pwd');
var md5_pwd = document.getElementById('md5_pwd');
// MD5 算法
md5_pwd.value = md5(pwd.value);
// 可以校验判断表单内容，true是通过提交，false是阻止提交
return true;
}
</script>
</body>
</html>十、jQuery
jQuery库，里面存在大量的JavaScript函数
获取jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
<!--导入下载的jquery-->
<script src="lib/jquery-3.4.1.js"></script>
</head>/
<body>
<!--
公式：$(selector).action()
-->
<a href="" id="test_jQuery">点击</a>
<script>
// 选择器就是css的选择器
$('#test_jQuery').click(function () {
alert('hello world!');
})
</script>
</body>
</html>选择器
<script>
// 原生JavaScript 选择器对比
// 标签
document.getElementsByTagName();
// id
document.getElementById();
// class
document.getElementsByClassName()
// jQuery
// 标签
$('p').click();
// id
$('#id1').click();
// class
$('.class1').click();
</script>文档工具站
jQuery API 中文文档地址：jquery.cuishifeng.cn/
jQuery 菜鸟教程网址：https://www.runoob.com/jquery/jquery-tutorial.html
事件
鼠标事件，键盘事件，其它事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.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>
// 当网页元素加载完毕之后，相应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:' + e.pageX + ' y:' + e.pageY)
})
});
</script>
</body>
</html>操作Dom
节点文本操作
<ul id="test_ul">
<li name="se">javaSE</li>
<li name="ee">javaEE</li>
</ul>
<script>
$('#test_ul li[name=se]').text();// 获得值
$('#test_ul li[name=se]').text('设置值');// 设置值
$('#test_ul li[name=se]').html();// 获得值
$('#test_ul li[name=se]').html('<strong>123</strong>');// 设置值
</script>css 的操作
<ul id="test_ul">
<li name="se">javaSE</li>
<li name="ee">javaEE</li>
</ul>
<script>
$('#test_ul li[name=se]').css('color', 'red');
</script>元素的显示和隐藏
$('#test_ul li[name=se]').show();// 显示
$('#test_ul li[name=se]').hide();// 隐藏entsByTagName();
// id
document.getElementById();
// class
document.getElementsByClassName()
// jQuery
// 标签
$('p').click();
// id
$('#id1').click();
// class
$('.class1').click();
文档工具站
jQuery API 中文文档地址：jquery.cuishifeng.cn/
jQuery 菜鸟教程网址：https://www.runoob.com/jquery/jquery-tutorial.html
事件
鼠标事件，键盘事件，其它事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.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>
// 当网页元素加载完毕之后，相应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:' + e.pageX + ' y:' + e.pageY)
})
});
</script>
</body>
</html>操作Dom
节点文本操作
<ul id="test_ul">
<li name="se">javaSE</li>
<li name="ee">javaEE</li>
</ul>
<script>
$('#test_ul li[name=se]').text();// 获得值
$('#test_ul li[name=se]').text('设置值');// 设置值
$('#test_ul li[name=se]').html();// 获得值
$('#test_ul li[name=se]').html('<strong>123</strong>');// 设置值
</script>css 的操作
<ul id="test_ul">
<li name="se">javaSE</li>
<li name="ee">javaEE</li>
</ul>
<script>
$('#test_ul li[name=se]').css('color', 'red');
</script>元素的显示和隐藏
$('#test_ul li[name=se]').show();// 显示
$('#test_ul li[name=se]').hide();// 隐藏
扫一扫
2444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
