浏览目录

一、jQuery介绍

1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

2、jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

二、jQuery的优势

1、一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

2、丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

3、链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

4、事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

5、Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

6、跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

7、插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用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对象变量的时候在变量名前面加上$：

  1. var $variable = jQuery对像
  2. var variable = DOM对象
  3. $variable[0]//jQuery对象转成DOM对象

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

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

四、jQuery内容

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

查找标签

1、选择器

  • ID选择器

  1. $("#id")　　

  • 标签选择器

  1. $("tagName")

  • class选择器

  1. $(".className")　　

  • 配合使用

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

  • 所有元素选择器

  1. $("*")　　

  • 组合选择器　

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

  • 层级选择器　

x和y可以为任意选择器

  1. $("x y");// x的所有后代y（子子孙孙）
  2. $("x > y");// x的所有儿子y（儿子）
  3. $("x + y")// 找到所有紧挨在x后面的y
  4. $("x ~ y")// x之后所有的兄弟　　

  • 基本选择器

  1. :first // 第一个
  2. :last // 最后一个
  3. :eq(index)// 索引等于index的那个元素
  4. :even // 匹配所有索引值为偶数的元素，从 0 开始计数
  5. :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
  6. :gt(index)// 匹配所有大于给定索引值的元素
  7. :lt(index)// 匹配所有小于给定索引值的元素
  8. :not(元素选择器)// 移除所有满足not条件的标签
  9. :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)　　

例子：

  1. $("div:has(h1)")// 找到所有后代中有h1标签的div标签
  2. $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
  3. $("li:not(.c1)")// 找到所有不包含c1样式类的li标签
  4. $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签　　

练习：

自定义模态框，使用jQuery实现弹出和隐藏功能。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>自定义模态框</title>
  8.   <style>
  9.     .cover {
  10.       position: fixed;
  11.       left: 0;
  12.       right: 0;
  13.       top: 0;
  14.       bottom: 0;
  15.       background-color: darkgrey;
  16.       z-index: 999;
  17.     }
  18.     .modal {
  19.       width: 600px;
  20.       height: 400px;
  21.       background-color: white;
  22.       position: fixed;
  23.       left: 50%;
  24.       top: 50%;
  25.       margin-left: -300px;
  26.       margin-top: -200px;
  27.       z-index: 1000;
  28.     }
  29.     .hide {
  30.       display: none;
  31.     }
  32.   </style>
  33. </head>
  34. <body>
  35. <input type="button" value="弹" id="i0">
  36.  
  37. <div class="cover hide"></div>
  38. <div class="modal hide">
  39.   <label for="i1">姓名</label>
  40.   <input id="i1" type="text">
  41.    <label for="i2">爱好</label>
  42.   <input id="i2" type="text">
  43.   <input type="button" id="i3" value="关闭">
  44. </div>
  45. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  46. <script>
  47.   var tButton = $("#i0")[0];
  48.   tButton.onclick=function () {
  49.     var coverEle = $(".cover")[0];
  50.     var modalEle = $(".modal")[0];
  51.  
  52.     $(coverEle).removeClass("hide");
  53.     $(modalEle).removeClass("hide");
  54.   };
  55.  
  56.   var cButton = $("#i3")[0];
  57.   cButton.onclick=function () {
  58.     var coverEle = $(".cover")[0];
  59.     var modalEle = $(".modal")[0];
  60.  
  61.     $(coverEle).addClass("hide");
  62.     $(modalEle).addClass("hide");
  63.   }
  64. </script>
  65. </body>
  66. </html>

jQuery版自定义模态框

  • 属性选择器

  1. [attribute]
  2. [attribute=value]// 属性等于
  3. [attribute!=value]// 属性不等于　　

例子：

  1. // 示例
  2. <input type="text">
  3. <input type="password">
  4. <input type="checkbox">
  5. $("input[type='checkbox']");// 取到checkbox类型的input标签
  6. $("input[type!='text']");// 取到类型不是text的input标签

  • 表单常用筛选　

  1. :text       //文本框
  2. :password    //密码
  3. :file            //文件
  4. :radio        //单选框
  5. :checkbox       //复选框
  6.  
  7. :submit        //提交
  8. :reset          //重置
  9. :button　     //普通按钮

例子：

  1. $(":checkbox")  // 找到所有的checkbox　　

表单对象属性：

  1. :enabled       //可用
  2. :disabled      //禁用
  3. :checked
  4. :selected　    //被选中的　  (该选择器不适用于复选框或单选按钮。请使用:checked选择器代替。)

例子：

  1. <form>
  2.   <input name="email" disabled="disabled" />
  3.   <input name="id" />
  4. </form>
  5.  
  6. $("input:enabled")  // 找到可用的input标签
  1. <select id="s1">
  2.   <option value="beijing">北京市</option>
  3.   <option value="shanghai">上海市</option>
  4.   <option selected value="guangzhou">广州市</option>
  5.   <option value="shenzhen">深圳市</option>
  6. </select>
  7.  
  8. $(":selected")  // 找到所有被选中的option　　

2、筛选器

  • 下一个元素：
  1. $("#id").next()       //找到挨着我的下一个同级标签
  2. $("#id").nextAll()   // 下面同级的所有
  3. $("#id").nextUntil("#i2")   //往下找，直到找到终止条件为止　
  • 上一个元素：
  1. $("#id").prev()     //找到挨着我的上一个同级标签
  2. $("#id").prevAll()     //上面同级所有
  3. $("#id").prevUntil("#i2")    //往下找，直到找到终止条件为止　
  • 父亲元素：
  1. $("#id").parent()    //直接父标签
  2. $("#id").parents()  // 查找当前元素的所有的父辈元素【数组】一级一级往上找，直到html
  3. $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。　　
  • 儿子和兄弟标签：
  1. $("#id").children();// 儿子们
  2. $("#id").siblings();// 兄弟们　　
  • 查找元素：
  1. $("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。　　

补充：

  1. .first()// 获取匹配的第一个元素
  2. .last()// 获取匹配的最后一个元素
  3. .not()// 从匹配元素的集合中删除与指定表达式匹配的元素
  4. .has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

示例：左侧菜单

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>左侧菜单示例</title>
  6. <style>
  7.     .left {
  8.       position: fixed;
  9.       left: 0;
  10.       top: 0;
  11.       width: 20%;
  12.       height: 100%;
  13.       background-color: rgb(188, 19, 10);
  14.     }
  15.  
  16.     .right {
  17.       width: 80%;
  18.       height: 100%;
  19.     }
  20.  
  21.     .menu {
  22.       color: white;
  23.     }
  24.  
  25.     .title {
  26.       text-align: center;
  27.       padding: 10px 15px;
  28.       border-bottom: 1px solid #23282e;
  29.     }
  30.  
  31.     .items {
  32.       background-color: #181c20;
  33.  
  34.     }
  35.     .item {
  36.       padding: 5px 10px;
  37.       border-bottom: 1px solid #23282e;
  38.     }
  39.  
  40.     .hide {
  41.       display: none;
  42.     }
  43.   </style>
  44. </head>
  45. <body>
  46.  
  47. <div class="left">
  48.   <div class="menu">
  49.     <div class="title">菜单一</div>
  50.     <div class="items hide">
  51.       <div class="item">111</div>
  52.       <div class="item">222</div>
  53.       <div class="item">333</div>
  54.     </div>
  55.     <div class="title">菜单二</div>
  56.     <div class="items hide">
  57.       <div class="item">111</div>
  58.       <div class="item">222</div>
  59.       <div class="item">333</div>
  60.     </div>
  61.     <div class="title">菜单三</div>
  62.     <div class="items hide">
  63.       <div class="item">111</div>
  64.       <div class="item">222</div>
  65.       <div class="item">333</div>
  66.     </div>
  67.   </div>
  68. </div>
  69. <div class="right"></div>
  70. <script src="jquery-3.2.1.min.js"></script>
  71.  
  72. <script>
  73. //方法一：
  74. //找到所有的.title标签,绑定点击事件
  75. $(".title").click(function () {
  76. // 点击事件具体要做的事儿
  77. // 1. 找到当前点击菜单下面的.items,把它显示出来(移除hide类)
  78.     $(this).next().removeClass("hide");
  79.     // 2. 把其他的.menu-items隐藏,添加hide类
  80.     $(this).next().siblings(".items").addClass("hide");
  81. })
  82.  
  83. //方法二：
  84.  //找到所有的.title标签,绑定点击事件
  85. $(".title").click(function () {
  86. // 点击事件具体要做的事儿
  87. // 1. 找到当前点击菜单下面的.items,把它显示出来(移除hide类)
  88. //双击展示显示隐藏
  89. $(this).next().toggleClass("hide");
  90. // 2. 把其他的.menu-items隐藏,添加hide类
  91. $(this).next().siblings(".items").addClass("hide");
  92. })
  93.  
  94. //方法三：
  95.  $(".title").click(function (){  // jQuery绑定事件
  96.     // 隐藏所有class里有.items的标签
  97.     $(".items").addClass("hide");  //批量操作
  98.     $(this).next().removeClass("hide");
  99. });
  100.  
  101. //方法四：
  102.   //双击展示显示隐藏
  103. $(".title").click(function () {
  104.     // 1. 找到所有的.items, 隐藏
  105.     var $currMenuitem = $(this).next();
  106.     $(".menu-items").not($currMenuitem).addClass("hide");  // 所有的二级菜单都是隐藏的
  107.     // 2. 找到当前点击菜单下面的.items,把它显示出来(移除hide类)
  108.     $(this).next().toggleClass("hide");
  109. })
  110.  
  111. </script>
  112. </body>
  113. </html>

左侧菜单示例

练习题：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     </head>
  7. <body>
  8.     <div class="t1">
  9.         <div id="d1">11</div>
  10.         <div >22</div>
  11.         <div id="d3">33</div>
  12.         <div id="d4">44</div>
  13.         <div id="d5">55</div>
  14.         <p><button id="22">点我</button>
  15.         <button id="11">有惊喜</button></p>
  16.     </div>
  17.     <span>
  18.         <a href="">文本</a>
  19.     </span>
  20.     <p>爱好</p>
  21.     <div><a href="">玩</a></div>
  22. <script src="jquery-3.2.1.min.js"></script>
  23. </body>
  24. </html>
  25.  
  26. /============================练习题=====================================/<br/>
  27.  
  28. 1.找到t1标签下所有的div标签。<br/>
  29. 2.找到p下最后一个button标签<br/>
  30. 3.找到div标签内容为‘22’的下边所有兄弟<br/>
  31. 4.通过t1标签找到span标签<br/>
  32. 5.通过t1标签找到span标签下的a标签<br/>
  33. 6.通过a标签找到div标签下最后的一个标签<br/>
  34. 7.通过文本为爱好的p标签找下一个标签<br/>
  35. 8.找到div标签内容为‘22’的所有兄弟<br/>
  36. 9.通过t1标签下的p查找他上边的所有标签<br/>
  37. 10.通过d1查找他下边的所有标签<br/>
  38. 11.通过内容是‘玩’的标签找到他父标签的所有兄弟（提示：不可以是使用 last 使用对象转换功能）<br/>
  39.  
  40. 答案：
  41. 1、$('.t1 div');
  42. 2、$('p button:last');
  43. 3、$($("div:contains('22')")[1]).nextAll();
  44. 4、$('.t1+span');
  45. 5、$('.t1+span>a');
  46. 6、$($('a')[0]).parent().prev().children().last();
  47. 7、$("p:contains('爱好')").next();
  48. 8、$($("div:contains('22')")[1]).siblings();
  49. 9、$('.t1>p').prevAll();
  50. 10、$('#d1').nextAll();
  51. 11、$("a:contains('玩')").parent().siblings();

选择器、筛选器

操作标签　　

3、样式操作

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

示例：开关灯和模态框

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

注意：修改多个样式时,传入键值对!!!

示例：

  1. $("p").css("color", "red"); //将所有p标签的字体设置为红色　
  1. $("p").css({"color": "yellow", "border": "1px solid black"})　//颜色、边框，注意边框的写法
  • 位置：
  1. $("").offset([coordinates])   // 获取匹配元素在当前窗口的相对偏移或设置元素位置
  2. $("").position()              // 获取匹配元素相对父元素的偏移
  3. $("").scrollTop([val])        // 获取匹配元素相对滚动条顶部的偏移
  4. $("").scrollLeft([val])       // 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

示例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>位置相关示例之返回顶部</title>
  8.   <style>
  9.     .c1 {
  10.       width: 100px;
  11.       height: 200px;
  12.       background-color: red;
  13.     }
  14.  
  15.     .c2 {
  16.       height: 50px;
  17.       width: 50px;
  18.  
  19.       position: fixed;
  20.       bottom: 15px;
  21.       right: 15px;
  22.       background-color: #2b669a;
  23.     }
  24.     .hide {
  25.       display: none;
  26.     }
  27.     .c3 {
  28.       height: 100px;
  29.     }
  30.   </style>
  31. </head>
  32. <body>
  33. <button id="b1" class="btn btn-default">点我</button>
  34. <div class="c1"></div>
  35. <div class="c3">1</div>
  36. <div class="c3">2</div>
  37. <div class="c3">3</div>
  38. <div class="c3">4</div>
  39. <div class="c3">5</div>
  40. <div class="c3">6</div>
  41. <div class="c3">7</div>
  42. <div class="c3">8</div>
  43. <div class="c3">9</div>
  44. <div class="c3">10</div>
  45. <div class="c3">11</div>
  46. <div class="c3">12</div>
  47. <div class="c3">13</div>
  48. <div class="c3">14</div>
  49. <div class="c3">15</div>
  50. <div class="c3">16</div>
  51. <div class="c3">17</div>
  52. <div class="c3">18</div>
  53. <div class="c3">19</div>
  54. <div class="c3">20</div>
  55. <div class="c3">21</div>
  56. <div class="c3">22</div>
  57. <div class="c3">23</div>
  58. <div class="c3">24</div>
  59. <div class="c3">25</div>
  60. <div class="c3">26</div>
  61. <div class="c3">27</div>
  62. <div class="c3">28</div>
  63. <div class="c3">29</div>
  64. <div class="c3">30</div>
  65. <div class="c3">31</div>
  66. <div class="c3">32</div>
  67. <div class="c3">33</div>
  68. <div class="c3">34</div>
  69. <div class="c3">35</div>
  70. <div class="c3">36</div>
  71. <div class="c3">37</div>
  72. <div class="c3">38</div>
  73. <div class="c3">39</div>
  74. <div class="c3">40</div>
  75. <div class="c3">41</div>
  76. <div class="c3">42</div>
  77. <div class="c3">43</div>
  78. <div class="c3">44</div>
  79. <div class="c3">45</div>
  80. <div class="c3">46</div>
  81. <div class="c3">47</div>
  82. <div class="c3">48</div>
  83. <div class="c3">49</div>
  84. <div class="c3">50</div>
  85. <div class="c3">51</div>
  86. <div class="c3">52</div>
  87. <div class="c3">53</div>
  88. <div class="c3">54</div>
  89. <div class="c3">55</div>
  90. <div class="c3">56</div>
  91. <div class="c3">57</div>
  92. <div class="c3">58</div>
  93. <div class="c3">59</div>
  94. <div class="c3">60</div>
  95. <div class="c3">61</div>
  96. <div class="c3">62</div>
  97. <div class="c3">63</div>
  98. <div class="c3">64</div>
  99. <div class="c3">65</div>
  100. <div class="c3">66</div>
  101. <div class="c3">67</div>
  102. <div class="c3">68</div>
  103. <div class="c3">69</div>
  104. <div class="c3">70</div>
  105. <div class="c3">71</div>
  106. <div class="c3">72</div>
  107. <div class="c3">73</div>
  108. <div class="c3">74</div>
  109. <div class="c3">75</div>
  110. <div class="c3">76</div>
  111. <div class="c3">77</div>
  112. <div class="c3">78</div>
  113. <div class="c3">79</div>
  114. <div class="c3">80</div>
  115. <div class="c3">81</div>
  116. <div class="c3">82</div>
  117. <div class="c3">83</div>
  118. <div class="c3">84</div>
  119. <div class="c3">85</div>
  120. <div class="c3">86</div>
  121. <div class="c3">87</div>
  122. <div class="c3">88</div>
  123. <div class="c3">89</div>
  124. <div class="c3">90</div>
  125. <div class="c3">91</div>
  126. <div class="c3">92</div>
  127. <div class="c3">93</div>
  128. <div class="c3">94</div>
  129. <div class="c3">95</div>
  130. <div class="c3">96</div>
  131. <div class="c3">97</div>
  132. <div class="c3">98</div>
  133. <div class="c3">99</div>
  134. <div class="c3">100</div>
  135.  
  136. <button id="b2" class="btn btn-default c2 hide">返回顶部</button>
  137. <script src="jquery-3.2.1.min.js"></script>
  138. <script>
  139.   $("#b1").on("click", function () {
  140.     $(".c1").offset({left: 200, top:200});
  141.   });
  142.  
  143.   $(window).scroll(function () {
  144.     if ($(window).scrollTop() > 100) {
  145.       $("#b2").removeClass("hide");
  146.     }else {
  147.       $("#b2").addClass("hide");
  148.     }
  149.   });
  150.   $("#b2").on("click", function () {
  151.     $(window).scrollTop(0);
  152.   })
  153. </script>
  154. </body>
  155. </html>

返回顶部导航

  • 尺寸：
  1. $("").height([val|fn])               //高
  2. $("").width([val|fn])                //宽
  3. $("").innerHeight()                  //内容高度+padding
  4. $("").innerWidth()                   //内容宽度+padding
  5. $("").outerHeight([soptions])        //内容高度+padding+border
  6. $("").outerWidth([options])          //内容宽度+padding+border
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.         }
  10.         .box1{
  11.             width: 200px;
  12.             height: 200px;
  13.             background-color: wheat;
  14.             padding: 50px;
  15.             border: 50px solid rebeccapurple;
  16.             margin: 50px;
  17.         }
  18.  
  19.     </style>
  20. </head>
  21. <body>
  22.  
  23. <div class="box1">
  24.     DIVDIDVIDIV
  25. </div>
  26.  
  27. <p></p>
  28.  
  29. <script src="jquery-3.1.1.js"></script>
  30. <script>
  31.     var $height=$(".box1").height();
  32.     var $innerHeight=$(".box1").innerHeight();
  33.     var $outerHeight=$(".box1").outerHeight();
  34.     var $margin=$(".box1").outerHeight(true);
  35.  
  36.     $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin)
  37. </script>
  38. </body>
  39. </html>

示例

4、文本操作

  • HTML代码：
  1. html()// 取得第一个匹配元素的html内容（类似于 innerHtml）
  2. html(val)// 设置所有匹配元素的html内容
  • 文本值：
  1. text()// 取得所有匹配元素的内容（类似于 innerText）
  2. text(val)// 设置所有匹配元素的内容
  • 值：
  1. val()// 取得第一个匹配元素的当前值
  2. val(val)// 设置所有匹配元素的值
  3. val([val1, val2])// 设置checkbox、select的值

补充：

  1. $(":text").val()
  2. $(":checked").val()  --> 默认返回的都是第一个标签的值，要想取所有的值，for循环
  3. $("#s1").val()       --> select可以直接取选中的值,多选的select返回的是数组格式
  4. $("#t1").val()       --> textarea和input:text类似

示例：

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

  1. <label for="c1">女</label>
  2. <input name="gender" id="c1" type="radio" value="0">
  3. <label for="c2">男</label>
  4. <input name="gender" id="c2" type="radio" value="1">
  5.  
  6. 可以使用：
  7. $("input[name='gender']:checked").val()
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>jQuery val示例</title>
  8. </head>
  9. <body>
  10.  
  11. <label for="s1">城市</label>
  12. <select id="s1">
  13.   <option value="beijing">北京市</option>
  14.   <option value="shanghai">上海市</option>
  15.   <option selected value="guangzhou">广州市</option>
  16.   <option value="shenzhen">深圳市</option>
  17. </select>
  18. <hr>
  19. <label for="s2">爱好</label>
  20. <select id="s2" multiple="multiple">
  21.   <option value="basketball" selected>篮球</option>
  22.   <option value="football">足球</option>
  23.   <option value="doublecolorball" selected>双色球</option>
  24. </select>
  25.  
  26. <script src="jquery-3.2.1.min.js"></script>
  27. <script>
  28.   // 单选下拉框
  29.   $("#s1").val("shanghai");
  30.   // 多选下拉框
  31.    $("#s2").val(["basketball", "football"]);
  32. </script>
  33. </body>
  34. </html>

jQuery val赋值示例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>文本操作之登录验证</title>
  8.   <style>
  9.     .error {
  10.       color: red;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15.  
  16. <form action="">
  17.   <div>
  18.     <label for="input-name">用户名</label>
  19.     <input type="text" id="input-name" name="name">
  20.     <span class="error"></span>
  21.   </div>
  22.   <div>
  23.     <label for="input-password">密码</label>
  24.     <input type="password" id="input-password" name="password">
  25.     <span class="error"></span>
  26.   </div>
  27.   <div>
  28.     <input type="button" id="btn" value="提交">
  29.   </div>
  30. </form>
  31. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  32. <script>
  33.   $("#btn").click(function () {
  34.     var username = $("#input-name").val();
  35.     var password = $("#input-password").val();
  36.  
  37.     if (username.length === 0) {
  38.       $("#input-name").siblings(".error").text("用户名不能为空");
  39.     }
  40.     if (password.length === 0) {
  41.       $("#input-password").siblings(".error").text("密码不能为空");
  42.     }
  43.   })
  44. </script>
  45. </body>
  46. </html>

自定义登录校验示例

5、属性操作

  • 用于ID等或自定义属性：
  1. attr(attrName)// 返回第一个匹配元素的属性值
  2. attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
  3. attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
  4. removeAttr()// 从每一个匹配的元素中删除一个属性
  • 用于checkbox和radio（(返回true或false的属性)）：
  1. prop() // 获取属性
  2. removeProp() // 移除属性

示例：

  1. $("a").attr("href", "http://www.sogo.com")
  2. $("a").attr({"href":"http://www.sogo.com", "title": "aaaa"}) 　　

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

  1. <input type="checkbox" value="1">
  2. <input type="radio" value="2">
  3. <script>
  4.   $(":checkbox[value='1']").prop("checked", true);
  5.   $(":radio[value='2']").prop("checked", true);
  6. </script>

attr方法使用：

  1. <input id="chk1" type="checkbox" />是否可见
  2. <input id="chk2" type="checkbox" checked="checked" />是否可见
  3.  
  4. <script>
  5.  
  6. //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
  7. //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
  8. //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
  9. //需要使用prop方法去操作才能获得正确的结果。
  10.  
  11. //    $("#chk1").attr("checked")
  12. //    undefined
  13. //    $("#chk1").prop("checked")
  14. //    false
  15.  
  16. //  ---------手动选中的时候attr()获得到没有意义的undefined-----------
  17. //    $("#chk1").attr("checked")
  18. //    undefined
  19. //    $("#chk1").prop("checked")
  20. //    true
  21.  
  22.     console.log($("#chk1").prop("checked"));//false
  23.     console.log($("#chk2").prop("checked"));//true
  24.     console.log($("#chk1").attr("checked"));//undefined
  25.     console.log($("#chk2").attr("checked"));//checked
  26. </script>

attr示例

示例：全选、反选、取消

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>全选，反选，取消</title>
  6. </head>
  7. <body>
  8.  
  9. <table border="1">
  10.     <thead>
  11.     <tr>
  12.         <th>#</th>
  13.         <th>姓名</th>
  14.         <th>职业</th>
  15.     </tr>
  16.  
  17.     </thead>
  18.     <tbody>
  19.     <tr>
  20.         <td><input type="checkbox" id="box1"></td>
  21.         <td>小星星</td>
  22.         <td>学生</td>
  23.     </tr>
  24.      <tr>
  25.         <td><input type="checkbox" id="box2"></td>
  26.         <td>小强</td>
  27.         <td>演员</td>
  28.     </tr>
  29.     <tr>
  30.         <td><input type="checkbox" id="box3"></td>
  31.         <td>涉哥</td>
  32.         <td>导演</td>
  33.     </tr>
  34.     </tbody>
  35. </table>
  36. <input type="button" id="b1" value="全选">
  37. <input type="button" id="b2" value="反选">
  38. <input type="button" id="b3" value="取消">
  39.  
  40. <script src="jquery-3.2.1.min.js"></script>
  41. <script>
  42.     // 点击全选,表格中所有的checkbox都选中
  43.     // 1. 找checkbox
  44.     // 2. 全部选中  --> prop("checked", true);
  45.     $("#b1").click(function () {
  46.         $(":checkbox").prop("checked", true);
  47.     });
  48.  
  49.     // 点击取消
  50.     // 1. 找checkbox
  51.     // 2. 全部取消选中  --> prop("checked", false);
  52.    $("#b3").click(function () {
  53.         $(":checkbox").prop("checked", false);
  54.     });
  55.  
  56.     // 反选
  57.     // 1. 找到所有的checkbox
  58.     // 2. 判断
  59.     // 2.1 原来没选中的,要选中
  60.     // 2.2 原来选中的,要取消选中
  61.        $("#b2").click(function () {
  62.            // 找到所有的checkbox,把它们保存在一个名叫 $checkboxEles 的变量中,方便后面使用
  63.            var $checkboxEles = $(":checkbox");
  64.            // 遍历所有的checkbox,根据每一个checkbox的状态做不同的操作
  65.            for (var i=0;i<$checkboxEles.length;i++){
  66.                // 把每一个checkbox包成jQuery对象
  67.                var $tmp = $($checkboxEles[i]);
  68.                // 如果 checkbox是选中的
  69.                if ($tmp.prop("checked")){
  70.                    // 取消选中
  71.                    $tmp.prop("checked", false);
  72.                }else {
  73.                    // 否则就选中
  74.                    $tmp.prop("checked", true);
  75.                }
  76.            }
  77.     });
  78.  
  79. </script>
  80. </body>
  81. </html>

全选，反选，取消　

6、文档处理

  1. //创建一个标签对象
  2.     $("<p>")
  3.  
  4. //内部插入
  5.      A                B
  6.  
  7.     $("").append(content|fn)     把B追加到A    ----->$("p").append("<b>Hello</b>");
  8.     $("").appendTo(content)    把A追加到B      ----->$("p").appendTo("div");
  9.     $("").prepend(content|fn)    把B前置到A    ----->$("p").prepend("<b>Hello</b>");
  10.     $("").prependTo(content)   把A前置到B      ----->$("p").prependTo("#foo");
  11.  
  12. //外部插入
  13.  
  14.     $("").after(content|fn)   把B放到A的后面       ----->$("p").after("<b>Hello</b>");
  15.     $("").before(content|fn)    把B放到A的前面     ----->$("p").before("<b>Hello</b>");
  16.     $("").insertAfter(content)   把A放到B的后面     ----->$("p").insertAfter("#foo");
  17.     $("").insertBefore(content)   把A放到B的前面   ----->$("p").insertBefore("#foo");
  18.  
  19. //替换
  20.     $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
  21. $("").replaceAll(content|fn)
  22. //删除
  23.  
  24.     $("").empty()       删除匹配的元素集合中所有的子节点
  25.     $("").remove([expr])    从DOM中删除所有匹配的元素
  26.  
  27. //复制
  28.  
  29.     $("").clone([Even[,deepEven]])　　

注意：

clone方法中要克隆的对象不要用id,否则会复制成同样的ID，建议用class设置。

要是想在clone中的新对象具有原对象相同的操作，只需加入true即可。$(" ").clone(true).

示例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>点击在表格最后添加一条记录</title>
  6. </head>
  7. <body>
  8. <table border="1" id="t1">
  9.     <thead>
  10.     <tr>
  11.         <th>#</th>
  12.         <th>姓名</th>
  13.         <th>爱好</th>
  14.         <th>操作</th>
  15.     </tr>
  16.     </thead>
  17.     <tbody>
  18.     <tr>
  19.         <td>1</td>
  20.         <td>小强</td>
  21.         <td>吃冰激凌</td>
  22.         <td>
  23.             <button class="delete">删除</button>
  24.         </td>
  25.     </tr>
  26.     <tr>
  27.         <td>2</td>
  28.         <td>二哥</td>
  29.         <td>Girl</td>
  30.         <td>
  31.             <button class="delete">删除</button>
  32.         </td>
  33.     </tr>
  34.  
  35.     </tbody>
  36. </table>
  37.  
  38. <button id="b1">添加一行数据</button>
  39. <script src="jquery-3.2.1.min.js"></script>
  40. <script>
  41.     // 绑定事件
  42.     $("#b1").click(function () {
  43.         // 生成要添加的tr标签及数据
  44.         var trEle = document.createElement("tr");
  45.         $(trEle).html("<td>3</td>" +
  46.             "<td>小东北</td>" +
  47.             "<td>社会摇</td>" +
  48.             "<td><button class='delete'>删除</button></td>");
  49.         // 把生成的tr插入到表格中
  50.         $("#t1").find("tbody").append(trEle);
  51.     });
  52.  
  53.     // 每一行的=删除按钮绑定事件
  54.     $(".delete").click(function () {
  55.         $(this).parent().parent().remove();
  56.     });
  57.  
  58. </script>
  59. </body>
  60. </html>

点击在表格最后添加一条记录

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>替换操作示例</title>
  6. </head>
  7. <body>
  8.  
  9. <p><a href="http://www.sogo.com">aaa</a></p>
  10. <p><a href="">bbb</a></p>
  11. <p><a href="">ccc</a></p>
  12.  
  13. <button id="b1">点我!</button>
  14. <script src="jquery-3.2.1.min.js"></script>
  15. <script>
  16.     $("#b1").click(function () {
  17.             // 创建一个img标签
  18.     var imgEle = document.createElement("img");
  19.     $(imgEle).attr("src", "http://img3.duitang.com/uploads/item/201607/22/20160722224001_RyzrQ.jpeg");
  20.     $("a").replaceWith(imgEle);
  21. //    $(imgEle).replaceAll("a");
  22.     });
  23.  
  24. </script>
  25. </body>
  26. </html>

替换操作示例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>克隆示例</title>
  6. </head>
  7. <body>
  8.  
  9. <button class="b1">屠龙宝刀,点我就送!</button>
  10.  
  11. <script src="jquery-3.2.1.min.js"></script>
  12. <script>
  13.     $(".b1").click(function () {
  14.         $(this).clone(true).insertAfter(this);
  15.     });
  16. </script>
  17. </body>
  18. </html>

克隆示例

7、事件

  • 常用事件

  1. click(function(){...})
  2. hover(function(){...})
  3. blur(function(){...})
  4. focus(function(){...})
  5. change(function(){...})
  6. keyup(function(){...})

keydown和keyup事件组合示例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>键盘事件示例</title>
  8. </head>
  9. <body>
  10.  
  11. <table border="1">
  12.   <thead>
  13.   <tr>
  14.     <th>#</th>
  15.     <th>姓名</th>
  16.     <th>操作</th>
  17.   </tr>
  18.   </thead>
  19.   <tbody>
  20.   <tr>
  21.     <td><input type="checkbox"></td>
  22.     <td>Egon</td>
  23.     <td>
  24.       <select>
  25.         <option value="1">上线</option>
  26.         <option value="2">下线</option>
  27.         <option value="3">停职</option>
  28.       </select>
  29.     </td>
  30.   </tr>
  31.   <tr>
  32.     <td><input type="checkbox"></td>
  33.     <td>Alex</td>
  34.     <td>
  35.       <select>
  36.         <option value="1">上线</option>
  37.         <option value="2">下线</option>
  38.         <option value="3">停职</option>
  39.       </select>
  40.     </td>
  41.   </tr>
  42.   <tr>
  43.     <td><input type="checkbox"></td>
  44.     <td>Yuan</td>
  45.     <td>
  46.       <select>
  47.         <option value="1">上线</option>
  48.         <option value="2">下线</option>
  49.         <option value="3">停职</option>
  50.       </select>
  51.     </td>
  52.   </tr>
  53.   <tr>
  54.     <td><input type="checkbox"></td>
  55.     <td>EvaJ</td>
  56.     <td>
  57.       <select>
  58.         <option value="1">上线</option>
  59.         <option value="2">下线</option>
  60.         <option value="3">停职</option>
  61.       </select>
  62.     </td>
  63.   </tr>
  64.   <tr>
  65.     <td><input type="checkbox"></td>
  66.     <td>Gold</td>
  67.     <td>
  68.       <select>
  69.         <option value="1">上线</option>
  70.         <option value="2">下线</option>
  71.         <option value="3">停职</option>
  72.       </select>
  73.     </td>
  74.   </tr>
  75.   </tbody>
  76. </table>
  77.  
  78. <input type="button" id="b1" value="全选">
  79. <input type="button" id="b2" value="取消">
  80. <input type="button" id="b3" value="反选">
  81.  
  82. <script src="jquery-3.2.1.min.js"></script>
  83. <script>
  84.   // 全选
  85.   $("#b1").on("click", function () {
  86.     $(":checkbox").prop("checked", true);
  87.   });
  88.   // 取消
  89.   $("#b2").on("click", function () {
  90.     $(":checkbox").prop("checked", false);
  91.   });
  92.   // 反选
  93.   $("#b3").on("click", function () {
  94.     $(":checkbox").each(function () {
  95.       var flag = $(this).prop("checked");
  96.       $(this).prop("checked", !flag);
  97.     })
  98.   });
  99.   // 按住shift键，批量操作
  100.   // 定义全局变量
  101.   var flag = false;
  102.   // 全局事件，监听键盘shift按键是否被按下
  103.   $(window).on("keydown", function (e) {
  104. //    alert(e.keyCode);
  105.     if (e.keyCode === 16){
  106.       flag = true;
  107.     }
  108.   });
  109.   // 全局事件,shift按键抬起时将全局变量置为false
  110.   $(window).on("keyup", function (e) {
  111.     if (e.keyCode === 16){
  112.       flag = false;
  113.     }
  114.   });
  115.   // select绑定change事件
  116.   $("table select").on("change", function () {
  117.     // 是否为批量操作模式
  118.     if (flag) {
  119.       var selectValue = $(this).val();
  120.       // 找到所有被选中的那一行的select，选中指定值
  121.       $("input:checked").parent().parent().find("select").val(selectValue);
  122.     }
  123.   })
  124. </script>
  125. </body>
  126. </html>

按住shift键批量操作

实时监听input输入值变化示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>实时监听input输入值变化</title>
  8. </head>
  9. <body>
  10. <input type="text" id="i1">
  11.  
  12. <script src="jquery-3.2.1.min.js"></script>
  13. <script>
  14.   /*
  15.   * oninput是HTML5的标准事件
  16.   * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
  17.   * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
  18.   * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
  19.   * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
  20.   * */
  21.   $("#i1").on("input propertychange", function () {
  22.     alert($(this).val());
  23.   })
  24. </script>
  25. </body>
  26. </html>

input值变化事件　

  • 事件绑定

  1. //语法:  标签对象.事件(函数) 
  2.  
  3. .on( events [, selector ],function(){})
  4.  
  5. eg: $("p").click(function(){})
    • events： 事件
    • selector: 选择器（可选的）
    • function: 事件处理函数

  • 移除事件

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

off() 方法移除用 .on()绑定的事件处理程序。　　

    • events： 事件
    • selector: 选择器（可选的）
    • function: 事件处理函数

  • 阻止后续事件执行

  1. return false; // 常见阻止表单提交等

注意：

像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

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

  • 页面载入

  1. ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
  2. $(document).ready(function(){}) -----------> $(function(){})　

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

两种写法：　　

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

简写：

  1. $(function(){
  2. // 你在这里写你的代码
  3. })

文档加载完绑定事件，并且阻止默认事件发生：　　

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>登录注册示例</title>
  8.   <style>
  9.     .error {
  10.       color: red;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15.  
  16. <form id="myForm">
  17.   <label for="name">姓名</label>
  18.   <input type="text" id="name">
  19.   <span class="error"></span>
  20.   <label for="passwd">密码</label>
  21.   <input type="password" id="passwd">
  22.   <span class="error"></span>
  23.   <input type="submit" id="modal-submit" value="登录">
  24. </form>
  25.  
  26. <script src="jquery-3.2.1.min.js"></script>
  27. <script src="s7validate.js"></script>
  28. <script>
  29.   function myValidation() {
  30.     // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
  31.     var $myForm = $("#myForm");
  32.     $myForm.find(":submit").on("click", function () {
  33.       // 定义一个标志位，记录表单填写是否正常
  34.       var flag = true;
  35.       $myForm.find(":text, :password").each(function () {
  36.         var val = $(this).val();
  37.         if (val.length <= 0 ){
  38.           var labelName = $(this).prev("label").text();
  39.           $(this).next("span").text(labelName + "不能为空");
  40.           flag = false;
  41.         }
  42.       });
  43.       // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
  44.       return flag;
  45.     });
  46.     // input输入框获取焦点后移除之前的错误提示信息
  47.     $myForm.find("input[type!='submit']").on("focus", function () {
  48.       $(this).next(".error").text("");
  49.     })
  50.   }
  51.   // 文档树就绪后执行
  52.   $(document).ready(function () {
  53.     myValidation();
  54.   });
  55. </script>
  56. </body>
  57. </html>

登录校验示例　　

  • 事件委派

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

  1. $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。
  1. <ul>
  2.     <li>1</li>
  3.     <li>2</li>
  4.     <li>3</li>
  5. </ul>
  6. <hr>
  7. <button id="add_li">Add_li</button>
  8. <button id="off">off</button>
  9.  
  10. <script src="jquery.min.js"></script>
  11. <script>
  12.     $("ul li").click(function(){
  13.         alert(123)
  14.     });
  15.  
  16.     $("#add_li").click(function(){
  17.         var $ele=$("<li>");
  18.         $ele.text(Math.round(Math.random()*10));
  19.         $("ul").append($ele)
  20.  
  21.     });
  22.  
  23. //    $("ul").on("click","li",function(){
  24. //        alert(456)
  25. //    })
  26.  
  27.      $("#off").click(function(){
  28.          $("ul li").off()
  29.      })
  30.  
  31. </script>

　　

  • 事件切换

hover事件：

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .test{
  12.  
  13.             width: 200px;
  14.             height: 200px;
  15.             background-color: wheat;
  16.  
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.  
  22. <div class="test"></div>
  23. </body>
  24. <script src="jquery.min.js"></script>
  25. <script>
  26. //    function enter(){
  27. //        console.log("enter")
  28. //    }
  29. //    function out(){
  30. //        console.log("out")
  31. //    }
  32. // $(".test").hover(enter,out)
  33.  
  34. $(".test").mouseenter(function(){
  35.         console.log("enter")
  36. });
  37.  
  38. $(".test").mouseleave(function(){
  39.         console.log("leave")
  40.     });
  41.  
  42. </script>
  43. </html>

8、动画效果

  • 显示、隐藏
  1. show([s,[e],[fn]])
  2. hide([s,[e],[fn]])
  3. toggle([s],[e],[fn])
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-2.1.4.min.js"></script>
  7.     <script>
  8.  
  9. $(document).ready(function() {
  10.     $("#hide").click(function () {
  11.         $("p").hide(1000);
  12.     });
  13.     $("#show").click(function () {
  14.         $("p").show(1000);
  15.     });
  16.  
  17. //用于切换被选元素的 hide() 与 show() 方法。
  18.     $("#toggle").click(function () {
  19.         $("p").toggle();
  20.     });
  21. })
  22.  
  23.     </script>
  24.     <link type="text/css" rel="stylesheet" href="style.css">
  25. </head>
  26. <body>
  27.  
  28.     <p>hello</p>
  29.     <button id="hide">隐藏</button>
  30.     <button id="show">显示</button>
  31.     <button id="toggle">切换</button>
  32.  
  33. </body>
  34. </html>

显示、隐藏

  • 滑动
  1. slideDown([s],[e],[fn])
  2. slideUp([s,[e],[fn]])
  3. slideToggle([s],[e],[fn])　
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-2.1.4.min.js"></script>
  7.     <script>
  8.     $(document).ready(function(){
  9.      $("#slideDown").click(function(){
  10.          $("#content").slideDown(1000);
  11.      });
  12.       $("#slideUp").click(function(){
  13.          $("#content").slideUp(1000);
  14.      });
  15.       $("#slideToggle").click(function(){
  16.          $("#content").slideToggle(1000);
  17.      })
  18.   });
  19.     </script>
  20.     <style>
  21.  
  22.         #content{
  23.             text-align: center;
  24.             background-color: lightblue;
  25.             border:solid 1px red;
  26.             display: none;
  27.             padding: 50px;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.  
  33.     <div id="slideDown">出现</div>
  34.     <div id="slideUp">隐藏</div>
  35.     <div id="slideToggle">toggle</div>
  36.  
  37.     <div id="content">helloworld</div>
  38.  
  39. </body>
  40. </html>

滑动

  • 淡入淡出
  1. fadeIn([s],[e],[fn])
  2. fadeOut([s],[e],[fn])
  3. fadeTo([[s],o,[e],[fn]])
  4. fadeToggle([s,[e],[fn]])　　
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-2.1.4.min.js"></script>
  7.     <script>
  8.     $(document).ready(function(){
  9.    $("#in").click(function(){
  10.        $("#id1").fadeIn(1000);
  11.  
  12.    });
  13.     $("#out").click(function(){
  14.        $("#id1").fadeOut(1000);
  15.  
  16.    });
  17.     $("#toggle").click(function(){
  18.        $("#id1").fadeToggle(1000);
  19.  
  20.    });
  21.     $("#fadeto").click(function(){
  22.        $("#id1").fadeTo(1000,0.4);
  23.  
  24.    });
  25. });
  26.  
  27.     </script>
  28.  
  29. </head>
  30. <body>
  31.       <button id="in">fadein</button>
  32.       <button id="out">fadeout</button>
  33.       <button id="toggle">fadetoggle</button>
  34.       <button id="fadeto">fadeto</button>
  35.  
  36.       <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
  37.  
  38. </body>
  39. </html>

淡入淡出

  • 自定义
  1. animate(p,[s],[e],[fn])　　
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>点赞动画示例</title>
  8.   <style>
  9.     div {
  10.       position: relative;
  11.       display: inline-block;
  12.     }
  13.     div>i {
  14.       display: inline-block;
  15.       color: red;
  16.       position: absolute;
  17.       right: -16px;
  18.       top: -5px;
  19.       opacity: 1;
  20.     }
  21.   </style>
  22. </head>
  23. <body>
  24.  
  25. <div id="d1">点赞</div>
  26.  
  27. <script src="jquery-3.2.1.min.js"></script>
  28. <script>
  29.   $("#d1").on("click", function () {
  30.     var newI = document.createElement("i");
  31.     newI.innerText = "+1";
  32.     $(this).append(newI);
  33.     $(this).children("i").animate({
  34.       opacity: 0
  35.     }, 1000)
  36.   })
  37. </script>
  38. </body>
  39. </html>

自定义点赞效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery-2.1.4.min.js"></script>
  7.  
  8. </head>
  9. <body>
  10.   <button>hide</button>
  11.   <p>helloworld helloworld helloworld</p>
  12.  
  13.  <script>
  14.    $("button").click(function(){
  15.        $("p").hide(1000,function(){
  16.            alert($(this).html())
  17.        })
  18.  
  19.    })
  20.     </script>
  21. </body>
  22. </html>

回调函数

9、插件（了解）

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

示例：

  1. <script>
  2. jQuery.extend({
  3.   min:function(a, b){return a < b ? a : b;},
  4.   max:function(a, b){return a > b ? a : b;}
  5. });
  6. jQuery.min(2,3);// => 2
  7. jQuery.max(4,5);// => 5
  8. </script>

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

  1. <script>
  2.   jQuery.fn.extend({
  3.     check:function(){
  4.       return this.each(function(){this.checked =true;});
  5.     },
  6.     uncheck:function(){
  7.       return this.each(function(){this.checked =false;});
  8.     }
  9.   });
  10. // jQuery对象可以使用新添加的check()方法了。
  11. $("input[type='checkbox']").check();
  12. </script>

单独写在文件中的扩展：　　

  1. (function(jq){
  2.   jq.extend({
  3.     funcName:function(){
  4.     ...
  5.     },
  6.   });
  7. })(jQuery);　　

例子：

自定义的jQuery登录验证插件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>登录校验示例</title>
  8.   <style>
  9.     .login-form {
  10.       margin: 100px auto 0;
  11.       max-width: 330px;
  12.     }
  13.     .login-form > div {
  14.       margin: 15px 0;
  15.     }
  16.     .error {
  17.       color: red;
  18.     }
  19.   </style>
  20. </head>
  21. <body>
  22.  
  23. <div>
  24.   <form action="" class="login-form" novalidate>
  25.  
  26.     <div>
  27.       <label for="username">姓名</label>
  28.       <input id="username" type="text" name="name" required autocomplete="off">
  29.       <span class="error"></span>
  30.     </div>
  31.     <div>
  32.       <label for="passwd">密码</label>
  33.       <input id="passwd" type="password" name="password" required autocomplete="off">
  34.       <span class="error"></span>
  35.     </div>
  36.     <div>
  37.       <label for="mobile">手机</label>
  38.       <input id="mobile" type="text" name="mobile" required autocomplete="off">
  39.       <span class="error"></span>
  40.     </div>
  41.     <div>
  42.       <label for="where">来自</label>
  43.       <input id="where" type="text" name="where" autocomplete="off">
  44.       <span class="error"></span>
  45.     </div>
  46.     <div>
  47.       <input type="submit" value="登录">
  48.     </div>
  49.  
  50.   </form>
  51. </div>
  52.  
  53. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  54. <script src="validate.js"></script>
  55. <script>
  56.   $.validate();
  57. </script>
  58. </body>
  59. </html>

HTML文件

  1. "use strict";
  2. (function ($) {
  3.   function check() {
  4.     // 定义一个标志位，表示验证通过还是验证不通过
  5.     var flag = true;
  6.     var errMsg;
  7.     // 校验规则
  8.     $("form input[type!=':submit']").each(function () {
  9.       var labelName = $(this).prev().text();
  10.       var inputName = $(this).attr("name");
  11.       var inputValue = $(this).val();
  12.       if ($(this).attr("required")) {
  13.         // 如果是必填项
  14.         if (inputValue.length === 0) {
  15.           // 值为空
  16.           errMsg = labelName + "不能为空";
  17.           $(this).next().text(errMsg);
  18.           flag = false;
  19.           return false;
  20.         }
  21.         // 如果是密码类型，我们就要判断密码的长度是否大于6位
  22.         if (inputName === "password") {
  23.           // 除了上面判断为不为空还要判断密码长度是否大于6位
  24.           if (inputValue.length < 6) {
  25.             errMsg = labelName + "必须大于6位";
  26.             $(this).next().text(errMsg);
  27.             flag = false;
  28.             return false;
  29.           }
  30.         }
  31.         // 如果是手机类型，我们需要判断手机的格式是否正确
  32.         if (inputName === "mobile") {
  33.           // 使用正则表达式校验inputValue是否为正确的手机号码
  34.           if (!/^1[345678]\d{9}$/.test(inputValue)) {
  35.             // 不是有效的手机号码格式
  36.             errMsg = labelName + "格式不正确";
  37.             $(this).next().text(errMsg);
  38.             flag = false;
  39.             return false;
  40.           }
  41.         }
  42.       }
  43.     });
  44.     return flag;
  45.   }
  46.  
  47.   function clearError(arg) {
  48.     // 清空之前的错误提示
  49.     $(arg).next().text("");
  50.   }
  51.   // 上面都是我定义的工具函数
  52.   $.extend({
  53.     validate: function () {
  54.       $("form :submit").on("click", function () {
  55.       return check();
  56.     });
  57.     $("form :input[type!='submit']").on("focus", function () {
  58.       clearError(this);
  59.     });
  60.     }
  61.   });
  62. })(jQuery);

JS文件

传参版插件：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="x-ua-compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7.   <title>登录校验示例</title>
  8.   <style>
  9.     .login-form {
  10.       margin: 100px auto 0;
  11.       max-width: 330px;
  12.     }
  13.     .login-form > div {
  14.       margin: 15px 0;
  15.     }
  16.     .error {
  17.       color: red;
  18.     }
  19.   </style>
  20. </head>
  21. <body>
  22.  
  23. <div>
  24.   <form action="" class="login-form" novalidate>
  25.  
  26.     <div>
  27.       <label for="username">姓名</label>
  28.       <input id="username" type="text" name="name" required autocomplete="off">
  29.       <span class="error"></span>
  30.     </div>
  31.     <div>
  32.       <label for="passwd">密码</label>
  33.       <input id="passwd" type="password" name="password" required autocomplete="off">
  34.       <span class="error"></span>
  35.     </div>
  36.     <div>
  37.       <label for="mobile">手机</label>
  38.       <input id="mobile" type="text" name="mobile" required autocomplete="off">
  39.       <span class="error"></span>
  40.     </div>
  41.     <div>
  42.       <label for="where">来自</label>
  43.       <input id="where" type="text" name="where" autocomplete="off">
  44.       <span class="error"></span>
  45.     </div>
  46.     <div>
  47.       <input type="submit" value="登录">
  48.     </div>
  49.  
  50.   </form>
  51. </div>
  52.  
  53. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  54. <script src="validate3.js"></script>
  55. <script>
  56.   $.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}});
  57. </script>
  58. </body>
  59. </html>

Html文件

  1. "use strict";
  2. (function ($) {
  3.   function check(arg) {
  4.     // 定义一个标志位，表示验证通过还是验证不通过
  5.     var flag = true;
  6.     var errMsg;
  7.     // 校验规则
  8.     $("form input[type!=':submit']").each(function () {
  9.       var labelName = $(this).prev().text();
  10.       var inputName = $(this).attr("name");
  11.       var inputValue = $(this).val();
  12.       if (arg[inputName].required) {
  13.         // 如果是必填项
  14.         if (inputValue.length === 0) {
  15.           // 值为空
  16.           errMsg = labelName + "不能为空";
  17.           $(this).next().text(errMsg);
  18.           flag = false;
  19.           return false;
  20.         }
  21.         // 如果是密码类型，我们就要判断密码的长度是否大于6位
  22.         if (inputName === "password") {
  23.           // 除了上面判断为不为空还要判断密码长度是否大于6位
  24.           if (inputValue.length < arg[inputName].minLength) {
  25.             errMsg = labelName + "必须大于"+arg[inputName].minLength+"位";
  26.             $(this).next().text(errMsg);
  27.             flag = false;
  28.             return false;
  29.           }
  30.         }
  31.         // 如果是手机类型，我们需要判断手机的格式是否正确
  32.         if (inputName === "mobile") {
  33.           // 使用正则表达式校验inputValue是否为正确的手机号码
  34.           if (!/^1[345678]\d{9}$/.test(inputValue)) {
  35.             // 不是有效的手机号码格式
  36.             errMsg = labelName + "格式不正确";
  37.             $(this).next().text(errMsg);
  38.             flag = false;
  39.             return false;
  40.           }
  41.         }
  42.       }
  43.     });
  44.     return flag;
  45.   }
  46.  
  47.   function clearError(arg) {
  48.     // 清空之前的错误提示
  49.     $(arg).next().text("");
  50.   }
  51.   // 上面都是我定义的工具函数
  52.   $.extend({
  53.     validate: function (arg) {
  54.       $("form :submit").on("click", function () {
  55.       return check(arg);
  56.     });
  57.     $("form :input[type!='submit']").on("focus", function () {
  58.       clearError(this);
  59.     });
  60.     }
  61.   });
  62. })(jQuery);

JS文件　

10、each、data

  • each循环

我们知道：

  1. $("p").css("color","red")　

是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦

jquery支持两种循环方式：

方式一：

格式：$.each(obj,fn)

  1. li=[10,20,30,40];
  2. dic={name:"yuan",sex:"male"};
  3. $.each(li,function(i,x){
  4.     console.log(i,x)
  5. });　　

方式二：

格式：$("").each(fn)

  1. $("tr").each(function(){
  2.     console.log($(this).html())
  3. })

其中,$(this)代指当前循环标签。　　

each扩展

  1. /*
  2.         function f(){
  3.  
  4.         for(var i=0;i<4;i++){
  5.  
  6.             if (i==2){
  7.                 return
  8.             }
  9.             console.log(i)
  10.         }
  11.  
  12.     }
  13.     f();  // 这个例子大家应该不会有问题吧!!!
  14. //-----------------------------------------------------------------------
  15.  
  16.     li=[11,22,33,44];
  17.     $.each(li,function(i,v){
  18.  
  19.         if (v==33){
  20.                 return ;   //  ===试一试 return false会怎样?
  21.             }
  22.             console.log(v)
  23.     });
  24.  
  25. //------------------------------------------
  26.  
  27.     // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行
  28.  
  29.     //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,
  30.     //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:
  31.          for(var i in obj){
  32.  
  33.              ret=func(i,obj[i]) ;
  34.              if(ret==false){
  35.                  return ;
  36.              }
  37.  
  38.          }
  39.     // 这样就很灵活了:
  40.     // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
  41.     // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false

扩展

  • .data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

  1. $("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

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

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

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

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

　　

补充：

  1. 1. 文档操作
  2.  
  3.     2. 事件 *****
  4.         1. 目前为止学过的绑定事件的方式
  5.             1. 在标签里面写 onclick=foo(this);
  6.             2. 原生DOM的JS绑定      DOM对象.onclick=function(){...}
  7.             3. jQuery版的绑定事件   jQuery对象.click(function(){...})
  8.  
  9.         2. 我们今后要用的jQuery绑定事件的方式
  10.             .on("click", function(){...})
  11.  
  12.             $("#t1").on("click", "选择器", function(){...})
  13.             适用于 给未来的元素(页面生成的时候还没有的标签) 绑定事件 (事件委托)
  14.  
  15.             事件冒泡和事件捕获
  16.                 利用事件冒泡,给已经存在的标签绑定事件,用来捕获后代标签的事件.
  17.  
  18.         3. 事件之间
  19.             1. 阻止后续事件的执行
  20.                 显式的写   return false;
  21.             2. for循环,退出当前循环 ---> 用break;
  22.  
  23.         4. 补充一个键盘事件
  24.             示例:批量操作的
  25.         5. DOM加载完之后执行
  26.             $(document).ready(function(){
  27.               // 写绑定事件的具体操作
  28.             });
  29.         6. 动画(了解即可)
  30.  
  31.     3. jQuery补充
  32.         1. .each循环
  33.             1. $.each(a1, function(){...})
  34.             2. $("div").each(function(){
  35.                 console.log(this);   --> this指的是每次进入循环的标签
  36.             })
  37.         2. .data
  38.             1. 可以存字符串
  39.             2. 可以存数字
  40.             3. 可以存jQuery对象
  41.         3. 插件机制
  42.             1. 给具体的jQuery对象添加扩展
  43.                 $.fn.extend({
  44.                     "s9": function(){
  45.                       ...
  46.                     }
  47.                   })
  48.  
  49.             2. 给jQuery添加全局扩展
  50.                 $.extend({
  51.                   "s9": function(){
  52.                     ...
  53.                   }
  54.                 })

内容大致介绍

　　

　　

　　

前端基础 之 jQuery的更多相关文章

  1. 前端基础之:JQuery(可编辑版)

     前端基础之jquery   一 jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   ...

  2. 进击的Python【第十六章】：Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  3. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

  4. Python学习（二十三）—— 前端基础之jQuery

    转载自http://www.cnblogs.com/liwenzhou/p/8178806.html 一.jQuery入门 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQue ...

  5. 四丶前端基础之jquery

    知识预览 一 jQuery是什么? 二 什么是jQuery对象? 三 寻找元素(选择器和筛选器) 四 操作元素(属性,css,文档处理) 扩展方法 (插件机制) 回到顶部 一 jQuery是什么? ［ ...

  6. 前端基础之jQuery

    JavaScript和jQuery的区别 JavaScript是一门编程语言,我们用它来编写客户端浏览器脚本 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化java ...

  7. 前端基础之JQuery - day15

    写在前面 上课第15天,打卡: 张国臂掖,以通西域: ########### # 课上简书 # ########## http://jquery.cuishifeng.cn/index.html JQ ...

  8. 前端基础（jQuery）

    jquery: JS Bootstrap jquery: write less do more jquery对象: Jquery.方法 ======= $.方法 jquery的基础语法:$(selec ...

  9. 前端基础之jQuery（Day55）

    阅读目录 一 jQuery是什么? 二 什么是jQuery对象? 三 寻找元素(选择器和筛选器) 四 操作元素(属性,css,文档处理) 扩展方法 (插件机制) 一. jQuery是什么? ［1］   ...

随机推荐

  1. hdoj-2141-Can you find it?(二分查找)

    题目链接 /* Name:HDU-2141-Can you find it? Copyright: Author: Date: 2018/4/12 17:15:46 Description: 暴力,复 ...

  2. 20165210 Java第二次实验报告

    20165210 实验二 Java面向对象程序设计 一.面向对象程序设计1--单元测试和TDD 实验要求 参考 http://www.cnblogs.com/rocedu/p/6371315.html ...

  3. linux下配置cvs服务器以及cvs常用命令

    .查看系统是否安装有cvs #cat /etc/services | grep cvspserver 看看是否有: cvspserver /tcp #CVS client/server operati ...

  4. I.MX6 Android 5.1 回到 Android 4.2 emmc 启动

    /*************************************************************************** * I.MX6 Android 5.1 回到 ...

  5. 现网CPU飙高，Full GC告警

    现网CPU飙高,Full GC告警 https://www.cnblogs.com/QG-whz/p/9647614.html 问题出现:现网CPU飙高,Full GC告警 CGI 服务发布到现网后, ...

  6. JavaWeb框架_Struts2_(二)----->Struts2的核心配置

    2.  Struts2的核心配置 2.1  配置Struts.xml文件 2.1.1 Struts.xml文件 Struts2框架的核心配置文件是Struts.xml,该文件主要用来配置Action和 ...

  7. BZOJ2038：[2009国家集训队]小Z的袜子

    浅谈莫队:https://www.cnblogs.com/AKMer/p/10374756.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?i ...

  8. Haproxy状态监控配置教程

    https://www.cnblogs.com/tianciliangen/p/7985881.html 方法一:在defaults段增加如下配置: stats refresh 30s #统计页面自动 ...

  9. ECMAScript 2016(ES7) 知多少

    ECMAScript 2016(ES7) 知多少 1. 数组方法 Array.prototype.includes(value : any) : boolean 2. 幂运算符 x ** y 扩展阅读 ...

  10. （转）C#程序开发中经常遇到的10条实用的代码

    原文地址:http://www.cnblogs.com/JamesLi2015/p/3147986.html 1 读取操作系统和CLR的版本 OperatingSystem os = System.E ...