什么jQuery还不会？看这里?? 
jQuery封装了JS代码，使JS的编写更加简单，类似python的模块，在前端中叫
“类库”，同时也兼容多个浏览器，提供了更多的功能，写的更少，功能却更多(write less do more)
看到下载安装的小伙伴不要害怕，jQuery的下载与安装及其简单，安装的同时不影响你开法拉利，下面一个小demo你就明白~
# 本地版'''1. 打开第一个jQuery官网2.点击Downloading jQuery3.Download the compressed, production jQuery 3.6.0推荐下载压缩版本，加载比较快4.通过点击打开，复制里面的内容保存到JS文件中5.通过script标签的src引入文件'''# CDN版（CDN：Content Delivery Network，内容分发网络）'''如果能保持电脑一直有网络，可以选择这个版本1.打开bootcdn:https://www.bootcdn.cn/jquery/3.4.1/2.选择3.4左右版本的jQuery3.https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js4.3中给大家放好URL了，复制5.通过script标签引入'''# 最终引入<script src="jQuery/jQuery3.4.js"></script> # 本地<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> # CDN前面总结了JS相关知识的文章，对元素进行添加，修改，获取···操作很繁琐，代码多，但是jQuery 库可以通过一行简单的标记被添加到网页中
$符号事jQuery中的重要标识
//在JS中可以通过获取先获取标签，然后去使用对应的方法，在jQuery中一样，可以先筛选元素（标签），然后再对该元素做出动态操作$(selector).action()selector：通过选择器获取元素action：获取元素后的动作行为JS中DOM获取到的元素是DOM对象，那么在jQuery中获取到的元素属于jQuery对象，两者之间方法有差别，虽然
jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也没不能使用jQuery里的方法
//获取id值为d1的元素的htmljQuery: $("#d1").html()DOM: document.getElementById("d1").innerHTML$(DOM对象)jQuery对象[索引]Demo
var dEle = document.getElementById("d1").innerHTML$(dEle) //DOM转jQuery$("#d1")[0] //jQuery转DOM | CSS选择器关键字 | jQuery | 说明 |
|---|---|---|
tagName | $('tagName') | 标签选择器 |
. | $('.className') | 类选择器 |
# | $('#id') | id选择器 |
* | $('*') | 通用选择器 |
demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jQuery/jQuery3.4.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head><body><p id="1" >1</p><p id="2" >2</p><div id="3" >3</div></body></html>标签选择器
//获取p标签$('p') //获取div标签$('div')id选择器
//获取id为1的元素$('#1')类选择器
//获取类名为class3的元素$('.class3')通用选择器
//获取所有元素$('*')//k.fn.init(11) [html, head, meta, title, script, script, body, p#1.class1, p#2.class2, div#3.class3, script, prevObject: k.fn.init(1)]a和b可以是任意选择器
| CSS选择器关键字 | jQuery | 说明 |
|---|---|---|
空格 | $(a b) | 后代选择器 |
> | $(a>b) | 儿子选择器 |
+ | $(a+b) | 相邻选择器（紧挨着） |
~ | $(a~b) | 弟弟选择器（不需要紧挨着） |
ps：相邻和弟弟选择器都是同级别的
demo
<div id="d1" >div1<p id="p1" >div里的p <br> <span id="s1" >div里的p中的span</span></p></div><div id="d2">div2</div>后代选择器
//查找id='d1'，div元素的后代span元素$('#d1 span' )儿子选择器
//查找div元素class=d1的儿子id=p1$('.d1 #p1')相邻选择器
//查找id=d1的div元素的相邻元素$('#d1+div')弟弟选择器
//查找id=d1的div元素的弟弟元素div$('#d1~#d2')CSS 属性选择器通过已经存在的属性名或属性值匹配元素;
jQuery也可以通过属性选择器来进行操作；
| CSS选择器关键字 | jQuery | 说明 |
|---|---|---|
[attr] | [attr] | 带有以 attr 命名的属性的元素 |
[attr=value] | [attr=value] | 表示带有以 attr 命名的属性，且属性值为 value 的元素 |
[attr!=value] | [attr!=value] | 表示带有以 attr 命名的属性，且属性值不为 value 的元素 |
选择器不会可以看：(CSS快速入门（一） - HammerZe - 博客园 (cnblogs.com))
// 示例<input type="text"><input type="password"><input type="checkbox">$("input[type='checkbox']");// 取到checkbox类型的input标签$("input[type!='text']");// 取到类型不是text的input标签可以对选择器获取到的元素进一步筛选
| 方法 | 说明 |
|---|---|
:first | 第一个 |
:last | 最后一个 |
:eq(index) | 索引等于index的那个元素 |
:even | 匹配所有索引值为偶数的元素，从 0 开始计数 |
:odd | 匹配所有索引值为奇数的元素，从 0 开始计数 |
:gt(index) | 匹配所有大于给定索引值的元素 |
:lt(index) | 匹配所有小于给定索引值的元素 |
:not(元素选择器) | 移除所有满足not条件的标签 |
:has(元素选择器) | 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) |
ps:可以写括号内，也可以点出来
demo code
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li class='l9'>9</li></ul>demo
//first$('ul li:first()')$('ul li:first()')[0].innerText //1//last$('ul li:last()')$('ul li').last()//eq$('ul li:eq(1)')//even$('ul li:even()')//odd$('ul li:odd()')//gt$('ul li:gt(2)')//lt$('ul li:lt(2)')//not$('ul li:not(.l9)')//has$('ul li:has(.l9)')练习，自定义模态框，实现弹出隐藏功能
<!DOCTYPE html><html lang="zh-CN"><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> .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; } </style></head><body><input type="button" value="弹" id="i0"><div ></div><div > <label for="i1">姓名</label> <input id="i1" type="text"> <label for="i2">爱好</label> <input id="i2" type="text"> <input type="button" id="i3" value="关闭"></div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script> var tButton = $("#i0")[0]; tButton.onclick=function () { var coverEle = $(".cover")[0]; var modalEle = $(".modal")[0]; $(coverEle).removeClass("hide"); $(modalEle).removeClass("hide"); }; var cButton = $("#i3")[0]; cButton.onclick=function () { var coverEle = $(".cover")[0]; var modalEle = $(".modal")[0]; $(coverEle).addClass("hide"); $(modalEle).addClass("hide"); }</script></body></html>jQuery版自定义模态框表单忘记了可以看俺的笔记哦：HTML表单 - HammerZe - 博客园 (cnblogs.com)
:text //普通文本:password //密文密码:file //上传文件:radio //选择:checkbox //多选:submit // 提交按钮:reset //重置按钮:button //普通按钮可以针对表单进行筛选
'''通过属性选择器可以通过属性值来获得元素，在表单筛选器中对此进行了简写'''# 属性筛选器获取type=text的input元素$('input[type=text]')#表单筛选器获取$(':text')# 表单筛选器的特例$(':checked') # 找checked属性的input标签会连同option默认的selected一起找到，但是找selected属性的option标签不会输出input标签:enabled //可用的:disabled //失效的:checked //勾选的（input标签）:selected //选择好的（option标签）| 方法 | 说明 |
|---|---|
| first() | 获取匹配的第一个元素 |
| last() | 获取匹配的最后一个元素 |
| not() | 从匹配元素的集合中删除与指定表达式匹配的元素 |
| has() | 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 |
| next() | 下一个元素 |
| nextAll() | 下面所有元素 |
| nextUntil("元素选择器") | 直到下面选择器获取的元素 |
| prev() | 上一个元素 |
| prevAll() | 上面所有元素 |
| prevUntil("元素选择器") | 直到上面选择器获取的元素 |
| parent() | 父元素 |
| parents() | 所有父元素 |
| parentsUntil(“元素选择器”) | 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止 |
| children() | 该元素的子元素 |
| siblings() | 该元素的兄弟元素 |
| find(‘元素选择器’) | 查找该元素的后代元素 |
| filter(‘元素选择器’) | 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式 |
demo
//next$("#id").next()$("#id").nextAll()$("#id").nextUntil("#i2")//prev$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2")//parent$("#id").parent()$("#id").parents() // 查找当前元素的所有的父辈元素$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。//children siblings$("#id").children();// 儿子们$("#id").siblings();// 兄弟们//find 等价于$("div p")$("div").find("p")//filter$("div").filter(".c1") // 从结果集中过滤出有c1样式类的<!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> .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; } </style></head><body><div > <div > <div > <div >菜单一</div> <div > <div >111</div> <div >222</div> <div >333</div> </div> </div> <div > <div >菜单二</div> <div > <div >111</div> <div >222</div> <div >333</div> </div> </div> <div > <div >菜单三</div> <div > <div >111</div> <div >222</div> <div >333</div> </div> </div> </div></div><div ></div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script> $(".title").click(function (){ // jQuery绑定事件 // 隐藏所有class里有.items的标签 // $(".items").addClass("hide"); //批量操作 // $(this).next().removeClass("hide"); // jQuery链式操作 $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide') });</script>左侧菜单栏对比DOM
| DOM | jQuery | 说明 |
|---|---|---|
| add(class1, class2, …) | addClass() | 添加指定的CSS类名 |
| remove(class1, class2, …) | removeClass() | 移除指定的CSS类名 |
| contains(class) | hasClass() | 判断样式存不存在 |
| toggle(class, true|false) | toggleClass() | 切换CSS类名，如果有就移除，如果没有就添加。 |
$("p").css("color", "red"); //将所有p标签的字体设置为红色DOM操作
| 方法 | 说明 |
|---|---|
| open() | 打开一个新的浏览器窗口 |
| alert() | 显示警告窗口 |
| close() | 关闭当前浏览器窗口 |
| scrollTo() | 可把内容滑动到指定坐标 |
| scrollBy() | 可将内容滑动指定的距离（相对于当前位置） |
| innerWidth | 返回窗口的网页显示区域宽度 |
| innerHeight | 返回窗口的网页显示区域高度 |
jQuery
| 方法 | 说明 |
|---|---|
| offset() | 获取匹配元素在当前窗口的相对偏移或设置元素位置 |
| position() | 获取匹配元素相对父元素的偏移 |
| scrollTop() | 获取匹配元素相对滚动条顶部的偏移 |
| scrollLeft() | 获取匹配元素相对滚动条左侧的偏移 |
ps:.offset()方法允许我们检索一个元素相对于文档（document）的当前位置，和 .position()的差别在于： .position()是相对于相对于父级元素的位移；
<!DOCTYPE html><html lang="zh-CN"><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> .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" >点我</button><div ></div><div >1</div><div >2</div><div >3</div><div >4</div><div >5</div><div >6</div><div >7</div><div >8</div><div >9</div><div >10</div><div >11</div><div >12</div><div >13</div><div >14</div><div >15</div><div >16</div><div >17</div><div >18</div><div >19</div><div >20</div><div >21</div><div >22</div><div >23</div><div >24</div><div >25</div><div >26</div><div >27</div><div >28</div><div >29</div><div >30</div><div >31</div><div >32</div><div >33</div><div >34</div><div >35</div><div >36</div><div >37</div><div >38</div><div >39</div><div >40</div><div >41</div><div >42</div><div >43</div><div >44</div><div >45</div><div >46</div><div >47</div><div >48</div><div >49</div><div >50</div><div >51</div><div >52</div><div >53</div><div >54</div><div >55</div><div >56</div><div >57</div><div >58</div><div >59</div><div >60</div><div >61</div><div >62</div><div >63</div><div >64</div><div >65</div><div >66</div><div >67</div><div >68</div><div >69</div><div >70</div><div >71</div><div >72</div><div >73</div><div >74</div><div >75</div><div >76</div><div >77</div><div >78</div><div >79</div><div >80</div><div >81</div><div >82</div><div >83</div><div >84</div><div >85</div><div >86</div><div >87</div><div >88</div><div >89</div><div >90</div><div >91</div><div >92</div><div >93</div><div >94</div><div >95</div><div >96</div><div >97</div><div >98</div><div >99</div><div >100</div><button id="b2" >返回顶部</button><script src="jquery-3.2.1.min.js"></script><script> $("#b1").on("click", function () { $(".c1").offset({left: 200, top:200}); }); $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#b2").removeClass("hide"); }else { $("#b2").addClass("hide"); } }); $("#b2").on("click", function () { $(window).scrollTop(0); })</script></body></html>返回顶部示例height()width()innerHeight()innerWidth()outerHeight()outerWidth()//案例$(window).height()236$(window).width()1229方法括号内没有值就获取，有值就设置
html()// 取得第一个匹配元素的html内容html(val)// 设置所有匹配元素的html内容text()// 取得所有匹配元素的内容text(val)// 设置所有匹配元素的内容val()// 取得第一个匹配元素的当前值val(val)// 设置所有匹配元素的值val([val1, val2])// 设置多选的checkbox、多选select的值demo code
<input type="checkbox" value="basketball" name="hobby">篮球<input type="checkbox" value="football" name="hobby">足球<select multiple id="s1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option></select>设置值
//将属性name=hobby的元素的值修，元素修改，效果勾选篮球足球$("[name='hobby']").val(['basketball', 'football']);//设置id为s1的值，效果选择1和2$("#s1").val(["1", "2"])获取被选中的checkbox或radio的值：
<label for="c1">女</label><input name="gender" id="c1" type="radio" value="0"><label for="c2">男</label><input name="gender" id="c2" type="radio" value="1"> $("input[name='gender']:checked").val()用于ID等或自定义属性：
attr(attrName)// 返回第一个匹配元素的属性值 DOM:setAttribute(name,value)attr(attrName, attrValue)// 为所有匹配元素设置一个属性值attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值removeAttr()// 从每一个匹配的元素中删除一个属性用于checkbox和radio
prop() // 获取属性removeProp() // 移除属性示例
<input type="checkbox" value="1"><input type="radio" value="2"><script> $(":checkbox[value='1']").prop("checked", true); $(":radio[value='2']").prop("checked", true);</script>总结：
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A$(A).appendTo(B)// 把A追加到B添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A$(A).prependTo(B)// 把A前置到B添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面$(A).insertAfter(B)// 把A放到B的后面添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面$(A).insertBefore(B)// 把A放到B的前面移除和清空元素
remove()// 从DOM中删除所有匹配的元素。empty()// 删除匹配的元素集合中所有的子节点。替换
replaceWith()replaceAll()克隆
clone()// 参数案例：<!DOCTYPE html><html lang="zh-CN"><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> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style></head><body><button id="b1">屠龙宝刀，点击就送</button><hr><button id="b2">屠龙宝刀，点击就送</button><script src="jquery-3.2.1.min.js"></script><script> // clone方法不加参数true，克隆标签但不克隆标签带的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加参数true，克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); });</script></body></html>点击复制按钮click(function(){...}) //点击hover(function(){...}) //悬浮blur(function(){...}) //失去焦点focus(function(){...}) //聚焦change(function(){...}) //文本域keyup(function(){...}) //任意按键keydown和keyup事件组合示例：
<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title></head><body><table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>Egon</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Alex</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Yuan</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>EvaJ</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Gold</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> </tbody></table><input type="button" id="b1" value="全选"><input type="button" id="b2" value="取消"><input type="button" id="b3" value="反选"><script src="jquery-3.3.1.js"></script><script> var flag = false; // shift按键被按下的时候 $(window).keydown(function (event) { console.log(event.keyCode); if (event.keyCode === 16){ flag = true; } }); // shift按键被抬起的时候 $(window).keyup(function (event) { console.log(event.keyCode); if (event.keyCode === 16){ flag = false; } }); // select标签的值发生变化的时候 $("select").change(function (event) { // 如果shift按键被按下，就进入批量编辑模式 // shift按键对应的code是16 // 判断当前select这一行是否被选中 console.log($(this).parent().siblings().first().find(":checkbox")); var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked"); console.log(isChecked); if (flag && isChecked) { // 进入批量编辑模式 // 1. 取到当前select选中的值 var value = $(this).val(); // 2. 给其他被选中行的select设置成和我一样的值 // 2.1 找到那些被选中行的select var $select = $("input:checked").parent().parent().find("select") // 2.2 给选中的select赋值 $select.val(value); } });</script></body></html>按住shift实现批量操作hover事件示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><p>苍茫的天涯是我的哎，绵绵的青山脚下一片海！</p><script src="jQuery-3.3.1.js"></script><script> $('p').hover( function () { alert('来啦，老弟') }, function () { alert('慢走哦～') } )</script></body></html>hover事件实时监听input输入值变化示例：
<!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>实时监听input输入值变化</title></head><body><input type="text" id="i1"><script src="jquery-3.2.1.min.js"></script><script> /* * oninput是HTML5的标准事件 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化， * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。 * */ $("#i1").on("input propertychange", function () { alert($(this).val()); })</script></body></html>input值变化事件.on( events [, selector ],function(){}).off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
【待续】