Day44-JavaScript

JavaScript

行为层，弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

一个合格的后端人员，必须要精通JavaScript

ECMAScript理解为JavaScript的一个标准，最新版本已经到ES

大部分浏览器只停留在ES代码

参考：廖雪峰官方网站https://www.liaoxuefeng.com/

引入JavaScript

HTML的script标签

可以写在head标签内，或者body标签最后

script标签必须成对出现

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>First</title>
 6 ​
 7 <!--    script标签内，写JavaScript代码-->
 8     <script>
 9         alert('Hello World!')
10     </script>
11 <!--    外部引入-->
12     <script src="First.js"></script>
13 <!--    不用显示定义type，默认为JavaScript-->
14     <script type="text/javascript"></script>
15 ​
16 </head>
17 <body>
18 ​
19 </body>
20 </html>

 

浏览器 打开开发者工具选项

element可用于编辑代码

console框可以实现后台控制台操作（类似于cmd或者Java的控制台输出），console.log（）输出类似于Java的System.out.println（）

source框点击行号设置断点进行debug调试

network可用于抓包

基本语法

以ES6+为标准，严格区分大小写

定义变量

变量类型只有三种

var全局变量 let局部变量 construction常量

变量名不能用数字、#开头

条件控制

if（）{}，else if，可以嵌套

数据类型简述

数值、文本、图形、音频、视频

number 不区分小数和整数

123//整数
123.1//浮点数
1.23e4//科学计数法
-99//负数
NaN//not a number
Infinity//无限大

字符串

‘abc’ “abc”

‘\n’

布尔值

true false

逻辑运算

&&、||、！

比较运算符（重要）

=赋值

==等于（类型不一样，值一样，也会判断为true）

===绝对等于（类型一样，值一样，结果为true）

==是JS的一个缺陷，坚决不要使用==进行比较

须知：

  • NaN===NaN，这个与所有的数值都不相等，包括自己，结果为false

  • 只能通过isNaN（NaN）判断这个数是否是NaN

  • 浮点数问题：console.log（（1/3）===(1-2/3)） 结果为false

    尽量避免使用浮点数进行运算，存在精度问题

    Math.abs（1/3-(1-2/3)）<0.000000001 结果为true

null和undefined

空和未定义

数组

一些对象、变量的集合，对类型没有要求

保证代码的可读性，尽量数组使用[]，对象使用{}

var arr=[1,2,3,4,5,'hello',null,true]

 

从0开始，如果越界了，就会打印出undefined

对象

每个属性之间使用逗号隔开，最后一个不需要添加

var person={
    name:"xxx",
    age:100;
    tags:['js','java','web','...']
}

 

取对象的值

对象.属性

严格检查模式

‘use strict’设置必须写在开头第一行，预防随意性导致产生的一些问题

前提是IDEA选择ES6语法

局部变量建议都使用let定义

数据类型详解

字符串

  1. 正常字符串使用单引号或者双引号包裹

  2. 注意转义字符\

    \n 换行

    \t 制表符

    \'

    \u42d Unicode字符：中

    \x41 Ascll字符

  3. 多行字符串编写，使用``

//tab键上边esc键下边 反引号
var msg = `
hello
world
你好
Java`

 

4. 模板字符串
let name = "xxx";
let age = 100;
let msg = `你好呀，${name}`

 

  1. 字符串长度，且可以取字符串的某个元素

    str.length str[i]

    1. 字符串的可变性：不可变，无法单独对某个位置进行重新赋值

    2. 大小写转换 方法

    .toUpperCase（）

    .toLowerCase（）

    1. 获取某元素在数组中的下标.indexOf（’？‘）

    2. 截取第a个（包含）到第b个（不包含）之间的元素.substring（a，b）

数组

Array可以包含任意的数据类型，存取数据

  1. 长度 .arr.length

注意：假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失，多出的部分用undefined赋值

  1. indexOf（） 通过元素获得下标索引

    字符串的“1"和数字1不同

    1. .slice（）截取Array的一部分，返回一个新数组，类似于字符串的substring

    2. .push （’xxx‘）压入到尾部，类似于栈

    .pop （）1弹出尾部的一个元素

    1. .unshift（）压入到头部

    .shift（） 弹出头部的一个元素

    1. .sort（）排序，默认从低到高

    2. .reverse（）元素反转，元素对调

    3. .concat（）合并数组

    注意：concat（）并没有对原数组进行修改，只是会返回一个新的数组

    1. .join（）连接符

    打印拼接数组，使用特定的字符串连接

    1. 多维数组arr [i] [j]

对象

若干个键值对

var 对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}

 

JS中对象，{……}表示一个对象，键值对描述属性xxxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号

JS中所有的键都是字符串，值是任意对象

  1. 对象赋值：对象.属性名

  2. 使用一个不存在的对象属性，不会报错！undefined

  3. 动态的删减属性，通过delete删除对象的属性

    delete 对象.属性，返回布尔值

    返回 true（原对象有此属性）

  4. 动态的添加，直接给新的属性添加值即可

  5. 判断属性值是否在这个对象中：'属性值' in 对象 返回布尔值

  6. 判断一个属性是否是这个对象自身拥有的hasOwnProperty（‘属性值’），返回布尔值

流程控制

if判断、while循环、for循环与Java的相同

数组循环 数组.forEach（function （value）{含value语句}）、for in循环

 1 var age = [1,2,3,4,5,6,7,8]
 2 
 3 for (let i = 0; i < 8; i++) {
 4     console.log(age[i])
 5 }
 6 
 7 age.forEach(function (value){//函数
 8     console.log(value)
 9 })
10 
11 //Java:for(Type str:element)
12 //JavaScript:for(var index in object)
13 for(let index in age){//num为下标索引index
14     console.log(age[index])//不建议使用，新增下标后会引起混乱
15 }
16 
17 for(let element of age){//element为数组元素
18     console.log(element)
19 }

 

Map和Set

Map类似于字典

Set：无序不重复的集合

 1 var names = ["Tom","Jack","Mike"];
 2 var scores = [100,90,80];
 3 
 4 var map = new map([['Tom',100],['Jack',90],['Mike',80]]);
 5 var name = map.get('Tom');//通过key获得value
 6 map.set('admin',123456)//新增或修改
 7 map.delete("Tom");//删除
 8 
 9 var set = new Set([3,1,1,1,1,1]);//set可以去重
10 set.add(2);//增加
11 set.delete(1);
12 console.log(set.has(3));//返回true，检查是否有该元素

 

函数

方法：对象（属性、方法）

函数单独在外，与对象引用方法不同

定义函数

一旦执行到return代表函数结束，返回结果

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式一：匿名函数

function abs(x){//绝对值函数
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

 

定义方式二：把结果赋值进行调用

var abs = function (x){//绝对值函数
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

 

方式一和方式二等价

调用函数直接abs（num）

参数问题：JavaScript可以传人一个或多个参数，也可以不传递参数，没有限制，所以需要规避异常

可以手动抛出异常

arguments是JS的一个关键字，代表传递进来的所有参数（输入），是一个数组

如果只使用多余的参数进行附加操作，需要排除已有参数

es6新特性：rest

获取除了已经定义的参数之外的所有参数

function aaa(a,b,...rest){
    //方法体
    console.log(rest);
}

 

rest参数只能写在最后面，必须用...标识

变量的作用域

在JavaScript中，var定义变量实际是有作用域的。假设在函数体中声明，则在函数体外不可以使用。（非要想使用，必须用“闭包”）

如果两个函数使用了相同的变量名，只要在函数内部，就不会冲突

内部函数可以访问外部函数的成员，反之则不行

就近原则

假设，内部函数变量和外部函数的变量重名，函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

提升变量的作用域

function a(){
    //var y;//等价于多了一个声明
    var x = "x" + y;
    console.log(x);
    var y = "y";
}

 

结果：xundefined

说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

养成规范：所有变量的定义都放在函数头部，便于代码的维护。

全局函数

全局对象window

默认所有的全局变量，都会自动绑定在window对象下

var x = 'xxx';
alert(x);
alert(window.x);

 

alert（）这个函数本身也是一个window变量

var x = 'xxx';
window.alert(x);
var old_alert = window.alert();
window.alert = function (){
    //类似于重写方法
}
window.alert(123);//此时alert失效了
//恢复
window.alert = old_alert;
window.alert(456);//成功

 

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查号，如果在全局作用域都没有找到，报错RefrenceError

规范：

由于所有的全局变量都会绑定到window上。如果不同的JavaScript文件，使用了相同的全局变量，会产生冲突。

减少冲突的方法：增加唯一全局变量

//唯一全局变量
var XXX = {}；

//定义全局变量
XXX.name = 'xxx';
XXX.add = function (a,b){
    return a + b;
}

 

把自己的代码全部放入自己定义的唯一空间名字中，解决全局命名冲突的问题

未来将要用到JQuery中

局部作用域 let

解决局部作用域冲突问题

在函数、for循环等中定义局部变量用let

常量

在ES6之前，只有用全部大写字母命名的变量就是常量，建议不修改这些变量的值

在ES6之后，引入常量关键字 const

const PI = '3.14';

 

方法

方法就是把函数放在对象里边。对象只有两个东西，属性和方法

var Person = {
    name:'xxx',
    birth:2000,
    //方法
    age:function (){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
//访问属性
Person.name;
//调用方法
Person.age();

 

若将方法和对象分离

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;//此时this指向的是window
}
var Person = {
    name:'xxx',
    birth:2000,
    //方法
    age:getAge()
}
//访问属性
Person.name;
//调用方法
getAge();//输出为NaN，因为无window.birth的值

 

this是无法指向的，是默认指向调用它的那个对象

apply

在JavaScript中可以控制this指向

内部对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

 

 

Date

 1 var now =new Date();
 2 now.getFullYear();//年
 3 now.getMonth();//月
 4 now.getDate();//日
 5 now.getDay();//星期几？
 6 now.getHours();//时
 7 now.getMinutes();//分
 8 now.getSeconds();//秒
 9 
10 now.getTime();//时间戳，全世界统一
11 
12 console.log(new Date(now.getTime()));//时间戳转换为时间
13 console.log(new Date(now.getTime()).toLocaleString());//转换为字符串
14 console.log(new Date(now.getTime()).toGMTString());//转换为GMT时间

 

JSON

早起，所有数据传输习惯使用xml文件

轻量级的数据交换格式

简洁和清晰的层次结构使得JSON称为理想的数据交换语言

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

在JavaScript中一切皆为对象，任何JavaScript支持的类型都可以用JSON来表示

格式：

  • 对象都用{}

  • 数组都用[]

  • 所有的键值对都是用key：value

JSON和JS对象的转化

var user = {
    name: 'xxx',
    age: 10,
    sex: '男'
}
//对象转化为JSON字符串
// {"name":"xxx","age":10,"sex":"男"}
var JSONUser = JSON.stringify(user);
//JSON字符串转化为对象 参数为JSON字符串 
var obj = JSON.parse('{"name":"xxx","age":10,"sex":"男"}');

 

JSON和JS对象的区别

JSON是一种格式化的字符串，调用时需要使用‘ ’，对象是键值对形式

var obj = {a:'helloa',b:'hellob'};
var json = '{"a":"helloa","b":"hellob"}';

 

Ajax

原生的JavaScript写法：xhr异步请求

JQuery封装好的方法 $("#name").ajax("")

axios请求

面向对象编程

 1 var Person = {
 2     name: "xxx",
 3     age: 10,
 4     run: function (){
 5         console.log(this.name + " is running...");
 6     }
 7 };
 8 var xiaoming = {
 9     name: "xiaoming"
10 }
11 xiaoming.__proto__ = Person;//原型
12 var Bird = {
13     fly: function (){
14         console.log(this.name + " is flying...");
15     }
16 }
17 xiaoming.__proto__ = Bird;//原型可修改

 

class继承

class关键字，在ES6中引入

定义一个类、属性、方法

本质：追踪原型对象

 1 class Student{
 2     constructor(name) { //构造函数
 3         this.name = name;
 4     }
 5     hello(){        //类似void
 6         alert('Hello')
 7     }
 8 }
 9 var xiaoming = new Student("xiaoming");
10 
11 class Pupil extends Student{
12     constructor(name,grade) {
13         super(name);
14         this.grade = grade;
15     }
16     myGrade(){
17         alert('我是一个小学生')
18     }
19 }
20 var xiaohong = new Pupil("xiaohong");

 

操作BOM对象（重点）

Browser Object Model 浏览器对象模型

下列是一些常见对象：

window

代表浏览器窗口

window.alert()弹窗

window.interHeight内部高度

window.interWidth内部宽度

window.outerHeight外部高度

window.outerWidth外部高度

可以调整浏览器窗口大小

navigator

封装了浏览器的信息

navigator.appName

navigator.appVersion

navigator.userAgent

navigator.platform

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 Edg/89.0.774.75"
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 Edg/89.0.774.75"
navigator.platform
"Win32"

大多数时候不会使用此对象，因为会被人为修改

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width 1920 screen.height 1080

location（重要）

代表当前页面的URL 信息

ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()//跳转新的网址 
hash: ""
host: "www.baidu.com"//主机
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"//协议
reload: ƒ reload()//重新加载方法，刷新网页
replace: ƒ replace()
search: ""
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
__proto__: Location

document（内容，DOM）

代表当前的页面

document.title 页面标题

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>BOM对象</title>
 6 </head>
 7 <body>
 8 <dl id = "app">
 9     <dt>Java</dt>
10     <dd>Java SE</dd>
11     <dd>Java EE</dd>
12 </dl>
13 <script>
14     var dl = document.getElementById('app')//获取具体的文档节点
15 </script>
16 </body>
17 </html>

显示效果：

 

 

document.cookie

前端获取cookie，客户端的本地信息，信息将会发到服务器

不安全，可以被劫持

服务器端可以设置cookie保护：httpOnly

history（不建议使用）

代表浏览器的历史记录

history.back（）返回，后退

history.forward（）前进

操作DOM对象（重点）

Document Object Model 文档对象模型

浏览器网页就是一个DOM树形结构

  • 更新：更新DOM节点

  • 遍历DOM节点：得到DOM节点

  • 删除：删除一个DOM节点

  • 添加：添加一个新的节点

要操作一个DOM节点，就必须要先获得这个DOM节点

获得DOM节点

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>获得DOM节点</title>
 6 </head>
 7 <body>
 8 <div id="father">
 9     <h1>标题一</h1>
10     <p id="p1">p1</p>
11     <p class="p2">p2</p>
12 </div>
13 <script>
14     //分别对应css的选择器id、class
15     var h1 = document.getElementsByTagName('h1');
16     var p1 = document.getElementById('p1');
17     var p2 = document.getElementsByClassName('p2');
18     //除了id唯一固定以外，其余get方法都是返回一个只有一个元素的数组集合（HTMLCollection），有效部分只有第一个元素[0]，读取时要带h1[0]和p2[0]，不能是h1、p2
19     var father = document.getElementById('father');
20     var children = father.children;//获取父节点下的所有子节点
21     //father.firstchild获取第一个节点
22     //farher.lastchild获取最后一个节点
23 </script>
24 </body>
25 </html>

 

调试：

 

 

 

 

 

更新DOM节点

创建id1节点后可以对id1节点进行更新

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>更新DOM节点</title>
 6 </head>
 7 <body>
 8 <div id="id1">id1</div>
 9 <script>
10     var id1 = document.getElementById('id1');
11 </script>
12 </body>
13 </html>

 

操作文本

修改文本的值：id1.innerText='123'

解析HTML文本标签：

id1.innerHTML='<strong>456</strong>'

操作JS，调用时起名带下划线的要转换为驼峰命名

id1.style.color = 'yellow';

id1.style.fontsize = '20px';

id1.style.padding = '2em';

可以通过抓取，修改网页上的任意元素

删除DOM节点

先获取父节点，在通过父节点的child删除自己

var father = child.parentElement;

father.removeChild（child）

合并：father.removechild(father.children)

注意：删除是一个动态的过程（类似堆栈），删除多个节点时children[i]的i是时刻变化的

插入DOM节点

获得某个节点，假如这个DOM节点为空，可以通过innerHTML增加元素

如果已经存在元素，则会覆盖

需要进行追加操作list.appendChild()追加到后面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>插入DOM节点</title>
 6 </head>
 7 <body>
 8 <p id="js">JavaScript</p>
 9 <div id="list">
10     <p id="se">Java SE</p>
11     <p id="ee">Java EE</p>
12     <p id="me">Java ME</p>
13 </div>
14 <script>
15     //已经创造的节点
16     var js = document.getElementById('js');
17     var list = document.getElementById('list');
18 </script>
19 </body>
20 </html>

 

实现效果：

 

 

或创建一个新的标签createElement，实现插入

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>插入DOM节点</title>
 6 </head>
 7 <body>
 8 <p id="js">JavaScript</p>
 9 <div id="list">
10     <p id="se">Java SE</p>
11     <p id="ee">Java EE</p>
12     <p id="me">Java ME</p>
13 </div>
14 <script>
15     //创建一个新的节点
16     var newP = document.createElement('p');//创建一个p标签
17 
18     newP.id = 'newP';//规定id
19     //等价标准写法
20     newP.setAttribute('id','newP');//设置键值对id：newP
21 
22     newP.innerText = 'Hello';//修改文本
23     list.append(newP);//追加到后边
24 
25     //除了id唯一固定以外，其余get方法都是返回一个只有一个元素的数组集合（HTMLCollection）
26     //有效部分只有第一个元素[0]，读取时要带body[0]，不能是body
27     var body = document.getElementsByTagName('body');
28     body[0].style.background = '#e4e847';
29 </script>
30 </body>
31 </html>

 

或使用insertBefore方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>插入DOM节点</title>
 6 </head>
 7 <body>
 8 <p id="js">JavaScript</p>
 9 <div id="list">
10     <p id="se">Java SE</p>
11     <p id="ee">Java EE</p>
12     <p id="me">Java ME</p>
13 </div>
14 <script>
15     var ee = document.getElementById('ee');
16     var js = document.getElementById('js');
17     var list = document.getElementById('list');
18     //insertBefore（newNode，targetNode）在targetNode前边插入newNode
19     list.insertBefore(js,ee);
20 </script>
21 </body>
22 </html>

 

后续可使用JQuery简化替代

操作表单（验证）

form 是一个DOM树

  • 文本框 text

  • 下拉框 < select >

  • 单选框 radio

  • 多选框 checkbox

  • 隐藏域 hidden

  • 密码框 password

  • ……

表单的目的：提交信息

获得要提交的信息

.value

对于单选框、多选框等等固定的值，value只能取到当前的值

需要.checked查看返回的结果（是否被选中）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>操作表单</title>
 6 </head>
 7 <body>
 8 <form action="post">
 9     <span>用户名：</span><input type="text" id="username" required>
10     <span>性别：</span>
11     <input type="radio" name="sex" value="man" id="boy">男
12     <input type="radio" name="sex" value="woman" id="girl">女
13 </form>
14 <script>
15     var input_text = document.getElementById('username');
16     //得到输入框的值input_text.value，可以直接赋值修改input_text.value = '123'
17     var input_boy = document.getElementById('username');
18     var input_girl = document.getElementById('username');
19     //对于单选框、多选框等等固定的值，value只能取到当前的值
20     //需要使用checked查看返回的结果是否为true
21 </script>
22 </body>
23 </html>

 

提交表单

https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js 密码加密：MD5函数下载

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>提交表单</title>
 6 <!--    导入MD5工具类-->
 7     <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
 8 </head>
 9 <body>
10 <!--onsubmit榜单绑定提交时间，绑定一个提交检测的函数，判断返回的true和false，函数将这个结果返回给表单，使用onsubmit接收-->
11 <form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
12     <p>
13         <span>用户名：</span><input type="text" id="username" name="username">
14     </p>
15     <p>
16         <span>密码：</span><input type="password" id="password" name="input-password">
17     </p>
18 <!--    隐藏md5密码（替换了原密码，出现了一长串）-->
19     <input type="hidden" id="md5-password" name="password">
20     <button type="submit">提交</button>
21 <!--    或用onclick被点击绑定事件aaa（不用onsubmit时）-->
22 <!--    <button type="submit" onclick="aaa()">提交</button>-->
23 <!--    <input type="submit" onclick="aaa()">-->
24     <!--    也可以使用submit替代-->
25 </form>
26 <script>
27     function aaa(){
28         var uname = document.getElementById('username');
29         var pwd = document.getElementById('password');
30         var md5pwd = document.getElementById('md5-password');
31         //console.log(uname.value);
32         //可使用MD5算法加密
33         // pwd.value=md5(pwd);
34         md5pwd.value = md5(pwd.value);
35         //console.log(pwd.value);
36         //可以加设if校验等判断表单内容，true就是通过提交，false阻止提交
37         return true;
38     }
39 </script>
40 </body>
41 </html>

 

输入密码111，自动跳转到百度界面，此时密码已经完成加密

 

 

JQuery

是一个库，里边存在大量的JavaScript函数

获取

API速查，工具站：https://jquery.cuishifeng.cn/

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>初识JQuery</title>
 6     <script src="lib/jquery-3.6.0.js"></script>
 7 <!--    CDN引入-->
 8 <!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
 9 </head>
10 <body>
11 <!--公式：
12 $(selector).action()
13 -->
14 <a href="" id="test-jquery">点击</a>
15 <script>
16     //selector选择器就是CSS里的选择器，可以直接放‘#+id’
17     $('#test-jquery').click(function (){
18         alert('Hello,JQuery');
19     })//实现部分function要写在括号里边
20 </script>
21 </body>
22 </html>

 

选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>选择器</title>
 6 </head>
 7 <body>
 8 <script>
 9     //标签
10     document.getElementsByTagName();
11     //id
12     document.getElementById();
13     //类
14     document.getElementsByClassName();
15 ​
16     //JQuery
17     $('p').click();//标签选择器
18     $('#id').click();//id选择器
19     $('.class').click();//class选择器
20 ​
21 </script>
22 </body>
23 </html>

 

事件

鼠标事件.mouse

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件</title>
 6     <script src="lib/jquery-3.6.0.js"></script>
 7     <style>
 8         #divMove{
 9             width: 500px;
10             height: 500px;
11             border: 1px solid red;
12         }
13     </style>
14 </head>
15 <body>
16 <!--要求：获取鼠标当前的一个坐标-->
17 mouse:  <span id="mouseMove"></span>
18 <div id="divMove">
19     在这里移动鼠标试试
20 </div>
21 <script>
22     //当网页元素加载完毕之后，响应事件
23     $(function(){
24        $('#divMove').mousemove(function (e){
25            $('#mouseMove').text('x:'+e.pageX + ' y:'+e.pageY)
26        })
27     });
28 </script>
29 </body>
30 </html>

 

显示效果：

 

 

键盘事件……

其他事件……

操作DOM元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>操作DOM元素</title>
 6 </head>
 7 <body>
 8 <ul id="test-ul">
 9     <li class="js">JavaScript</li>
10     <li name="python">CSS</li>
11 </ul>
12 <script>
13     //节点的文本操作
14     $('#test-ul li[name=python]').text()//获得值
15     $('#test-ul li[name=python]').text('设置值')//设置值
16     $('#test-ul').html();//获得值
17     $('#test-ul').html('设置值，可输入标签');//设置值
18     //CSS的操作
19     $('#test-ul li[name=python]').css("color","red");//CSS为输入键值对
20     //元素的显示和隐藏：本质是修改display属性的none为隐藏
21     $('#test-ul li[name=python]').show();
22     $('#test-ul li[name=python]').hide();
23     //窗口的大小
24     $(window).width();
25     $(window).height();
26     $(window).toggle();//来回切换
27 </script>
28 </body>
29 </html>

 

未来学ajax（）

可以去查看一些小游戏的源码巩固学习

小技巧

  1. 巩固JavaScript（看JQuery源码，看游戏源码）

  2. 巩固HTML、CSS（扒网站，全部下载下来后，对应修改查看变化效果）

优秀模板：

Element

Layui

Ant Design

posted on 2021-04-14 23:48  zrm0612  阅读(29)  评论(0)    收藏  举报