jQuery是什么？

［1］   jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

［2］   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

［3］  它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

［4］  jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

［5］  jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery的优势

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

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

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

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

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

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

插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用

什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html()

  1. $("#test").html() 
  2.  
  3.          意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 
  4.  
  5.          这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 
  6.  
  7.          虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
  8.  
  9.          约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 
  10.  
  11. var $variable = jQuery 对象
  12. var variable = DOM 对象
  13.  
  14. $variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

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

参考：http://jquery.cuishifeng.cn/

寻找元素(选择器和筛选器)

选择器

基本选择器

  1. // 所有元素
  2. $("*")
  3. // 根据ID查找
  4. $("#id")
  5. // 根据class名查找
  6. $(".class")
  7. // 根据标签名查找
  8. $("element")
  9. // 组合选择器
  10. $(".class,p,div")

层级选择器

  1. // 后代选择器
  2. $(".outer div")
  3. // 子代选择器
  4. $(".outer>div")
  5. // 毗邻选择器
  6. $(".outer+div")
  7. // 兄弟选择器(后面的兄弟标签)
  8. $(".outer~div")

基本筛选器

  1. // 第一个
  2. $("li:first")
  3. // 索引为2的
  4. $("li:eq(2)")
  5. // 索引值为偶数的
  6. $("li:even")
  7. // 索引值为奇数的
  8. $("li:odd")
  9. // 索引值大于1的
  10. $("li:gt(1)")
  11. // 索引值小于1的
  12. $("li:lt(1)")
  13. // 去除所有与给定选择器匹配的元素,id不为d1的li标签
  14. $("li:not(#d1)")
  15. // 匹配含有选择器所匹配的元素的元素
  16. :has(元素名)

注意：

这里的has和not不是简单的 有和 没有的意思，它俩没啥关系（不是一组）

:not和:has通常用.not()和.has()代替。

$("div:has(.c1)")等价于$("div .c1")并不等价于$("div.c1")

自定义模态框示例

  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.     <title>Title</title>
  7.     <style>
  8.         .cover{
  9.             position: fixed;
  10.             top: 0;
  11.             right: 0;
  12.             bottom: 0;
  13.             left: 0;
  14.             background-color: rgba(0,0,0,0.3);
  15.             z-index: 999;
  16.         }
  17.         .modal{
  18.             position: fixed;
  19.             top: 50%;
  20.             left: 50%;
  21.             width: 400px;
  22.             height: 300px;
  23.             margin-top: -150px;
  24.             margin-left: -200px;
  25.             background-color: white;
  26.             z-index: 1000;
  27.         }
  28.         .hide{
  29.             display: none;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34. <input type="button" id="btn" value="点击">
  35. <div class="cover hide"></div>
  36. <div class="modal hide"></div>
  37.  
  38. <script src="../jquery-3.2.1.min.js"></script>
  39. <script>
  40.     var btnEle = document.getElementById("btn");
  41.     btnEle.onclick=function () {
  42. //        $(".cover").removeClass("hide");
  43. //        $(".modal").removeClass("hide");
  44.         $(".cover,.modal").removeClass("hide");
  45.     }
  46. </script>
  47. </body>
  48. </html>

属性选择器：

  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

例子：

  1. <form>
  2.   <input name="email" disabled="disabled" />
  3.   <input name="id" />
  4. </form>
  5.  
  6. $("input:enabled")  // 找到可用的input标签
  7.  
  8. <body>
  9.  
  10. <form>
  11.     <input type="checkbox" value="123" checked>
  12.     <input type="checkbox" value="456" checked>
  13.  
  14.   <select>
  15.       <option value="1">Flowers</option>
  16.       <option value="2" selected="selected">Gardens</option>
  17.       <option value="3" selected="selected">Trees</option>
  18.       <option value="3" selected="selected">Trees</option>
  19.   </select>
  20. </form>
  21.  
  22. <script src="jquery.min.js"></script>
  23. <script>
  24.     // console.log($("input:checked").length);     // 2
  25.  
  26.     // console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1
  27.  
  28.     $("input:checked").each(function(){
  29.  
  30.         console.log($(this).val())
  31.     })
  32.  
  33. </script>
  34.  
  35. </body>

筛选器

  1.  查找子标签：         $("div").children(".test")      $("div").find(".test")  
  2.  
  3.  向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()
  4.                     $(".test").nextUntil() 
  5.  
  6.  向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()
  7.                     $("div").prevUntil()
  8.  查找所有兄弟标签：    $("div").siblings()  
  9.  
  10.  查找父标签：         $(".test").parent()              $(".test").parents()
  11.                     $(".test").parentUntil()

until都不包含其中的元素

补充：

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

左侧菜单示例

  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.     <title>Title</title>
  7.     <style>
  8.         .left{
  9.             position: fixed;
  10.             left: 0;
  11.             top: 0;
  12.             width: 20%;
  13.             height: 100%;
  14.             background-color: cornflowerblue;
  15.         }
  16.         .title {
  17.             padding: 10px;
  18.             text-align: center;
  19.             border-bottom: 1px solid whitesmoke;
  20.         }
  21.         .content{
  22.             background-color: black;
  23.             color: white;
  24.         }
  25.         .content div{
  26.             padding: 5px 10px;
  27.             border-bottom: 1px solid whitesmoke;
  28.         }
  29.         .hide{
  30.             display: none;
  31.         }
  32.     </style>
  33.  
  34. </head>
  35. <body>
  36.  
  37. <div class="left">
  38.     <div class="item">
  39.         <div class="title">菜单一</div>
  40.         <div class="content hide">
  41.             <div>111</div>
  42.             <div>222</div>
  43.             <div>333</div>
  44.         </div>
  45.     </div>
  46.     <div class="item">
  47.         <div class="title">菜单二</div>
  48.         <div class="content hide">
  49.             <div>111</div>
  50.             <div>222</div>
  51.             <div>333</div>
  52.         </div>
  53.     </div>
  54.     <div class="item">
  55.         <div class="title">菜单三</div>
  56.         <div class="content hide">
  57.             <div>111</div>
  58.             <div>222</div>
  59.             <div>333</div>
  60.         </div>
  61.     </div>
  62. </div>
  63.  
  64. <script src="jquery-3.2.1.min.js"></script>
  65. <script>
  66.     var $tieleEles = $(".title");
  67.     $tieleEles.on("click",function () {
  68.         // this指当前点击的标签，是DOM对象，需要转换成jQuery对象
  69.         $(this).next().toggleClass("hide").parent().siblings(".item").children(".content").addClass("hide");
  70.     })
  71. </script>
  72. </body>
  73. </html>

操作标签

属性操作

  1. --------------------------CSS类
  2. $("").addClass(class|fn)
  3. $("").removeClass([class|fn])
  4. hasClass();// 判断样式存不存在
  5. toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加
  6.  
  7. --------------------------属性
  8. $("").attr();
  9. $("").removeAttr();
  10. $("").prop();
  11. $("").removeProp();
  12.  
  13. --------------------------HTML代码/文本/值
  14. $("").html([val|fn])
  15. $("").text([val|fn])
  16. $("").val([val|fn|arr])
  17.  
  18. ---------------------------
  19. $("#c1").css({"color":"red","fontSize":"35px"})
  20.  
  21. ---------------------------
  22. offset()// 获取匹配元素在当前视口的相对偏移
  23. position()// 获取匹配元素相对父元素的偏移
  24. scrollTop()// 获取匹配元素相对滚动条顶部的偏移
  25. scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

attr方法使用：

  1. attr(attrName)// 返回第一个匹配元素的属性值
  2. attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
  3. attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
  4. removeAttr()// 从每一个匹配的元素中删除一个属性
  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>

返回顶部示例

  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. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .test1{
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: wheat;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.  
  16. <h1>this is offset</h1>
  17. <div class="test1"></div>
  18. <p></p>
  19. <button>change</button>
  20. </body>
  21. <script src="jquery-3.1.1.js"></script>
  22. <script>
  23.     var $offset=$(".test1").offset();
  24.     var lefts=$offset.left;
  25.     var tops=$offset.top;
  26.  
  27.     $("p").text("Top:"+tops+" Left:"+lefts);
  28.     $("button").click(function(){
  29.  
  30.         $(".test1").offset({left:200,top:400})
  31.     })
  32. </script>
  33. </html>
  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: rebeccapurple;
  14.         }
  15.         .box2{
  16.             width: 200px;
  17.             height: 200px;
  18.             background-color: darkcyan;
  19.         }
  20.         .parent_box{
  21.              position: relative;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.  
  27. <div class="box1"></div>
  28. <div class="parent_box">
  29.     <div class="box2"></div>
  30. </div>
  31. <p></p>
  32.  
  33. <script src="jquery-3.1.1.js"></script>
  34. <script>
  35.     var $position=$(".box2").position();
  36.     var $left=$position.left;
  37.     var $top=$position.top;
  38.  
  39.     $("p").text("TOP:"+$top+"LEFT"+$left)
  40. </script>
  41. </body>
  42. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <style>
  8.         body{
  9.             margin: 0;
  10.         }
  11.         .returnTop{
  12.             height: 60px;
  13.             width: 100px;
  14.             background-color: peru;
  15.             position: fixed;
  16.             right: 0;
  17.             bottom: 0;
  18.             color: white;
  19.             line-height: 60px;
  20.             text-align: center;
  21.         }
  22.         .div1{
  23.             background-color: wheat;
  24.             font-size: 5px;
  25.             overflow: auto;
  26.             width: 500px;
  27.             height: 200px;
  28.         }
  29.         .div2{
  30.             background-color: darkgrey;
  31.             height: 2400px;
  32.         }
  33.  
  34.         .hide{
  35.             display: none;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.      <div class="div1 div">
  41.            <h1>hello</h1>
  42.            <h1>hello</h1>
  43.            <h1>hello</h1>
  44.            <h1>hello</h1>
  45.            <h1>hello</h1>
  46.            <h1>hello</h1>
  47.            <h1>hello</h1>
  48.            <h1>hello</h1>
  49.            <h1>hello</h1>
  50.            <h1>hello</h1>
  51.            <h1>hello</h1>
  52.            <h1>hello</h1>
  53.            <h1>hello</h1>
  54.            <h1>hello</h1>
  55.            <h1>hello</h1>
  56.            <h1>hello</h1>
  57.      </div>
  58.      <div class="div2 div"></div>
  59.      <div class="returnTop hide">返回顶部</div>
  60.  
  61.  <script src="jquery-3.1.1.js"></script>
  62.     <script>
  63.          $(window).scroll(function(){
  64.              var current=$(window).scrollTop();
  65.               console.log(current);
  66.               if (current>100){
  67.  
  68.                   $(".returnTop").removeClass("hide")
  69.               }
  70.               else {
  71.               $(".returnTop").addClass("hide")
  72.           }
  73.          });
  74.  
  75.             $(".returnTop").click(function(){
  76.                 $(window).scrollTop(0)
  77.             });
  78.  
  79.     </script>
  80. </body>
  81. </html>

尺寸：

  1. height()
  2. width()
  3. innerHeight()
  4. innerWidth()
  5. outerHeight()
  6. outerWidth()

例子

  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.     <title>Title</title>
  7.     <style>
  8.         .c1{
  9.             background-color: red;
  10.             height: 200px;
  11.             width: 400px;
  12.             padding: 10px;
  13.             margin: 20px;
  14.             border: 5px solid black;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.  
  20. <div class="c1">div</div>
  21. <script src="../jquery-3.2.1.min.js"></script>
  22. <script>
  23.     $(".c1").height();  // 200 内容
  24.     $(".c1").innerHeight();  // 220 内容+内填充
  25.     $(".c1").outerHeight();  // 230 内容+内填充+边框
  26. </script>
  27. </body>
  28. </html>
  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>

文本操作

HTML代码：

  1. html()// 取得第一个匹配元素的html内容
  2. html(val)// 设置所有匹配元素的html内容

文本值：

  1. text()// 取得所有匹配元素的内容
  2. text(val)// 设置所有匹配元素的内容

值：

  1. val()// 取得第一个匹配元素的当前值
  2. val(val)// 设置所有匹配元素的值
  3. val([val1, val2])// 设置checkbox、select的值

示例

  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 和jQuery的基本选择器，层级选择器，基本筛选器的更多相关文章

  1. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  2. jQuery选择器(层级选择器)第二节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  4. jquery 选择器、筛选器、事件绑定与事件委派

    一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...

  5. jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、

    this指的是原生js的DOM对象 .css(“”):只写一个值是取值,写俩值是赋值 window.onload   ===   $(document).ready(); $(“”):获取元素   标 ...

  6. JQuery学习---JQuery基础知识

    JQuery介绍: [官网]http://jquery.com [参考API]http://jquery.cuishifeng.cn/ JQuery的低版本支持IE低版本,JQuery的2版本不太支持 ...

  7. jQuery笔记-jQuery筛选器children()详解

    jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格 ...

  8. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  9. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  10. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

随机推荐

  1. 微信小程序 js逻辑

    }) 页面 Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. data 页面的初始数据,data 将会以 JSON 的形式由逻辑层 ...

  2. 快速排序的c++实现 和 python 实现

    最近在学python,其中有个要求实现快速排序的练习,就顺便复习了c++的快速排序实现. 快速排序的基本思想是,通过一轮的排序将序列分割成独立的两部分,其中一部分序列的关键字(这里主要用值来表示)均比 ...

  3. 常见tcp端口说明

    TCP端口(静态端口)TCP 0= ReservedTCP 1=TCP Port Service MultiplexerTCP 2=DeathTCP 5=Remote Job Entry,yoyoTC ...

  4. datagrid多复选框

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Ch ...

  5. cobbler default system 网络安装时主机的menu上只有一个local选项

    问题:使用cobbler default system 做pxe网络安装时,主机启动后安装menu上只有一个local选项,看不到对应的system名字 解决:cobbler default syst ...

  6. combox使用要点

    <select id="node_type" name="node_type" class="easyui-combobox" req ...

  7. 可以输入也可以下拉选择的select

    网址:http://www.helloweba.com/view-blog-348.html 示例:http://www.helloweba.com/demo/2016/editable-select ...

  8. js 代码风格（2）

    Properties    • 当访问属性的时候,我们使用点(.)操作符. var luke = { jedi: true, age: 28 }; // bad var isJedi = luke[' ...

  9. SurvivalShooter学习笔记（三.敌人移动）

    1.敌人和玩家若存活,敌人始终朝着玩家所在位置移动,所以要给玩家物体一个Tag:Player从而找到玩家 2.敌人的自动寻路使用Unity自带的NavMeshAgent寻路组件寻路,要先把场景中不动的 ...

  10. 数据库设计——E-R图

    一,复习下基础 1.弱实体 这样的实体须要依赖还有一个实体.若还有一个实体不存在了.它也随之消失.相对而言,它依赖的那个实体成为强实体. 2,特殊化 在数据库设计的过程中,我们会发现.一个实体能够依照 ...