jQuery简介
JQuery
- 原生JavaScript的函数库
- 使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单
- 优势
- 对原生js封装,操作更加简单
- 对浏览器兼用很好处理
- 丰富的插件
下载
- 官网下载: https://jquery.com/download/
- 生产环境: compressed, production jQuery 3.3.1
- 开发环境,有空格回车:uncompressed, development jQuery 3.3.1
安装
js函数库的下载到本地
- 生产环境:.min.js
- 开发环境:js
使用Script引入
1
<script type="text/javascript" src="src/jquery-3.3.1.slim.min.js"></script>
CDN: 内容分发网络
1
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
jQuery加载模式
JavaScript多个window.onload只会执行一次, 后面的会覆盖前面的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<script>
window.onload = function () {
alert("123"); // 不会显示
}
window.onload = function () {
alert("456"); // 会显示
}
// 相当于这样写
var test3 = function () {
var abc = "123";
var abc = "456";
// 因为在同一个函数中,所以456覆盖123
alert(abc);
}
test3();
</script>多个$(document).ready()会执行多次,后面的不会覆盖前面的
jQuery框架本质是一个闭包,每次执行我们都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<script>
$(document).ready(function () {
alert("hello lnj1"); //会显示
});
$(document).ready(function () {
alert("hello lnj2"); // 会显示
});
// 相当于这样写
var test1 = function () {
alert("hello lnj1");
}
var test2 = function () {
alert("hello lnj2");
}
$(document).ready(test1);
$(document).ready(test2);
</script>
与原生js区别
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码 | 只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码 |
| 执行次数 | 只能执行一次,如果第二次,那么 第一次的执行会被覆盖 | 可以执行多次,第N次都不会被上 一次覆盖 |
| 简写方案 | 无 | $(function () { }); |
简写
$(function () { });1
<script>$(function(){alert("简写写法")});</script>
$符号
为什么我们能访问$符号?
因为$符号jQuery框架对外暴露的一个全局变量
JavaScript中如何定义一个全局变量?
所有全局变量是 window 对象的属性
1
2
3
4
5
6
7
8
9function test() {
var customValue = 998;
alert(customValue);
// 1.没有如下代码customValue就不是一个全局变量,函数执行完毕之后customValue会被自动释放,test函数以外的地方访问不到customValue
// 2.加上如下代码之后customValue就会变成一个全局变量,函数执行完毕也不会被释放,test函数以外的地方可以访问customValue
// window.customValue = customValue;
}
test();
alert(customValue);所以jQuery框架源码实现
window.jQuery = window.$ = jQuery;所以想要使用jQuery框架只有两种方式,一种是通过$,一种是通过jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<script>
// 方式一
$(document).ready(function () {
alert("hello lnj");
});
// 方式二
$(function () {
alert("hello lnj");
});
// 方式三
jQuery(document).ready(function () {
alert("hello lnj");
});
// 方式四
jQuery(function () {
alert("hello lnj");
});
</script>
解决$符号冲突问题
jQuery框架之所以提供了jQuery访问还提供
$访问,就是为了提升开发者的编码效率$符号冲突怎么办?
很多js的框架都提供了类似jQuery这样的便捷访问方式,所以很有可能某一天我们在使用多个框架的时,多个框架作者提供的便捷访问方式冲突
释放$使用权
当便捷访问符号发生冲突时,我们可以释放$使用权, 释放之后只能使用jQuery
1
2
3
4
5<script>
// 在使用jQuery之前指定自定义符号 jQuery.noConflict(); // 释放后只能使用
jQuery jQuery("div p").hide(); // 使用其他库的 $()
$("content").style.display = 'none';
</script>
自定义便捷访问符号
当便捷访问符号发生冲突时,我们可以自定义便捷访问符号
1
2
3
4
5
6
7
8<script>
// 在使用jQuery之前指定自定义符号
var nj = jQuery.noConflict();
// 和使用$一样通过自定义符号调用jQuery
nj(function () {
alert("hello lnj");
});
</script>
原生JS对象和jQuery对象相互转换
- jQuery对象不能使用原生js对象的方法,如 innerText
- jQuery对象转换为原生js对象
- jQuery[0]
- jQuery.get(0)
- dom—> jQuery对象
- $(dom)
1 | <script> |
jQuery对象
jQuery对象的本质是什么?
jQuery对象的本质是一个伪数组
1
2
3
4
5var $div = $("div");
console.log($div);
var arr = [1, 3, 5];
console.log(arr);什么是伪数组?
有0到length-1的属性
并且有length属性
1
var obj = { 0: "lnj", 1: "33", 2: "male", length: 3 };
this和$(this)
- this其实是一个Html 元素。
- $this 只是个变量名，加$是为说明其是个jquery对象。
- 而$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。
jQuery核心函数
- 从jQuery文档中可以看出,jQuery核心函数一共3大类4小类
Tips:为了方便开发者之间沟通和阅读,一般情况下所有jQuery操作相关的变量前面加上$
jQuery(callback)
当DOM加载完成后执行传入的回调函数
1
2
3
4
5<script>
$(function () {
alert("123");
});
</script>
jQuery([sel,[context]])
接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素,并包装成jQuery对象
1
2
3
4
5
6
7
8
9
10
11<script>
$(function () {
// 利用jquery获取所有div,得到的是一个jQuery对象
var $box = $("div");
console.log($box);
// 利用js原生语法获取所有div,得到的是一个js对象
var box = document.getElementsByTagName("div");
console.log(box);
});
</script>
jQuery(html,[ownerDoc])
- 根据 HTML 标记字符串，动态创建DOM 元素
1 | <script> |
jQuery静态方法
什么是静态方法?
静态方法对应的是对象方法,对象方法用实例对象调用,而静态方法用类名调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<script>
window.onload = function () {
function AClass(){}
AClass.staticMethof = function(){
alert('静态方法');
}
AClass.prototype.instaceMethod = function(){
alert('实例方法');
}
//静态方法用类名直接调用
AClass.staticMethof();
//实例方法必须用类的实例对象调用
var instace = new AClass();
instace.instaceMethod();
}
</script>
jQuery.holdReady(hold)
- 暂停或者恢复jQuery.ready()事件
- 传入true或false
1 |
|
$.each(object,[callback])
遍历对象或数组
优点统一遍历对象和数组的方式
回调参数的顺序更符合我们的思维模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34<script>
$(function () {
// 3.1遍历数组
var arr = [1, 3, 5, 7, 9];
// 3.1.1通过原生方法遍历数组
// 第一个回调函数参数是遍历到的元素
// 第二个回调函数参数是当前遍历的索引
// 返回值: 没有返回值
var res = arr.forEach(function (ele, idx) {
console.log(idx, ele);
});
console.log(res);
// 3.1.2通过jQuery静态方法遍历数组
// 第一个回调函数参数是当前遍历的索引
// 第二个回调函数参数是遍历到的元素
// 返回值: 被遍历的数组
var $res2 = $.each(arr, function (idx, ele) {
console.log(idx, ele);
});
console.log($res2);
// 3.2遍历对象
var obj = {name: "lnj", age:"33", gender:"male"};
// 3.2.1js对象没有forEach方法,所以通过forin方法遍历对象
for(var key in obj){
console.log(key, obj[key]);
}
// 3.2.2通过jQuery静态方法遍历对象
$.each(obj,function (key, value) {
console.log(key, value);
});
});
</script>
$.map(arr|obj,callback)
遍历对象或数组,将回调函数的返回值组成一个新的数组返回
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38$(function () {
// 4.1遍历数组
var arr = [1, 3, 5, 7, 9];
// 4.1.1通过原生方法遍历数组
// 第一个回调函数参数是遍历到的元素
// 第二个回调函数参数是当前遍历的索引
// 第三个回调函数参数是当前被遍历的数组
// 返回值: 将回调函数返回值收集起来组成一个新的数组
var res = arr.map(function (ele, idx, arr) {
console.log(idx, ele, arr);
return ele + idx;
});
console.log(res);
// 4.1.2通过jQuery静态方法遍历数组
// 第一个回调函数参数是遍历到的元素
// 第二个回调函数参数是当前遍历的索引
// 返回值: 将回调函数返回值收集起来组成一个新的数组
var $res2 = $.map(arr, function (ele, idx) {
console.log(idx, ele);
return ele + idx;
});
console.log($res2);
// 4.2遍历对象
var obj = { name: "lnj", age: "33", gender: "male" };
/*
obj.map(function (ele, idx, obj) {
// 报错,原生JS没有map方法
console.log(idx, ele, obj);
});
*/
var $res = $.map(obj, function (value, key) {
console.log(key, value);
return key + value;
});
console.log($res);
});
$.trim(str)
去掉字符串起始和结尾的空格。
1
2
3
4
5
6
7
8<script>
$(function () {
var str = " lnj ";
console.log("---"+str+"---");
var $res = $.trim(str);
console.log("---"+$res+"---");
});
</script>
$.isArray(obj)
判断是否是数组
1
2
3
4
5
6
7
8
9
10
11
12<script>
$(function () {
// 对象
var obj = {name:"lnj",age: "33", gender:"male"};
// 真数组
var arr = [1, 3, 5, 7, 9];
var $res = $.isArray(obj);
console.log($res);// false
var $res2 = $.isArray(arr);
console.log($res2);// true
});
</script>
$.isFunction(obj)
判断是否是函数
jQuery框架本质是一个匿名函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<script>
$(function () {
var obj = {name:"lnj",age: "33", gender:"male"};
var $res = $.isFunction(obj);
console.log($res);// false
var arr = [1, 3, 5, 7, 9];
$res = $.isFunction(arr);
console.log($res);// false
var fn = function () {}
$res = $.isFunction(fn);
console.log($res);// true
// 通过该方法验证了我们前面所说的,jQuery框架本质是一个匿名函数
$res = $.isFunction($);
console.log($res);// true
});
</script>
$.isWindow(obj)
判断是否是window对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<script>
$(function () {
var obj = window;
var $res = $.isWindow(obj);
console.log($res); // true
var arr = [1, 3, 5, 7, 9];
$res = $.isWindow(arr);
console.log($res); // false
var arrlike = {0:"zs", 1:"ls", length:2};
$res = $.isWindow(arrlike);
console.log($res); // false
});
</script>
选择器
基础选择器
| 选择器 | 名称 | 描述 | 返回 | 示例 |
|---|---|---|---|---|
| #id | id选择器 | 根据给定的id匹配一个元素 | 单个元素 | $(“#box”);选取id为box元素 |
| .class | 类选择器 | 根据给定的类名匹配元素 | 集合元素 | $(“.box”);选取所有类名为box元素 |
| element | 元素选择器 | 根据给定的元素名称匹配元素 | 集合元素 | $(“p”);选取所有元素 |
| * | 通配符选择器 | 匹配所有元素 | 集合元素 | $(“*”);选取所有元素 |
| selector1,selector2,selectorN | 并集选择器 | 将所有选择器匹配到的元素合并后一起返回 | 集合元素 | $(“div,p,.box”);选取所有元素,所有元素和所有类名为box元素 |
| selector1.selector2 | 交集选择器 | 在两个标签相交的部分，也就是交集进行修改格式。 | 集合元素 | 对于交集选择器，可以与id和class共同使用。 |
层次选择器
| 选择器 | 名称 | 描述 | 返回 | 示例 |
|---|---|---|---|---|
| $(“ancestor descendant”) | 后代选择器 | 选取ancestor元素的所有descendant后代标签(不光是儿子,包括孙子/重孙子等) | 集合元素 | $(“div span”);选取元素里所有的元素 |
| $(“parent > child”) | 子元素选择器 | 找到选取parent 元素中所有直接子元素child(只有儿子,不包括孙子/重孙子等) | 集合元素 | $(“div>span”);选取元素下元素名称是的子元素 |
| $(“prev + next”) | 相邻兄弟选择器 | 选取prev元素后面紧跟的那个next元素 | 集合元素 | $(“.one+div”);选取类名为one的下一个同级的元素 |
| $(“prev ~ siblings”) | 通用兄弟选择器 | 选取prev元素后面的所有next元素 | 集合元素 | $(“#two~div”);选取id名为two元素后面所有同级的元素 |
序选择器
- CSS3中新增的选择器最具代表性的就是序选择器
| 选择器 | 描述 | 示例 | |
|---|---|---|---|
| :first-child | 选中同级别中的第一个标签 | 同级别，不区分类型 | |
| :last-child | 选中同级别中的最后一个标签 | 同级别，不区分类型 | |
| :nth-child(n) | 选中同级别中的第n个标签 | 同级别，不区分类型 | |
| :nth-last-child(n) | 选中同级别中的倒数第n个标签 | 同级别，不区分类型 | |
| :only-child | 选中父元素中唯一的标签 | 同级别，不区分类型 | |
| :nth-child(odd) | 选中同级别中的所有奇数 | ||
| :nth-child(even) | 选中同级别中的所有偶数 | ||
| :nth-child(xn+y) | x和y是用户自定义的, 而n是一个计数器, 从0开始递增 n：有几个标签就从0到几。 | ||
| :first-of-type | 选中同级别中同类型的第一个标签 | 同级别，区分类型 | |
| :last-of-type | 选中同级别中同类型的最后一个标签 | 同级别，区分类型 | |
| :nth-of-type(n) | 选中同级别中同类型的第n个标签 | 同级别，区分类型 | |
| :nth-last-of-type(n) | 选中同级别中同类型的倒数第n个标签 | 同级别，区分类型 | |
| :only-of-type | 选中父元素中唯一类型的某个标签 | 同级别，区分类型 | |
| :first | :gt:> | :odd:奇数行 | |
| :last | :lt:< | :even:偶数行 | |
| :eq = |
1 | <ul> |
属性选择器
- 根据元素的属性选择指定元素
[属性名]- 选取含有指定属性的元素
- [属性名=”属性值”] `
- 选取属性值等于指定值的元素
[属性名^="属性值"]- 选取属性值以指定内容开头的元素
[属性名$="属性值"]- 选取属性值以指定内容结尾的元素
[属性名*="属性值"]- 选取属性值中包含指定内容的元素
内容过滤选择器
| 选择器 | 描述 | 返回 |
|---|---|---|
| :empty | 选取不包含子元素或文本为空的元素 | 集合元素 |
| :parent | 选取含有子元素或文本的元素 | 集合元素 |
| :contains(text) | 选取含有文本内容为text的元素 | 集合元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 |
:empty
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>05-jQuery选择器</title>
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
// 找到所有div中不包含文本内容或子元素的元素
var $res = $("div:empty");
console.log($res.length); // 找到1个元素
$res.each(function (idx, ele) {
console.log(idx, ele); // one
});
});
</script>
</head>
<body>
<div class="one"></div>
<div class="two">zs</div>
<!--包含内容不会被找到-->
<div class="three">
<!--包含子元素不会被找到-->
<span>lnj</span>
</div>
<span class="five"></span
><!--不是指定元素不会被找到-->
</body>
</html>:parent
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>05-jQuery选择器</title>
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
// 找到所有div中包含文本内容或子元素的元素
var $res = $("div:parent");
console.log($res.length);
$res.each(function (idx, ele) {
console.log(idx, ele);
});
});
</script>
</head>
<body>
<div class="one"></div>
<div class="two">zs</div>
<!--有文本内容会被找到-->
<div class="three">
<!--有子元素会被找到-->
<span>lnj</span>
</div>
<span class="five"></span>
</body>
</html>:contains(text)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>05-jQuery选择器</title>
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
// 找到所有div中包含文本内容为lnj的元素
var $res = $("div:contains('lnj')");
console.log($res.length); // 找到2个元素
$res.each(function (idx, ele) {
console.log(idx, ele); // one,three,four
});
});
</script>
</head>
<body>
<div class="one">lnj</div>
<div class="two">zs</div>
<div class="three">lnj</div>
<div class="four">
<!--子元素中包含该文本也会被找到-->
<span>lnj</span>
</div>
<span class="five"></span>
</body>
</html>:has(selector)
- 和:parent区别,parent只要有子元素就会被找到,
- :has(selector)不仅要有子元素,而且子元素还必须满足我们的条件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>05-jQuery选择器</title>
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
// 找到所有div中包含后代元素为span的元素
var $res = $("div:has('span')");
console.log($res.length);
$res.each(function (idx, ele) {
console.log(idx, ele);
});
});
</script>
</head>
<body>
<div class="one">
<!--后代中包含span元素会被找到-->
<span>jjj</span>
</div>
<div class="two">
<!--后代中不包含span元素不会被找到-->
<p>zs</p>
</div>
<div class="three">
<!--后代中包含span元素会被找到-->
<p>
<span>lnj</span>
</p>
</div>
</body>
</html>
:eq() 选择器
:eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素。
表单选择器
- :text
- :password
- :radio等
可见性过滤器
- :hidden Selector
- 选择所有隐藏的元素。
- :visible Selector
- 选择所有可见的元素。
属性和属性节点
什么是属性?
- 属性就是对象身上的变量
- 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)
1
2
3
4
5<script>
// 1.自定义一个对象 var obj = {}; console.log(obj); //
2.动态给自定义对象添加属性 obj.name = "lnj"; // name就是对象obj的一个属性
obj.age = 33; // age就是对象obj的一个属性 console.log(obj);
</script>开发者工具查看属性
- 打开sources
- 点击右边的Watch,选择“＋”号。
- 输入
document.querySelectorAll("button),可以找到Button元素，展开看到的都是DOM对象Botton的属性。
什么是属性节点?
在html中编写的所有标签，里面的属性都是属性节点
<span class = 'box' nj = '666'></span> // 这里的class和nj就是属性节点DOM对象的所有属性节点都存储在attributes属性中
操作属性
- 添加或修改属性(没有就会添加,有就会修改)
对象.属性名称 = 值;对象["属性名称"] = 值;
- 获取属性
对象.属性名称对象["属性名称"]
操作属性节点
jQuery中没有value方法，可以通过attr方法获取或设置标签中的value属性的值
获取属性节点
DOM对象.getAttribute("属性节点名称")
设置属性节点
DOM对象.setAttribute("属性节点名称", "值");
attr(name|pro|key,val|fn)方法用于设置或获取属性节点的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<script>
$(function () {
// 1.获取指定属性节点值
var $res = $(".span1").attr("nj");
console.log($res);
// 2.设置属性节点
$(".span1").attr("nj", "666");
$(".span2").attr("id", "box1 box2");
// 3.注意点:
// 3.1.获取属性节点时,只会获取找到所有元素中第一个元素的属性节点
$res = $("span").attr("class");
console.log($res);
$("span").attr("class", "lnj");
});
</script>
removeAttr(name)方法用于删除指定属性节点
1
2
3
4
5
6
7
8<script>
$(function () {
// 1.设置属性节点时,会给所有找到元素设置属性节点
$("span").attr("test", "jonathan");
// 2.删除属性节点时,会删除所有找到元素的属性节点
$("span").removeAttr("test");
});
</script>
prop(n|p|k,v|f)方法用于设置或者获取元素的属性值
1
2
3
4
5
6
7
8
9
10<script>
$(function () {
// 1.设置属性
// 1.1.设置属性时,会设置所有找到元素的属性
$("span").prop("demo", "lnj");
// 2.获取属性
// 2.1.获取属性时,只会获取找到第一个元素的属性
console.log($("span").prop("demo"));
});
</script>
removeProp(name)方法
用于删除指定元素的属性值
1
2
3
4
5
6<script>
$(function () {
// 删除所有找到元素的demo属性
$("span").removeProp("demo");
});
</script>
attr方法和prop方法区别
既然所有的DOM对象，都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
因为如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<script>
$(function () {
// 1.可以通过prop获取属性节点
console.log($("input").prop("class"));
// 2.可以通过prop设置属性节点
$("input").prop("class", "tag");
// 3.如果没有默认值,那么attr获取返回undefined
// console.log($("input[type=checkbox]").attr("checked"));
// 4.如果没有默认值,那么prop获取返回false
console.log($("input[type=checkbox]").prop("checked"));
// 5.通过attr设置选中
// $("input[type=checkbox]").attr("checked", true);
// 6.通过prop设置选中
$("input[type=checkbox]").prop("checked", true)
});
</script>
jQuery操作CSS样式
css(name|pro|[,val|fn])方法
用于设置或获取元素CSS样式
格式1:
DOM元素.css("样式名称", "值");格式2:
DOM元素.css({"样式名称1":"值1","样式名称2":"值2"});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<script>
$(function () {
$("button").click(function () {
// 1.单个样式设置
// $("div").css("width", "100px");
// $("div").css("height", "100px");
// $("div").css("background", "red");
// 2.链式设置样式
// $("div").css("width", "100px").css("height", "100px").css("background", "red");
// 3.传入对象一次性设置样式
$("div").css({
"width":"100px",
"height":"100px",
"background":"blue"
});
// 4.获取指定样式的值
console.log($("div").css("width"));
});
});
</script>
jQuery增删Class样式
- jQuery CSS类相关方法都是用于操作DOM对象的class属性节点的值
addClass(class|fn)
给元素添加一个或多个类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-jQueryCSS类</title>
<style>
.class1{
width: 200px;
height: 200px;
background-color: red;
}
.class2{
border: 5px solid #000;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
// 1.添加一个类
// $("div").addClass("class1");
// 2.再添加一个类
// $("div").addClass("class2");
// 3.一次性添加多个类(用空格隔开)
$("div").addClass("class1 class2");
});
});
</script>
</head>
<body>
<button>添加</button>
<button>删除</button>
<button>切换</button>
<div></div>
</body>
</html>
removeClass([class|fn])
删除元素的一个或多个类
1
2
3
4
5
6
7
8
9
10
11
12
13<script>
$(function () {
$("button").eq(1).click(function () {
// 4.删除一个类
// $("div").removeClass("class2");
// 5.再删除一个类
// $("div").removeClass("class1");
// 6.一次性删除多个类(用空格隔开)
$("div").removeClass("class1 class2");
});
});
</script>
toggleClass(class|fn[,sw])
添加或删除一个类(存在就删除不存在就添加)
1
2
3
4
5
6
7
8
9
10<script>
$(function () {
$("button").eq(2).click(function () {
// 7.切换一个类
// $("div").toggleClass("class2");
// 8.切换多个类
$("div").toggleClass("class1 class2");
});
});
</script>
jQuery操作代码/文本/值
html([val|fn])
添加或获取元素中的HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-jQuery代码文本值</title>
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
var $btns = $("button");
var $div = $("div");
$btns.eq(0).click(function () {
// 1.添加html, 相当于innerHTML
// $div.html("<p>我是p标签</p>");
// $div.html("<p><span>我是span标签</span></p>");
$div.html("我是文本");
});
$btns.eq(1).click(function () {
// 2.获取html
console.log($div.html());
});
});
</script>
</head>
<body>
<button>添加html</button>
<button>获取html</button>
<button>添加文本</button>
<button>获取文本</button>
<div></div>
</body>
</html>
text([val|fn])
添加或获取元素中的文本
text方法能做的html方法都能做,所以一般使用html方法即可
1
2
3
4
5
6
7
8
9
10
11
12
13<script>
$(function () {
$btns.eq(2).click(function () {
// 3.添加文本, 相当于innerText
// 如下内容不会被转换为标签
// $div.text('<p>我是段落</p>');
$div.text('我是文本');
});
$btns.eq(3).click(function () {
// 4.获取文本
console.log($div.text());
});
</script>
val([val|fn|arr])
获取或设定输入框或选择框的值
<script> $(function () { $btns.eq(4).click(function () { // 4.添加value值 $("input").val("我是一个输入框"); }); $btns.eq(5).click(function () { // 4.获取value值 console.log($("input").val()); }); }); </script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
## jQuery操作元素尺寸
### height,innerHeight,outerHeight
- height([val|fn])方法
- 设置或获取元素高度(相当于获取height属性值)
- 获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。
- width([val|fn])方法
- 设置或获取元素宽度(相当于获取width属性值)。
- 为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度。
```js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-jQuery操作位置和尺寸</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 250px;
height: 250px;
background-color: red;
margin-left: 50px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
// 1.获取元素宽度(不包括padding和border)
// alert($('.son').width());
});
$("button").eq(1).click(function () {
// 2.设置元素宽度(不包括padding和border)
// $(".son").width("50px");
});
});
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>innerHeight()/innerWidth()
innerWidth = width + padding
- 为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。
innerHeight = width + padding
- 为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
outerHeight/outerWidth()
- outerWidth = innerWidth + border
- 获取元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。
- （注：返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。）
- outerHeight = innerHeight + border
- 获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。
- 返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。
- jQuery的outerWidth属性还可以传递一个参数，
- outerWidth(true) = outerWidth + margin
- outerWidth = innerWidth + border
jQuery操作元素位置
offset([coordinates])
获取或设置元素相对窗口的偏移位
1
2
3
4
5
6
7
8
9
10
11
12<script>
$(function () {
$("button").eq(0).click(function () {
// 1.获取距离窗口的偏移位(从border开始)
alert($('.son').offset().left); // 100
});
$("button").eq(1).click(function () {
// 2.设置距离窗口的偏移位
$('.son').offset({left:10, top:10});
});
});
</script>
position()
获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离
1
2
3
4
5
6
7
8
9
10
11
12<script>
$(function () {
$("button").eq(0).click(function () {
// 1.获取匹配元素相对父元素的偏移
alert($('.son').position().left);// 50
});
$("button").eq(1).click(function () {
// 2.无效,不能设置相对定位元素的偏移位
$('.son').position({left:10, top:10})
});
});
</script>
scrollTop([val])
设置或获取匹配元素相对滚动条顶部的偏移。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-jQuery操作位置</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
margin-top: 100px;
margin-left: 100px;
width: 100px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
// 7.获取匹配元素相对滚动条顶部的偏移
// alert($('.scroll').scrollTop());
// alert($('html').scrollTop());
// 兼容所有浏览器写法
alert($('html').scrollTop()+$('body').scrollTop());
});
$("button").eq(1).click(function () {
// 8.设置匹配元素相对滚动条顶部的偏移
// $('.scroll').scrollTop(100);
// $('html').scrollTop(100);
// 兼容所有浏览器写法
$('html,body').scrollTop(100);
});
});
</script>
</head>
<body>
<div class="scroll">
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>
<button>获取</button>
<button>设置</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
scrollLeft([val])
设置 元素中滚动条的水平偏移：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<style>
.scroll{
border: 1px solid black;
width: 100px;
height: 130px;
overflow: auto;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("div").scrollLeft(100);
});
});
</script>
</head>
<body>
<div class="scroll">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div>
<button class="btn1">把滚动条的水平位置设置为 100px</button>
</body>
</html>
jquery 删除替换遍历元素
.remove()
- 将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据。）
1 | <div id="a">a</div> |
.empty()
- 从DOM中移除集合中匹配元素的所有子节点。
1 | <div id="test"> |
.replaceAll()
- 用集合的匹配元素替换每个目标元素。
1 | <div id="test"> |
.replaceWith()
- 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
1 | <div id="test"> |
.each
- 遍历一个jQuery对象，为每个匹配元素执行一个函数。
1 | <div id="test"> |
jquery 包裹,元素外插入
.unwrap()
将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
1 | <div class="a"> |
.wrap()
在每个匹配的元素外层包上一个html元素。
1 | <style type="text/css"> |
.wrapAll()
在所有匹配元素外面包一层HTML结构。
1 | <style type="text/css"> |
.wrapInner()
在匹配元素里的内容外包一层结构。
1 | <style type="text/css"> |
.after()
在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
1 | <div class="a">1</div> |
.before()
根据参数设定，在匹配元素的前面插入内容（译者注：外部插入）
1 | <div class="a">1</div> |
.insertAfter()
在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。
1 | <div class="a">1</div> |
.insertBefore()
在目标元素前面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。
1 | <div class="a">1</div> |
元素内插入与元素复制
.append()
在每个匹配元素里面的末尾处插入参数内容。
.appendTo()
将匹配的元素插入到目标元素的最后面（译者注：内部插入）。
1 | <style type="text/css"> |
使用appendTo这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
.prepend()
将参数内容插入到每个匹配元素的前面（元素内部）。
.prependTo()
将所有元素插入到目标前面（元素内）。
.clone(可省参数默认false) 复制元素
创建一个匹配的元素集合的深度拷贝副本。
1 | <style type="text/css"> |
AJAX
AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
jQuery.ajax([settings])- settings:可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。
参数
options
类型：Object可选。AJAX 请求设置。所有选项都是可选的。
async
类型：Boolean默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)
类型：Function发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache
类型：Boolean默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。jQuery 1.2 新功能。
complete(XHR, TS)
类型：Function请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述请求类型的字符串。这是一个 Ajax 事件。
contentType
类型：String默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
context
类型：Object这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。就像这样：
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }});data
类型：String发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
dataFilter
类型：Function给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType
类型：String预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:”xml”: 返回 XML 文档，可用 jQuery 处理。”html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。”script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）”json”: 返回 JSON 数据 。”jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。”text”: 返回纯文本字符串
error
类型：Function默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。这是一个 Ajax 事件。
global
类型：Boolean是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified
类型：Boolean仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 ‘etag’ 来确定数据没有被修改过。
jsonp
类型：String在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 “callback=?” 这种 GET 或 POST 请求中 URL 参数里的 “callback” 部分，比如 {jsonp:’onJsonPLoad’} 会导致将 “onJsonPLoad=?” 传给服务器。
jsonpCallback
类型：String为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
password
类型：String用于响应 HTTP 访问认证请求的密码
processData
类型：Boolean默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
scriptCharset
类型：String只有当请求时 dataType 为 “jsonp” 或 “script”，并且 type 是 “GET” 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
success
类型：Function请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。这是一个 Ajax 事件。
traditional
类型：Boolean如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。
timeout
类型：Number设置请求超时时间（毫秒）。此设置将覆盖全局设置。
type
类型：String默认值: “GET”)。请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
url
类型：String默认值: 当前页地址。发送请求的地址。
username
类型：String用于响应 HTTP 访问认证请求的用户名。
xhr
类型：Function需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
1 | $.ajax({ |
$.get
- 使用一个HTTP GET请求从服务器加载数据。这是一个Ajax功能的缩写。
1 | jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] ) |
$.post()
1 | 描述: 使用一个HTTP POST 请求从服务器加载数据。 |
回调函数
- 如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
beforeSend
- 在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
error
- 在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter
- 在请求成功之后调用。传入返回的数据以及 “dataType” 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。
success
- 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete
- 当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。
验证登录
ajax验证登录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<script type="text/javascript" language="javascript">
function IbtnEnter_onclick() {
checklogin();
return false;
}
function checklogin() {
if ($("#TxtUserName").val() == "") {
alert("用户名不能为空！");
$("#TxtUserName").focus();
return false;
}
if ($("#TxtPassword").val() == "") {
alert("密码不能为空！");
$("#TxtPassword").focus();
return false;
}
$.ajax({
type: "POST",
url: "ajax/Handler.ashx?M=" + Math.random(),
data: "username=" + $("#TxtUserName").val().toString() + "&pwd=" + $("#TxtPassword").val().toString(),
success: function (data) {
if (data == "1") {
location.href = "index.aspx";
return true;
}
else {
alert("请确认您输入的用户名或密码输入是否正确！");
$("#TxtUserName").val("");
$("#TxtPassword").val("");
$("#TxtUserName").focus();
return false;
}
}
})
}
</script>
事件
onload事件
在body中没有onload事件，否则该函数不能执行
1
<script>$(function(){console.log($("div"))});</script>
事件绑定
on(“事件类型,事件类型”, 函数);
1
$(document).on("事件", "选择器", function () {});
off(“事件类型”)
1
2
3
4
5
6
7
8
9<script>
$("div").on("click mouseover", function() {
// $(this).css("background", "blue");
console.log("123");
});
$("div").off("mouseover");
</scrip>
unbind()
移除被选元素的事件处理程序
该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。
ubind() 适用于任何通过 jQuery 附加的事件处理程序。
js能对同一html的dom对象增加多个click、change事件，注意在不需要时解绑一些函数
1
2$("p").unbind() 移除所有段落上的所有绑定的事件。
$("p").unbind( "click" ) 移除所有段落上的click事件。
触发事件
trigger() 方法触发被选元素的指定事件类型。规定被选元素要触发的事件。
事件名与原生的大致相同,不用on
语法
1
$(selector).trigger(event,[param1,param2,...])
浏览器事件
.resize()
浏览器窗口尺寸改变事件
1
2
3
4
5
6
7<script type="text/javascript">
$(function(){
$(window).resize(function(){
alert('窗口大小变化');
});
});
</script>
.scroll()
滚动条滚动事件
1
2
3
4
5
6
7<script type="text/javascript">
$(function(){
$(window).scroll(function(){
alert('滚动条滚动');
});
});
</script>
鼠标事件
.click()
为 JavaScript 的”click” 事件绑定一个处理器，或者触发元素上的 “click” 事件。
.dblclick()
为JavaScript 的 “dblclick” 事件绑定一个处理函数，或者触发元素上的 “dblclick” 事件。
.hover()
将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。将一个单独事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。
.mousedown()
为 JavaScript 的 “mousedown” 事件绑定一个处理函数，或者触发元素上的该事件。
.mouseenter()
为 mouse enters（鼠标进入） 事件绑定一个处理函数，或者触发元素上的 mouse enters（鼠标进入） 事件。
.mouseleave()
为 mouse leaves（鼠标离开） 事件绑定一个处理函数，或者触发元素上的 mouse leaves（鼠标离开） 事件。
.mousemove()
为 JavaScript 的 “mousemove” 事件绑定一个处理函数，或者触发元素上的该事件。
.mouseout()
为 JavaScript 的 “mouseout” 事件绑定一个处理函数，或者触发元素上的该事件。（注：支持事件冒泡）
.mouseover()
为 JavaScript 的 “mouseover” 事件绑定一个处理函数，或者触发元素上的该事件。（注：支持事件冒泡）
.mouseup()
为 JavaScript 的 “mouseup” 事件绑定一个处理函数，或者触发元素上的该事件。
1 | $("div").click(function () { |
键盘事件
.keydown()
为 “keydown” 事件绑定一个处理函数，或者触发元素上的 “keydown” 事件。
.keypress()
为 “keypress” 事件绑定一个处理函数，或者触发元素上的 “keypress” 事件。
.keyup()
为 “keyup” 事件绑定一个处理函数，或者触发元素上的 “keyup” 事件。
按键码识别
1 | <input type="text" id="input1" /> |
回车提交
1 | <form action="" method="get"> |
表单元素事件
.blur()
为 “blur” 事件绑定一个处理函数，或者触发元素上的 “blur” 事件（注：此事件不支持冒泡）。
.change()
为JavaScript 的 “change” 事件绑定一个处理函数，或者触发元素上的 “change” 事件。
.focus()
为 JavaScript 的 “focus” 事件绑定一个处理函数，或者触发元素上的 “focus” 事件。
.focusin()
将一个事件函数绑定到”focusin” 事件。
.focusout()
将一个事件函数绑定到”focusout” 事件。
.select()
为 JavaScript 的 “select” 事件绑定一个处理函数，或者触发元素上的该事件。
.submit()
为 JavaScript 的 “submit” 事件绑定一个处理函数，或者触发元素上的该事件。