JavaScript

最新推荐文章于 2022-02-27 20:30:43 发布

一只野良猫w

最新推荐文章于 2022-02-27 20:30:43 发布

阅读量876

点赞数 2

分类专栏：狂神说Java学习文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_37933128/article/details/122115466

版权

狂神说Java学习专栏收录该内容

22 篇文章 6 订阅

订阅专栏

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（把网站，下载对应修改看效果）

一只野良猫w

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

1. 什么是JavaScript1.1 概述JavaScript是一门世界上最流行的脚本语言。JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。一个合格的后端人员，必须精通JavaScript。1.2 历史历史相关链接：https://www.w3
复制链接

扫一扫

专栏目录