参考文档下载

简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JavaWeb</title>
  6.     <script type="text/javascript">
  7.         window.onload = function () {
  8.             var btnObj = document.getElementById("btn");
  9.             btnObj.onclick = function () {
  10.                 alert("js 原生的单击事件");
  11.             }
  12.         }
  13.     </script>
  14. </head>
  15. <body>
  16.     <button id="btn">Say hello</button>
  17. </body>
  18. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JavaWeb</title>
  6.     <!--引入jQuery-->
  7.     <script type="text/javascript" src="jquery-1.7.2.js"></script>
  8.     <script type="text/javascript">
  10.         $(function () { //表示页面加载完成之后，相当于window.onload = function (){}
  11.             var $btnObj = $("#btn"); //表示按id查询标签对象
  12.             $btnObj.click(function () { //绑定单击事件
  13.                 alert("jQuery 的单击事件");
  14.             });
  15.         });
  16.     </script>
  17. </head>
  18. <body>
  19.     <button id="btn">Say hello</button>
  20. </body>
  21. </html>
  • 使用jQuery必须引入jQuery库
  • jQuery中$是一个函数
  • 为按钮添加函数的一般步骤：
    1. 使用jQuery查询到标签对象
    2. 使用标签对象.click(function(){});

jQuery核心函数$

$是jQuery的核心函数，能完成jQuery的很多功能，$()就是调用这个核心函数。

  1. 当传入参数为【函数】时：

表示在页面加载完成之后。相当于相当于window.onload = function (){}

  1. 传入参数为【HTML字符串】时：

会对我们创建html标签对象

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JavaWeb</title>
  6.     <!--引入jQuery-->
  7.     <script type="text/javascript" src="jquery-1.7.2.js"></script>
  8.     <script type="text/javascript">
  9.         $(function () {
  10.             $("<button id=\"btn\">Say hello</button>").appendTo("body");
  11.         });
  12.     </script>
  13. </head>
  14. <body>
  15.     <button id="btn">Say hello</button>
  16. </body>
  17. </html>

  1. 传入参数为【选择器字符串】时：

    $(“#id属性值”); id选择器，根据id查询标签对象
    $(“标签名”); 标签名选择器，根据指定标签名查询标签对象
    $(“.class属性值”); 类型选择器，可以根据class属性值查询标签对象

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <title>JavaWeb</title>
    6.  <!--引入jQuery-->
    7.  <script type="text/javascript" src="jquery-1.7.2.js"></script>
    8.  <script type="text/javascript">
    9.      $(function () {
    10.          alert($("button").length);
    11.      });
    12.  </script>
    13. </head>
    14. <body>
    15.  <button>Say hello</button>
    16.  <button>Say hello</button>
    17.  <button>Say hello</button>
    18. </body>
    19. </html>

  2. 传入参数为【DOM对象】时：

会把这个dom对象转化为jQuery对象

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JavaWeb</title>
  6.     <!--引入jQuery-->
  7.     <script type="text/javascript" src="jquery-1.7.2.js"></script>
  8.     <script type="text/javascript">
  9.         $(function () {
  10.             var btnObj = document.getElementById("btn01"); //Dom对象
  11.             alert(btnObj); //[object HTMLButtonElement]
  12.             alert($(btnObj)); //[object Object] jQuery对象
  13.         });
  14.     </script>
  15. </head>
  16. <body>
  17.     <button id="btn01">Say hello</button>
  18.     <button>Say hello</button>
  19.     <button>Say hello</button>
  20. </body>
  21. </html>

DOM对象与jQuery对象的区分

DOM对象alert出来的效果是：[object HTML 标签名 Element]
jQuery对象alert出来的效果是：[object Object]

jQuery对象

  • 通过JQuery提供的API创建的对象，是JQuery对象
  • 通过JQuery包装的Dom对象，也是JQuery对象

  • 通过JQuery提供的API查询到的对象，是JQuery对象

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>JavaWeb</title>
    6.   <!--引入jQuery-->
    7.   <script type="text/javascript" src="jquery-1.7.2.js"></script>
    8.   <script type="text/javascript">
    9.       $(function () {
    10.           // 通过JQuery提供的API创建的对象，是JQuery对象
    11.           var $h1 = $("<h1></h1>");
    12.           alert($h1); //[object Object]
    14.           // 通过JQuery包装的Dom对象，也是JQuery对象
    15.           var btnObj = document.getElementById("btn01"); //Dom对象
    16.           alert(btnObj); //[object HTMLButtonElement]
    17.           alert($(btnObj)); //[object Object] jQuery对象
    19.           // 通过JQuery提供的API查询到的对象，是JQuery对象
    20.           var $btn01 = $("#btn01");
    21.           alert($btn01);//[object Object]
    22.       });
    23.   </script>
    24. </head>
    25. <body>
    26.   <button id="btn01">Say hello</button>
    27.   <button>Say hello</button>
    28.   <button>Say hello</button>
    29. </body>
    30. </html>

    jQuery对象的本质

    jQuery对象是DOM对象的数组 + jQuery提供的一系列功能函数。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>JavaWeb</title>
    6.   <!--引入jQuery-->
    7.   <script type="text/javascript" src="jquery-1.7.2.js"></script>
    8.   <script type="text/javascript">
    9.       $(function () {
    10.           var $btns = $("button");
    11.           alert($btns); //[object Object] jQuery对象
    13.           for (var i = 0; i < $btns.length; i++) {
    14.               alert($btns[i]); //[object HTMLButtonElement] DOM对象
    15.           }
    16.       });
    17.   </script>
    18. </head>
    19. <body>
    20.   <button id="btn01">Say hello</button>
    21.   <button>Say hello</button>
    22.   <button>Say hello</button>
    23.   <button>Say hello</button>
    24. </body>
    25. </html>

    jQuery对象与Dom对象的区别

  • jQuery对象不能使用DOM对象的属性和方法

  • DOM对象也不能使用jQuery对象的属性和方法

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>JavaWeb</title>
    6.   <!--引入jQuery-->
    7.   <script type="text/javascript" src="jquery-1.7.2.js"></script>
    8.   <script type="text/javascript">
    9.       $(function () {
    10.           //document.getElementById("btn01").innerHTML = "这是Dom对象的属性innerHTML";
    12.           //Dom对象的属性和方法jQuery对象无法使用
    13.           //$("#btn01").innerHTML = "这是Dom对象的属性innerHTML"; //无法使用
    15.           //$("#btn01")[0].innerHTML = "这是Dom对象的属性innerHTML"; //可以使用
    17.           // $("#btn01").click(function () {
    18.           //     alert("click()是jQuery对象的方法");
    19.           // });
    21.           //jQuery对象的属性和方法Dom对象无法使用
    22.           // document.getElementById("btn01").click(function () { //无法实现
    23.           //     alert("click()是jQuery对象的方法");
    24.           // });
    25.       });
    26.   </script>
    27. </head>
    28. <body>
    29.   <button id="btn01">Say hello</button>
    30.   <button>Say hello</button>
    31.   <button>Say hello</button>
    32.   <button>Say hello</button>
    33. </body>
    34. </html>

    Dom对象和jQuery对象相互转化

    Dom对象转jQuery对象

  1. 先有DOM对象

  2. $(DOM对象)就可以转换为jQuery对象

    jQuery对象转化为Dom对象

  3. 先有jQuery对象

  4. jQuery对象[下标]取出相应的DOM对象

image.png

jQuery选择器

基本选择器：

ID 选择器： 根据id查找标签对象
.class选择器：根据class查找标签对象element选择器:根据标签名查找标签对象
* 选择器： 表示任意的，所有的元素
selector1，selector2组合选择器：合并选择器1，选择器2的结果并返回

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>Untitled Document</title>
  6.     <style type="text/css">
  7.         div, span, p {
  8.             width: 140px;
  9.             height: 140px;
  10.             margin: 5px;
  11.             background: #aaa;
  12.             border: #000 1px solid;
  13.             float: left;
  14.             font-size: 17px;
  15.             font-family: Verdana;
  16.         }
  18.         div.mini {
  19.             width: 55px;
  20.             height: 55px;
  21.             background-color: #aaa;
  22.             font-size: 12px;
  23.         }
  25.         div.hide {
  26.             display: none;
  27.         }
  28.     </style>
  29.     <script type="text/javascript" src="jquery-1.7.2.js"></script>
  30.     <script type="text/javascript">
  32.         //页面加载完之后才能执行
  33.         $(function () {
  34.             //1.选择 id 为 one 的元素 "background-color","#bbffaa"
  35.             $("#btn1").click(function () {
  36.                 // css() 方法 可以设置和获取样式
  37.                 $("#one").css("background-color", "#bbffaa");
  38.             });
  40.             //2.选择 class 为 mini 的所有元素
  41.             $("#btn2").click(function () {
  42.                 $(".mini").css("background-color", "#bbffaa");
  43.             });
  45.             //3.选择 元素名是 div 的所有元素
  46.             $("#btn3").click(function () {
  47.                 $("div").css("background-color", "#bbffaa");
  48.             });
  50.             //4.选择所有的元素
  51.             $("#btn4").click(function () {
  52.                 $("*").css("background-color", "#bbffaa");
  53.             });
  55.             //5.选择所有的 span 元素和id为two的元素
  56.             $("#btn5").click(function () {
  57.                 $("span, #two").css("background-color", "#bbffaa");
  58.             });
  59.         });
  61.     </script>
  62. </head>
  63.     <body>
  65.         <input type="button" value="选择 id 为 one 的元素" id="btn1"/>
  66.         <input type="button" value="选择 class 为 mini 的所有元素" id="btn2"/>
  67.         <input type="button" value="选择 元素名是 div 的所有元素" id="btn3"/>
  68.         <input type="button" value="选择 所有的元素" id="btn4"/>
  69.         <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5"/>
  71.         <br>
  72.         <div class="one" id="one">
  73.             id 为 one,class 为 one 的div
  74.             <div class="mini">class为mini</div>
  75.         </div>
  76.         <div class="one" id="two" title="test">
  77.             id为two,class为one,title为test的div
  78.             <div class="mini" title="other">class为mini,title为other</div>
  79.             <div class="mini" title="test">class为mini,title为test</div>
  80.         </div>
  81.         <div class="one">
  82.             <div class="mini">class为mini</div>
  83.             <div class="mini">class为mini</div>
  84.             <div class="mini">class为mini</div>
  85.             <div class="mini"></div>
  86.         </div>
  87.         <div class="one">
  88.             <div class="mini">class为mini</div>
  89.             <div class="mini">class为mini</div>
  90.             <div class="mini">class为mini</div>
  91.             <div class="mini" title="tesst">class为mini,title为tesst</div>
  92.         </div>
  93.         <div style="display:none;" class="none">style的display为"none"的div</div>
  94.         <div class="hide">class为"hide"的div</div>
  95.         <div>
  96.             包含input的type为"hidden"的div<input type="hidden" size="8">
  97.         </div>
  98.         <span class="one" id="span">^^span元素^^</span>
  99.     </body>
  100. </html>

层级选择器

ancestor descendant后代选择器：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素（直接孩子，孙子不算）
prev + next 相邻元素选择器：匹配所有紧接在prev元素后的next元素
prev ~ sibings 之后的兄弟元素选择器：匹配prev元素之后的所有siblings元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>Untitled Document</title>
  6.     <style type="text/css">
  7.         div, span, p {
  8.             width: 140px;
  9.             height: 140px;
  10.             margin: 5px;
  11.             background: #aaa;
  12.             border: #000 1px solid;
  13.             float: left;
  14.             font-size: 17px;
  15.             font-family: Verdana;
  16.         }
  18.         div.mini {
  19.             width: 55px;
  20.             height: 55px;
  21.             background-color: #aaa;
  22.             font-size: 12px;
  23.         }
  25.         div.hide {
  26.             display: none;
  27.         }
  28.     </style>
  29.     <script type="text/javascript" src="jquery-1.7.2.js"></script>
  30.     <script type="text/javascript">
  31.         //简写
  32.         // $(function () {
  33.         //
  34.         // });
  36.         //全名
  37.         $(document).ready(function () {
  38.             //1.选择 body 内的所有 div 元素
  39.             $("#btn1").click(function () {
  40.                 $("body div").css("background", "#bbffaa");
  41.             });
  43.             //2.在 body 内, 选择div子元素
  44.             $("#btn2").click(function () {
  45.                 $("body > div").css("background", "#bbffaa");
  46.             });
  48.             //3.选择 id 为 one 的下一个 div 元素
  49.             $("#btn3").click(function () {
  50.                 $("#one+div").css("background", "#bbffaa");
  51.             });
  53.             //4.选择 id 为 two 的元素后面的所有 div 兄弟元素
  54.             $("#btn4").click(function () {
  55.                 $("#two~div").css("background", "#bbffaa");
  56.             });
  57.         });
  58.     </script>
  59. </head>
  60.     <body>
  62.         <!--     <div>
  63.                 <h1>层级选择器:根据元素的层级关系选择元素</h1>
  64.                 ancestor descendant  ：
  65.                 parent > child            ：
  66.                 prev + next            ：
  67.                 prev ~ siblings        ：
  68.             </div>     -->
  69.         <input type="button" value="选择 body 内的所有 div 元素" id="btn1"/>
  70.         <input type="button" value="在 body 内, 选择div子元素" id="btn2"/>
  71.         <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3"/>
  72.         <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4"/>
  73.         <br><br>
  74.         <div class="one" id="one">
  75.             id 为 one,class 为 one 的div
  76.             <div class="mini">class为mini</div>
  77.         </div>
  78.         <div class="one" id="two" title="test">
  79.             id为two,class为one,title为test的div
  80.             <div class="mini" title="other">class为mini,title为other</div>
  81.             <div class="mini" title="test">class为mini,title为test</div>
  82.         </div>
  83.         <div class="one">
  84.             <div class="mini">class为mini</div>
  85.             <div class="mini">class为mini</div>
  86.             <div class="mini">class为mini</div>
  87.             <div class="mini"></div>
  88.         </div>
  89.         <div class="one">
  90.             <div class="mini">class为mini</div>
  91.             <div class="mini">class为mini</div>
  92.             <div class="mini">class为mini</div>
  93.             <div class="mini" title="tesst">class为mini,title为tesst</div>
  94.         </div>
  95.         <div style="display:none;" class="none">style的display为"none"的div</div>
  96.         <div class="hide">class为"hide"的div</div>
  97.         <div>
  98.             包含input的type为"hidden"的div<input type="hidden" size="8">
  99.         </div>
  100.         <span id="span">^^span元素^^</span>
  101.     </body>
  102. </html>

基本过滤选择器

:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>Untitled Document</title>
  6.     <style type="text/css">
  7.         div, span, p {
  8.             width: 140px;
  9.             height: 140px;
  10.             margin: 5px;
  11.             background: #aaa;
  12.             border: #000 1px solid;
  13.             float: left;
  14.             font-size: 17px;
  15.             font-family: Verdana;
  16.         }
  18.         div.mini {
  19.             width: 55px;
  20.             height: 55px;
  21.             background-color: #aaa;
  22.             font-size: 12px;
  23.         }
  25.         div.hide {
  26.             display: none;
  27.         }
  28.     </style>
  29.     <script type="text/javascript" src="jquery-1.7.2.js"></script>
  30.     <script type="text/javascript">
  31.         $(document).ready(function(){
  32.             function anmateIt(){
  33.                 $("#mover").slideToggle("slow", anmateIt);
  34.             }
  35.             anmateIt();
  36.         });
  38.         $(document).ready(function(){
  39.             //1.选择第一个 div 元素
  40.             $("#btn1").click(function(){
  41.                 $("div:first").css("background", "#bbffaa");
  42.             });
  44.             //2.选择最后一个 div 元素
  45.             $("#btn2").click(function(){
  46.                 $("div:last").css("background", "#bbffaa");
  47.             });
  49.             //3.选择class不为 one 的所有 div 元素
  50.             $("#btn3").click(function(){
  51.                 $("div:not(.one)").css("background", "#bbffaa");
  52.             });
  54.             //4.选择索引值为偶数的 div 元素
  55.             $("#btn4").click(function(){
  56.                 $("div:even").css("background", "#bbffaa");
  57.             });
  59.             //5.选择索引值为奇数的 div 元素
  60.             $("#btn5").click(function(){
  61.                 $("div:odd").css("background", "#bbffaa");
  62.             });
  64.             //6.选择索引值为大于 3 的 div 元素
  65.             $("#btn6").click(function(){
  66.                 $("div:gt(3)").css("background", "#bbffaa");
  67.             });
  69.             //7.选择索引值为等于 3 的 div 元素
  70.             $("#btn7").click(function(){
  71.                 $("div:eq(3)").css("background", "#bbffaa");
  72.             });
  74.             //8.选择索引值为小于 3 的 div 元素
  75.             $("#btn8").click(function(){
  76.                 $("div:lt(3)").css("background", "#bbffaa");
  77.             });
  79.             //9.选择所有的标题元素
  80.             $("#btn9").click(function(){
  81.                 $(":header").css("background", "#bbffaa");
  82.             });
  84.             //10.选择当前正在执行动画的所有元素
  85.             $("#btn10").click(function(){
  86.                 $(":animated").css("background", "#bbffaa");
  87.             });
  88.             //11.选择没有执行动画的最后一个div
  89.             $("#btn11").click(function(){
  90.                 $("div:not(:animated):last").css("background", "#bbffaa");
  91.             });
  92.         });
  93.     </script>
  94. </head>
  95.     <body>
  96.         <input type="button" value="选择第一个 div 元素" id="btn1" />
  97.         <input type="button" value="选择最后一个 div 元素" id="btn2" />
  98.         <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
  99.         <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
  100.         <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
  101.         <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
  102.         <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
  103.         <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
  104.         <input type="button" value="选择所有的标题元素" id="btn9" />
  105.         <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />
  106.         <input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
  109.         <h3>基本选择器.</h3>
  110.         <br><br>
  111.         <div class="one" id="one">
  112.             id 为 one,class 为 one 的div
  113.             <div class="mini">class为mini</div>
  114.         </div>
  115.         <div class="one" id="two" title="test">
  116.             id为two,class为one,title为test的div
  117.             <div class="mini" title="other">class为mini,title为other</div>
  118.             <div class="mini" title="test">class为mini,title为test</div>
  119.         </div>
  120.         <div class="one">
  121.             <div class="mini">class为mini</div>
  122.             <div class="mini">class为mini</div>
  123.             <div class="mini">class为mini</div>
  124.             <div class="mini"></div>
  125.         </div>
  126.         <div class="one">
  127.             <div class="mini">class为mini</div>
  128.             <div class="mini">class为mini</div>
  129.             <div class="mini">class为mini</div>
  130.             <div class="mini" title="tesst">class为mini,title为tesst</div>
  131.         </div>
  132.         <div style="display:none;" class="none">style的display为"none"的div</div>
  133.         <div class="hide">class为"hide"的div</div>
  134.         <div>
  135.             包含input的type为"hidden"的div<input type="hidden" size="8">
  136.         </div>
  137.         <div id="mover">正在执行动画的div元素.</div>
  138.     </body>
  139. </html>

内容过滤选择器

:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>内容过滤选择器</title>
  6.     <style type="text/css">
  7.       div, span, p {
  8.         width: 140px;
  9.         height: 140px;
  10.         margin: 5px;
  11.         background: #aaa;
  12.         border: #000 1px solid;
  13.         float: left;
  14.         font-size: 17px;
  15.         font-family: Verdana;
  16.       }
  18.       div.mini {
  19.         width: 55px;
  20.         height: 55px;
  21.         background-color: #aaa;
  22.         font-size: 12px;
  23.       }
  25.       div.hide {
  26.         display: none;
  27.       }
  28.     </style>
  29.     <script type="text/javascript" src="jquery-1.7.2.js"></script>
  30.     <script type="text/javascript">
  31.       $(document).ready(function () {
  32.         function anmateIt() {
  33.           $("#mover").slideToggle("slow", anmateIt);
  34.         }
  36.         anmateIt();
  37.       });
  40.       $(document).ready(function () {
  41.         //1.选择 含有文本 'di' 的 div 元素
  42.         $("#btn1").click(function () {
  43.           $("div:contains('di')").css("background", "#bbffaa");
  44.         });
  46.         //2.选择不包含子元素(或者文本元素) 的 div 空元素
  47.         $("#btn2").click(function () {
  48.           $("div:empty").css("background", "#bbffaa");
  49.         });
  52.         //3.选择含有 class 为 mini 元素的 div 元素
  53.         $("#btn3").click(function () {
  54.           $("div:has(.mini)").css("background", "#bbffaa");
  55.         });
  57.         //4.选择含有子元素(或者文本元素)的div元素
  58.         $("#btn4").click(function () {
  59.           $("div:parent").css("background", "#bbffaa");
  60.         });
  61.       });
  62.     </script>
  63.   </head>
  64.   <body>
  65.     <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1"/>
  66.     <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2"/>
  67.     <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3"/>
  68.     <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4"/>
  70.     <br><br>
  71.     <div class="one" id="one">
  72.       id 为 one,class 为 one 的div
  73.       <div class="mini">class为mini</div>
  74.     </div>
  75.     <div class="one" id="two" title="test">
  76.       id为two,class为one,title为test的div
  77.       <div class="mini" title="other">class为mini,title为other</div>
  78.       <div class="mini" title="test">class为mini,title为test</div>
  79.     </div>
  80.     <div class="one">
  81.       <div class="mini">class为mini</div>
  82.       <div class="mini">class为mini</div>
  83.       <div class="mini">class为mini</div>
  84.       <div class="mini"></div>
  85.     </div>
  86.     <div class="one">
  87.       <div class="mini">class为mini</div>
  88.       <div class="mini">class为mini</div>
  89.       <div class="mini">class为mini</div>
  90.       <div class="mini" title="tesst">class为mini,title为tesst</div>
  91.     </div>
  92.     <div style="display:none;" class="none">style的display为"none"的div</div>
  93.     <div class="hide">class为"hide"的div</div>
  94.     <div>
  95.       包含input的type为"hidden"的div<input type="hidden" size="8">
  96.     </div>
  97.     <div id="mover">正在执行动画的div元素.</div>
  98.   </body>
  99. </html>

属性过滤选择器

[attribute] 匹配包含给定属性的元素。
[attribute = value] 匹配给定的属性是某个特定值的元素
[attribute != value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute ^= value] 匹配给定的属性是以某些值开始的元素
[attribute $= value] 匹配给定的属性是以某些值结尾的元素
[attribute *= value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrselN] 复合属性选择器，需要同时满足多个条件时使用。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <title>属性过滤选择器</title>
  6.     <style type="text/css">
  7.         div,
  8.         span,
  9.         p {
  10.             width: 140px;
  11.             height: 140px;
  12.             margin: 5px;
  13.             background: #aaa;
  14.             border: #000 1px solid;
  15.             float: left;
  16.             font-size: 17px;
  17.             font-family: Verdana;
  18.         }
  20.         div.mini {
  21.             width: 55px;
  22.             height: 55px;
  23.             background-color: #aaa;
  24.             font-size: 12px;
  25.         }
  27.         div.hide {
  28.             display: none;
  29.         }
  30.     </style>
  31.     <script type="text/javascript" src="jquery-1.7.2.js"></script>
  32.     <script type="text/javascript">
  33.         /**
  34.          [attribute]
  35.          [attribute=value]
  36.          [attribute!=value]
  37.          [attribute^=value]
  38.          [attribute$=value]
  39.          [attribute*=value]
  40.          [attrSel1][attrSel2][attrSelN]
  43.          */
  44.         $(function () {
  45.             //1.选取含有 属性title 的div元素
  46.             $("#btn1").click(function () {
  47.                 $("div[title]").css("background", "#bbffaa");
  48.             });
  49.             //2.选取 属性title值等于'test'的div元素
  50.             $("#btn2").click(function () {
  51.                 $("div[title='test']").css("background", "#bbffaa");
  52.             });
  53.             //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
  54.             $("#btn3").click(function () {
  55.                 $("div[title!='test']").css("background", "#bbffaa");
  56.             });
  57.             //4.选取 属性title值 以'te'开始 的div元素
  58.             $("#btn4").click(function () {
  59.                 $("div[title^='te']").css("background", "#bbffaa");
  60.             });
  61.             //5.选取 属性title值 以'est'结束 的div元素
  62.             $("#btn5").click(function () {
  63.                 $("div[title$='est']").css("background", "#bbffaa");
  64.             });
  65.             //6.选取 属性title值 含有'es'的div元素
  66.             $("#btn6").click(function () {
  67.                 $("div[title*='es']").css("background", "#bbffaa");
  68.             });
  70.             //7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
  71.             $("#btn7").click(function () {
  72.                 $("div[id][title*='es']").css("background", "#bbffaa");
  73.             });
  74.             //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
  75.             $("#btn8").click(function () {
  76.                 $("div[title][title!='test']").css("background", "#bbffaa");
  77.             });
  78.         });
  79.     </script>
  80. </head>
  81.     <body>
  82.         <input type="button" value="选取含有 属性title 的div元素." id="btn1" style="display: none" />
  83.         <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
  84.         <input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
  85.         <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
  86.         <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
  87.         <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
  88.         <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7" />
  89.         <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />
  91.         <br />
  92.         <br />
  93.         <div class="one" id="one">
  94.             id 为 one,class 为 one 的div
  95.             <div class="mini">class为mini</div>
  96.         </div>
  98.         <div class="one" id="two" title="test">
  99.             id为two,class为one,title为test的div
  100.             <div class="mini" title="other">class为mini,title为other</div>
  101.             <div class="mini" title="test">class为mini,title为test</div>
  102.         </div>
  103.         <div class="one">
  104.             <div class="mini">class为mini</div>
  105.             <div class="mini">class为mini</div>
  106.             <div class="mini">class为mini</div>
  107.             <div class="mini"></div>
  108.         </div>
  109.         <div class="one">
  110.             <div class="mini">class为mini</div>
  111.             <div class="mini">class为mini</div>
  112.             <div class="mini">class为mini</div>
  113.             <div class="mini" title="tesst">class为mini,title为tesst</div>
  114.         </div>
  115.         <div style="display: none" class="none">style的display为"none"的div</div>
  116.         <div class="hide">class为"hide"的div</div>
  117.         <div>
  118.             包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8" />
  119.         </div>
  120.         <div id="mover">正在执行动画的div元素.</div>
  121.     </body>
  122. </html>

表单过滤选择器