03尚硅谷_jQuery王振国 - 课堂笔记.pdf
    ①jQuery的单击事件

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. <title>Insert title here</title>
    6.     <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    7.     <script type="text/javascript">
    8.         // window.onload = function () {
    9.         //     var btnObj = document.getElementById("btnId");
    10.         //     // alert(btnObj);//[object HTMLButtonElement]   ====>>>  dom对象
    11.         //     btnObj.onclick = function () {
    12.         //         alert("js 原生的单击事件");
    13.         //     }
    14.         // }
    16.         $(function () { // 表示页面加载完成 之后，相当 window.onload = function () {}
    17.             var $btnObj = $("#btnId"); // 表示按id查询标签对象
    18.             $btnObj.click(function () { // 绑定单击事件
    19.                 alert("jQuery 的单击事件");
    20.             });
    21.         });
    23.     </script>
    27. </head>
    28. <body>
    29.     <button id="btnId">SayHello</button>
    30. </body>
    31. </html>

    ②$的本质是一个函数——$的核心函数及其作用

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. <title>Insert title here</title>
    6. <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    7. <script type="text/javascript">
    9.     //核心函数的4个作用
    10.     $(function () {
    11.         // alert("页面加载完成之后，自动调用");
    13.         $("    <div>" +
    14.             "        <span>div-span1</span>" +
    15.             "        <span>div-span2</span>" +
    16.             "    </div>").appendTo("body");
    18.         // alert($("button").length);//3
    20.         var btnObj = document.getElementById("btn01");
    21.         // alert(btnObj);
    22.         // alert( $(btnObj) );
    24.         // alert( $("<h1></h1>") );
    25.         alert($("button"));
    27.     });
    28.     //传入参数为[函数]时：在文档加载完成后执行这个函数
    29.     //传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
    30.     //传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
    31.     //传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
    33. </script>
    34. </head>
    35. <body>
    36.     <button id="btn01">按钮1</button>
    37.     <button>按钮2</button>
    38.     <button>按钮3</button>
    39. </body>
    40. </html>

    jQuery选择器
    ①基本选择器

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    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="../script/jquery-1.7.2.js"></script>
    30.         <script type="text/javascript">
    32.                 $(function () {
    33.                     //1.选择 id 为 one 的元素 "background-color","#bbffaa"
    34.                     $("#btn1").click(function () {
    35.                         // css() 方法 可以设置和获取样式
    36.                         $("#one").css("background-color","#bbffaa");
    37.                     });
    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.                     });
    60.                 });
    62.         </script>
    63.     </head>
    64.     <body>
    65. <!--     <div>
    66.         <h1>基本选择器</h1>
    67.     </div>     -->    
    68.         <input type="button" value="选择 id 为 one 的元素" id="btn1" />
    69.         <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
    70.         <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
    71.         <input type="button" value="选择 所有的元素" id="btn4" />
    72.         <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
    74.         <br>
    75.         <div class="one" id="one">
    76.             id 为 one,class 为 one 的div
    77.             <div class="mini">class为mini</div>
    78.         </div>
    79.         <div class="one" id="two" title="test">
    80.             id为two,class为one,title为test的div
    81.             <div class="mini" title="other">class为mini,title为other</div>
    82.             <div class="mini" title="test">class为mini,title为test</div>
    83.         </div>
    84.         <div class="one">
    85.             <div class="mini">class为mini</div>
    86.             <div class="mini">class为mini</div>
    87.             <div class="mini">class为mini</div>
    88.             <div class="mini"></div>
    89.         </div>
    90.         <div class="one">
    91.             <div class="mini">class为mini</div>
    92.             <div class="mini">class为mini</div>
    93.             <div class="mini">class为mini</div>
    94.             <div class="mini" title="tesst">class为mini,title为tesst</div>
    95.         </div>
    96.         <div style="display:none;" class="none">style的display为"none"的div</div>
    97.         <div class="hide">class为"hide"的div</div>
    98.         <div>
    99.             包含input的type为"hidden"的div<input type="hidden" size="8">
    100.         </div>
    101.         <span class="one" id="span">^^span元素^^</span>
    102.     </body>
    103. </html>

    运行结果：
    image.png
    ②层级选择器

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    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="../script/jquery-1.7.2.js"></script>
    30.         <script type="text/javascript">
    31.             $(document).ready(function(){  //$(function (){});
    32.                 //1.选择 body 内的所有 div 元素
    33.                 $("#btn1").click(function(){
    34.                     $("body div").css("background", "#bbffaa");
    35.                 });
    37.                 //2.在 body 内, 选择div子元素  
    38.                 $("#btn2").click(function(){
    39.                     $("body > div").css("background", "#bbffaa");
    40.                 });
    42.                 //3.选择 id 为 one 的下一个 div 元素 
    43.                 $("#btn3").click(function(){
    44.                     $("#one+div").css("background", "#bbffaa");
    45.                 });
    47.                 //4.选择 id 为 two 的元素后面的所有 div 兄弟元素
    48.                 $("#btn4").click(function(){
    49.                     $("#two~div").css("background", "#bbffaa");
    50.                 });
    51.             });
    52.         </script>
    53.     </head>
    54.     <body>    
    56. <!--     <div>
    57.         <h1>层级选择器:根据元素的层级关系选择元素</h1>
    58.         ancestor descendant  ：
    59.         parent > child            ：
    60.         prev + next            ：
    61.         prev ~ siblings        ：
    62.     </div>     -->
    63.         <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
    64.         <input type="button" value="在 body 内, 选择div子元素" id="btn2" />
    65.         <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
    66.         <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
    67.         <br><br>
    68.         <div class="one" id="one">
    69.             id 为 one,class 为 one 的div
    70.             <div class="mini">class为mini</div>
    71.         </div>
    72.         <div class="one" id="two" title="test">
    73.             id为two,class为one,title为test的div
    74.             <div class="mini" title="other">class为mini,title为other</div>
    75.             <div class="mini" title="test">class为mini,title为test</div>
    76.         </div>
    77.         <div class="one">
    78.             <div class="mini">class为mini</div>
    79.             <div class="mini">class为mini</div>
    80.             <div class="mini">class为mini</div>
    81.             <div class="mini"></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" title="tesst">class为mini,title为tesst</div>
    88.         </div>
    89.         <div style="display:none;" class="none">style的display为"none"的div</div>
    90.         <div class="hide">class为"hide"的div</div>
    91.         <div>
    92.             包含input的type为"hidden"的div<input type="hidden" size="8">
    93.         </div>
    94.         <span id="span">^^span元素^^</span>
    95.     </body>
    96. </html>

    运行结果：
    image.png
    ③基本的过滤选择器

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    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="../script/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>

    运行结果：
    image.pngimage.png
    ④内容过滤选择器

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    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="../script/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.             });
    39.             /** 
    40.             :contains(text)   
    41.             :empty               
    42.             :has(selector)     
    43.             :parent             
    44.             */
    45.             $(document).ready(function(){
    46.                 //1.选择 含有文本 'di' 的 div 元素
    47.                 $("#btn1").click(function(){
    48.                     $("div:contains('di')").css("background", "#bbffaa");
    49.                 });
    51.                 //2.选择不包含子元素(或者文本元素) 的 div 空元素
    52.                 $("#btn2").click(function(){
    53.                     $("div:empty").css("background", "#bbffaa");
    54.                 });
    56.                 //3.选择含有 class 为 mini 元素的 div 元素
    57.                 $("#btn3").click(function(){
    58.                     $("div:has(.mini)").css("background", "#bbffaa");
    59.                 });
    61.                 //4.选择含有子元素(或者文本元素)的div元素
    62.                 $("#btn4").click(function(){
    63.                     $("div:parent").css("background", "#bbffaa");
    64.                 });
    65.             });
    66.         </script>
    67.     </head>
    68.     <body>        
    69.         <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
    70.         <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
    71.         <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
    72.         <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
    74.         <br><br>
    75.         <div class="one" id="one">
    76.             id 为 one,class 为 one 的div
    77.             <div class="mini">class为mini</div>
    78.         </div>
    79.         <div class="one" id="two" title="test">
    80.             id为two,class为one,title为test的div
    81.             <div class="mini" title="other">class为mini,title为other</div>
    82.             <div class="mini" title="test">class为mini,title为test</div>
    83.         </div>
    84.         <div class="one">
    85.             <div class="mini">class为mini</div>
    86.             <div class="mini">class为mini</div>
    87.             <div class="mini">class为mini</div>
    88.             <div class="mini"></div>
    89.         </div>
    90.         <div class="one">
    91.             <div class="mini">class为mini</div>
    92.             <div class="mini">class为mini</div>
    93.             <div class="mini">class为mini</div>
    94.             <div class="mini" title="tesst">class为mini,title为tesst</div>
    95.         </div>
    96.         <div style="display:none;" class="none">style的display为"none"的div</div>
    97.         <div class="hide">class为"hide"的div</div>
    98.         <div>
    99.             包含input的type为"hidden"的div<input type="hidden" size="8">
    100.         </div>
    101.         <div id="mover">正在执行动画的div元素.</div>
    102.     </body>
    103. </html>

    运行结果：
    image.pngimage.png
    ⑤属性过滤选择器

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    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="../script/jquery-1.7.2.js"></script>
    30. <script type="text/javascript">
    31.     /**
    32. [attribute]             
    33. [attribute=value]         
    34. [attribute!=value]          
    35. [attribute^=value]         
    36. [attribute$=value]         
    37. [attribute*=value]         
    38. [attrSel1][attrSel2][attrSelN]  
    41.     */
    42.     $(function() {
    43.         //1.选取含有 属性title 的div元素
    44.         $("#btn1").click(function() {
    45.             $("div[title]").css("background", "#bbffaa");
    46.         });
    47.         //2.选取 属性title值等于'test'的div元素
    48.         $("#btn2").click(function() {
    49.             $("div[title='test']").css("background", "#bbffaa");
    50.         });
    51.         //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
    52.         $("#btn3").click(function() {
    53.             $("div[title!='test']").css("background", "#bbffaa");
    54.         });
    55.         //4.选取 属性title值 以'te'开始 的div元素
    56.         $("#btn4").click(function() {
    57.             $("div[title^='te']").css("background", "#bbffaa");
    58.         });
    59.         //5.选取 属性title值 以'est'结束 的div元素
    60.         $("#btn5").click(function() {
    61.             $("div[title$='est']").css("background", "#bbffaa");
    62.         });
    63.         //6.选取 属性title值 含有'es'的div元素
    64.         $("#btn6").click(function() {
    65.             $("div[title*='es']").css("background", "#bbffaa");
    66.         });
    68.         //7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
    69.         $("#btn7").click(function() {
    70.             $("div[id][title*='es']").css("background", "#bbffaa");
    71.         });
    72.         //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
    73.         $("#btn8").click(function() {
    74.             $("div[title][title!='test']").css("background", "#bbffaa");
    75.         });
    76.     });
    77. </script>
    78. </head>
    79. <body>
    80.     <input type="button" value="选取含有 属性title 的div元素." id="btn1" style="display: none;"/>
    81.     <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
    82.     <input type="button"
    83.         value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
    84.     <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
    85.     <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
    86.     <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
    87.     <input type="button"
    88.         value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."
    89.         id="btn7" />
    90.     <input type="button"
    91.         value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />
    93.     <br>
    94.     <br>
    95.     <div class="one" id="one">
    96.         id 为 one,class 为 one 的div
    97.         <div class="mini">class为mini</div>
    98.     </div>
    99.     <div class="one" id="two" title="test">
    100.         id为two,class为one,title为test的div
    101.         <div class="mini" title="other">class为mini,title为other</div>
    102.         <div class="mini" title="test">class为mini,title为test</div>
    103.     </div>
    104.     <div class="one">
    105.         <div class="mini">class为mini</div>
    106.         <div class="mini">class为mini</div>
    107.         <div class="mini">class为mini</div>
    108.         <div class="mini"></div>
    109.     </div>
    110.     <div class="one">
    111.         <div class="mini">class为mini</div>
    112.         <div class="mini">class为mini</div>
    113.         <div class="mini">class为mini</div>
    114.         <div class="mini" title="tesst">class为mini,title为tesst</div>
    115.     </div>
    116.     <div style="display: none;" class="none">style的display为"none"的div</div>
    117.     <div class="hide">class为"hide"的div</div>
    118.     <div>
    119.         包含input的type为"hidden"的div<input type="hidden" value="123456789"
    120.             size="8">
    121.     </div>
    122.     <div id="mover">正在执行动画的div元素.</div>
    123. </body>
    124. </html>

    运行结果：
    image.png
    ⑥表单对象属性过滤选择器

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2. <html>
    3.     <head>
    4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5.         <title>Untitled Document</title>
    6.         <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    7.         <script type="text/javascript">
    8.             $(function(){
    11.         /**
    12.         :input         
    13.         :text         
    14.         :password     
    15.         :radio         
    16.         :checkbox     
    17.         :submit     
    18.         :image         
    19.         :reset         
    20.         :button     
    21.         :file         
    22.         :hidden     
    24.         表单对象的属性
    25.         :enabled         
    26.         :disabled         
    27.         :checked         
    28.         :selected         
    29.         */
    32.                 //1.对表单内 可用input 赋值操作
    33.                 $("#btn1").click(function(){
    34.                     // val()可以操作表单项的value属性值
    35.                     // 它可以设置和获取
    36.                     $(":text:enabled").val("我是万能的程序员");
    37.                 });
    38.                 //2.对表单内 不可用input 赋值操作
    39.                 $("#btn2").click(function(){
    40.                     $(":text:disabled").val("管你可用不可用，反正我是万能的程序员");
    41.                 });
    42.                 //3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
    43.                 $("#btn3").click(function(){
    44.                     alert( $(":checkbox:checked").length );
    45.                 });
    46.                 //4.获取多选框，每个选中的value值
    47.                 $("#btn4").click(function(){
    48.                     // 获取全部选中的复选框标签对象
    49.                     var $checkboies = $(":checkbox:checked");
    50.                     // 老式遍历
    51.                     // for (var i = 0; i < $checkboies.length; i++){
    52.                     //     alert( $checkboies[i].value );
    53.                     // }
    55.                     // each方法是jQuery对象提供用来遍历元素的方法
    56.                     // 在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象
    57.                     $checkboies.each(function () {
    58.                         alert( this.value );
    59.                     });
    61.                 });
    62.                 //5.获取下拉框选中的内容  
    63.                 $("#btn5").click(function(){
    64.                     // 获取选中的option标签对象
    65.                     var $options = $("select option:selected");
    66.                     // 遍历，获取option标签中的文本内容
    67.                     $options.each(function () {
    68.                         // 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
    69.                         alert(this.innerHTML);
    70.                     });
    71.                 });
    72.             })    
    73.         </script>
    74.     </head>
    75.     <body>
    76.         <h3>表单对象属性过滤选择器</h3>
    77.          <button id="btn1">对表单内 可用input 赋值操作.</button>
    78.            <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
    79.          <button id="btn3">获取多选框选中的个数.</button>
    80.          <button id="btn4">获取多选框选中的内容.</button><br /><br />
    81.          <button id="btn5">获取下拉框选中的内容.</button><br /><br />
    83.         <form id="form1" action="#">            
    84.             可用元素: <input name="add" value="可用文本框1"/><br>
    85.             不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
    86.             可用元素: <input name="che" value="可用文本框2"/><br>
    87.             不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
    88.             <br>
    90.             多选框: <br>
    91.             <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
    92.             <input type="checkbox" name="newsletter" value="test2" />test2
    93.             <input type="checkbox" name="newsletter" value="test3" />test3
    94.             <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
    95.             <input type="checkbox" name="newsletter" value="test5" />test5
    97.             <br><br>
    98.             下拉列表1: <br>
    99.             <select name="test" multiple="multiple" style="height: 100px" id="sele1">
    100.                 <option>浙江</option>
    101.                 <option selected="selected">辽宁</option>
    102.                 <option>北京</option>
    103.                 <option selected="selected">天津</option>
    104.                 <option>广州</option>
    105.                 <option>湖北</option>
    106.             </select>
    108.             <br><br>
    109.             下拉列表2: <br>
    110.             <select name="test2">
    111.                 <option>浙江</option>
    112.                 <option>辽宁</option>
    113.                 <option selected="selected">北京</option>
    114.                 <option>天津</option>
    115.                 <option>广州</option>
    116.                 <option>湖北</option>
    117.             </select>
    118.         </form>        
    119.     </body>
    120. </html>

    运行结果：
    image.png
    ⑦元素筛选方法

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    2. <html>
    3.     <head>
    4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5.         <title>DOM查询</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="../script/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();
    37.     /**
    39.     过滤
    40.     eq(index|-index)             
    41.     first()                     
    42.     last()                         
    43.     hasClass(class)             
    44.     filter(expr|obj|ele|fn)     
    45.     is(expr|obj|ele|fn)1.6*     
    46.     has(expr|ele)                 
    47.     not(expr|ele|fn)             
    48.     slice(start,[end])             
    50.     查找
    51.     children([expr])             
    52.     closest(expr,[con]|obj|ele)1.6*   
    53.     find(expr|obj|ele)                 
    54.     next([expr])                     
    55.     nextall([expr])                 
    56.     nextUntil([exp|ele][,fil])1.6*     
    57.     parent([expr])                     
    58.     parents([expr])                 
    59.     parentsUntil([exp|ele][,fil])1.6*  
    60.     prev([expr])                     
    61.     prevall([expr])                 
    62.     prevUntil([exp|ele][,fil])1.6*     
    63.     siblings([expr])                 
    65.     串联
    66.     add(expr|ele|html|obj[,con])     
    69.     */
    71.                 //(1)eq()  选择索引值为等于 3 的 div 元素
    72.                 $("#btn1").click(function(){
    73.                     $("div").eq(3).css("background-color","#bfa");
    74.                 });
    75.                 //(2)first()选择第一个 div 元素
    76.                  $("#btn2").click(function(){
    77.                      //first()   选取第一个元素
    78.                     $("div").first().css("background-color","#bfa");
    79.                 });
    80.                 //(3)last()选择最后一个 div 元素
    81.                 $("#btn3").click(function(){
    82.                     //last()  选取最后一个元素
    83.                     $("div").last().css("background-color","#bfa");
    84.                 });
    85.                 //(4)filter()在div中选择索引为偶数的
    86.                 $("#btn4").click(function(){
    87.                     //filter()  过滤   传入的是选择器字符串
    88.                     $("div").filter(":even").css("background-color","#bfa");
    89.                 });
    90.                  //(5)is()判断#one是否为:empty或:parent
    91.                 //is用来检测jq对象是否符合指定的选择器
    92.                 $("#btn5").click(function(){
    93.                     alert( $("#one").is(":empty") );
    94.                 });
    96.                 //(6)has()选择div中包含.mini的
    97.                 $("#btn6").click(function(){
    98.                     //has(selector)  选择器字符串    是否包含selector
    99.                     $("div").has(".mini").css("background-color","#bfa");
    100.                 });
    101.                 //(7)not()选择div中class不为one的
    102.                 $("#btn7").click(function(){
    103.                     //not(selector)  选择不是selector的元素
    104.                     $("div").not('.one').css("background-color","#bfa");
    105.                 });
    106.                 //(8)children()在body中选择所有class为one的div子元素
    107.                 $("#btn8").click(function(){
    108.                     //children()  选出所有的子元素
    109.                     $("body").children("div.one").css("background-color","#bfa");
    110.                 });
    113.                 //(9)find()在body中选择所有class为mini的div元素
    114.                 $("#btn9").click(function(){
    115.                     //find()  选出所有的后代元素
    116.                     $("body").find("div.mini").css("background-color","#bfa");
    117.                 });
    118.                 //(10)next() #one的下一个div
    119.                 $("#btn10").click(function(){
    120.                     //next()  选择下一个兄弟元素
    121.                     $("#one").next("div").css("background-color","#bfa");
    122.                 });
    123.                 //(11)nextAll() #one后面所有的span元素
    124.                 $("#btn11").click(function(){
    125.                     //nextAll()   选出后面所有的元素
    126.                     $("#one").nextAll("span").css("background-color","#bfa");
    127.                 });
    128.                 //(12)nextUntil() #one和span之间的元素
    129.                 $("#btn12").click(function(){
    130.                     //
    131.                     $("#one").nextUntil("span").css("background-color","#bfa")
    132.                 });
    133.                 //(13)parent() .mini的父元素
    134.                 $("#btn13").click(function(){
    135.                     $(".mini").parent().css("background-color","#bfa");
    136.                 });
    137.                 //(14)prev() #two的上一个div
    138.                 $("#btn14").click(function(){
    139.                     //prev()  
    140.                     $("#two").prev("div").css("background-color","#bfa")
    141.                 });
    142.                 //(15)prevAll() span前面所有的div
    143.                 $("#btn15").click(function(){
    144.                     //prevAll()   选出前面所有的元素
    145.                     $("span").prevAll("div").css("background-color","#bfa")
    146.                 });
    147.                 //(16)prevUntil() span向前直到#one的元素
    148.                 $("#btn16").click(function(){
    149.                     //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
    150.                     $("span").prevUntil("#one").css("background-color","#bfa")
    151.                 });
    152.                 //(17)siblings() #two的所有兄弟元素
    153.                 $("#btn17").click(function(){
    154.                     //siblings()    找到所有的兄弟元素，包括前面的和后面的
    155.                     $("#two").siblings().css("background-color","#bfa")
    156.                 });
    159.                 //(18)add()选择所有的 span 元素和id为two的元素
    160.                 $("#btn18").click(function(){
    162.                     //   $("span,#two,.mini,#one")
    163.                     $("span").add("#two").add("#one").css("background-color","#bfa");
    165.                 });
    169.             });
    172.         </script>
    173.     </head>
    174.     <body>        
    175.         <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
    176.         <input type="button" value="first()选择第一个 div 元素" id="btn2" />
    177.         <input type="button" value="last()选择最后一个 div 元素" id="btn3" />
    178.         <input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
    179.         <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
    180.         <input type="button" value="has()选择div中包含.mini的" id="btn6" />
    181.         <input type="button" value="not()选择div中class不为one的" id="btn7" />
    182.         <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
    183.         <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
    184.         <input type="button" value="next()#one的下一个div" id="btn10" />
    185.         <input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
    186.         <input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
    187.         <input type="button" value="parent().mini的父元素" id="btn13" />
    188.         <input type="button" value="prev()#two的上一个div" id="btn14" />
    189.         <input type="button" value="prevAll()span前面所有的div" id="btn15" />
    190.         <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
    191.         <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
    192.         <input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
    195.         <h3>基本选择器.</h3>
    196.         <br /><br />
    197.         文本框<input type="text" name="account" disabled="disabled" />
    198.         <br><br>
    199.         <div class="one" id="one">
    200.             id 为 one,class 为 one 的div
    201.             <div class="mini">class为mini</div>
    202.         </div>
    203.         <div class="one" id="two" title="test">
    204.             id为two,class为one,title为test的div
    205.             <div class="mini" title="other"><b>class为mini,title为other</b></div>
    206.             <div class="mini" title="test">class为mini,title为test</div>
    207.         </div>
    209.         <div class="one">
    210.             <div class="mini">class为mini</div>
    211.             <div class="mini">class为mini</div>
    212.             <div class="mini">class为mini</div>
    213.             <div class="mini"></div>
    214.         </div>
    215.         <div class="one">
    216.             <div class="mini">class为mini</div>
    217.             <div class="mini">class为mini</div>
    218.             <div class="mini">class为mini</div>
    219.             <div class="mini" title="tesst">class为mini,title为tesst</div>
    220.         </div>
    221.         <div style="display:none;" class="none">style的display为"none"的div</div>
    222.         <div class="hide">class为"hide"的div</div>
    223.         <span id="span1">^^span元素 111^^</span>
    224.         <div>
    225.             包含input的type为"hidden"的div<input type="hidden" size="8">
    226.         </div>
    227.         <span id="span2">^^span元素 222^^</span>
    228.         <div id="mover">正在执行动画的div元素.</div>
    229.     </body>
    230. </html>

    运行结果：
    image.png
    image.png