JQuery基础

一、jQuery基础

1
2
3
4
5
在jQuery库中封装了大量可以直接通过选择器调用的方法或函数,使我们仅使用简单的几行代码就可以实现比较复杂的功能。
列如: 可以使用$('#id')来替代JavaScript代码中的document.getElementById()函数,即通过id来获取元素。使用$('tagName')代替JavaScript代码中的document.getElementsByTagName()函数,即通过标签名称获取HTML元素等。

jQuery选择器支持CSS1、CSS2的全部和CSS3几乎所有的选择器,以及jQuery独创的高级且复杂的选择器,因此有一定CSS经验的开发人员可以很容易的切入到jQuery的学习中来。
一般来说,使用CSS选择器时,开发人员需要考虑主流的浏览器是否支持某些浏览器,但在jQuery中,开发人员则可以放心地使用jQuery选择器,无需考虑浏览器是否支持这些选择器,这极大的方便了开发者。

1、 jQuery语法和选择器

1,语法

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
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions)。

jQuery 语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法: $(selector).action()

美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏 id="test" 的元素


您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

$(document).ready(function(){

// 开始写 jQuery 代码...

});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

试图隐藏一个不存在的元素
获得未完全加载的图像的大小
提示:简洁写法(与以上写法效果相同):

$(function(){

// 开始写 jQuery 代码...

});
以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

2,选择器

元素 元素
语法 描述 实例
$(“*”) 选取所有元素 在线实例
$(this) 选取当前 HTML 元素 在线实例
$(“p.intro”) 选取 class 为 intro 的

元素

在线实例
$(“p:first”) 选取第一个

元素

在线实例
$(“ul li:first”) 选取第一个
    元素的第一个
  • 元素
在线实例
$(“ul li:first-child”) 选取每个
    元素的第一个
  • 元素
在线实例
$(“[href]”) 选取带有 href 属性的元素 在线实例
$(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 元素 在线实例
$(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 元素 在线实例
$(“:button”) 选取所有 type=”button” 的 元素 和 在线实例
$(“tr:even”) 选取偶数位置的
在线实例
$(“tr:odd”) 选取奇数位置的

1,基本选择器

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
id选择器 元素选择器 类名选择器 复合选择器  通配符选择器

1,id选择器
id选择器#id就是利用DOM元素的id属性值来选择匹配的元素,并以jQuery包装集的形式返回给对象
使用公式: $("#id")
示例: $("#box")//获取id属性值为box的元素

2,元素选择器是根据元素名称匹配响应的元素,元素选择器指向的是DOM元素的标签名,也就是说元素选择器是
根据元素的标记名选择的
使用公式: $("element")
示例: $("div") //获取所有div元素

3,类名选择器
类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素,在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配的类的名称就可以被类名选择器选取到。
使用公式: $(".class")
示例: $(".box") //获取class属性值为box的所有元素

4,复合选择器
使用公式: $("selector1,selector2,....,selectorN")
复合选择器将多个选择器(可以使id选择器、元素选择器或是类名选择器)组合在一起,两个选择器之间以逗号","分隔,只要符合其中的任何一个诗选条件就会被匹配,返回的是一个集合形式的JQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象
注意: 多种匹配条件的选择器并不是匹配同事满足这几个条件的元素,而是将每个选择器匹配的元素合并后一起返回。
selector1:一个有效的选择器,可以使id选择器,元素选择器或是类名选择器等
selector2: 另一个有效的选择器,可以是ID选择器,元素选择器或是类名选择器等
selectorN: (可选择)任意多个选择器,可以是ID选择器,元素选择器或是类名选择器等
示例: $("div,#btn")//要查询文档中的全部的<div>元素和id属性为btn的元素

5,通配符选择器
$("*") //取得页面上所有的DOM元素集合的jQuery包装集

2,层次选择器

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
1、ancestor descendant选择器 
ancestor descendant选择器中的ancestor代表祖先,descendant代表子孙,用于在给定的祖先元素下匹配所有的后代元素。
使用公式: $("ancestor descendant")
ancestor是指任何有效的选择器
descendand是用以匹配元素的选择器,并且它是ancestor所指定元素的后代元素
示例: $("ul li") //匹配ul元素下面的全部li元素

2、parent> child选择器
parent>child选择器中的parent代表父元素,child代表子元素,用于在给定的父元素下匹配所有的子元素,使用该选择器只能选择父元素的直接子元素。

使用公式: $("parent>child")
parent是指任何有效的选择器
child是用以匹配元素的选择器,并且它是parent元素的子元素
示例: $("form>input") //匹配表单中所有的子元素input

3、prev + next选择器
prev + next 选择器用于匹配所有紧接在prev元素后的next元素,其中,prev和next是两个相同级别的元素。
使用公式: $("prev + next")
prev是指任何有效的选择器
next是一个有效的选择器并紧接着prev选择器
示例: $("div + img") //匹配<div>标记后的<img>标记

4、prev ~ siblings选择器
prev ~ siblings选择器用于匹配prev元素之后的所有siblings元素,其中,prev和sibling是一个相同的辈元素。
使用公式: $("prev~siblings")
prev是指任何有效的选择器
siblings是一个有效选择器并紧接着prev选择器
示例: $("div~ul") //匹配div元素后面的同辈所有ul元素

3,过滤选择器

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
1、简单过滤器
简单过滤器是指以冒号开头,通常用于实现简单过滤效果的过滤器。
:first
说明: 匹配找到的第一个元素,他是与选择器结合使用的
示例: $("tr:first")//匹配表格的第一行
:last
说明: 匹配找到的最后一个元素,它是与选择器结合使用的
示例: $("tr:last") //匹配表格的最后一行
:even
说明: 匹配所有索引值为偶数的元素,索引值从0开始计数
示例: $("tr:even") //匹配索引为偶数的行
:odd
说明: 匹配所有索引值为奇数的元素,索引值从0开始计数
示例: $("tr:odd") //匹配索引为奇数的行
:eq(index)
说明: 匹配一个给定索引值的元素
示例: $("div:eq(1)") //匹配第二个div元素
:gt(index)
说明: 匹配所有大于给定索引值的元素
示例: $("span:gt(0)") //匹配索引大于0的span元素(注意:大于0,而不包括0)
:lt(index)
说明: 匹配所有小于给定索引值的元素
示例: $("span:gt(2)") //匹配索引小于2的span元素(注意:小于2,而不包括2)
:header
说明: 匹配如ht,h2,h3....之类的标题元素
示例: $(":header")//匹配全部的标题元素
:not(selector)
说明: 去除所有与给定选择器匹配的元素
示例: $("input:not(:checked)")//匹配没有被选中的input元素
:animated
说明: 匹配所有正在执行动画效果的元素
示例: $("div:animated") //匹配正在执行动画的div元素

2、内容过滤器
内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行选择。
:contains(text)
说明: 匹配所有不包含子元素或者文本的空元素
示例: $("li:contains("word")") //匹配含有"word"文本内容的li元素
:empty
说明: 匹配所有不包含子元素或者文本的空元素
示例: $("td:empty") //匹配不包含子元素或者文本的单元格
:has(selector)
说明: 匹配含有选择器所有元素的元素
示例: $("td:has(p)") //匹配表格的单元格中含有<p>标签的单元格
:parent
说明: 匹配含有子元素或文本的元素
示例: $("td:parent")//匹配不为空的单元格,即在该单元格中还包括子元素或者文本

3、可见性过滤器
元素可见状态有两种,分别是隐藏状态和显示状态。可见性过滤器就是利用可见的元素进行选中
:visible
说明: 匹配所有可见元素
:hidden
说明: 匹配所有不可见元素
注意: 在应用:hidden过滤器时,display属性是none以及input元素的type属性为hiden

4、表单对象的属性过滤器
表单对象的属性过滤器通过表单元素的状态属性(例如选中,不选中)来进行过滤
:checked
说明:匹配所有选中的被选中元素
示例:$("input:checked")//匹配所有被选中的input元素
:disabled
说明: 匹配所有不可用的元素
示例: $("input:disabled") //匹配所有不可用的input元素
:enabled
说明: 匹配所有可用的元素
示例: $("input:enabled") //匹配所有可用的input元素
:selected
说明: 匹配所有选中的option元素
示例: $("select option:selected") //匹配所有被选中的选项元素

5、子元素过滤器
子元素选择器就是选择给定某个元素的子元素,具体的过滤条件由选择器的子元素选择
:first-child
说明: 匹配所有给定元素的第一个子元素
示例: $("ul li:first-child") //匹配ul元素中的第一个子元素li
:last-child
说明: 匹配所有给定元素的最后一个子元素
示例:$("ul li:last-child") //匹配ul元素中的最后一个子元素li
:only-child
说明: 如果 某个元素是它父元素中的唯一元素,那么将会匹配,
示例: $("ul li:only-child") //匹配只含有一个li元素的ul元素中的li
:nth-child(index/even/odd/equation)
说明: 匹配每个父元素下的第一个index个子或奇偶元素
示例: $("ul li:nth-child(even)")//匹配ul中索引值为偶数的子元素li
$("ul li:nth-child(3)") //匹配ul中第3个li元素

4,属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
属性选择器就是通过元素的属性作为过滤条件进行选择对象。
[attribute]
说明: 匹配包含给定属性的元素
示例: $("div[name]") //匹配含有name属性的div元素
[attribute=value]
说明: 匹配属性值为value的元素
示例: $("div[name='test']") //匹配name属性是test的div元素
[attribute!=value]
说明: 匹配属性值不等于value的元素
示例: $("div[name!='test']") //匹配name属性不是test的div元素
[attribute*=value]
说明: 匹配属性含有value的元素
示例: $("div[name*='test']") //匹配name属性中含有test值div元素
[attribute^=value]
说明: 匹配属性值以value开始的元素
示例: $("div[name^='test']") //匹配name属性以test开头的div元素
[attribute$=value]
说明: 匹配属性值是以value结束的元素
示例: $("div[name$='test']") //匹配name属性以test结束的div元素
[selector1][selector2][selectorN]
说明: 复合属性选择器,需要同时满足多个条件是使用
示例: $("div[id][name^='test']") //匹配具有id属性并有name属性且属性值以test开头的div元素

5,表单选择器

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
表单选择器是匹配经常在表单内出现的元素,但是匹配的元素不一定在表单中。
:input
说明: 匹配所有的input元素
示例: $(":input") //匹配所有的input元素
$("form :input") //匹配<form>标记中的所有input元素,需要注意,在form和:之间有一个空格
:button
说明:匹配所有的普通按钮,即type="button"的input元素
示例: $(":button") //匹配所有的普通按钮
:checkbox
说明: 匹配所有的复选框
示例: $(":checkbox") //匹配所有的复选框
:file
说明: 匹配所有的文件域
示例: $(":file") //匹配所有的文件域
:hidden
说明: 匹配所有的不可见元素,或者type为hidden的元素
示例: $(":hidden")//匹配所有的隐藏域
:image
说明:匹配所有的图像域
示例: $(":image") //匹配所有的图像域
:password
说明:匹配所有的密码域
示例: $("passwoed") //匹配所有的密码域
:radio
说明:匹配所有的单选按钮
示例: $(":radio")//匹配所有的单选按钮
:reset
说明: 匹配所有的重置按钮,即type="reset"的input元素
示例: $(":reset") //匹配所有的重置按钮
:submit
说明:匹配所有的提交按钮,即type="submmit"的input元素
示例: $(":submit")//匹配所有的提交按钮
:text
说明:匹配所有的单行文本框
示例: $(":text") //匹配所有的单行文本框

var $jqObj= $("form :checkbox")
$jqObj.attr("checked","checked") //attr可以设置属性值

6,选择器中的注意事项

1
2
3
4
5
选择器中含有特殊符号的注意事项
含有"."、"#"、"("或"]"等特殊字符。

选择器中含有空格的注意事项
在实际应用当中,选择器中含有空格也是不容忽视的,多一个空格或者少一个空格也会得到截然不同的结果

2,jQuery 遍历函数

三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。

函数 描述
.add() 将元素添加到匹配元素的集合中。
.andSelf() 把堆栈中之前的元素集添加到当前集合中。
.children() 获得匹配元素集合中每个元素的所有子元素。
.closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
.contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。
.each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数。
.end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
.eq() 将匹配元素集合缩减为位于指定索引的新元素。
.filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find() 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
.first() 将匹配元素集合缩减为集合中的第一个元素。
.has() 将匹配元素集合缩减为包含特定元素的后代的集合。
.is() 根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。
.last() 将匹配元素集合缩减为集合中的最后一个元素。
.map() 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。
.next() 获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
.nextUntil() 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
.not() 从匹配元素集合中删除元素。
.offsetParent() 获得用于定位的第一个父元素。
.parent() 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
.parents() 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。
.parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
.prevUntil() 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
.siblings() 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
.slice() 将匹配元素集合缩减为指定范围的子集。
:even 匹配所有索引值为偶数的元素,
:odd 匹配所有索引值为奇数的行,

3,jQuery对元素内容的操作

1
2
3
<div>
<p>yichen is a good man</p>
</div>

元素的内容是指定义元素的起始标记和结束标记之间的内容,可以分为文本内容和HTML内容

文本内容: div元素的文本内容为”yichen is a good man “,文本内容不包含元素的子元素,值包含元素的文本内容

HTML内容:div元素的HTML内容为”

yichen is a good man

“,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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
1、操作文本内容
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<p>yichin is a good man </p>
</div>
<div >
yichei

</div>
<input type="text" name="" id="input" value="yichen is a good man" />
<script type="text/javascript">
$(document).ready(function(){
/*text() :用于获取全部匹配元素的文本内容
注意:也可以解析XML文档元素的文本内容

text(val):用于设置全部匹配的元素的文本内容
注意:元素原来的内容将被新设置的内容替换掉,包括HTML内容
注意:设置文本内容时,即使内容包含HTML代码,也将被认为是普通文本, 并不能作为HTML代码被浏览器解析
*/
$div= $("div")
// $div.text("yichen is a nice man")
$div.text("<h1>yichen is a nice man</h1>")//纯文本内容,不会解析成HTML代码
//获取文本内容
console.log($div.text());
//设置文本内容
$div.text("<span>我是通过text()设置的文本内容</span>");

//html():用于获取第一个匹配元素的HTML内容
//html(val):用于设置全部匹配的html 内容
//注意:内容中包含HTML代码可以被浏览器解析
console.log($div.html());

$div.html("<span>我是通过html()设置的文本内容</span>");
console.log($div.html());
//$div.html("<h1>yichen is a nice man</h1>")//这种可以解析

//对元素值的操作
$input=$("#input")
//设置值
$input.val("nice man ")

console.log($input.val())

})

</script>

4,jQuery对DOM节点操作

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
元素节点  文本节点  属性节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQ对dom的操作</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript">

</script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="box1">
<p>yichen is a good man</p>
<p>yichen is a nice man</p>
</div>
<div id="box2">
<p>yichen is a good man</p>
<p>yichen is a nice man</p>
<p >yichen is a handsome man</p>
<p>yichen is a cool man</p>
<button type="button"id="btn" >按钮</button>
</div>

<script>
$(document).ready(function(){

//元素节点 创建p节点
var $jsp = $("<p></p>")
console.log($jsp)
$("div").append($jsp)
console.log($jsp)
//文本节点
var $jsp2 = $("<p>yichen is a good man</p>");
$("div").append($jsp2)
console.log($jsp2)
//属性节点
var $jsp3 = $("<p title='nice'>yichen is a good man</p>");
$("div").append($jsp3)
console.log($jsp3)
console.log($("div"))



/*
append(content) 为所有匹配的元素的内部追加内容
appendTo(content) 将所有匹配的元素添加到另一个元素集合中
prepend(content)
prependTo(content)
*/

/*after(content):在每个匹配的元素的之后插入内容
insertAfter(content)
before(content)
insertBefore(content)
*/

var $box1 = $("#box1")
//$box1.after($jsp2)
$jsp2.insertAfter($box1)


//删除节点
/*remove() 用于从DOM中删除匹配的元素

detach() //不会把匹配的元素从jQuery对象中删除
,因此,在将来仍然可以使用这些匹配的元素,与remove()
不同的是,所有绑定的时间或附加数据都会保留下来
empty() 该方法并不是删除节点,而是将节点清空,该方法可以
清空元素中所有的后代节点
*/

// var $p1 = $("div p:first").remove()
//var $p1 = $("div p:first").detach()

//复制节点
$("#box1 p:eq(1)").bind("click",function(){
//true把事件也复制,可以一直复制
$(this).clone(true).insertAfter($(this))
})


//替换节点
/*
replaceAll(seletor)
replaceWith(content)
*/


// $("#box1").replaceWith("<div>yichne</div>")
// $("<div>good</div>").replaceAll("div")

//遍历节点
$("p").each(function(index){

$(this).attr("title","我是第"+ (index+1)+"个p标签" )

})

/*
addClass(class)
:为所有匹配的元素添加指定的CSS类名
removeClass(class)
:从所有匹配的元素中删除全部或者指定的css类

toggleClass(class):如果存在就删除一个css类,如果不存在就在添加一个css类

toggleClass(class. switch): 如果switch参数为true
则加上对应的CSS类,否则就删除

注意: 使用addClass()方法添加css类时,并不会删除现有的css类,同事,在使用以上方法时,其class参数都可以设置多个类名
。类名与类名之间用空格分开
*/
$("div").addClass("change1");
$("div").removeClass("change1");

// 修改css样式属性
$("#btn").bind("click",function(){
$("#box2").css("background-color","yellow")
//获取属性值
console.log($("#box2").css("backgroundColor"))

})


//text html attr 修改标签的属性 css addClass removeClass

})
</script>

</body>
</html>

二,jQuery提升

1,jquery事件模块

事件方法触发器或添加一个函数到被选元素的事件处理程序。

下面的表格列出了所有用于处理事件的 jQuery 方法。

方法 描述
bind() 向元素添加事件处理程序
blur() 添加/触发失去焦点事件
change() 添加/触发 change 事件
click() 添加/触发 click 事件
dblclick() 添加/触发 double click 事件
delegate() 向匹配元素的当前或未来的子元素添加处理程序
die() 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
error() 在版本 1.8 中被废弃。添加/触发 error 事件
event.currentTarget 在事件冒泡阶段内的当前 DOM 元素
event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented() 返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped() 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped() 返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace 返回当事件被触发时指定的命名空间
event.pageX 返回相对于文档左边缘的鼠标位置
event.pageY 返回相对于文档上边缘的鼠标位置
event.preventDefault() 阻止事件的默认行为
event.relatedTarget 返回当鼠标移动时哪个元素进入或退出
event.result 包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation() 阻止其他事件处理程序被调用
event.stopPropagation() 阻止事件向上冒泡到 DOM 树,阻止任何父处理程序被事件通知
event.target 返回哪个 DOM 元素触发事件
event.timeStamp 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type 返回哪种事件类型被触发
event.which 返回指定事件上哪个键盘键或鼠标按钮被按下
event.metaKey 事件触发时 META 键是否被按下
focus() 添加/触发 focus 事件
focusin() 添加事件处理程序到 focusin 事件
focusout() 添加事件处理程序到 focusout 事件
hover() 添加两个事件处理程序到 hover 事件
keydown() 添加/触发 keydown 事件
keypress() 添加/触发 keypress 事件
keyup() 添加/触发 keyup 事件
live() 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load() 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
mousedown() 添加/触发 mousedown 事件
mouseenter() 添加/触发 mouseenter 事件
mouseleave() 添加/触发 mouseleave 事件
mousemove() 添加/触发 mousemove 事件
mouseout() 添加/触发 mouseout 事件
mouseover() 添加/触发 mouseover 事件
mouseup() 添加/触发 mouseup 事件
off() 移除通过 on() 方法添加的事件处理程序
on() 向元素添加事件处理程序
one() 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy() 接受一个已有的函数,并返回一个带特定上下文的新的函数
ready() 规定当 DOM 完全加载时要执行的函数
resize() 添加/触发 resize 事件
scroll() 添加/触发 scroll 事件
select() 添加/触发 select 事件
submit() 添加/触发 submit 事件
toggle() 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger() 触发绑定到被选元素的所有事件
triggerHandler() 触发绑定到被选元素的指定事件上的所有函数
unbind() 从被选元素上移除添加的事件处理程序
undelegate() 从现在或未来的被选元素上移除事件处理程序
unload() 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件
contextmenu() 添加事件处理程序到 contextmenu 事件
$.holdReady() 用于暂停或恢复.ready() 事件的执行

1.事件的绑定与移除

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2jQ</title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript">

</script>
</head>
<body>
<button id ="btn">添加一个p标签</button>
<div id="">
<p>yichen is a good man </p>
<p>yichen is a nice man </p>
<p>yichen is a handsome man </p>
<p>yichen is a cool man </p>
<p>yichen is a good1 man </p>

</div>
<script type="text/javascript">
// $(document).ready(function(){

// })
$(function(){

/*事件模块中最重要的一个函数。它极大地提高了web响应速度
$(document).ready(function(){

});
可以简写
当$()不带参数时默认就是document
$().ready(function(){

});
还可以简写
$(function(){

})

*/



/* $(document).ready()方法代替传统的window.onload()方法,不过两者之间还是有些细微的区别的。

1、在一个页面上可以无限制地使用$(document).ready()方法。各方方法间并不冲突会按照在代码中的顺序依次执行,而windo.onload()方法
在一个页面中只能使用一次。

2、在一个文档完全下载浏览器时(包括所有关联文件。例如图片、横幅等)就会响应
window.onload()方法,而$(document).ready()方法是在所有的DOM元素完全
就绪以后就可以调用,不包括关联的文件,例如在页面上还有图片没有加载完毕但是dom元素已经完全就绪
这样就会执行$(document).ready()方法。在相同条件下window.onload()方法时不会 执行的
,他会继续等待图片加载,直到图片及其他的关联文件都下载完毕时才会执行,显示,把网页解析为DOM元素的速度要比把页面中的所有关联文件加载完毕的速度快的多

*/

/*1、绑定事件
bind delegate on live
*/
//bind 适用给id属性的添加绑定事件
$("#btn").click(function(){
$("div").append($("<p>我是新的</p>"));
})

//bind(type,[data],fn);
//type: 事件类型
//data:可选参数,作为event.date属性值传递给事件对象的额外数据对象,大多数的情况下不适应该参数
//fn: 绑定的事件处理程序

// $("div p").bind("click",function(e){

// console.log($(this).text());
// })
//("div p").unbind("click") //移除事件

/*bind问题:
1、隐式迭代,如果匹配到的元素特别多的时候,比如我在div里放了50个p标签
,就的执行绑定50次,对于大量元素来说,影响到了性能

2、对于尚未存储在标签无法绑定事件,
*/


/*delegate
适用的事件(必须是冒泡的事件)click
mousedown mouseup dkeydown keypress keymove


*/
// $("div").delegate("p","click",function(){
// // $("div").append($("<p>我是新的</p>"));
// console.log($(this).text());
// })

/*on
on()其实是将以前的绑定事件方法做了统一,可以发现无论bind()
还是delegate(),其实都是通过on()方法实现的,只是参数不同罢了。

*/


$("div").on("click","p",function(){
console.log($(this).text());
})

})

/*总结
1、选择匹配到的元素比较多时,不要用bind()迭代绑定
2、用id选择器时,可以用bind()
3、用delgate()和on()方法。dom树不要太深
4、尽量使用on()
*/


</script>

</body>
</html>

2,模拟用户的操作触发事件

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟用户操作触发事件</title>
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<button id ="btn">添加一个p标签</button>
<button id ="btn2">按钮</button>
<div id="">
<p>yichen is a good man </p>
<p>yichen is a nice man </p>
<p>yichen is a handsome man </p>
<p>yichen is a cool man </p>
<p>yichen is a good1 man </p>

</div>
<script type="text/javascript">
$(function(){

/* triggerHandler()和trigger()语法格式完全相同
区别:
triggerHandler()
不会导致浏览器同名的默认行为被执行
trigger()会导致浏览器同名的默认行为的执行(
可以通过返回false阻止默认行为)
注意: triggerHandler()和trigger()方法可以触发bind的定义事件,并且还
可以为事件传递参数

*/

var a = $("#btn").bind("click",function(event,msg1,msg2){
console.log("*****%s***%s**",msg1, msg2)

})

// a.trigger("click")
// a.trigger("click")
// a.triggerHandler("click")
a.trigger("click",["yichen","good"])
a.triggerHandler("click",["yichen","good"])
return false


});



</script>


</body>
</html>

3,模仿鼠标悬停,移入移出事件

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
<button id ="btn">添加一个p标签</button>

//方法一、
// $("#btn").hover(function(){
// console.log("移入")

// },function(){
// console.log("移出")

// })

//只要移出。
$("#btn").hover( null,function(){
console.log("移出")

})

//方法二、
// $("#btn").bind("mouseover",function(){
// console.log("移入")
// })

// $("#btn").bind("mouseout",function(){
// console.log("移出")
// })

//查看事件属性,和类型
$("#btn").bind("click",function(e){
console.log(e);
console.log(e.type);
})



//事件冒泡:
$("body").bind("click",function(){
$(this).css("background-color","blue")

})

$("#box").bind("click",function(e){
$(this).css("background-color","yellow")

//阻止冒泡
//e.stopPropagation()
//阻止冒泡和默认行为
return false
})

$("#btn").bind("click",function(e){
console.log(e);
console.log(e.type);

return false
})

2,jquery动画效果

下面的表格列出了所有用于创建动画效果的 jQuery 方法。

方法 描述
animate() 对被选元素应用”自定义”的动画
clearQueue() 对被选元素移除所有排队函数(仍未运行的)
delay() 对被选元素的所有排队函数(仍未运行)设置延迟
dequeue() 移除下一个排队函数,然后执行函数
fadeIn() 逐渐改变被选元素的不透明度,从隐藏到可见
fadeOut() 逐渐改变被选元素的不透明度,从可见到隐藏
fadeTo() 把被选元素逐渐改变至给定的不透明度
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之间进行切换
finish() 对被选元素停止、移除并完成所有排队动画
hide() 隐藏被选元素
queue() 显示被选元素的排队函数
show() 显示被选元素
slideDown() 通过调整高度来滑动显示被选元素
slideToggle() slideUp() 和 slideDown() 方法之间的切换
slideUp() 通过调整高度来滑动隐藏被选元素
stop() 停止被选元素上当前正在运行的动画
toggle() hide() 和 show() 方法之间的切换

1,隐藏显示切换

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<script src="js/jquery-3.5.1.min.js"></script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<button type="button" id="btn1">隐藏</button>
<button type="button" id="btn2">显示</button>
<button type="button" id="btn3">切换状态</button>
<script type="text/javascript">
//原生js 隐藏
// document.getElementById("btn1").onclick=function(){
// document.getElementById("box").style.display="none"
// }

//jQ 隐藏

var $div =$("#box")
$("#btn1").click(function(){
//$div.hide(1000,function(){
//slow对应的600 normal 400 fast 200
$div.hide("slow",function(){
console.log("动画结束")
});

//jQ 显示


$("#btn2").click(function(){

$div.show(1000)
})

//切换状态
$("#btn3").click(function(){

$div.toggle(1000)
})
})

</script>

</body>
</html>

3,jQuery AJAX

AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

如果没有 jQuery,AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。

1,jQuery load() 方法

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

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件("demo_test.txt")的内容:

<h2>jQuery AJAX 是个非常棒的功能!</h2>
<p id="p1">这是段落的一些文本。</p>
下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:

实例
$("#div1").load("demo_test.txt");


也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:

实例
$("#div1").load("demo_test.txt #p1");


可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息

$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});

2,jQuery - AJAX get() 和 post() 方法

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求:GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

如需学习更多有关 GET 和 POST 以及两方法差异的知识,请阅读我们的 HTTP 方法 - GET 对比 POST。

jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法:
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:

实例
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});

尝试一下 »
$.get() 的第一个参数是我们希望请求的 URL("demo_test.php")。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。

提示: 这个 PHP 文件 ("demo_test.php") 类似这样:

demo_test.php 文件代码:
<?php
echo '这是个从PHP文件中读取的数据。';
?>

jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:

$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据:

实例
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});

尝试一下 »
$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.php")。

然后我们连同请求(name 和 url)一起发送数据。

"demo_test_post.php" 中的 PHP 脚本读取这些参数,对它们进行处理,然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。

提示: 这个 PHP 文件 ("demo_test_post.php") 类似这样:

demo_test_post.php 文件代码

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>

3,jq -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
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax</title>
<script src="js/jquery-3.5.1.min.js"></script>
</head>

<body>
<button type="button" id="btn" >按钮</button>
<div id="box">

</div>
<script type="text/javascript">
$(function(){

$("#btn").bind("click",function(){

$.ajax({
type:"get",
url: "http://127.0.0.1:8848/1%2CjQuery%E5%9F%BA%E7%A1%80/js/jquery-3.5.1.min.js",
data:{a:1,b:2},
dataType:"text",
success: function(data,textStatus){
console.log(data);

/*var d = data["CATALOG"]["CD"]
for (var i = 0;i<d.length; i++) {
var info = d[i]
var $p =$("<p>"+ info["TITLE"]+"</p>")
}*/

//var $p=$("<p>"+ data +"</p>")
$("#box").append(data)

}

})

})



})


</script>

</body>
</html>

评论


:D 一言句子获取中...

加载中,最新评论有1分钟缓存...