jQuery简介
核心知识点：css
1.jQuery是什么（一个轻量级的、兼容多浏览器的JavaScript库）html
2.jQuery的优势（轻量级、丰富的DOM选择器、链式表达式、动画样式事件支持、兼容多浏览器、支持扩展开发）前端
3.引入jQuery的两种方式jquery
a.本地文件<script src="jquery-3.2.1.min.js"></script>正则表达式
b.CDN方式<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>编程
4.选择器后端
a.基本选择器{$("#id")、$(".className")、$(".tagName")、$("*")、$("[#id],[className],[tagName]")}数组
b.层级选择器{x y子子孙孙、X>y儿子选择器、x+y毗邻选择器、x~y弟弟选择器}浏览器
c.属性选择器{=、!=}app
5.筛选器
a.基本筛选器{例：first、last、even、odd、gt(index)、lt(index)、not()、has()、eq(index)、}
b.筛选器的方法（next() prev() parent()）
6.样式操做
a.样式类{removeClass() hasClass() toggleClass()}
b.css
c.位置{offset、position}
d.尺寸{}
7.文本操做
a.HTML代码操做{html()、html(val)}
b.文本值{text()、text(val)}
c.值{val()、val(val)、val([val1,val2])}
8.属性操做
a.用于ID或自定义属性{attr(attrName)、arrt(attrName,attrValue)、removeAttr() }
b.用于checkbox和radio{prop()、removeProp()}
9.文档处理(append() appendTo() prepend() prependTo() after() insertAfter() before() insertBefore() remove() clone() replaceWith() replaceAll() empty())
10.事件
a.常见事件（blur fours keydown keyup change ready）
b.事件绑定.on(events [,selector,] function)
c.事件移除.off(events [,selector,] function)
d.事件加$(document).ready(function(){})
e.阻止后续事件进行return false
11.动画
a.基本 hide() show() toggle()
b.滑动slideDown() slideUp() slideToggle()
c.淡入淡出 fadeIn() fadeOut() fadeTo() fade Toggle ()
d.自定义animate()
12.each：遍历
a.$.each(conection,function(){})
b.$().each(function(){})
13.data：数据存储
a.$(selector).data(key,value)
b.$(selecter).data(kay)
c.$(selecter).removeData(key)
14.插件
a.jQuery.extend(object)
b.jQuery.fn.extend(object)
1、概论
1.jQuery介绍
（1）jQuery是一个轻量级的、兼容多浏览器的JavaScript库；
（2）jQuery使用户可以更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，可以极大地简化JavaScript编程。
它的总之就是：“Write less，do more。”
2.jQuery的优点
（1）一款轻量级的JS框架。jQuery核心js文件才几十KB，不会影响页面加载速度。
（2）丰富的DOM选择器，jQuery的选择器用起来很方便。
好比要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定。
（3）链式表达式。jQuery的链式操做能够把多个操做写在一行代码里，更加简洁。
（4）事件、样式、动画支持。jQuery还简化了is操做css的代码，而且代码的可读性也比js要强。
（5）Ajax操做支持。jQuery简化了Ajax操做，后端只须要返回一个JSON格式的字符串就能完成与前端的通讯。
（6）跨浏览器兼容。jQuery基本兼容了如今主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
（7）插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、等基本前端页面上的组件都有对应插件，而且用jQuery插件作出来的效果很炫，而且能够根据本身的需求去改写和封装插件，简单实用。
3.jQuery对象
jQuery对象就是经过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。若是一个对象是jQuery对象，那么它就可使用jQuery里面的方法：
例如$("#i1").html()。$("#i1").html()的意思是：获取id值为i1的元素的html代码。其中html（）是jQury里的方法。至关于：document.getElementById("i1").innerHTML；
虽然jQuery对象是包装DOM对象后产生的，可是jQuery对象没法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
2、基础知识
1.选择器
| 命令 | 功能 |
| $("#id") | ID选择器 |
| $(".className") | 类选择器 |
| $("tagName") | 标签选择器 |
| $("*") | 全部选择器 |
| $("[#id|.className|tagName],id|.className|tagName]...") | 组合选择器 |
<!--HTML文件--> <meta charset="UTF-8"> <title>Title</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> </head> <body> <div id="i1">id为i1</div> <div class="c1">c1</div> <div class="c1">c1</div> <input type="text" value="我是你的哥"> <p>p</p> <p>第二个p</p> <ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> <script src="jquery-3.2.1.min.js"></script> <!--示例--> $("#i1") [div#i1]0: div#i1length: 1__proto__: Object(0) $(".c1") (2) [div.c1, div.c1, prevObject: r.fn.init(1)] $("p") (2) [p, p, prevObject: r.fn.init(1)] $("*") (16) [html, head, meta, title, meta, body, div#i1, div.c1, div.c1, input, p, p, ul, li, li, script, prevObject: r.fn.init(1)] $("#i1,p,.c1") (5) [div#i1, div.c1, div.c1, p, p, prevObject: r.fn.init(1)]
| 命令 | 功能 |
| $("x y") | 后代选择器，子子孙孙 |
| $("x>y") | 儿子选择器 |
| $("x+y") | 毗邻选择器 |
| $("x~y") | 弟弟选择器 |
<!--文本--> <div id="d1"> <p>d1的儿子p</p> <div id="d2"> <p class="c1">d1的孙子p1</p> <p class="c2">d1的孙子p2</p> <p>d1的孙子p3</p> </div> </div> <!--示例--> $("#d1 p") (4) [p, p.c1, p.c2, p, prevObject: r.fn.init(1)] $("#d1>p") [p, prevObject: r.fn.init(1)] $(".c1>p") [prevObject: r.fn.init(1)] $(".c1~p") (2) [p.c2, p, prevObject: r.fn.init(1)]
| 命令 | 功能 |
| [attribute=value] | 属性等于 |
| [attribute!=value] | 属性不等于 |
<!--文本--> <input type="text"> <input type="checkbox"> <input type="button" value="确认"> <!--示例--> $("input[type='text']") [input, prevObject: r.fn.init(1)] $("input[type='checkbox']") [input, prevObject: r.fn.init(1)] $("input[type!='checkbox']") (2) [input, input, prevObject: r.fn.init(1)]
补充：表单的属性（input text password radio checkbox submit image reset button file）;
表单对象的属性（enabled disabled chacked selected）
2.筛选器
| 命令 | 功能 |
| :first | 第一个 |
| :eq(index) | 索引等于index的那个元素 |
| :last | 最后一个 |
| :even | 匹配全部索引值为偶数的元素，从0开始计数 |
| :odd | 匹配全部索引值为奇数的元素，从0开始计数 |
| :gt(index) | 匹配全部大于给定索引值的元素 |
| :lt(index) | 匹配全部小于给定索引值得元素 |
| :not(选择器) | 移除全部知足not条件的标签 |
| :has(选择器) | 选取全部包含一个或多个标签在其内的标签（指的是从后代元素找） |
<!--文本--> <input type="text" class="c1"> <input type="checkbox" class="c2"> <input type="button" value="确认" class="c3"> <!--示例--> $("input") (3) [input.c1, input.c2, input.c3, prevObject: r.fn.init(1)]0: input.c11: input.c22: input.c3length: 3prevObject: [document]__proto__: Object(0) $("input:first") [input.c1, prevObject: r.fn.init(1)] $("input:eq(2)") [input.c3, prevObject: r.fn.init(1)] $("input:last") [input.c3, prevObject: r.fn.init(1)] $("input:even") (2) [input.c1, input.c3, prevObject: r.fn.init(1)] $("input:odd") [input.c2, prevObject: r.fn.init(1)] $("input:gt(1)") [input.c3, prevObject: r.fn.init(1)] $("input:lt(1)") [input.c1, prevObject: r.fn.init(1)] $("input:not(.c2)") <!--input标签中不含c2类--> (2) [input.c1, input.c3, prevObject: r.fn.init(1)] <!--文本2--> <div class="c5" id="d6"> 我是谁 </div> <div class="c5" id="d7"> 登录：<input type="text"> </div> <!--示例2--> $(".c5:has(input)") [div#d7.c5, prevObject: r.fn.init(1)] 0: div#d7.c5 length: 1 <!--has是多层过滤，上例中的意思是类为c5且里面有input标签-->
注意：
- 这里的has和not不是简单的有和没有的意思。
- ：not和：has一般用.not()和.has()代替。
- $("div:has(.c1)")中的：has(.c1)等价于$("div .c1")，也就是后代里面有c1的div标签。
| 方法 | 解释 |
| next() | 下一个元素 |
| nextAll() | 同一级下面全部元素 |
| nextUntil(元素选择器) | 同一级下面全部元素到那个标签元素为止，不包含截至元素 |
| prev() | 上一个元素 |
| prevAll() | 同一级上面全部元素 |
| prevUntil | 同一级上面全部元素到那个标签元素为止，不包含截至元素 |
| parent() | 父亲元素 |
| parents() | 全部的父亲元素 |
| parentsUntil() | 全部父元素截止到 |
| children() | 儿子们，下一级的全部其它元素 |
| siblings() | 兄弟们，同一级的全部其它元素 |
| find() | 搜索全部与指定表达式匹配的元素，能够找出正在处理元素的后代元素 |
| .first() | 获取匹配的第一个元素 |
| .last() | 获取匹配的最后一个元素 |
| .not() | 从匹配元素中删除与指定表达式匹配的元素 |
| .has() | 保留包含特定后代的元素，去掉那些不包含指定后代的元素 |
示例：
<!--文本--> <div class="c1">赵爷爷 <div class="c11">赵爸爸 <div class="c111">赵大孙</div> <div class="c112">赵二孙</div> </div> <div class="c12">赵二爸</div> </div> <div class="c2">李爷爷</div> <div class="c3">孙爷爷</div> <!--next()--> $(".c1").next() [div.c2, prevObject: r.fn.init(1)] $(".c1").next().next() [div.c3, prevObject: r.fn.init(1)] <!--nextAll()--> $(".c1").nextAll() (2) [div.c2, div.c3, prevObject: r.fn.init(1)] <!--nextUntil()--> $(".c1").nextUntil(".c3") [div.c2, prevObject: r.fn.init(1)] <!--prev()--> $(".c3").prev() [div.c2, prevObject: r.fn.init(1)] $(".c3").prev().prev() [div.c1, prevObject: r.fn.init(1)] <!--prevAll()--> $(".c3").prevAll() (5) [div.c2, div.c1, p#p3, p#p2, p#p1, prevObject: r.fn.init(1)] <!--prevUntil()--> $(".c3").prevUntil(".c1") [div.c2, prevObject: r.fn.init(1)] <!--parent()--> $(".c111").parent() [div.c11, prevObject: r.fn.init(1)] $(".c111").parent().parent() [div.c1, prevObject: r.fn.init(1)] <!--parents()--> $(".c111").parents() (4) [div.c11, div.c1, body, html, prevObject: r.fn.init(1)] <!--parentsUntil()--> $(".c111").parentsUntil(".c1") [div.c11, prevObject: r.fn.init(1)] <!--children()--> $(".c11").children() (2) [div.c111, div.c112, prevObject: r.fn.init(1)] $(".c1").children() (2) [div.c11, div.c12, prevObject: r.fn.init(1)] <!--siblings()--> $(".c11").siblings() [div.c12, prevObject: r.fn.init(1)] $(".c1").siblings() (5) [p#p1, p#p2, p#p3, div.c2, div.c3, prevObject: r.fn.init(1)] <!--更改文本--> <div class="c1">赵爷爷 <div class="c11">赵爸爸 <div class="c111">赵大孙</div> <div class="c112">赵二孙</div> </div> <div class="c12">赵二爸</div> </div> <div class="c2">李爷爷 <div class="c11">李爸爸</div> </div> <div class="c3">孙爷爷</div> <!--find()--> $(".c1").find(".c11") [div.c11, prevObject: r.fn.init(1)] <!--first()--> $(".c1").children().first() [div.c11, prevObject: r.fn.init(2)] <!--last()--> $(".c1").children().last() [div.c12, prevObject: r.fn.init(2)] <!--not()--> $(".c1").children().not(".c12") <!--结果不要c12--> [div.c11, prevObject: r.fn.init(2)] <!--has()--> $(".c1").children().has(".c111") <!--后代中有c111的--> [div.c11, prevObject: r.fn.init(2)]
3.样式操做
（1）样式类
| 命令 | 功能 |
| addClass() | 添加指定的CSS类名 |
| removeClass() | 移除指定的CSS类名 |
| hasClass() | 判断样式是否存在 |
| toggleClass() | 切换CSS类名，若是有就移除，若是没有就添加 |
<!--文本--> <input type="text" class="c1 c2 c3" id="d8"> <!--示例--> $("#d8") [input#d8.c1.c2.c3] $("#d8")[0] <input type="text" class="c1 c2 c3" id="d8"> $("#d8").addClass("c4") [input#d8.c1.c2.c3.c4] $("#d8").removeClass("c4") [input#d8.c1.c2.c3] $("#d8").toggleClass("c1") [input#d8.c2.c3]
（2）CSS
可使用jQuery调样式
$("div").css("color","red") //设置字体的颜色
（3）位置
- offset()：获取匹配元素在当前窗口的相对偏移或设置元素位置
- position()：获取匹配元素相对元素的偏移
- scrollTop()：获取匹配元素相对滚动条顶部的偏移
- scrollLeft()：获取匹配元素相对滚动条左侧的偏移
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>返回首部</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> <style> .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; } </style> </head> <body> <button id="b1" class="btn btn-default">点我</button> <div class="c1"></div> <div class="c3">1</div> <div class="c3">2</div> <div class="c3">3</div> <div class="c3">4</div> <div class="c3">5</div> <div class="c3">6</div> <div class="c3">7</div> <div class="c3">8</div> <div class="c3">9</div> <div class="c3">10</div> <div class="c3">11</div> <div class="c3">12</div> <div class="c3">13</div> <div class="c3">14</div> <div class="c3">15</div> <div class="c3">16</div> <div class="c3">17</div> <div class="c3">18</div> <div class="c3">19</div> <div class="c3">20</div> <div class="c3">21</div> <div class="c3">22</div> <div class="c3">23</div> <div class="c3">24</div> <div class="c3">25</div> <div class="c3">26</div> <div class="c3">27</div> <div class="c3">28</div> <div class="c3">29</div> <div class="c3">30</div> <div class="c3">31</div> <div class="c3">32</div> <div class="c3">33</div> <div class="c3">34</div> <div class="c3">35</div> <div class="c3">36</div> <div class="c3">37</div> <div class="c3">38</div> <div class="c3">39</div> <div class="c3">40</div> <div class="c3">41</div> <div class="c3">42</div> <div class="c3">43</div> <div class="c3">44</div> <div class="c3">45</div> <div class="c3">46</div> <div class="c3">47</div> <div class="c3">48</div> <div class="c3">49</div> <div class="c3">50</div> <div class="c3">51</div> <div class="c3">52</div> <div class="c3">53</div> <div class="c3">54</div> <div class="c3">55</div> <div class="c3">56</div> <div class="c3">57</div> <div class="c3">58</div> <div class="c3">59</div> <div class="c3">60</div> <div class="c3">61</div> <div class="c3">62</div> <div class="c3">63</div> <div class="c3">64</div> <div class="c3">65</div> <div class="c3">66</div> <div class="c3">67</div> <div class="c3">68</div> <div class="c3">69</div> <div class="c3">70</div> <div class="c3">71</div> <div class="c3">72</div> <div class="c3">73</div> <div class="c3">74</div> <div class="c3">75</div> <div class="c3">76</div> <div class="c3">77</div> <div class="c3">78</div> <div class="c3">79</div> <div class="c3">80</div> <div class="c3">81</div> <div class="c3">82</div> <div class="c3">83</div> <div class="c3">84</div> <div class="c3">85</div> <div class="c3">86</div> <div class="c3">87</div> <div class="c3">88</div> <div class="c3">89</div> <div class="c3">90</div> <div class="c3">91</div> <div class="c3">92</div> <div class="c3">93</div> <div class="c3">94</div> <div class="c3">95</div> <div class="c3">96</div> <div class="c3">97</div> <div class="c3">98</div> <div class="c3">99</div> <div class="c3">100</div> <button id="b2" class="btn btn-default c2 hide">返回顶部</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").on("click", function () { $(".c1").offset({left: 200, top:200}); }); $(window).scroll(function () { //当向下滚动超过100px，就把右下角那个返回顶部的按钮显示出来 if ($(window).scrollTop() > 100) { $("#b2").removeClass("hide"); }else { //不然就隐藏 $("#b2").addClass("hide"); } }); $("#b2").on("click", function () { $(window).scrollTop(0); }) </script> </body> </html>
（4）尺寸
- height()
- width()
- innerHeight()
- innerWidth()
- outerHeight()
- outerWidth()
<!--文本--> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> <style> .c1 { background-color: red; height: 200px; width: 400px; padding: 10px; margin: 20px; border: 5px solid black; } </style> </head> <body> <div class="c1"></div> <script src="jquery-3.2.1.min.js"></script> </body> </html> <!--操做--> $(".c1").height() 200 $(".c1").width() 400 $(".c1").innerWidth() 420 $(".c1").outerWidth() 430 $(".c1").innerHeight() 220 $(".c1").outerHeight() 230
4.文本操做
（1）HTML代码
- html()：取得第一个匹配元素的html内容
- html(val)：设置全部匹配元素的html内容
$("#d1").html() " div <p>div中的p</p> " $("#d1").html("<span>我是谁</span>") [div#d1]
（2）文本值
- text()：取得全部匹配元素的内容
- text(val)：设置全部匹配元素的内容
$("#d1").text()
"我是谁"
$("#d1").text("哈哈哈")
[div#d1]
（3）值
- val()：取得第一个匹配元素的当前值
- val(val)：设置全部匹配元素的值
- val([val1，val2])：设置checkbox、select的值
<!--文本--> <label for="s1">城市</label> <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> <hr> <label for="s2">爱好</label> <select id="s2" multiple="multiple"> <option value="basketball" selected>篮球</option> <option value="football">足球</option> <option value="doublecolorball" selected>双色球</option> </select> <script src="jquery-3.2.1.min.js"></script> <script> // 单选下拉框 $("#s1").val("shanghai"); // 多选下拉框 $("#s2").val(["basketball", "football"]); </script> <!--测试--> $("#s1").val() "shanghai" $("#s1").val("beijing") [select#s1] $("#s2").val(["football","basketball"]) [select#s2] <--文本2--> <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="pingpeng">乒乓球 <!-$("input[name='hobby']").val(['football','pingpeng']) (3) [input, input, input, prevObject: r.fn.init(1)]-测试-->
<!-- 效果： 1.点击提交，若是输入是空会在后面显示， 2.当失去焦点，也会进行断定 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> </head> <body> <form> <div> <label for="input-name">用户</label> <input type="text" id="input-name" name="password"> <span class="error"></span> </div> <div> <label for="input-password">密码</label> <input type="password" id="input-password" name="password"> <span class="error"></span> </div> <div> <input type="button" id="btn" value="提交"> </div> </form> <script src="jquery-3.2.1.min.js"></script> <script> //提交绑定的事件 $("#btn").click(function () { var username = $("#input-name").val(); var password = $("#input-password").val(); //获取input框的值，根据其长度来判断其是否为空 if (username.length === 0) { //若是为空，在后面显示文本内容 $("#input-name").siblings(".error").text("用户不能为空"); } if (password.length === 0) { $("#input-password").siblings(".error").text("密码不能为空") } }); //当失去焦点以后，会触发如下事件 $("#input-name").on("blur", function () { var username = $("#input-name").val(); if (username.length === 0) { $("#input-name").siblings(".error").text("用户不能为空"); } }) $("#input-password").on("blur", function () { var username = $("#input-password").val(); if (username.length === 0) { $("#input-password").siblings(".error").text("密码不能为空"); } }) </script> </body> </html>
<!--代码--> <div id="divTest" value='2'> 这是div的内容！ <label id="lblText"> 这是label的内容！ </label> <div id="divTest2"> 第二个div内容！ </div> </div> <select id="selectVal"> <option value="1" selected="selected">1</option> <option value="2" >2</option> </select> <input type="hidden" id="hidVal" value="1"/> <script src="../jquery-3.2.1.min.js"></script> <!--测试--> $("#divTest").text() " 这是div的内容！ 这是label的内容！ 第二个div内容！ " <!--有结果--> $("#divTest").html() " 这是div的内容！ <label id="lblText"> 这是label的内容！ </label> <div id="divTest2"> 第二个div内容！ </div> " $("#divTest").val() "" $("#divTest2").val() "" <!--对于非表单，val不能使用--> <!--对于表单来讲--> $("#selectVal").text() " 1 2 " <!--返回文本--> $("#selectVal").html() " <option value="1" selected="selected">1</option> <option value="2">2</option> " <!--返回代码--> $("#selectVal").val() "2" <!--返回当前值或者第一个匹配值--> <!-- 总结： html()、text()、val()三种方法都是用来读取限定元素的内容，只不过html()是用来读取元素的HTML内容，包括其HTML标签。 text()用来读取元素的纯文本内容，包括其后代元素。 val()是用来读取表单元素的“value”值。 val()只能用在select、input等上面，而html()和text()不能用在input上。 -->
5.属性操做
用于ID等或自定义的属性：
- attr(attrName)：返回第一个匹配元素的属性值
- attr(attrName,attrValue)：为全部匹配元素设置一个属性
- attr({k1:v1,k2:v2})：为全部匹配元素设置多个属性
- removeAttr() ：从每一个匹配的元素中删除一个属性
$("#d1")
[div#d1]
$("#d1").attr('like')
"girl"
$("#d1").attr('like','boy')
[div#d1]
$("#d1").attr('like')
"boy"
用于checkbox和radio：
- prop()：获取属性
- removeProp()：移除属性
$("input[value='2']").prop("checked")
false
$("input[value='11']").prop("checked",true)
[input, prevObject: r.fn.init(1)]
6.文档处理
（1）添加到指定元素内部的后面
- $(A).append(B)：把B追加到A
- $(A).appendTo(B)：把A追加到B
<!--文本-->
<ul>
<li>222</li>
<li>333</li>
</ul>
<!--操做-->
var liEle = document.createElement("li")
$(liEle).text("444")
$("ul").append(liEle)
<!--文本-->
<P id="d1">one</P>
<!--操做-->
$("<b>TWO</b>").appendTo("p")
（2）添加到指定元素内部的前面
- $(A).prepend(B)：把B前置到A
- $(A).prependTo(B)：把A前置到B
<!--文本-->
<ul>
<li>222</li>
<li>333</li>
</ul>
<!--操做-->
var liEle = document.createElement("li")
$(liEle).text("111")
$("ul").prepend(liEle)
<!--文本-->
<P id="d1">one</P>
<!--操做-->
$("<b>ZERO</b>").prependTo("p")
（3）添加到指定元素外部的后面
- $(A).after(B)：把B放在A的后面
- $(A).insertBefore(B)：把A放在B的后面
<!--文本--> <P id="d1">one</P> <!--操做--> var pEle = document.createElement("p") $(pEle).text("two") $("#d1").after(pEle)
（4）添加到指定元素外部的前面
- $(A).before(B)：把B放在A的前面
- $(A).insertBefore(B)：把A放在B的前面
<!--文本--> <P id="d1">one</P> <!--操做--> var pEle = document.createElement("p") $(pEle).text("zero") $("#d1").before(pEle)
（5）移除和清空元素
- remove()：从DOM中删除全部匹配的元素
- empty()：删除匹配的元素集合中全部的子节点
（6）替换
- replaceWith()
- replaceAll()
$("p").replaceWith("<i>ONE</i>")
$("<i>ONE</i>").replaceAll("p")
replaceWith()和replaceAll()做用相同，均可以用指定的HTML内同替换被选的元素。
差别在于语法：内容和选择器的位置的不一样，同时replaceWith()可以使用函数进行替换。
（7）克隆
- clone()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>克隆示例</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<style>
.c1 {
background-color: deeppink;
padding: 20px;
color: white;
margin: 5px;
border: none;
}
</style>
</head>
<body>
<button class="c1">一到满级，刀刀暴击</button>
<script src="../jquery-3.2.1.min.js"></script>
<script>
$(".c1").on("click",function () {
$(this).clone(true).insertAfter(this);
})
</script>
</body>
</html>
3、事件
1.经常使用事件
- click()：当点击元素时会触发click事件
- hover()：
- blur()：当元素失去焦点（blur）触发
- focus()：当元素得到焦点时（focus）触发
- keyup()：一个按键按下时触发
- keydown()：一个按键松开时触发
- change()：当元素的值发生改变，会发生change事件，该事件仅适用于文本域
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<script src="../jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("input").focus(function () {
$("input").css("background-color", "#FFFFCC");
});
$("input").blur(function () {
$("input").css("background-color", "#D6D6FF");
});
// 上方绑定事件，下面可以直接进行触发
$("#btn1").click(function () {
$("input").focus();
});
$("#btn2").click(function () {
$("input").blur();
});
});
</script>
</head>
<body>
Enter your name: <input type="text"/>
<p>请在上面的输入域中点击，使其得到焦点，而后在输入域外面点击，使其失去焦点。</p>
<p>
<button id="btn1">触发输入域的 focus 事件</button>
</p>
<p>
<button id="btn2">触发输入域的 blur 事件</button>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>按键示例</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
<table border="2" width="200px">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="d1" class="c1"></td>
<td>科比</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="d2" class="c1"></td>
<td>毛线</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="d3" class="c1"></td>
<td>小鸟</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table>
<hr>
<input type="button" id="b1" value="全选">
<input type="button" id="b3" value="反选">
<input type="button" id="b2" value="取消">
<script src="../jquery-3.2.1.min.js"></script>
<script>
// 全选
$("#b1").on("click", function () {
$(":checkbox").prop("checked", true);
});
// 取消
$("#b2").on("click", function () {
$(":checkbox").prop("checked", false);
});
// 反选
$("#b3").on("click", function () {
$(":checkbox").each(function () {
var flag = $(this).prop("checked");
$(this).prop("checked", !flag);
})
});
//按住shelf，批量操做
var flag;
//1.搞清楚事件由什么触发 ——》select的change触发
//2.根据按没按shift键，作不一样处理
//3.如何判断shift有没有被按下
//4利用标志位
$("select").on("change",function () {
//全局window。绑定事件，因为触发keydown这个操做
$(window).on("keydown",function () {
if (event.keyCode === 16){
//就执行批量操做
flag=true;
}
});
//当shift键抬起来的时候，让变量失效
$(window).on("keyup",function () {
if (event.keyCode === 16){
flag=true;
}
});
$("select").on("change",function () {
if (flag) {
//1.取到当前select选中的那个值
//拿到这个值
var optionValue = $(this).val()
//2.把全部选中的checkbox那一行的select设置为指定的值
$("input:checked").parent().parent().find("select").val(optionValue)
}
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<script src="../jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("input").on("change",function () {
$(this).css("background-color","red")
});
});
</script>
</head>
<body>
请输入：<input type="text">
</body>
</html>
<!--当向文本框中输入文本的时背景颜色改变-->
2.事件绑定
.on(event [,selector],function{})
- events：事件
- selector：选择器（可选的）
- function：事件处理函数
3.移除事件
.off(events [,selector][,function(){}])
off()方法移除用.on()绑定的事件处理程序
4.阻止后续事件执行
- return false：常见阻止表单提交
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<script src="../jquery-3.2.1.min.js"></script>
<script>
var one = [1,2,3,4,5];
// each循环，return false相似break的做用
$.each(one,function (i,v) {
console.log(i,v);
if (v===3){
return false;
// 只会打印一、二、3
}
})
</script>
</head>
<body>
</body>
</html>
5.页面载入（ready）
当DOM已经加载，而且页面已经彻底呈现时，会发生ready事件。
因为该事件在文档就绪后发生，所以把全部其它jQuery事件和函数置于该事件中是很是好的作法。
这样能够极大的提升网页的加载速度。
ready()函数仅能用于当前文档，所以无需选择器。
两种写法：
$(document).ready(function) { //在这里写你的JS代码 }
简写：
$(function(){ //你在这里写你的代码 })
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!--原本script是要放在下面的，由于文本须要先加载，否则script找不到对象
可是，使用ready就可让它放在上面-->
<script src="../jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$(".btn1").click(function () {
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>准备好了吗.</p>
<button class="btn1">NO PROBLEM</button>
</body>
</html>
6.事件委托
事件委托是经过事件冒泡地原理，利用父标签去触发子标签地事件。
示例：表格中每一行的编辑和删除按钮都能触发相应的事件
$("table").on("click",".delete",function(){
//删除按钮绑定的事件
})
4、动画效果
1.基本
- hide：隐藏
- show：显示
- toggle：此前隐藏就显示，此前显示就隐藏
语法：
$(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback); 可选参数speed规定隐藏/显示的速度 可选参数callback是隐藏或显示以后所执行的函数名称
2.滑动
- slideDown：滑入
- slideUp：滑出
- slideToggle：根据状态取反态
语法：
$(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback); 可选参数speed规定隐藏/显示的速度 可选参数callback是隐藏或显示以后所执行的函数名称
3.淡入淡出
- fadeIn：淡入
- fadeOut：淡出
- fadeTo：容许渐变为给定的不透明值
- fadeToggle：根据状态取反态
语法：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);（speed、opacity必选）
参数解释：
speed参数规定效果时长
callback参数是该函数完成后所执行的函数名称
opacity透明度的值
4.自定义
- animate：执行CSS自定义动画。实质是从一个状态到另外一个状态。
语法：
$(selector).animate(styles,speed,easing,callback)
styles：必须，规定产生动画效果的CSS样式和值
speed：可选，规定动画速度
easing：可选，规定在不一样的动画中设置动画速度的easing函数。
callback：可选，动画执行完以后要执行的函数
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>动画效果</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> <style> img { margin-left: 400px; height: 300px; position: relative; } </style> </head> <body> <img id="d1" src="http://www.iyi8.com/uploadfile/2017/0409/20170409111824476.jpg"> <hr> <input type="button" value="再见" id="d2"></input> <input type="button" value="回来" id="d3"></input> <input type="button" value="左移" id="d4"></input> <input type="button" value="右移" id="d5"></input> <script src="../jquery-3.2.1.min.js"></script> <script> $("#d2").on("click",function () { $("img").fadeOut(2000) } ); $("#d3").on("click",function () { $("img").fadeIn(2000) } ); $("#d4").on("click",function () { $("#d1").animate({ left:"-50px" },1000) }) $("#d5").on("click",function () { $("#d1").animate({ left:"+50px" },1000) }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>点赞动画示例</title> <meta http-equiv="x-ua-compatible" content="IE=edge"> <style> div { /*相对定位*/ position: relative; display: inline-block; } div>i { /*块级标签设置为内联标签*/ display: inline-block; color: red; /*绝对定位*/ position: absolute; right: -16px; top:-5px; /*透明度，为1表明彻底显示*/ opacity: 1; } </style> </head> <body> <div id="d1">赞</div> <script src="../jquery-3.2.1.min.js"></script> <script> $("#d1").on("click",function () { //每次点击，建立一个i标签，<i>斜体</i> var newI = document.createElement("i"); //内容赋值为+1 newI.innerText="+1"; //将这个内容加载后面 $(this).append(newI); $(this).children("i").animate({ opacity:0 },1000) }) </script> </body> </html>
5、补充知识
1.each
each在jQuery中相似于for循环，起到遍历的做用。主要有两种用法：
（1）jQuery.each(collection,callback(indexIinArray,valueofElement)):
描述：一个通用的迭代函数，它能够用来无缝迭代对象和数组。数组和相似数组的对象经过一个长度属性来迭代数字索引，从0到length-1.其它对象经过属性名进行迭代。
li = [1,2,3,4,5]
$.each(li,function(i,v){
console.log(i,v); //index是索引，else
})
0 1
1 2
2 3
3 4
4 5
（2）.each(function(index,Element)):
描述：遍历一个jQuery对象，为每一个匹配元素执行一个函数。
.each()方法用来迭代jQuery对象中的每个元素。每次回调函数执行时，会传递当前循环次数做为参数（从0开始计数）。
因为回调函数是当前DOM元素为上下文的语境中触发的，因此关键字this老是指向这个元素。
// 为每个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意：jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素，被称为隐式迭代的过程，这种状况发生时，它一般不须要显示地循环.each()方法：
也就是说，上面地例子没有必要使用each()方法，直接下面这样写就能够了：
$("li").addClass("c1"); // 对全部标签作统一操做
注意：
在遍历过程当中可使用return false提早结束each循环。
$.each(li,function(i,v){
if (i===3){
return false} //跳出循环
console.log(i,v)
})
0 1
1 2
2 3
顺便演示return结束函数地功能：
$.each(li,function(i,v){ if (i===3){ return } //只是结束当前函数 console.log(i,v) }) 0 1 1 2 2 3 4 5
2.data
在匹配地元素集合中的全部元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key,value):
描述：在匹配的元素上存储任意相关数据
$("div").data("k",100);//给全部div标签都保存一个名为k，值为100
.data(key):
描述：返回匹配的元素集合中的一个元素的给定名称的数据存储的值——经过.data(name,value)或HTML5 data-*属性设置
$("#d1").data("k") //返回结果100
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除全部数据的数据
$("div").removeData("k"); //移除元素上存放k对应的数据
3.插件
插件通常有两种，一种直接面向jQuery，一种面向jQuery对象。
（1）jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向jQuery中添加新函数时使用。
<script> jQuery.extend({ min:function(a, b){return a < b ? a : b;}, max:function(a, b){return a > b ? a : b;} }); jQuery.min(2,3);// => 2 jQuery.max(4,5);// => 5 </script>
（2）jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型，以提供新的jQuery示例方法。
<script> jQuery.fn.extend({ check:function(){ return this.each(function(){this.checked =true;}); }, uncheck:function(){ return this.each(function(){this.checked =false;}); } }); // jQuery对象可使用新添加的check()方法了。 $("input[type='checkbox']").check(); </script>
许多时候会将插件写在一个单独的文件中，通常是采起以下模式：
//传参，避免$被变量占用 //使用自执行函数，这样避免多个插件之间的变量混淆 //而后将代码包在中间 (function(jq){ jq.extend({ funcName:function(){ ... }, }); })(jQuery);
自定义的jQuery登录验证插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登陆校验示例</title> <style> .login-form { margin: 100px auto 0; max-width: 330px; } .login-form > div { margin: 15px 0; } .error { color: red; } </style> </head> <body> <div> <form action="" class="login-form" novalidate> <div> <label for="username">姓名</label> <input id="username" type="text" name="name" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="passwd">密码</label> <input id="passwd" type="password" name="password" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="mobile">手机</label> <input id="mobile" type="text" name="mobile" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="where">来自</label> <input id="where" type="text" name="where" autocomplete="off"> <span class="error"></span> </div> <div> <input type="submit" value="登陆"> </div> </form> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="validate3.js"></script> <script> $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}}); </script> </body> </html>
"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);
传参版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登陆校验示例</title> <style> .login-form { margin: 100px auto 0; max-width: 330px; } .login-form > div { margin: 15px 0; } .error { color: red; } </style> </head> <body> <div> <form action="" class="login-form" novalidate> <div> <label for="username">姓名</label> <input id="username" type="text" name="name" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="passwd">密码</label> <input id="passwd" type="password" name="password" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="mobile">手机</label> <input id="mobile" type="text" name="mobile" required autocomplete="off"> <span class="error"></span> </div> <div> <label for="where">来自</label> <input id="where" type="text" name="where" autocomplete="off"> <span class="error"></span> </div> <div> <input type="submit" value="登陆"> </div> </form> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="validate3.js"></script> <script> $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}}); </script> </body> </html>
"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);
综合示例：
示例1：全选、反选（使用Jquery编写）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>做业</title>
<meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<body>
<input id="b1" type="button" value="全选" >
<input id="b2" type="button" value="反选" >
<input id="b3" type="button" value="取消" >
<hr>
<table border="2" width="200px">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="d1" class="c1"></td>
<td>科比</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" id="d2" class="c1"></td>
<td>毛线</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" id="d3" class="c1"></td>
<td>小鸟</td>
<td>男</td>
</tr>
</tbody>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script>
//事件绑定，当clieck点击事件的时候，全选
$("#b1").on("click",function () {
$("input:checkbox").prop("checked",true);
});
//先找出全部的checkbox，一个一个去判断
$("#b2").on("click",function () {
var $checkboxs = $(":checkbox");
//each迭代
$.each($checkboxs,function () {
if ($(this).prop("checked")){
$(this).prop("checked",false);
}else {
// 修改属性
$(this).prop("checked",true);
}
})
})
$("#b3").on("click",function () {
// 将全部的属性改成false
$("input:checkbox").prop("checked",false);
})
</script>
</body>
</html>
相关文章
- 1. 【jQuery】-----jQuery简介（一）
- 2. jQuery（1）jQuery简介
- 3. JQuery简介
- 4. jquery简介
- 5. jQuery简介
- 6. jquery treeview 简介
- 7. JQuery——Ajax简介
- 8. jQuery 简介
- 9. 15、jQuery简介
- 10. JQuery复习之JQuery简介
- 更多相关文章...
- • jQuery Mobile 简介 - jQuery Mobile 教程
- • Scala 简介 - Scala教程
- • Github 简明教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通过ViewHelper.setTranslationY实现View移动控制（NineOldAndroids开源项目）
- 3. 【Android】日常记录：BottomNavigationView自定义样式，修改点击后图片
- 4. maya 文件检查 ui和数据分离 （一）
- 5. eclipse 修改项目的jdk版本
- 6. Android InputMethod设置
- 7. Simulink中Bus Selector出现很多? ? ?
- 8. 【Openfire笔记】启动Mac版Openfire时提示“系统偏好设置错误”
- 9. AutoPLP在偏好标签中的生产与应用
- 10. 数据库关闭的四种方式
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 【jQuery】-----jQuery简介（一）
- 2. jQuery（1）jQuery简介
- 3. JQuery简介
- 4. jquery简介
- 5. jQuery简介
- 6. jquery treeview 简介
- 7. JQuery——Ajax简介
- 8. jQuery 简介
- 9. 15、jQuery简介
- 10. JQuery复习之JQuery简介