JavaScript

1. 什么是JavaScript

一门世界上最流行的脚本语言

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

2. 快速入门

2.1 引入JavaScript

内部标签

<script>
    alert('hello world');
</script>

外部引入
```
<script src="js/hjq.js"></script>
```

测试的代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  script标签内写JavaScript代码  -->
    <script>
        alert('hello world');
    </script>

    <script src="js/hjq.js"></script>

</head>
<body>


<!-- 这里也可以写 -->
</body>
</html>

2.2 基本语法入门

变量、条件控制

<!--  JavaScript严格区分大小写  -->
<script>
    // 1. 定义变量
    var score = 71;

    // 2. 条件控制
    if(score >= 60 && score < 70){
        alert("及格");
    }else if(score >= 70 && score < 80){
        alert("良好");
    }else{
        alert("other");
    }

    //console.log(score)  在浏览器的控制台打印变量  sout


</script>

附：浏览器必备调试须知：

调试：点开浏览器审查元素、点开Source、双击点开代码文件、点击断点、刷新网页、进入了调试，可以点击运行下一步或者直接运行完。

2.3 数据类型

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

number

js不区分小数和整数，Number

123 //整数
123.1  //浮点数
1.123e3  //科学计数法
-99  //负数
NaN  //not a number
Infinity  //表示无穷大

字符串

'abc' "abc"

转义字符与Java一致
布尔值

true、false
逻辑运算
```
&&

||

!
```

比较运算符（重要）

=

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

=== 绝对等于（类型一样，值一样）

js缺陷，坚持不要使用 == 比较

须知：

NaN与所有的数值都不相等，包括自己
只能通过isNaN（）来判断这个数是否是NaN

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

console.log((1/3) === (1 - 2/3));  //false

//可以用这种方式判断是否相等
Math.abs(1/3 - (1 - 2/3)) < 0.000001

null和undefined

null：空

undefined：未定义

数组

js中数组元素不需要同类型

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true];
new Array(1,12,3,4,'hello');

取数组下标，越界了就会： undefined

对象

对象是大括号，数组是中括号

//定义对象
var person = {
    name: "hjq",
    age: 20,
    tags: ['js','java','web','...']
}

//取值
person.name
>"hjq"
person.age
>20

2.4 严格检查格式

前提：IDEA需要设置支持ES6的语法

'use strict'：严格检查模式，预防JavaScript的随意性导致产生的一些问题

必须写在JavaScript的第一行

局部变量建议用let去定义

<script>
	'use strict';
    let i = 1;
</script>

3. 数据类型

3.1 字符串

正常字符用'' 或者 ""包裹

转义字符\

\'
\n
\t
\u4e2d    \u####    Unicode字符
\x41	Ascll字符

多行字符串编写

//反引号``编写多行字符串
var msg=
    `hello
world
你好ya
你好`

模板字符串

let name = "hjq";
let age = 20;
let msg = '你好呀，${name}'

字符串长度
```
str.length	//这是属性，不加()
```
字符串的可变性

不可变

大小写转换

student.toUpperCase()	//这个是方法，要加()
student.toLowerCase()

字符位序
```
student.indexOf('t')
```

字符截取——substring

student.substring(1)	//第一个字符截取到最后一个字符
student.substring(1,3)	//[)->包含第1个不包含第3个

3.2 数组

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

var arr = [1,2,3,4,5,6]	//通过下标取值和赋值
arr[0]
arr[0] = 1

长度
```
arr.length
```
注意：假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
indexOf，通过元素获得下标索引
```
var arr = [0,2,3,4,5]

arr.indexOf(2)
>1
```
注意：字符串的“1”和数字1是不同的
slice() 截取Array的一部分，返回一个新数组，类似于String中的substring

push() , pop()

push：压入到尾部
pop：弹出尾部的一个元素

unshift() , shift()

unshift()：压入到头部
shift()：弹出头部的一个元素

排序sort()

['B','C','A']
arr.sort();
['A','B','C']

元素反转

arr = ['A','B','C']
(3) ["A", "B", "C"]
arr.reverse()
(3) ["C", "B", "A"]

concat()

(3) ["C", "B", "A"]
arr.concat([1,2,3])
(6) ["C", "B", "A", 1, 2, 3]

连接符join

打印拼接数组，使用特定的字符串连接
```
(3) ["C", "B", "A"]
arr.join('-')
"C-B-A"
```

多维数组

arr = [[1,2],[3,4],["5","6"]]
arr[1][1]
4

数组：存储数据（如何存，如何取，方法都可以自己写出来实现！）

3.3 对象

若干个键值对

var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}

var person = {
    name: "hjq",
    age: 20,
    tags: ['js','java','web','...']
}

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

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

对象赋值

person.name
"hjq"
person.name = "hhh"
"hhh"
person.name
"hhh"

使用一个不存在的对象属性，不会报错！undefined
```
person.fff
undefined
```
动态的删减属性
```
delete person.name
```
动态的添加
```
person.haha = "haha"
"haha"
```

判断属性值是否在这个对象中！

'age' in person
true

//这个方法不是我们定义的，这是继承自父类对象的
'toString' in person
true

判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty('toString')
false

person.hasOwnProperty('age')
true

3.4 Map和Set

这是ES6的新特性

Map:

let map = new Map([['Tom',100],['Jerry',98],['Lucy',99]]);
let name = map.get('Tom');
console.log(name);
map.set('admin',99.5);  //新增或者修改
console.log(map);
map.delete("Tom");    //删除

Set：无序不重复的集合

var set = new Set([3,1,1,1,])  //set可以去重
set.add(2);
set.delete(1);
console.log(set.has(3));

3.5 iterator

遍历数组

//for of的值是具体的数组元素
//for in的值是数组下标
var arr = [3,4,5];
for(let x of arr){
   console.log(x);
}

遍历map

let map = new Map([['Tom',100],['Jerry',98],['Lucy',99]]);
for(let x of map){
    console.log(x);
}

遍历set

var set = new Set([5,6,7]);
for(let x of set){
    console.log(x);
}

4. 流程控制

4.1if判断

var age = 3;
if(age > 3){
    ...
}else if(...){
    ...
}else{
    ...
}

4.2while循环

var age = 3;
while(age <= 100){
    age++;
    console.log(age);
}

do{
    age++;
    console.log(age);
}while(age <= 100)

4.3for循环

for(let i=0; i<= 100 ; i++){
    console.log()
}

4.4 forEach循环

5.1新特性

var age = [1,2,3,4,5,6];

age.forEach(function (value){
    console.log(value);
})

5. 函数

5.1 定义函数

js很重要的一个特性就是，函数对js来说，还是一个变量，所以会有方式二这种定义函数的方式，js仿佛是一个很随意的语言。

定义方式一

绝对值函数

//后端的人喜欢
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是一个js免费赠送的关键字

代表传递进来的所有的参数，是一个数组

var abs = function(x){
    console.log("x->"+x);
    
    for(let i = 0 ; i < arguments.length ; i++){
        console.log(arguments[i]);
    }
}

rest

ES6引入的新特性：获取除了已经定义的参数之外的参数

//以前
if(arguments.length>2){
    for(var i = 2; i < arguments.length;i++){
       ... 
    }
}
    
//用rest
function aaa(a,b,...rest){
    console.log(a);
    console.log(b);
    console.log(rest);
}

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

5.2 变量的作用域

与Java和C一样，

内部可以用外部变量，因为内部属于外部的覆盖范围，

外部不可以用内，因为外部不属于内部的覆盖范围。

以及，强龙不压地头蛇，内部和外部存在同名变量时，在内部调用的是内部的变量。

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

提升变量的作用域

js执行引擎是自动在执行语句前，先声明了包含的变量，既：

function hello(){
    //如下，虽然y是在第三行声明并赋值，
    //但是js引擎在一开始就声明了x和y，只是都还没有赋值，所以输出的是xundefined
    //js自动：var x,y;
    
    var x = 1;
    console.log(x+y);
    var y = 2;
    
    //输出xundefined
}

这个是在JavaScript建立之初就存在的特性。

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

全局函数

//全局变量
x = 1;

function f(){
    console.log(x);
}
f();
console.log(x);

全局对象window

var x = 'xxx';
alert(x);
alert(window.x);  //默认的全局变量，都会自动绑定在window对象下

alert()这个函数本身也是一个window变量；

var x = 'xxx';

window.alert(x);

var old_alert = window.alert;

window.alect = function(){
    
};
//发现alert()失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

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

规范：由于所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突->如何能减少冲突？

//唯一全局变量
var HeApp = {};

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

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

局部作用域let

function aaa(){
    for (var i = 0; i < 100; i++){
        console.log(i);
    }
    console.log(i+1);  //惊讶的发现，i出了这个作用域居然还可以使用
}

ES6引入let关键字，解决局部作用域冲突问题

function aaa(){
    for (var i = 0; i < 100; i++){
        console.log(i);
    }
    console.log(i+1);  //Uncaught ReferenceError: i is not defined
}

建议大家都是用let去定义局部作用域的变量；

常量 const

在ES6之前，大家只是约定俗成的把，全部字母由大写字母组成的变量，当作常量，但这个只是一种约定，它还是可以被修改，所以就不安全，不建议使用

var PI = '3.14';
console.log(PI);
//修改PI
PI = '200';
console.log(PI);
//最后发现PI是可以被修改的

在ES6中引入了常量关键字’const‘

const PI = '3.14';
//这个常量不允许被修改，会直接爆红
PI = '200';

5.3 方法

定义方法

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

var hjq = {
    name : 'HeJunQiang',
    birth : 1999,
    age : function (){
        var thisYear = new Date().getFullYear();
        return thisYear - this.birth;
    }
}

//调用属性
hjq.name
//调用方法,一定要带()
hjq.age()

拆开上面的代码

function getAge(){
    var thisYear = new Date().getFullYear();
        return thisYear - this.birth;
}

var hjq = {
    name : 'HeJunQiang',
    birth : 1999,
    age : getAge
}

//hjq.age()  可以
//getAge()  不可以，返回NaN，因为直接调用这个方法的是window对象，而window没有birth这个属性

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

apply

function getAge(){
    var thisYear = new Date().getFullYear();
        return thisYear - this.birth;
}

var hjq = {
    name : 'HeJunQiang',
    birth : 1999,
    age : getAge
}

getAge.apply(hjq,[]);  //this指向了hjq，参数为空

//以后执行命令getAge.apply(hjq,[])也可以得到age

6. 内部对象

标准对象

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

6.1 Date

基本使用

var now = new Date();  //Mon Apr 05 2021 10:46:29 GMT+0800 (中国标准时间)
now.getFullYear();
now.getMonth();
now.getDate();  //日期
now.getDay();  //星期几
now.getHours();
now.getMinutes();
now.getMinutes();

now.getTime();  //时间戳 全世界统一 从1970/1/1/0：00 到现在的毫秒数

console.log(new Date(1617590789933));  //时间戳转为时间

转换

now.toLocaleString()  //注意，调用是一个方法，不是一个属性！
now.toGMTString()

6.2 JSON

json是什么

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

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

格式：

对象都用{}
数组都用[]
所有的键值对都是用key:value

JSON字符串和JS对象的转化

var user = {
    name: "hjq",
    age: 19,
    sex: '男'
}

//对象转化为json字符串
var jsonUser = JSON.stringify(user);

//json字符串转化为对象，参数为json字符串
var obj = JSON.parse('{"name":"hjq","age":19,"sex":"男"}');

JSON字符串和JS对象的区别

var obj = {name: "hjq", age: 19, sex: "男"}
var json = {"name":"hjq","age":19,"sex":"男"}

6.3 Ajax

原生的js写法 xhr 异步请求
jQuery封装好的方法 $("#name").ajax("")
axios 请求

7. 面向对象编程

7.1 原型对象

var Student = {
    name: "hjq",
    age: 19,
    run: function (){
        console.log(this.name + " run......")
    }
};

var xiaoming = {
    name: "xiaoming"
};

//原型对象
xiaoming.__proto__ = Student;

function Student(name){
    this.name = name;
}

//给student新增一个方法
Student.prototype.hello = function(){
    alert('Hello')
}

7.2 class继承

class关键字，是在ES6引入的

定义一个类，包括属性、方法

class Student{
    constructor(name) {
        this.name = name;
    }

    hello(){
        alert('hello')
    }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello();

继承

class Student{
    constructor(name) {
        this.name = name;
    }

    hello(){
        alert('hello')
    }
}

class XiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }

    myGrade(){
        alert('我是一名小学生');
    }
}

var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",100);

7.3 原型链

在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。

原型链

8. 操作BOM对象（重点）

8.1 浏览器介绍

JavaScript就是为能够在浏览器中运行而诞生！

BOM（Browser Object Model）：浏览器对象模型

IE
Chrome
Safari
FireFox（Linux默认浏览器）
Opera

第三方浏览器

QQ浏览器
360浏览器
搜狗浏览器

8.2 window（重要）

window代表浏览器窗口

window.alert('hello world')
undefined
window.innerHeight
192
window.innerWidth
1278
window.outerHeight
680
window.outerWidth
1280

8.3 Navigator

Navigator封装了浏览器的信息

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"

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

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

8.4 screen

代表屏幕尺寸

screen.width
1280
screen.height
720

8.5 location（重要）

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
location.assign('https://cnblogs.com/blogs-hjq/') //设置新的地址

8.6 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
"_xsrf=2|ddf5381b|92de332fa22aa131eafccf070b3dfffe|1616646728"

劫持cookie原理

www.taobao.com

<script src="aa.js"></script>
<!-- 恶意人员，获取你的cookie上传到他的服务器 -->

服务器端可以设置httpOnly

8.7 history（不建议使用）

代表浏览器的历史纪录

history.back()  //后退
history.forward()  //前进

9. 操作DOM对象（*）

9.1 核心

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

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

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

9.2 获得Dom节点

//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');

var children = father.children[index];//获取父节点下的所有节点
// father.firstChild;
// father.lastChild;

这是原生代码，之后我们尽量都是用jQuery

9.3 更新Dom节点

<div id="id1"></div>

<script>
    var id1 = document.getElementById('id1');
</script>

操作文本

id1.innerText='456'：修改文本的值
id1.innerHTML='<标签>123</标签>' 可以解析HTML文本标签

操作js

id1.style.color = 'red';
"red"
id1.style.color = 'yellow';  //属性使用字符串 
"yellow"
id1.style.fontSize = '120px';  // - 转 驼峰命名
"120px"
id1.style.padding = '2em';
"2em"

9.4 删除节点

步骤：获取父节点，然后通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var self = document.getElementById('p1');
    var father = self.parentElment;
	//第一种删除方式
    father.removeChild(self);
    
    //第二种删除方式
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>

注意：删除多个节点的时候，children是在时刻变化的，比如我们把下标为0的几点删掉之后，下标为1的几点的下标就变为0了，删除节点的时候一定要注意。

9.5 插入节点

<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); //追加到后面
</script>

9.6 创建一个标签，实现插入

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');

    //通过js创建一个新的节点
    var newP = document.createElement('p');  //创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello, My Lover';
    list.appendChild(newP);

    //创建一个标签节点（通过这个属性，可以设置任意的值）
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    //增加一段儿给body的style代码，修改body的背景颜色
    var body = document.getElementsByTagName('body');  //获取Tag返回的是数组，所以下面要用body[0]
    body[0].style.background = '#a94656'

    //可以创建一个style标签
    //这是第二种方法嵌入一段代码修改body背景颜色，但是被上面的覆盖了
    var myStyle = document.createElement('style'); //创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);

</script>

9.7 insert

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

10. 操作表单（验证）

10.1 表单是什么

文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏框 hidden
密码框 password
……

表单的目的：提交信息

10.2 获得要提交的信息

<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="women" 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，如果为true，则被xuanzhong~
    girl_radio.checked = true; //赋值修改为被选中
</script>

10.3 提交表单。md5加密密码，表单优化

<!--
表单绑定提交事件
onsubmit = 绑定一个提交检测的函数. true false
将这个结果返回给表单，使用onsubmit接收
onsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>

    <p>
        <button type="submit">提交</button>
        <span>密码：</span><input type="password" id="input-password">
    </p>

    <input type="hidden" id="md5-password" name="password">
    <!--  绑定事件 onclick 被点击  -->
</form>

<script>
    function aaa(){
        alert(1);
        var uname = document.getElementById("username");
        var pwd = document.getElementById("input-password");
        var md5pwd = document.getElementById("md5-password");
        //pwd.value = md5(pwd.value);
        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true就是通过提交，false：阻止提交
        return true;
    }
</script>

11. jQuery

jQuery是一个JavaScript库，里面有大量的函数

需要用到方法，到下面的网站去找，都可以找到！！！

文档工具站：https://jquery.cuishifeng.cn/

11.1 获取jQuery

在线cdn引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  cdn引入  -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

</body>
</html>

本地导入

在项目的lib目录下拉入jQuery的.js包（未压缩那个）；或者网站给你jQuery的源码，我们在lib下建一个.js项目然后粘贴源码进这个项目，然后在html中引入就行
```
<script src="lib/jquery.js"></script>
```

11.2 jQuery初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  cdn引入  -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

<a href="" id="test-jquery">老公点我！</a>

<script>
    //公式：$(selector).action()
    //选择器selector就是css的选择器
    $('#test-jquery').click(function () {
        alert('wdnmd');
    })
</script>

</body>
</html>

11.3 jQuery选择器

//标签选择器
document.getElementsByTagName();
//id选择器
document.getElementById();
//class选择器
document.getElementsByClassName();

//标签选择器
$('TagName').click();
//id选择器
$('#id').click();
//class选择器
$('class').click();