前端JQuery

显示全部楼层 · 2019-9-17 11:31:36

jQuery

jQuery先容

　　　　1.jQuery是一个轻量级的、兼容多欣赏器的JavaScript库。
　　　　2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地举行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
　　　　

jQuery的优势

一款轻量级的JS框架。jQuery焦点js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，好比要找到某个DOM对象的相邻元素，JS大概要写好几行代码，而jQuery一行代码就搞定了，再好比要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨欣赏器兼容。jQuery根本兼容了现在主流的欣赏器，不消再为欣赏器的兼容标题而伤透头脑。
插件扩睁开发。jQuery有着丰富的第三方的插件，比方：树形菜单、日期控件、图片切换插件、弹出窗口等等根本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据本身必要去改写和封装插件，简朴实用。

　　　　　　原生DOM的写法就是写JS代码，而以后我们多数都用jQuery来写，因为jQuery的优势很多，看上面，并且查找标签的方式有很多，比原生的DOM丰富的多，很便利，尚有重要的一点就是不必要思量欣赏器的兼容性，因为jQuery做到了各大欣赏器兼容的功能。
jQuery内容：

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax

　　　　下载链接：jQuery官网，首先必要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。
　　　　中文文档：jQuery AP中文文档
　　　　

　　　　　　用压缩的也行，不消压缩的也行，文件都不大，对页面内容的加载速度差的不是很多，假如文件大很多，就思量压缩版的，一般线上都是压缩版的，只管提高页面加载速度。
　　　　　jQuery的引入方式有两种：
　　　　　　1.直接下载文件到本地（最常用），从本地中导入
　　　　　　2.使用文件的网络地址，就像我们img标签内里的谁人src的用法差不多。
　　　　引入完之后，就可以直接使用jQuery的语法来写了，但是还是要写在script标签内里，并且要留意引入次序，先引入文件，再在script标签内里写jQuery的代码，先导入再使用。
　　　　　　

　　　　　　会报错：在欣赏器的调试窗口的console内里可以看到，记着这个昂，以后出现这个错误，不能问昂~~~
　　　　　　　　

jQuery版本

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，终极版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。假如不思量兼容低版本的欣赏器可以使用2.x，终极版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的欣赏器。必要留意的是很多老的jQuery插件不支持3.x版。现在该版本是官方重要更新维护的版本，我们学习就用3.几的就行了，工作中假如必要兼容IE678，就用1.几版本的就行，2.几版本的就别用了。

　　　　维护IE678是一件让人头疼的事变，一般我们都会额外加载一个CSS和JS单独处理。值得光荣的是使用这些欣赏器的人也逐步淘汰，PC端用户已经逐步被移动端用户所代替，假如没有特殊要求的话，一般都会选择放弃对678的支持。
jQuery对象（先看一下jQuery语法和选择器我们再返来看这个对象）

　　　　jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。假如一个对象是 jQuery对象，那么它就可以使用jQuery里提供的方法：比方$(“#i1”).html()。
　　　　$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
　　　　相当于： document.getElementById("i1").innerHTML;
　　　　虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
　　　　一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像var variable = DOM对象$variable[0]//jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就酿成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以了

复制代码

　　　　拿上面谁人例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

复制代码

jQuery底子语法

　　$(selector).action() #$(selector)找到某个标签，.action()通过这个标签对象调用它的一些方法。

复制代码

查找标签

根本选择器（同css）

　　　　　　id选择器：

$("#id") #不管找什么标签，用什么选择器，都必须要写$("")，引号内里再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部门的内容

复制代码

　　　　　　标签选择器：

$("tagName")

复制代码

　　　　　　class选择器：

$(".className")

复制代码

　　　　　　共同使用：

$("div.c1") // 找到有c1 class类的div标签

复制代码

　　　　　　全部元素选择器：

$("*")

复制代码

　　　　　　组合选择器：

$("#id, .className, tagName")

复制代码

层级选择器：（同css）

　　　　　　x和y可以为恣意选择器

$("x y");// x的全部后代y（子子孙孙）$("x > y");// x的全部儿子y（儿子）$("x + y")// 找到全部紧挨在x后面的y$("x ~ y")// x之后全部的兄弟y

复制代码

根本筛选器（选择之后举行过滤）：

:first // 第一个:last // 末了一个:eq(index)// 索引便是index的谁人元素:even // 匹配全部索引值为偶数的元素，从 0 开始计数:odd // 匹配全部索引值为奇数的元素，从 0 开始计数:gt(index)// 匹配全部大于给定索引值的元素:lt(index)// 匹配全部小于给定索引值的元素:not(元素选择器)// 移除全部满足not条件的标签:has(元素选择器)// 选取全部包含一个或多个标签在其内的标签(指的是从后代元素找)

复制代码

　　　　　　例子：
　　　　

　　　　

$("div:has(h1)")// 找到全部后代中有h1标签的div标签，意思是首先找到全部div标签，把这些div标签的后代中有h1的div标签筛选出来$("div:has(.c1)")// 找到全部后代中有c1样式类（类属性class='c1'）的div标签$("li:not(.c1)")// 找到全部不包含c1样式类的li标签$("li:not(:has(a))")// 找到全部后代中不含a标签的li标签

复制代码

　　　　　　练习（先看一个jQuery的click事件绑定）：
　　　　　　　　自界说模态框，使用jQuery实现弹出和隐蔽功能。jQuery版自界说模态框:

自界说模态框 .cover { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: darkgrey; z-index: 999; } .modal { width: 600px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -300px; margin-top: -200px; z-index: 1000; } .hide { display: none; }
姓名爱好

复制代码

属性选择器：

[attribute][attribute=value]// 属性便是[attribute!=value]// 属性不便是

复制代码

　　　　　　例子：

// 示例,多用于input标签$("input[type='checkbox']");// 取到checkbox范例的input标签$("input[type!='text']");// 取到范例不是text的input标签

复制代码

表单筛选器（多用于找form表单内里出现的input标签，固然通过属性选择器找肯定也是没标题的，这样就是写着简朴一些）：

:text:password:file:radio:checkbox:submit:reset:button

复制代码

　　　　　　例子：

$(":checkbox") // 找到全部的checkbox

复制代码

　　　　　　表单对象属性:

:enabled:disabled:checked:selected

复制代码

　　　　留意checked：
　　　　　　

　　
　　　　其他例子：
　　　　　　　　找到可用的input标签

$("input:enabled") // 找到可用的input标签

复制代码

　　　　　　　　找到被选中的option：

北京市上海市广州市深圳市$(":selected") // 找到全部被选中的option

复制代码

筛选器方法（未来用的很多）

　　选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法，写在对象后面加括号，不再是写在选择器内里的了。
　　下一个元素：

$("#id").next()$("#id").nextAll()$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它

复制代码

　　加两个id属性作为一会筛选的时候的区分：
　　

　　上一个元素：

$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2")

复制代码

　　父亲元素：

$("#id").parent()$("#id").parents() // 查找当前元素的全部的父辈元素（爷爷辈、祖先辈都找到）$("#id").parentsUntil('body') // 查找当前元素的全部的父辈元素，直到遇到匹配的谁人元素为止，这里直到body标签，不包含body标签，根本选择器都可以放到这内里使用。

复制代码

　　儿子和兄弟元素：

$("#id").children();// 儿子们$("#id").siblings();// 兄弟们，不包含本身，.siblings('#id')，可以在添加选择器举行进一步筛选

复制代码

　　查找
　　　　搜索全部与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")

复制代码

　　　　等价于$("div p")
　　　　

　　筛选
　　　　筛选出与指定表达式匹配的元素聚集。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1") // 从结果会合过滤出有c1样式类的，从全部的div标签中过滤出有class='c1'属性的div，和find差别，find是找div标签的子子孙孙中找到一个符合条件的标签

复制代码

　　　　等价于 $("div.c1")
　　增补（和前面使用冒号的一样 :first等，只不过冒号的谁人是写在选择器内里的，而下面的这几个是方法，如此而已，就不说啦）：

.first() // 获取匹配的第一个元素.last() // 获取匹配的末了一个元素.not() // 从匹配元素的聚集中删除与指定表达式匹配的元素.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。.eq() // 索引值便是指定值的元素

复制代码

　　示例：左侧菜单示例，也是本日的作业啦，要的效果是下面这样的：
　　

左侧菜单示例 .left { position: fixed; left: 0; top: 0; width: 20%; height: 100%; background-color: rgb(47, 53, 61); } .right { width: 80%; height: 100%; } .menu { color: white; } .title { text-align: center; padding: 10px 15px; border-bottom: 1px solid #23282e; } .items { background-color: #181c20; } .item { padding: 5px 10px; border-bottom: 1px solid #23282e; } .hide { display: none; } 菜单一
111
222
333
菜单二
111
222
333
菜单三
111
222
333

复制代码

　　差别写法：
　　

　　一句话的写法：
　　

操作标签

样式操作

　　　　样式类（添加删除class类的值来修改样式）

addClass();// 添加指定的CSS类名。removeClass();// 移除指定的CSS类名。hasClass();// 判断样式存不存在toggleClass();// 切换CSS类名，假如有就移除，假如没有就添加。

复制代码

　　　　示例：开关灯和模态框
　　　　CSS（直接修改css的属性来修改样式）

css("color","red")//DOM操作：tag.style.color="red"

复制代码

　　　　示例：

$("p").css("color", "red"); //将全部p标签的字体设置为红色

复制代码

位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置position()// 获取匹配元素相对父元素的偏移，不能设置位置$(window).scrollTop() //滚轮向下移动的距离$(window).scrollLeft() //滚轮向左移动的距离

复制代码

　　　　.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
　　　　和 .position()的差别在于： .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，假如找不到这样的元素，则返回相对于欣赏器的距离。看例子：
　　　　　　

　　　　通过offset设置位置偏移
　　　　　　

　　　　示例：返回顶部示例：

位置相干示例之返回顶部 .c1 { width: 100px; height: 200px; background-color: red; } .c2 { height: 50px; width: 50px; position: fixed; bottom: 15px; right: 15px; background-color: #2b669a; } .hide { display: none; } .c3 { height: 100px; } 点我
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
返回顶部

复制代码

尺寸：

height() //盒子模子content的大小，就是我们设置的标签的高度和宽度width()innerHeight() //内容content高度 + 两个padding的高度innerWidth()outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包罗margin的高度，因为margin不是标签的，是标签和标签之间的距离outerWidth()

复制代码

文本操作

　　　　HTML代码：

html()// 取得第一个匹配元素的html内容，包含标签内容html(val)// 设置全部匹配元素的html内容，识别标签，能够表现出标签的效果

复制代码

　　　　文本值：

text()// 取得全部匹配元素的内容，只有文本内容，没有标签text(val)// 设置全部匹配元素的内容，不识别标签，将标签作为文本插入进去

复制代码

　　　　值：

val()// 取得第一个匹配元素的当前值val(val)// 设置全部匹配元素的值val([val1, val2])// 设置多选的checkbox、多选select的值

复制代码

　　　　比方：

篮球足球 1 2 3

复制代码

　　　　设置值：

$("[name='hobby']").val(['basketball', 'football']);$("#s1").val(["1", "2"])

复制代码

　　　　示例：
　　　　　　获取被选中的checkbox或radio的值：

女男

复制代码

　　　　可以使用：

$("input[name='gender']:checked").val()

复制代码

　　　　　留意：
　　　　　

　　留意，当我们从多个对象中取一个对象来操作的时候的标题：
　　　　

　　　　自界说登录校验示例

文本操作之登录验证 .error { color: red; } 用户名
暗码

复制代码

属性操作

　　　　用于ID自带属性等或自界说属性：

attr(attrName)// 返回第一个匹配元素的属性值attr(attrName, attrValue)// 为全部匹配元素设置一个属性值attr({k1: v1, k2:v2})// 为全部匹配元素设置多个属性值removeAttr()// 从每一个匹配的元素中删除一个属性

复制代码

　　　　用于checkbox和radio

prop() // 获取属性

复制代码

　　　　留意：
　　　　　　在1.x及2.x版本的jQuery中使用attr对checkbox举行赋值操作时会出bug，在3.x版本的jQuery中则没有这个标题。为了兼容性，我们在处理checkbox和radio的时候只管使用特定的prop()，不要使用attr("checked", "checked")。
　　　　prop和attr的区别：
　　　　　　attr全称attribute(属性)
　　　　　　prop全称property(属性)
　　　　　　虽然都是属性，但他们所指的属性并不雷同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以以为attr是显式的，而prop是隐式的。
　　　　　　举个例子：
　　　　　　针对上面的代码，

$("#i1").attr("checked") // undefined$("#i1").prop("checked") // false

复制代码

　　　　　　可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
　　　　　　假如换成下面的代码：
　　　　　　再实验：

$("#i1").attr("checked") // checked$("#i1").prop("checked") // true

复制代码

　　　　　　这已经可以证明attr的范围性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，也可以明白为这个dom对象的状态，选中返回true，没选中返回false。
　　　　　　接下来再看一下针对自界说属性，attr和prop又有什么区别：
　　　　　　实验以下代码：

$("#i1").attr("me") // "自界说属性"$("#i1").prop("me") // undefined

复制代码

　　　　　　可以看到prop不支持获取标签的自界说属性。
　　　　　　总结一下：
　　　　　　　　1.对于标签上有的能看到的属性和自界说属性都用attr
　　　　　　　　2.对于返回布尔值的好比checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
　　　　　　　　具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
　　　　练习题：全选、反选、取消

Title全选反选取消[table] [tr] # 姓名爱好 [/tr] [tr] [td][/td] [td]金老板[/td] [td]开车[/td] [/tr] [tr] [td][/td] [td]景女神[/td] [td]茶道[/td] [/tr] [tr] [td][/td] [td]苑昊（苑局）[/td] [td]不洗头、不翻车、不要脸[/td] [/tr] [/table]

复制代码

事件

常用事件

click(function(){...})hover(function(){...})blur(function(){...})focus(function(){...})change(function(){...}) //内容发生厘革，input，select等keyup(function(){...}) mouseover 和 mouseenter的区别是：mouseover事件是假如该标签有子标签，那么移动到该标签或者移动到子标签时会一连触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象

复制代码

　　　　keydown和keyup事件（键盘按键按下和抬起的事件，尚有一些其他的key事件）组合示例：按住shift实现批量操作：
　　　　　　先把下面的代码都拿过来看看效果：
　　　　　　　　

　　　　　　代码示例，html代码本身copy一下就行了，js部门我们本身写写，其实就是键盘的按键和我们的事件绑定到一起了。
　　　　　　　　先看一下keyCode：键盘上每个按键都对应有一个keyCode：
　　　　　　　　　　　　

Title[table] [tr] # 姓名操作 [/tr] [tr] [td][/td] [td]Egon[/td] [td] 上线下线停职 [/td] [/tr] [tr] [td][/td] [td]Alex[/td] [td] 上线下线停职 [/td] [/tr] [tr] [td][/td] [td]Yuan[/td] [td] 上线下线停职 [/td] [/tr] [tr] [td][/td] [td]EvaJ[/td] [td] 上线下线停职 [/td] [/tr] [tr] [td][/td] [td]Gold[/td] [td] 上线下线停职 [/td] [/tr] [/table]

复制代码

　　　　hover事件示例：hover事件（不是原生dom的谁人hover，并且js内里没有onhover事件，这个是jQuery的hover事件，是jQuery封装的，原生js内里没有）：
　　　　我们先拿代码看看效果，分析一下代码就行啦，你们本身下来练习写

hover示例 * { margin: 0; padding: 0; } .nav { height: 40px; width: 100%; background-color: #3d3d3d; position: fixed; top: 0; } .nav ul { list-style-type: none; line-height: 40px; } .nav li { float: left; padding: 0 10px; color: #999999; position: relative; } .nav li:hover { background-color: #0f0f0f; color: white; } .clearfix:after { content: ""; display: block; clear: both; } .son { position: absolute; top: 40px; right: 0; height: 50px; width: 100px; background-color: #00a9ff; display: none; } .hover .son { display: block; }
[list]
[*]登录
[*]注册
[*]购物车空空如也...
[/list]

复制代码

　　　　实时监听input输入值厘革示例：input值厘革事件：看百度搜索的效果：
　　　　　　

　　　　这叫做input事件，看代码：只要input框内里的值发生厘革就触发某个事件，留意input事件不能直接绑定，必须用on绑定才行，$('#d1').input(function{})是不对的，$('#d1').on('input',function(){})才行

实时监听input输入值厘革

复制代码

　　上面代码的效果
　　　　

事件绑定

.on( events [, selector ],function(){})

　　　　　　1.events：事件
　　　　　　2.selector: 选择器（可选的）
　　　　　　3.function: 事件处理函数
移除事件（不常用）

.off( events [, selector ][,function(){}])

　　　　off() 方法移除用 .on()绑定的事件处理步伐。
　　　　　　$("li").off("click")；就可以了
　　　　　　1.events：事件
　　　　　　2.selector: 选择器（可选的）
　　　　　　3.function: 事件处理函数
制止后续事件实验

return false; // 常见制止表单提交等，假如input标签内里的值为空就组织它提交，就可以使用这两种方法
- e.stopPropagation();

制止默认事件 #action内里假如没写url，默认是将内容提交到当前页面的url处点我

复制代码

　　　　留意：
　　　　　　像click、keydown等DOM中界说的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中界说的事件就不能用.on()方法来绑定了。
　　　　　　想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(this).addClass('hover');});$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件 $(this).removeClass('hover');});

复制代码

制止事件冒泡

制止事件冒泡点我

复制代码

　　　　pycharm的一个功能：
　　　　

　
事件委托

　　　　事件委托是通过事件冒泡的原理，使用父标签去捕获子标签的事件，将未来添加进来的某些子标签主动绑定上事件。
　　　　示例：
　　　　表格中每一行的编辑和删除按钮都能触发相应的事件。归去美满一下咱们上面的谁人作业吧，添加一行数据的谁人作业，然后我们在学习一下上面的那些绑定事件。

$("table").on("click", ".delete", function () { //中间的参数是个选择器，前面这个$('table')是父级标签选择器，选择的是父级标签，意思就是将子标签（子子孙孙）的点击事件委托给了父级标签 //但是这里留意一点，你console.log(this)；你会发现this还是触发事件的谁人子标签，这个记着昂 // 删除按钮绑定的事件 })

复制代码

页面载入

　　　　当DOM载入停当可以查询及利用时绑定一个要实验的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用步伐的相应速度。
　　　　还记得我们说将js代码写到head标签和写道body标签下面的作用是差别的吗，写在head标签内里的话，假如你写了操作某个标签的内容的话，谁人标签还没加载出来，先加载了你的js代码，就找不到这个标签，以是不会生效，以是写在body标签最下面是一种管理办法，尚有一种办法就是window.onload=function(){js的代码}，等页面上全部的元素都加载完，在实验这内里的js代码，还记得吗？，但是这个window.onload有个缺点，这个缺点就是这个操作时给window.onload赋值，假如你本身写了两个js文件，每个js文件中都有一个window.onload的话，那么后引入的文件会把前面引入的文件的window.onload内里的js代码全部覆盖掉，那么第一个文件的js代码就失去了效果，尚有一个标题就是，window.onload会等到页面上的文档、图片、视频等全部资源都加载完才实验内里的js代码，导致有些效果的加载比力慢，以是我们使用下面的写法，不存在覆盖标题，而且只要文档加载完就触发，不必要等着一些图片啊视频啊什么的，加载js效果的速度快。
　　　　两种写法：

$(document).ready(function(){// 在这里写你的JS代码...})

复制代码

　　　　简写：

$(function(){// 你在这里写你的代码})

复制代码

　　　　文档加载完绑定事件，并且制止默认事件发生：登录校验示例：（这个不讲，大家看看代码就行啦）

登录注册示例 .error { color: red; } 姓名暗码

复制代码

　　　　其他的方法简朴试试就行了：
　　　　

　　　　通过animate自界说动画示例：点赞特效简朴示例（看看效果，本身看看代码就行啦，你以后大概率上用不到）：

点赞动画示例 div { position: relative; display: inline-block; } div>i { display: inline-block; color: red; position: absolute; right: -16px; top: -5px; opacity: 1; } 点赞

复制代码

增补

each

　　jQuery.each(collection, callback(indexInArray, valueOfElement))：
　　　　描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名举行迭代。

li =[10,20,30,40]$.each(li,function(i, v){ console.log(i, v);//function内里可以接受两个参数，i是索引，v是每次循环的具体元素。})循环自界说对象也是可以的：

复制代码

// var d1 = {'name':'chao','age':18}
// $.each(d1,function(k,v){console.log(k,v)})
　　　　输出：

010120230340

复制代码

　　.each(function(index, Element))：
　　　　描述：遍历一个jQuery对象，为每个匹配元素实验一个函数。
　　　　.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数实验时，会转达当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，以是关键字 this 总是指向这个元素。

// 为每一个li标签添加foo$("li").each(function(){ $(this).addClass("c1");});

复制代码

　　　　留意: jQuery的方法返回一个jQuery对象，遍历jQuery聚集中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不必要显式地循环的 .each()方法：
　　　　也就是说，上面的例子没有须要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1"); // 对全部标签做同一操作

复制代码

　　留意：
　　　　在遍历过程中可以使用 return false提前结束each循环。
　　　　而直接使用return;后面什么都不加，不写false，就是跳过本次循环的意思
　　停止each循环

return false；

复制代码

　　　　　var namelist = ['a','b','c']
　　　　　

　　　　上面是循环一个数组，通过$.each,还必要把数组传进去，我们还可以通过each来循环标签：(this指的是当前循环的谁人标签对象，以后循环标签的时候，就不消本身写for循环了，用each就行了)
js和jquery中的for循环也是通过他们两个来跳出当此循环或者停止循环
　　　　　　

　　　　　　
　　　　伏笔...
.data()

　　　　恣意jQuery对象都有data方法，可以生存恣意值，可以用来代替全局变量
　　　　在匹配的元素聚集中的全部元素上存储恣意相干数据或返回匹配的元素聚集中的第一个元素的给定名称的数据存储的值。
　　.data(key, value): 设置值
　　　　描述：在匹配的元素上存储恣意相干数据。

$("div").data("k",100);//给全部div标签都生存一个名为k，值为100

复制代码

　　.data(key): 取值，没有的话返回undefined
　　　　描述: 返回匹配的元素聚集中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中生存的"k"的值

复制代码

　　　　生存值：
　　　　　　

　　　　可以生存标签：
　　　　　　

　　　　
　　.removeData(key):
　　　　描述：移除存放在元素上的数据，不加key参数表示移除全部生存的数据。

$("div").removeData("k"); //移除元素上存放k对应的数据

复制代码

　　　　
　　　　先把作业给大家说一下：
　　　　　　

　　　　　　新增按钮和编辑按钮弹出的是同一个对话框，内里是同一个提交按钮和取消按钮，你必要思量一下怎样区分是新增还是编辑，新增的效果是添加一行，编辑的效果是修改之前的数据。
　　　　　　

　　　　　作业代码示例：

Title .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 99; } .modal { width: 300px; height: 200px; background-color: white; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; z-index: 1000; } .hide { display: none; } .input-box { margin: 40px; } 新增[table] [tr] # 姓名爱好操作 [/tr] [tr] [td][/td] [td]金老板[/td] [td]开车[/td] [td] 开除编辑 [/td] [/tr] [tr] [td][/td] [td]景女神[/td] [td]茶道[/td] [td] 开除编辑 [/td] [/tr] [tr] [td][/td] [td]苑昊（苑局）[/td] [td]不洗头、不翻车、不要脸[/td] [td] 开除编辑 [/td] [/tr] [/table]
姓名：
爱好：
取消提交

复制代码

插件(相识即可)

　　　　jQuery.extend(object)
　　　　jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
　　　　示例：
jQuery.fn.extend(object)
一个对象的内容归并到jQuery的原型，以提供新的jQuery实例方法。
单独写在文件中的扩展：

(function(jq){ jq.extend({ funcName:function(){ ... }, });})(jQuery);

复制代码

　　　　例子：jQuery的插件都是这样扩展出来的
　　　　自界说的jQuery登录验证插件：（本身看看，相识一下就行了）
　　　　HTML文件

登录校验示例 .login-form { margin: 100px auto 0; max-width: 330px; } .login-form > div { margin: 15px 0; } .error { color: red; } 姓名
暗码
手机
来自

复制代码

JS文件：

"use strict";(function ($) { function check() { // 界说一个标志位，表示验证通过还是验证不通过 var flag = true; var errMsg; // 校验规则 $("form input[type!=':submit']").each(function () { var labelName = $(this).prev().text(); var inputName = $(this).attr("name"); var inputValue = $(this).val(); if ($(this).attr("required")) { // 假如是必填项 if (inputValue.length === 0) { // 值为空 errMsg = labelName + "不能为空"; $(this).next().text(errMsg); flag = false; return false; } // 假如是暗码范例，我们就要判断暗码的长度是否大于6位 if (inputName === "password") { // 除了上面判断为不为空还要判断暗码长度是否大于6位 if (inputValue.length < 6) { errMsg = labelName + "必须大于6位"; $(this).next().text(errMsg); flag = false; return false; } } // 假如是手机范例，我们必要判断手机的格式是否正确 if (inputName === "mobile") { // 使用正则表达式校验inputValue是否为正确的手机号码 if (!/^1[345678]\d{9}$/.test(inputValue)) { // 不是有用的手机号码格式 errMsg = labelName + "格式不正确"; $(this).next().text(errMsg); flag = false; return false; } } } }); return flag; } function clearError(arg) { // 清空之前的错误提示 $(arg).next().text(""); } // 上面都是我界说的工具函数 $.extend({ validate: function () { $("form :submit").on("click", function () { return check(); }); $("form :input[type!='submit']").on("focus", function () { clearError(this); }); } });})(jQuery);

复制代码

传参版插件：
　　HTML文件：

登录校验示例 .login-form { margin: 100px auto 0; max-width: 330px; } .login-form > div { margin: 15px 0; } .error { color: red; } 姓名
暗码
手机
来自

复制代码

JS文件:

"use strict";(function ($) { function check(arg) { // 界说一个标志位，表示验证通过还是验证不通过 var flag = true; var errMsg; // 校验规则 $("form input[type!=':submit']").each(function () { var labelName = $(this).prev().text(); var inputName = $(this).attr("name"); var inputValue = $(this).val(); if (arg[inputName].required) { // 假如是必填项 if (inputValue.length === 0) { // 值为空 errMsg = labelName + "不能为空"; $(this).next().text(errMsg); flag = false; return false; } // 假如是暗码范例，我们就要判断暗码的长度是否大于6位 if (inputName === "password") { // 除了上面判断为不为空还要判断暗码长度是否大于6位 if (inputValue.length < arg[inputName].minLength) { errMsg = labelName + "必须大于"+arg[inputName].minLength+"位"; $(this).next().text(errMsg); flag = false; return false; } } // 假如是手机范例，我们必要判断手机的格式是否正确 if (inputName === "mobile") { // 使用正则表达式校验inputValue是否为正确的手机号码 if (!/^1[345678]\d{9}$/.test(inputValue)) { // 不是有用的手机号码格式 errMsg = labelName + "格式不正确"; $(this).next().text(errMsg); flag = false; return false; } } } }); return flag; } function clearError(arg) { // 清空之前的错误提示 $(arg).next().text(""); } // 上面都是我界说的工具函数 $.extend({ validate: function (arg) { $("form :submit").on("click", function () { return check(arg); }); $("form :input[type!='submit']").on("focus", function () { clearError(this); }); } });})(jQuery);

复制代码

　　课后习题：

登录+验证
左侧菜单
表格-增、删、改、查

键盘上每个按键都对应有一个keyCode值

复制代码

来源：https://www.cnblogs.com/changxin7/archive/2019/09/14/11520010.html

前端JQuery

推广达人

突出贡献

优秀版主

荣誉管理

论坛元老