一个js插件， 相比较原生的DOM操作更简单、开发效率更高
1.先导入后使用
2.可以把jQuery.js下载到本地导入来使用，也可以不用下载使用CDN来在线使用。
什么是CDN,全称内容分发网络，好比我们在京东买东西，下单后由京东分布在全国的几个存储物流仓发货，所以速度快，CDN就是网上的内容服务商来分发内容。
jQuery对象才能调用jQuery的方法，DOM对象只能调用DOM方法，不能乱调，二者可以相互转换。
代码块 jQuery对象 --> DOM对象：$("div") --> $("div")[0]DOM对象 --> jQuery对象： this --> $(this) $("选择器").方法()
支持链式操作
代码块1. $("div") 根据标签名2. $("#d1") 根据ID3. $(".c1") 根据class4. $("*") 通用选择器代码块$("div, .c1") --> 找到所有div标签和有c1样式类的标签代码块$("#d1 span") --> id是d1标签里面所有的span标签2. $("#d1>span") --> id是d1标签里面一层的span标签3. $("label+input") --> 找到紧挨着label标签的input标签4. $(".c1~div") --> 找到c1样式类下面的div标签代码块1. :first/:last2. :eq()/大于:gt()/小于:lt()3. :even偶数/:odd奇数4. $("div:not(.c1)") --> 找到没有c1样式类的div标签5. $("div:has(.c1)") --> 找到后代中有c1样式类的后代div标签代码块$("[s14]")$("[type='text']") $("[type!='text']")代码块$(":text") $(":password") $(":disabled") $("input:checked") $(":selected")代码块. .next()/.prev() .parent()/.children()/.siblings().find('选择器条件') --> 在后代查找符合要求的.filter('选择器条件') --> 根据条件对已经找到的结果进行二次过滤.first()/.last() .not()/.has() .eq()代码块利用jQuery获取元素标签：$('.c1');查看css属性颜色：$('.c1').css('color')查看css属性字体大小： $('.c1').css('font-size')设置颜色为红色，字体大小为30px：$('.c1').css({'color':'red','font-size':'30px'})代码块<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> body{ margin:0;} .c1{ width:100px; height:100px; background-color:red; position:relative; left:100px;} .c2{ width:100px; height:100px; background-color:yellow; position:absolute; top:100px; left:100px;}</style></head><body><div class="c1"> <div class='c2'></div></div><script src="jquery-3.4.1.min.js"></script></body></html>代码块1.获取class为c2相对浏览器的位置：$('.c2').offset();{top: 100, left: 200}2.获取class为c2相对父标签c1的位置：$('.c2').position();{top: 100, left: 100}括号里面添加参数可以修改位置代码块<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> .c3 { height: 100px; width:100px; background-color:red; } .c2 { height: 50px; width: 50px; position: fixed; bottom: 15px; right: 15px; background-color: #2b669a; }.hide { display: none;</style></head><body><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.4.1.min.js"></script><script> $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#b2").removeClass("hide"); }else { $("#b2").addClass("hide"); } }); $("#b2").on("click", function () { $(window).scrollTop(0); }) </script></body></html>代码块<!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><div id="d0"> <div>div的文本 <p>p标签的文本<span>呵呵哒~</span></p> </div></div><input type="text" id="i1"><select id="s1"> <option value="1">111</option> <option value="2">222</option> <option value="3">333</option></select><textarea id="t1" cols="30" rows="10"></textarea><hr><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"><hr><label for="d1">篮球</label><input id="d1" type="checkbox" value="basketball" name="hobby"><label for="d2">足球</label><input id="d2" type="checkbox" value="football" name="hobby"><label for="d3">双色球</label><input id="d3" type="checkbox" value="doublecolorball" name="hobby"><script src='../../jquery-3.4.1.min.js'></script></body></html>代码块获取input=text文本框的值：$('#i1').val();修改input=text文本框的值：$('#i1').val('哪吒');获取select下拉列表框的值：$('#s1').val();修改select下拉列表框的值：$('#s1').val('杭州');获取textarea文本框的值：$('#t1').val();获取textarea文本框的值：$('#t1').val('明天我要嫁人了');获取radio选中的value:$('input[name="gender"]:checked').val();获取多选框的值：$('input[name="hobby"]:checked').val();代码块<!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> .error { color: red; } </style></head><body><form action=""> <div> <label for="input-name">用户名</label> <input type="text" id="input-name" name="name"> <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="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script> $("#btn").click(function () { var username = $("#input-name").val(); var password = $("#input-password").val(); if (username.length === 0) { $("#input-name").siblings(".error").text("用户名不能为空"); } if (password.length === 0) { $("#input-password").siblings(".error").text("密码不能为空"); } })</script></body></html>代码块获取属性值：$('#d1').attr('s14');修改属性值：$('#d1').attr('s14','hello');删除属性：$('#d1').removeAttr('s14');查看是否被选中：$('#i1').prop('checked');代码块第一种方式：var b1Ele = document.getElementById("b1"); b1Ele.onclick=function (ev) { alert(123) };第二种方式： $("#b1").click(function () { alert(123); });
