1. 什么是JavaScript
1.1 概述
- JavaScript是一门世界上最流行的脚本语言。
- JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为 开发Web页面的脚本语言而出名,但是它也被 用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且 支持面向对象、命令式和声明式(如函数式编 程)风格。
- 一个合格的后端人员,必须精通JavaScript。
1.2 历史
- 历史相关链接:https://www.w3school.com.cn/js/pro_js_history.asp.
- ECMAScript它可以理解为是JavaScript的一个标准。
- 最新版本已经到es6版本,但是大部分浏览器还只停留在支持es5代码上!
- 开发环境–线上环境,版本不一致。
2. 快速入门
2.1 引入JavaScript
1.内部标签
<script>
//....
</script>
2.外部引入
.js文件
//...
test.html
<!--注意: script标签必须成对出现-->
<script src="cr.js"></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- script标签内,写Javascript代码-->
<!-- <script>-->
<!-- alert("hello,world");-->
<!-- </script>-->
<!--外部引入-->
<!--注意: script标签必须成对出现-->
<script src="js/cr.js"></script>
<!-- 不用显示定义type,也默认就是JavaScript -->
<script type="text/javascript"></script>
</head>
<body>
<!--这里也可以存放-->
</body>
</html>
2.2 基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--JavaScript严格区分大小写!-->
<script>
//1. 定义变量 变量类型 变量名 = 变量值;
var score = 89;
//alert(score);
//2. 条件控制
if(score > 60 && score < 70){
alert("60~70");
} else if(score >70 && score < 80){
alert("70~80");
} else{
alert("other");
}
// console.log(score) 在浏览器的控制台打印变量! System.out.println();
/**
*
*/
</script>
</head>
<body>
</body>
</html>
2.3 数据类型
数值、文本、图形、音频、视频…
1.变量
var 成功 = "努力学习";
2.number
js不区分小数和整数,Number
123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大
3.字符串
‘abc’ “abc”
4.布尔值
true, false
5.逻辑运算
&& //两个为真,结果为真
|| //一个为真,结果为真
! // 真即假,假即真
6.比较运算符(重要)
= //赋值
== //等于(类型不一样,值一样,也会判断为true)
=== //绝对等于(类型一样,值一样,结果为true)
这是js的一个缺陷,坚持不要使用 == 比较
须知:
- NaN===NaN,这是与所有的数值都不相等,包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
7.浮点数问题:
console.log((1/3)===(1-2/3))
尽量避免使用浮点数进行运算,存在精度问题!
Math.abs(1/3-(1-2/3))<0.00000001
8.null和undefined
- null 空
- undefined 未定义
9.数组
java的数组必须是相同类型的对象,JS中不需要这样!
//保证代码的可读性,尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello');
取数组下标:如果越界了,就会
undefined
10.对象
- 对象是大括号,数组是中括号。
- 每个属性之间使用逗号隔开,最后一个不需要添加。
//java写法:Person person = new Person(1,2,3,4,5);
var person = {
name:"cherry",
age:5,
tags:['js','java','web','...']
}
取对象的值
person.name
>"liu"
person.age
>5
2.4 严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提:IDEA 需要设置支持ES6语法
‘use strict’; 严格检查模式, 预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行!
局部变量建议都使用 let 去定义
-->
<script>
'use strict';
let i = 1;
//ES6 let
</script>
</head>
<body>
</body>
</html>
3.数据类型
3.1 字符串
- 正常字符串我们使用单引号或者双引号包裹。
- 注意转义字符 \
\' 字符串
\n 换行
\t tab
\u4e2d 中
- 多行字符串编写
//反引号包裹可以写多行字符串
// ``
var msg = `
hello
world
hihaoa
nihai`
- 模板字符串
let name = "cherry";
let age = 18;
let m1 = `nihao a, ${name}`
- 字符串长度
console.log(str.length)
- 字符串不可变性
var str="student"
console.log(str[0]) //s
str[0]=1
console.log(str[0]) //s
- 大小写转换
//注意这是方法,不是属性
student.toUppercase()
student.toLowercase()
- indexOf()
console.log(student.indexOf(‘t’)) //1
- substring()
console.log(student.subString(1)) //tudent
console.log(student.subString(1,3)) //tu
3.2 数组
Array可以包含任意数据类型
var arr = [1,2,3,4,5]//通过下标取值和赋值
- 长度
arr.length
//注意:假如给arr.length赋值,数组长度就发生变化,如果赋值过小,元素就会丢失。
- indexOf()
arr.indexOf(2)
1
- slice():截取Array的一部分,返回一个新的数组,类似于subString()
console.log(arr.slice(1)) //[2,3,4,5]
console.log(student.slice(1,3)) //[2,3]
- push()和pop()
push();压入到尾部
pop():弹出尾部的一个元素
- unshift()和shift()
unshift();压入到头部
shift():弹出头部的一个元素
- sort()
(3) ["b", "c", "a"]
arr.sort();
(3) ["a", "b", "c"]
- reverse()
(3) ["a", "b", "c"]
arr.reverse()
(3) ["c", "b", "a"]
- concat()
arr
(3) ["c", "b", "a"]
arr.concat('1', '2','3')
(6) ["c", "b", "a", "1", "2", "3"]
arr
(3) ["c", "b", "a"]
//注意:concat()并没有修改数组,只是会返回一个新的数组
- join()
(3) ["c", "b", "a"]
arr.join('-')
"c-b-a"
//打印拼接数组,使用特定的字符串连接
- 多维数组
arr = [[1,2], [3,4], ["kele", "20"]]
arr[2][1]
"20"
3.3 对象
若干个键值对
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义一个person对象,有三个属性
var Person = {
name :"cherry",
age : 3,
score : "good"
}
//js中的对象,{...}表示一个对象,键值对描述属性xxxx:xxxx,
//多个属性之间用逗号隔开,最后一个不加逗号
- 对象赋值
Person.name
"cherry"
Person.name = "cherry2"
"cherry2"
- 使用一个不存在的对象属性不会报错,undefined!
Person.haha
undefined
- 动态删除属性,通过delete删除对象属性
delete Person.name
true
Person
{age: 3, score: "good"}
- 动态的添加,直接给新属性添加值即可
Person.haha = "haha"
"haha"
Person
{age: 3, score: "good", haha: "haha"}
- 判断属性值是否在这个对象中
Person
{age: 3, score: "good", haha: "haha"}
'age' in Person
true
//继承父类的toString
'toString' in Person
true
- 判断一个属性是否是自身拥有的 hasOwnProperty()
Person.hasOwnProperty('age')
true
Person.hasOwnProperty('toString')
false
3.4 流程控制
-
if()else
-
while()
-
for()
-
forEach()循环
var arr = [1,232,14,43,34,34,314,];
//函数
arr.forEach(function (value){
console.log(value)
})
- for in
//for(var index in object)
for (var number in arr) {
if (arr.hasOwnProperty(number)){
console.log("存在");
console.log(arr[number])
}
}
3.5 Map和Set
ES6新特性
Map:类似python的字典
var map = new Map([['tom', 100], ['jerry', 90], ['haha', 80]]);
var name = map.get(`tom`)//通过Key获得value
map.set('admin', 12356)//新增,修改
map.delete('tom');//删除
console.log(name);
map
Map(4) {"tom" => 100, "jerry" => 90, "haha" => 80, "admin" => 12356}
Set:无需不重复的集合
var set = new Set([3,1,1,1,1,1]);
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含有些元素
3.6 iterator
遍历数组
//通过for of 实现输出数组内的值 for in实现输出数组下标
var arr = [1,2,3,4,5,66,4223];
for (var x of arr) {
console.log(x)
}
遍历Map
var map = new Map([['tom', 100], ['jerry', 90], ['kele', 80]])
for (let x of map) {
console.log(x)
}
遍历Set
var map = new Map([['tom', 100], ['jerry', 90], ['kele', 80]])
for (let x of map) {
console.log(x)
}
4. 函数
4.1 定义函数
1. 方式一
绝对值函数
function abs(x){
if(x>=0){
retun x;
}else{
return -x;
}
}
一旦执行到return,代表函数结束,返回结果!
如果没有执行return,函数执行完也会返回结果,结果就是undefined
2. 方式二
var abs = function(x){
if(x>=0){
retun x;
}else{
return -x;
}
}
function(x){…}这是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数!
方式一和方式二等价!
3. 调用参数
abs(10) // 10
abs(-10) // -10
参数问题:JS可以传任意个参数,也可以不传参数。
不存在参数,如何规避:
function abs(x){
//手动抛出异常来判断
if (typeof x != 'number'){
throw 'Not a Number'
}
if(x>=0){
return x;
}else{
return -x;
}
}
多个参数:
使用argument,argument是JS免费赠送的一个关键字,代表传递进来的所有参数是一个数组。
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;
}
}
ES6引入的新特性,获取除了已定参数外的其他参数:rest
rest参数只能写在最后面,并用…标识
function aaa(a,b,...rest) {
console.log("a>=" +a);
console.log("b>=" +b);
console.log(rest);
}
4.2 变量的作用域
1.变量作用域
在JS中,var定义的变量实际是有作用域的,假设在函数体内声明,则在函数体外不可调用。
function test() {
var x = 1;
x = x + 1;
}
x = x + 2;//x is not defined
如果两个函数使用了相同的变量名,只要在函数内,就不冲突。
function test() {
var x = 1;
x = x + 1;
}
function test2() {
var x = 1;
x = x + 1;
}
内部函数可以调用外部函数的成员,反之则不行。
function test() {
var x = 1;
function test2() {
var y = x + 1;
}
var z = y + 1;// z is not defined
}
假设,内部函数变量和外部函数变量重名!
function test() {
var x = 1;
function test2() {
var x = 'A';
console.log('inner' + x);
}
console.log('outer' + x);
test2()
}
test();
假设在JavaScript中,函数查找变量从自身函数开始,由内向外查找,假设外部存在同名的函数变量,则内部函数会屏蔽外部函数的变量。
2.提升变量作用域
function test() {
var x = 'x' + y;
console.log(x);
var y = 'y';
}
test();
//xundefined
说明JS执行引擎,自动提升了y的声明,但是不会提升y的赋值。
function test() {
var y;
var x = 'x' + y;
console.log(x);
y = 'y';
}
这个是在JS建立之初就存在的特性。养成规范:所有的变量定义都放在头部,不要乱放,便于代码维护。
3.全局函数
var x = 1;
function test() {
console.log(x);
}
test();
console.log(x);
//1
//1
全局变量window
var x = 'xxx';
alert(x);
alert(window.x)//默认所有的全局变量都会自动绑定在window下
alert()函数本身也是window的一个变量。
var x = 'xxx';
window.alert(x); //xxx
var old_alert = windpw.alert;
old_alert(x); //xxx
window.alert = function () {
};
window.alert(123); //发现alert()失效了
//恢复
window.alert = old_alert;
window.alert(456); //456
Javascript实际上只有一个全局作用域,任何变量(函数也可视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错RefrenceError。
规范
由于所有的全局变量都会绑定到window上,如果不同的js文件使用了相同的全局变量,就会发生冲突,如何减少冲突?
//唯一全局变量
var CherryApp = {};
//定义全局变量
CherryApp.name = 'cherry';
CherryApp.add = function (a,b) {
return a + b;
}
把自己的代码全部放在自己定义的唯一空间名字中,降低全局命名冲突的问题。
jQuery
4.局部作用域let
function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//101 i 出了这个作用域还可以使用
}
aaa();
ES6 let关键字解决局部作用域冲突问题。
function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError: i is not defined
}
aaa();
建议使用let定义局部作用域的变量。
5.常量const
在ES6之前,定义常量:只要是用全部大写字母命名的都是常量,建议不要修改。
var PI = '3.14';
console.log(PI);//3.14
PI = '213';
console.log(PI);//213
在ES6引入了常量关键字const:
const PI = '3.14';//只读变量
console.log(PI);
PI = '213';
console.log(PI);
//Uncaught TypeError: Assignment to constant variable.
4.3 方法
1.定义方法
方法就是把函数放在对象里面,对象只有两个东西:属性,方法
var cherry= {
name : 'cherry',
birth: 1997,
age : function () {
//今年-出生的年份
var now= new Date().getFullYear();
return now - this.birth;
}
}
//属性
cherry.name;
//方法,一定要带()
cherry.age();
function getAge() {
var now= new Date().getFullYear();
return now - this.birth;
}
var cherry= {
name : 'cherry',
birth: 1997,
age : getAge
}
cherry.age() //正确
getAge() //报错NAN
this是无法指向的,默认指向调用他的那个对象。
在JS中可以控制this的指向:apply
function getAge() {
var now= new Date().getFullYear();
return now - this.birth;
}
var cherry= {
name : 'cherry',
birth: 1997,
age : getAge
};
getAge.apply(cherry,[]);//this指向了kele对象,参数为空
5. 内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof NaN
"number"
typeof true
"boolean"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.1 Date
var now = new Date();//Tue Nov 10 2020 17:49:16 GMT+0800 (中国标准时间)
now.getFullYear()//年份
now.getMonth()//月份0-11
now.getDate()//日期
now.getDay()//星期几
now.getHours()//时
now.getMinutes()//分
now.getSeconds()//秒
now.getTime()//时间戳 1970年1月1号0:00到现在的毫秒数
console.log(new Date(1605002232224));//时间戳转时间
转换
now = new Date(1605002232224)
Tue Nov 10 2020 17:57:12 GMT+0800 (中国标准时间)
now.toLocaleString //注意:这是一个方法,不是属性
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2020/11/10 下午5:57:12"
now.toGMTString()
"Tue, 10 Nov 2020 09:57:12 GMT"
5.2 JSON对象
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
在JS中,一切皆为对象,任何JS支持的类型都可以用JSON来表示。
格式:
- 对象都用 {}
- 数组都用 []
- 所有的键值对都是用 key:value
JSON和JS对象的转化:
var user = {
name : "cherry",
age : 3,
sex : "男"
}
//对象转化为JSON字符串{"name":"cherry","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);
//JSON字符串转化为对象,参数为JSON字符串
var obj = JSON.parse(jsonUser);
JSON和JS区别
var obj = {a:"hello", b:"hellob"};
var json = '{"a": "hello", "b":"hellob"}'
6. 面向对象编程
6.1 什么是面向对象
1.原型对象
javascript,java, c# ----- 面向对象;但是javaScript有些区别!
- 类:模板、原型对象
- 对象:具体的实例原型对象
在javascript中, 需要转变一下思维:
var Student= {
name : 'qinjiang',
age:3,
run: function (){
console.log(this.name + "run ... ");
}
}
var xiaoming = {
name : 'xiaoming'
};
// 小明的原型是Student,类似于java的继承
xiaoming.__proto__ = Student;
var Bird = {
fly: function () {
console.log(this.name + "run ... ");
}
};
// 小明的原型是Bird
xiaoming.__proto__ = Bird;
2.class继承
class关键字是在ES6引入的
// 相当于在javaScript实现了java的继承机制
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
class Pupil extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小学生');
}
}
原型链:
原型和原型链详解
7. 操作BOM对象(重点)
浏览器介绍
javaScript和浏览器关系?
BOM:浏览器对象模型 // 相当于可以使用 javascript来操作浏览器
- IE6~11
- Chrome
- FireFox
- Safari
三方
- QQ浏览器
- 360浏览器
1.window对象
window代表浏览器窗口,可以获得一些浏览器的属性。
window.innerHeight
258
window.innerWidth
919
window.outerHeight
994
window.outerWidth
919
2.Navigator对象
大多数时候不使用navigaor对象,会被人为修改,不建议用来判断和编写代码。
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"
navigator.platform
"Win32"
3.screen对象
表示屏幕尺寸
screen.width
1920
screen.height
1080
4.location对象
location代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/?tn=44048691_1_oem_dg"
protocol: "https:"
reload: ƒ reload() //刷新网页
location.assign('https://www.bilibili.com/') //设置新的地址
5.document对象
document代表当前的页面,HTML DOM文档树
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
"_uuid=4F6CAC1A-0F26-7A5B-16F1-7BB0A31B5CE458148infoc; buvid3=13F5B818-DD17-48F0-82C6-5B8A44001376184988infoc; rpdid=|(Jlklul|k~)0J'uYullR)u)Y; buvid_fp=13F5B818-DD17-48F0-82C6-5B8A44001376184988infoc; CURRENT_QUALITY=80; i-wanna-go-back=1; video_page_version=v_old_home; fingerprint=c981cfdd703d6289450699aeb567c1c9; buvid_fp_plain=13F5B818-DD17-48F0-82C6-5B8A44001376184988infoc; bili_jct=3b4390a6d…"
6.history对象
代表游览器的历史记录
history.back() // 后退
history.forward() // 前进
8.操作DOM对象
DOM:文档对象模型
核心:
游览器网页就是一个Dom树形结构!
● 更新: 更新Dom节点
● 遍历Dom节点 : 得到Dom节点
● 删除: 删除一个Dom节点
● 添加: 添加一个新的节点
要操作一个Dom节点,就必须先获得这个Dom节点
1.获得节点:
<div id ="father">
<h1>标题一</h1>
<p id = "p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1= document.getElementsById('p1');
var p2= document.getElementsByClassName('p2');
var father = document.getElementsById('father');
var childrens = father.children;//获取父节点下的所有子节点
//father.firstChild
//father.lastChild
</script>
这是原生代码,之后都是使用jQurey。
2.更新节点
var id1 = document.getElementById('id1');
// 操作文本
id1.innerText ="456"; // 修改文本的值
id1.innerHTML = '<strong>123</strong>' // 可以解析html文本标签
//操作css
id1.style.color = 'yellow';
id1.style.fontSize = '20px';
id1.style.padding = '2em';
3.删除节点
步骤:先获取父节点,再通过父节点删除自己 。
<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.parentElement;
father.removeChild(self);
//删除是一个动态过程
// 注意删除多个节点时 childrem是在时刻变化的 删除节点时一定要注意
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
</script>
4.插入节点
<p id="js">Javascript</p>
<div id="list">
<p id="se">JavaSE</pid>
<p id="ee">JavaEE</pid>
<p id="me">JavaME</pid>
</div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list')
list.append(js); //追加
</script>
创建一个新的标签,实现插入
<script>
var js = document.getElementById('js');
var list = document.getElementById('list')
//通过JS创建一个新的节点
var newP = document.creatElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello,world';
list.append(newP); //追加
</script>
<script>
//创建一个标签节点
var myScript = document.creatElement('script');
myScript.setAttribute('type','text/javascript');
list.append(myScript);
</script>
<script>
//创建一个style标签
var myStyle = document.creatElement('style');//创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
document.getElementByTagName('head')[0].appendChild(myStyle);
</script>
插到前面
<script>
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>
<!--多选框的值就是定义好的value-->
<p>
<span>性别:</span>
<input type = "radio" name = "sex" value = "man" id = "boy"/>男
<input type = "radio" name = "sex" value = "woman" 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 = "value";
//对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
boy_radio.checked;//查看返回的结果,是否为true,如果为true,则被选中。
girl_radio.checked = true;//赋值
</script>
</body>
提交表单。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 aaa()">
<p>
<span>用户名:</span><input type="text" id = "username" name = "username"/>
</p>
<p>
<span>密码:</span><input type="password" id = "password" />
</p>
<input type = "hidden" id = "md5-password" name = "password">
<!--绑定事件 onclick 被点击-->
<button type = "submit">提交</button>
</form>
<script>
function aaa(){
alert(1);
var username = document.getElementById("username");
var pwd = document.getElementById("password");
var md5pwd = document.getElementById("md5-password");
//pwd.value = md5(pwd,value);
md5pwd.value = mad5(pwd.value);
//可以校验判断表单内容,true就是通过提交,false就是阻止提交
return false;
}
</script>
</body>
</html>
10. jQuery
1.初识jquery
jQuery是一个快速、简洁的JavaScript框架,封装了大量的JavaScript功能代码。
公式: $(selector).action()
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<a href="" id = "test-jquery">点我</a>
<script>
//选择器就是css选择器
$('#test-jquery').click(function(){
alert('hello,jQuery!');
});
</script>
</body>
</html>
2.jQuery选择器
//原生js,选择器少,麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();
//jQuery css中的选择器它全部都能用!
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器
文档工具站:https://jquery.cuishifeng.cn/nthLastChild.html
3.jQuery事件
鼠标事件、键盘事件…
mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.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>
4.操作DOM
节点文本操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
$('#test-ul li[name=python]').text(); //获得值
$('#test-ul li[name=python]').text('设置值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值
</script>
</body>
</html>
css的操作:
$('#test-ul li[name=python]').css("color","red"); //css操作
元素的显示和隐藏:本质是display:none
$('#test-ul li[name=python]').show()//显示
$('#test-ul li[name=python]').hide()//隐藏
未来Ajax():
$('#form').ajax()
$.ajax({url:"test.html",context:document.body,success:function(){
$(this).addClass("done");
}})
小技巧:
- 巩固JS(看jQuery源码,看游戏源码)
- 巩固html、css(把网站,下载对应修改看效果)