【Java EE 学习 32 上】【JQuery】【选择器】

一、JQuery简介

　　1.JQuery是JavaScript库，封装了很多预定义对象和实用函数。

　　2.JQury的优势：

　　　　（1）简洁，其宗旨就是写更少的代码做更多的事。

　　　　（2）文档声明非常全面：http://www.51xuediannao.com/api/

　　　　（3）有很多成熟的插件可供选择。

　　3.JQuery下载：http://code.jquery.com/jquery/

　　4.什么是JQuery对象：通过JQuery包装DOM对象之后产生的对象，但是两者之间的属性方法不能相互调用，但是两种对象可以相互转换。

　　　　JQuery对象前面要加上$符号，如$x。

　　4.小例子：

    <script type="text/javascript" src="script/jquery-1.4.2.js"></script>
    <script language="JavaScript">
      $(document).ready(function(){//等待dom元素加载完毕,类似window.onload;
          alert("您好,我是kdyzm!");
      });
    </script>

二、DOM对象和JQuery对象的相互转换

　　1.DOM转JQuery：var $variable=$(DOM对象)。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>form.html</title>
 5     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 6     <meta http-equiv="description" content="this is my page">
 7     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 8     <script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
 9   </head>
10   
11   <body>
12        <input type="text" value="zhang" id="username" name="username" />
13     
14   </body>
15   <script language="JavaScript">
16   //dom转化为JQUery对象  $(DOM对象)
17           var username=document.getElementById("username");
18           $username=$(username);
19           alert($username.val());
20   </script>
21 </html>

DOM_To_JQuery.html

　　2.JQuery转DOM：var variable=JQuery对象。

　　　　JQuery对象是一种数组对象，所以如果要转换为DOM对象就必须使用下标[index]或者get(index)的方法，数组下标从0开始。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>form.html</title>
 5     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 6     <meta http-equiv="description" content="this is my page">
 7     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 8     <script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
 9   </head>
10   
11   <body>
12        <input type="text" value="zhangxx" id="username" name="username" />
13      <input type="text" value="zhangsanfeng" id="username1" name="username" />
14   </body>
15   <script language="JavaScript">
16    //JQUERY对象转化为DOM对象
17     //var username=$('#username')[0];
18    var username=$('#username').get(0);
19        alert(username.value);
20   </script>
21 </html>

JQuery_To_DOM.html

三、选择器

　　选择器是JQuery的根基，在JQuery中，对事件的处理、遍历DOM、Ajax操作等都依赖于选择器。

　　1.基本选择器

　　　　（1）单击id为b1的按钮，改变 id 为 one 的元素的背景色为 #0000FF

$('#b1').click(function(){
                 $('#one').css('background','#0000FF');
             });

　　　　（2）单击id为b2的按钮，改变元素名为 <div> 的所有元素的背景色为 #00FFFF

$('#b2').click(function(){
                 $('div').css('background-color','#00FFFF');
             });

　　　　（3）单击id为b3的按钮，改变 class 为 mini 的所有元素的背景色为 #FF0033

$('#b3').click(function(){
                 $('.mini').css('background-color','#FF0033');
             });

　　　　（4）单击id为b4的按钮，改变所有元素的背景色为 #00FF33

$('#b4').click(function(){
                 $('*').css('background-color','#00FF33');
             });

　　　　（5）单击id为b5的按钮，改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF

$('#b5').click(function(){
                $('span,#two').css('background-color','#3399FF');
            });

　　　　（6）完整代码

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>ddd</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
 7     <style type="text/css">
 8              div,span{
 9                 width: 140px;
10                 height: 140px;
11                 margin: 20px;
12                 background: #9999CC;
13                 border: #000 1px solid;
14                 float:left;
15                 font-size: 17px;
16                 font-family:Roman;
17             }
18             
19             div.mini{
20                 width: 30px;
21                 height: 30px;
22                 background: #CC66FF;
23                 border: #000 1px solid;
24                 font-size: 12px;
25                 font-family:Roman;
26             }
27      </style>
28      <!--引入jquery的js库-->
29     
30     </head>
31      
32     <body>
33                 
34          <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>
35          <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF"  id="b2"/>
36          <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"/>
37          <input type="button" value=" 改变所有元素的背景色为 #00FF33"  id="b4"/>
38          <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>
39         
40          <input type="text" value=""  name="username" id="username"/>
41          
42          <div id="one">
43              id为one  
44              
45          </div>
46         
47          <div id="two" class="mini" >
48                id为two   class是 mini 
49                <div  class="mini" >class是 mini</div>
50         </div>
51         
52          <div class="one" >
53                  class是 one 
54                <div  class="mini" >class是 mini</div>
55                <div  class="mini" >class是 mini</div>
56          </div>
57          <div class="one" >
58                class是 one 
59                <div  class="mini01" >class是 mini01</div>
60                <div  class="mini" >class是 mini</div>
61         </div>
62         <br>
63         <div id="mover" >
64                动画
65         </div>
66         <br>
67         <span class="spanone">    span
68         </span>
69         <span class="mini">    span
70         </span>
71         <script type="text/javascript">
72         
73          //<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>
74              $('#b1').click(function(){
75                  $('#one').css('background','#0000FF');
76              });
77          //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF"  id="b2"/>
78              $('#b2').click(function(){
79                  $('div').css('background-color','#00FFFF');
80              });
81          //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"/>
82              $('#b3').click(function(){
83                  $('.mini').css('background-color','#FF0033');
84              });
85          //<input type="button" value=" 改变所有元素的背景色为 #00FF33"  id="b4"/>
86              $('#b4').click(function(){
87                  $('*').css('background-color','#00FF33');
88              });
89          //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>
90             $('#b5').click(function(){
91                 $('span,#two').css('background-color','#3399FF');
92             });
93         </script>
94     </body>
95 </html>

Base_Selector.html

　　2.层次选择器

　　　　（1）单击id为b1的按钮，改变 <body> 内所有 <div> 的背景色为red，这里使用空格分割，代表的是“后代节点”

 $('#b1').click(function(){
         $('body div').css('background-color','red');
     });

　　　　（2）单击id为b2的按钮，改变 <body> 内子 <div> 的背景色为 blue，这里使用“>”符号分割，代表的是“儿子节点”

$('#b2').click(function(){
         $('body>div').css('background-color','blue');
     });

　　　　（3）单击id为b3的按钮，改变 id 为 one 的下一个 <div> 的背景色为 pink，这里使用+符号分割，代表的是后面的第一个div兄弟节点。

$('#b3').click(function(){
         $('#one+div').css('background-color','pink');
     });

　　　　（4）单击id为b4的按钮，改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为black，这里使用~分割，代表的是two之后的所有div兄弟节点。

 $('#b4').click(function(){
         $('#two~div').css('background-color','black');
     });

　　　　（5）单击id为b5的按钮，改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 orange，这里使用siblings函数代表前后的所有兄弟节点，注意和~的区别。

$('#b5').click(function(){
        $('#two').siblings('div').css('background-color','orange');
    });

　　　　（6）完整代码

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>ddd</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
 7     <style type="text/css">
 8              div,span{
 9                 width: 140px;
10                 height: 140px;
11                 margin: 20px;
12                 background: #9999CC;
13                 border: #000 1px solid;
14                 float:left;
15                 font-size: 17px;
16                 font-family:Roman;
17             }
18             
19             div.mini{
20                 width: 30px;
21                 height: 30px;
22                 background: #CC66FF;
23                 border: #000 1px solid;
24                 font-size: 12px;
25                 font-family:Roman;
26             }
27      </style>
28      <!--引入jquery的js库-->
29     
30     </head>
31      
32     <body>
33                 
34          <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
35          <input type="button" value="改变 <body> 内所有 <div> 的背景色为 red"  id="b1"/>
36          <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 blue"  id="b2"/>
37          <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 pink"  id="b3"/>
38          <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 black"  id="b4"/>
39          <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 orange"  id="b5"/>
40 
41          <div id="one">
42              id为one  
43              
44          </div>
45         
46          <div id="two" class="mini" >
47                id为two   class是 mini 
48                <div  class="mini" >class是 mini</div>
49         </div>
50         
51          <div class="one" >
52                  class是 one 
53                <div  class="mini" >class是 mini</div>
54                <div  class="mini" >class是 mini</div>
55          </div>
56          <div class="one">
57                class是 one 
58                <div  class="mini01" >class是 mini01</div>
59                <div  class="mini" >class是 mini</div>
60         </div>
61         
62         <br>
63         <div id="mover" >
64                动画
65         </div>
66         <br>
67         <span class="spanone">    span
68         </span>
69         
70     </body>
71     <script type="text/javascript">
72      //<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
73      
74      //<input type="button" value="改变 <body> 内所有 <div> 的背景色为red"  id="b1"/>,这里选择的是所有后代节点
75      $('#b1').click(function(){
76          $('body div').css('background-color','red');
77      });
78      //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 blue"  id="b2"/>
79      //这里选择的是所有儿子节点，使用的标识符是>。
80      $('#b2').click(function(){
81          $('body>div').css('background-color','blue');
82      });
83      //<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 pink"  id="b3"/>
84      //使用+符号进行连接的话控制的是特定元素之后的第一个元素，如果想要控制所有的话就需要使用~符号来连接。
85      $('#b3').click(function(){
86          $('#one+div').css('background-color','pink');
87      });
88      //<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为black"  id="b4"/>
89      $('#b4').click(function(){
90          $('#two~div').css('background-color','black');
91      });
92      //<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 orange"  id="b5"/>
93     $('#b5').click(function(){
94         $('#two').siblings('div').css('background-color','orange');
95     });
96     </script>
97 </html>

Hierarchical_Query.html

　　3.基础过滤选择器

　　　　过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，该选择器都是以“:”开头的。

　　　　按照不同的过滤规则，可以将过滤选择器可以分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器，这里是基础过滤选择器示例。

　　　　（1）:first,匹配找到的第一个元素，用法：$('tr:first')

　　　　　　例：单击id为b1的按钮，改变第一个 div 元素的背景色为 read

$('#b1').click(function(){
                $('div:first').css('background-color','red');
            });

　　　　（2）:last,匹配找到的最后一个元素，用法：$('tr:last')

　　　　　　例：单击id为b2的按钮，改变最后一个 div 元素的背景色为 orange

$('#b2').click(function(){
                $('div:last').css('background-color','orange');
            });

　　　　（3）:not(selector)：去除所有和指定选择器匹配的元素，用法：$('input:not(:checked)')

　　　　　　例：单击id为b3的按钮，改变class不为 one 的所有 div 元素的背景色yellow

$('#b3').click(function(){
                $('div:not(.one)').css('background-color','yellow');
            });

　　　　（4）:even：匹配所有索引值为偶数的元素。索引值从0开始。

　　　　　　单击id为b4的按钮，改变索引值为偶数的 div 元素的背景色为green

$('#b4').click(function(){
                $('div:even').css('background-color','green');
            });

　　　　(5):odd：匹配所有索引值为技术的元素。索引值从开始。

　　　　　　单击id为b5的按钮，改变索引值为奇数的 div 元素的背景色为cyan

$('#b5').click(function(){
                $('div:odd').css('background-color','cyan');
            });

　　　　（6）:gt(index)，匹配所有大于给定元素排列数的元素，注意，这里的下标是从1开始计算的，而不是0，之后的eq,lt同理。

　　　　　　单击id为b6的按钮，改变索引值为大于 3 的 div 元素的背景色为 blue

$('#b6').click(function(){
                $('div:gt(3)').css('background-color','blue');
            });

　　　　（7）单击id为b7的按钮，改变索引值为等于 3 的 div 元素的背景色为 purple

$('#b7').click(function(){
                $('div:eq(3)').css('background-color','purple');
            });

　　　　（8）单击id为b8的按钮，改变索引值为小于 3 的 div 元素的背景色为 black

$('#b8').click(function(){
                $('div:lt(3)').css('background-color','black');
            });

　　　　（9）:header：匹配所有的标题元素。

　　　　　　单击id为b9的按钮，改变所有的标题元素的背景色为 gray

$('#b9').click(function(){
                $(':header').css('background-color','gray');
            });

　　　　（10）:animated：匹配所有正在执行动画的元素。这里的动画是使用JQuery生成的动画，像是flash、gif动画则元素不能匹配。

　　　　　　单击id为b10的按钮，改变当前正在执行动画的所有元素的背景色为#CCCCCC

$('#b10').click(function(){
                $(':animated').css('background-color','#CCCCCC');
            });

　　　　（11）完整代码

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3   <head>
  4     <title>ddd</title>
  5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6     <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  7     <style type="text/css">
  8              div,span{
  9                 width: 140px;
 10                 height: 140px;
 11                 margin: 20px;
 12                 background: #9999CC;
 13                 border: #000 1px solid;
 14                 float:left;
 15                 font-size: 17px;
 16                 font-family:Roman;
 17             }
 18             
 19             div.mini{
 20                 width: 30px;
 21                 height: 30px;
 22                 background: #CC66FF;
 23                 border: #000 1px solid;
 24                 font-size: 12px;
 25                 font-family:Roman;
 26             }
 27      </style>
 28      <!--引入jquery的js库-->
 29     
 30     </head>
 31      
 32     <body>
 33                 
 34          <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 35          <input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF"  id="b1"/>
 36          <input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF"  id="b2"/>
 37          <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF"  id="b3"/>
 38          <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF"  id="b4"/>
 39          <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF"  id="b5"/>
 40          <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>
 41          <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF"  id="b7"/>
 42          <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF"  id="b8"/>
 43          <input type="button" value=" 改变所有的标题元素的背景色为 #0000FF"  id="b9"/>
 44          <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF"  id="b10"/>
 45         
 46         
 47         
 48  
 49          <h1>天气冷了</h1>
 50          <h2>天气又冷了</h2>
 51          
 52          <div id="one">
 53              id为one  
 54              
 55          </div>
 56         
 57          <div id="two" class="mini" >
 58                id为two   class是 mini 
 59                <div  class="mini" >class是 mini</div>
 60         </div>
 61         
 62          <div class="one" >
 63                  class是 one 
 64                <div  class="mini" >class是 mini</div>
 65                <div  class="mini" >class是 mini</div>
 66          </div>
 67          <div class="one" >
 68                class是 one 
 69                <div  class="mini01" >class是 mini01</div>
 70                <div  class="mini" >class是 mini</div>
 71         </div>
 72         
 73         <br>
 74             <div id="mover" >
 75                    动画
 76             </div>
 77         <br>
 78         
 79         
 80     </body>
 81     <script type="text/javascript">
 82         //<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 83         //<input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF"  id="b1"/>
 84             $('#b1').click(function(){
 85                 $('div:first').css('background-color','red');
 86             });        
 87         //<input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF"  id="b2"/>
 88             $('#b2').click(function(){
 89                 $('div:last').css('background-color','orange');
 90             });
 91         //<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF"  id="b3"/>
 92             $('#b3').click(function(){
 93                 $('div:not(.one)').css('background-color','yellow');
 94             });
 95         //<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF"  id="b4"/>
 96             $('#b4').click(function(){
 97                 $('div:even').css('background-color','green');
 98             });
 99         //<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF"  id="b5"/>
100             $('#b5').click(function(){
101                 $('div:odd').css('background-color','cyan');
102             });
103         //<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF"  id="b6"/>
104             $('#b6').click(function(){
105                 $('div:gt(3)').css('background-color','blue');
106             });
107         //<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF"  id="b7"/>
108             $('#b7').click(function(){
109                 $('div:eq(3)').css('background-color','purple');
110             });
111         //<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF"  id="b8"/>
112             $('#b8').click(function(){
113                 $('div:lt(3)').css('background-color','black');
114             });
115         //<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF"  id="b9"/>
116             $('#b9').click(function(){
117                 $(':header').css('background-color','gray');
118             });
119         //<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF"  id="b10"/>
120             $('#b10').click(function(){
121                 $(':animated').css('background-color','#CCCCCC');
122             });
123             
124             //设置Id为mover的动画效果
125             function mover()
126             {
127                 $('#mover').slideToggle("slow",mover);
128             }
129             mover();
130     </script>
131 </html>

Base_Filter_Selector.html

　　4.内容过滤选择器

　　　　内容过滤选择器主要表现在它所包含的子元素和它所包含的文本上。

　　　　（1）:contains(String)：匹配包含指定字符串的元素

　　　　　　单击id为b1的按钮，改变含有文本 ‘di’ 的 div 元素的背景色为 red

$('#b1').click(function(){
            $('div:contains(di)').css('background-color','red');
        });

　　　　（2）:empty：匹配不包含子元素的元素

　　　　　　单击id为b2的按钮，改变不包含子元素(或者文本元素) 的 div 空元素的背景色为orange

$('#b2').click(function(){
        $("div:empty").css("background-color","orange");
    });

　　　　（3）:has(selector)：匹配含有选择器所匹配的元素的元素。

　　　　　　单击id为b3的按钮，改变含有 class 为 mini 元素的 div 元素的背景色为 orange

$("#b3").click(function(){
        $("div:has(.mini)").css("background-color","yellow");
    });

　　　　（4）:parent：和:empty作用相反，匹配那些有子元素的元素。

　　　　　　单击id为b4的按钮，改变含有子元素(或者文本元素)的div元素的背景色为 green

$('#b4').click(function(){
        $('div:parent').css('background-color','green');
    });

　　　　（5）单击id为b5的按钮，改变不含有文本 di的 div 元素的背景色为gray

$('#b5').click(function(){
        $("div:not(:contains(di))").css('background-color','gray');
    });

　　　　（6）完整代码

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3   <head>
  4     <title>ddd</title>
  5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6     <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  7     <style type="text/css">
  8              div,span{
  9                  140px;
 10                 height: 140px;
 11                 margin: 20px;
 12                 background: #9999CC;
 13                 border: #000 1px solid;
 14                 float:left;
 15                 font-size: 17px;
 16                 font-family:Roman;
 17             }
 18             
 19             div.mini{
 20                  30px;
 21                 height: 30px;
 22                 background: #CC66FF;
 23                 border: #000 1px solid;
 24                 font-size: 12px;
 25                 font-family:Roman;
 26             }
 27      </style>
 28      <!--引入jquery的js库-->
 29     
 30     </head>
 31      
 32     <body>
 33                 
 34          <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 35          <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 red"  id="b1"/>
 36          <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为orange"  id="b2"/>
 37          <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 yellow"  id="b3"/>
 38          <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 green"  id="b4"/>
 39          <input type="button" value=" 改变不含有文本 di的 div 元素的背景色为gray"  id="b5"/>
 40  
 41          <h1>天气冷了</h1>
 42          <h2>天气又冷了</h2>
 43          
 44          <div id="one">
 45              id为one   div
 46              
 47          </div>
 48         
 49          <div id="two" class="mini" >
 50                id为two   class是 mini  div
 51                <div  class="mini" >class是 mini</div>
 52         </div>
 53         
 54          <div class="one" >
 55                  class是 one 
 56                <div  class="mini" >class是 mini</div>
 57                <div  class="mini" >class是 mini</div>
 58          </div>
 59          <div class="one" >
 60                class是 one 
 61                <div  class="mini01" >class是 mini01</div>
 62                <div  class="mini" >class是 mini</div>
 63         </div>
 64         
 65         
 66         <div class="one"></div>
 67         <br>
 68         <div id="mover" >
 69                动画
 70         </div>
 71         <br>
 72         
 73         
 74     </body>
 75     <script type="text/javascript">
 76     //<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 77     
 78     //<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"  id="b1"/>
 79         $('#b1').click(function(){
 80             $('div:contains(di)').css('background-color','red');
 81         });
 82     //<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"  id="b2"/>
 83         $('#b2').click(function(){
 84         $("div:empty").css("background-color","orange");
 85     });
 86     //<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"  id="b3"/>
 87         $("#b3").click(function(){
 88         $("div:has(.mini)").css("background-color","yellow");
 89     });
 90     
 91     //<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"  id="b4"/>
 92     $('#b4').click(function(){
 93         $('div:parent').css('background-color','green');
 94     });
 95     //<input type="button" value=" 改变不含有文本 di的 div 元素的背景色为gray"  id="b5"/>
 96     $('#b5').click(function(){
 97         $("div:not(:contains(di))").css('background-color','gray');
 98     });
 99     
100     //设置动画效果
101     function mover()
102     {
103         $('#mover').slideToggle('slow',mover);
104     }
105     mover();
106     </script>
107 </html>

Content_Filter_Selector.html

5.可见过滤选择器

　　　　（1）:hidden：匹配所有不可见的元素

　　　　　　单击id为b1的按钮，选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为orange

$('#b2').click(function(){
         $('div:hidden').css('background-color','orange');
         $('div:hidden').show();
     });

　　　　（2）:visible：匹配所有的可见元素

　　　　（3）完整代码

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>ddd</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
 7     <style type="text/css">
 8              div,span{
 9                  140px;
10                 height: 140px;
11                 margin: 20px;
12                 background: #9999CC;
13                 border: #000 1px solid;
14                 float:left;
15                 font-size: 17px;
16                 font-family:Roman;
17             }
18             
19             div.mini{
20                  30px;
21                 height: 30px;
22                 background: #CC66FF;
23                 border: #000 1px solid;
24                 font-size: 12px;
25                 font-family:Roman;
26             }
27             
28             div.visible{
29                 display:none;
30             }
31      </style>
32      <!--引入jquery的js库-->
33     </head>
34     <body>
35          <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
36          <input type="button" value=" 改变所有可见的div元素的背景色为 red"  id="b1"/>
37          <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 orange"  id="b2"/>
38          
39          <!--文本隐藏域-->
40          <input type="hidden" value="hidden_1">
41          <input type="hidden" value="hidden_2">
42          <input type="hidden" value="hidden_3">
43          <input type="hidden" value="hidden_4">
44          
45          <h1>天气冷了</h1>
46          <h2>天气又冷了</h2>
47          
48          <div id="one">
49              id为one   div
50              
51          </div>
52         
53          <div id="two" class="mini" >
54                id为two   class是 mini  div
55                <div  class="mini" >class是 mini</div>
56         </div>
57         
58          <div class="visible" >
59                  class是 one 
60                <div  class="mini" >class是 mini</div>
61                <div  class="mini" >class是 mini</div>
62          </div>
63          <div class="one" >
64                class是 one 
65                <div  class="mini01" >class是 mini01</div>
66                <div  class="mini" >class是 mini</div>
67         </div>
68         
69         <div class="visible" >
70                这是隐藏的xx
71         </div>
72         
73         <div class="one">
74             
75         </div>
76         <br>
77         <div id="mover" >
78                动画
79         </div>
80         <br>
81         
82         
83     </body>
84     <script type="text/javascript">
85      //<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
86          
87      //<input type="button" value=" 改变所有可见的div元素的背景色为 red"  id="b1"/>
88      $('#b1').click(function(){
89          $('div:visible').css('background-color','red');
90      });
91      //<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为orange"  id="b2"/>
92      $('#b2').click(function(){
93          $('div:hidden').css('background-color','orange');
94          $('div:hidden').show();
95      });
96     </script>
97 </html>

Visible&Hidden.html

　　6.属性过滤选择器

　　　　属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

　　　　（1）[attribute]：选择具有某种属性的所有元素

　　　　　　单击id为b1的按钮，含有属性title 的div元素背景颜色设置为red

$('#b1').click(function(){
            $('div[title]').css('background-color','red');
        });

　　　　（2）[attribute=value]：匹配属性值为value的所有元素。

　　　　　　单击id为b2的按钮，属性title值等于test的div元素背景颜色设置为orange

$("#b2").click(function(){
            $("div[title=test]").css('background-color','orange');
        });

　　　　（3）[attribute!=value]：略。

　　　　　　单击id为b3的按钮，属性title值不等于test的div元素(没有属性title的也将被选中)背景颜色设置为yellow

$("#b3").click(function(){
            $("div[title!=test]").css('background-color','yellow');
        });

　　　　（4）[attribute^=value]：匹配属性值以value开头的所有元素。

　　　　　　单击id为b4的按钮，属性title值以te开始的div元素背景颜色设置为green

$("#b4").click(function(){
            $("div[title^=te]").css('background-color','green');
        });

　　　　（5）[attribute$value]：匹配属性值以value值结尾的所有元素。

　　　　　单击id为b5的按钮，属性title值以est结束的div元素..背景颜色设置为cyan　

$("#b5").click(function(){
            $("div[title$=est]").css('background-color','cyan');
        });

　　　　（6）[attribute*value]：匹配属性值含有value的所有元素。

　　　　　　单击id为b6的按钮，属性title值含有es的div元素.背景颜色设置为blue

$("#b6").click(function(){
            $("div[title*=es]").css('background-color','blue');
        });

　　　　（7）复合属性选择器：不需要任何分隔符号，只需要将规则使用[]并列即可。

　　　　　单击id为b7的按钮，选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景颜色设置为purple

$("#b7").click(function(){
            $("div[id][title*=es]").css('background-color','purple');
        });

　　　　（8）完整代码

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3   <head>
  4     <title>ddd</title>
  5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6     <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  7     <style type="text/css">
  8              div,span{
  9                  140px;
 10                 height: 140px;
 11                 margin: 20px;
 12                 background: #9999CC;
 13                 border: #000 1px solid;
 14                 float:left;
 15                 font-size: 17px;
 16                 font-family:Roman;
 17             }
 18             
 19             div.mini{
 20                  30px;
 21                 height: 30px;
 22                 background: #CC66FF;
 23                 border: #000 1px solid;
 24                 font-size: 12px;
 25                 font-family:Roman;
 26             }
 27             
 28             div.visible{
 29                 display:none;
 30             }
 31      </style>
 32      <!--引入jquery的js库-->
 33     </head>
 34      
 35     <body>
 36                 
 37          <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 38          <input type="button" value=" 含有属性title 的div元素背景颜色设置为red"  id="b1"/>
 39          <input type="button" value=" 属性title值等于test的div元素背景颜色设置为orange"  id="b2"/>
 40          <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景颜色设置为yellow"  id="b3"/>
 41          <input type="button" value=" 属性title值 以te开始 的div元素背景颜色设置为green"  id="b4"/>
 42          <input type="button" value=" 属性title值 以est结束 的div元素..背景颜色设置为cyan　"  id="b5"/>
 43          <input type="button" value="属性title值 含有es的div元素.背景颜色设置为blue"  id="b6"/>
 44          <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景颜色设置为purple"  id="b7"/>
 45          
 46          <!--文本隐藏域-->
 47          <input type="hidden" value="hidden_1">
 48          <input type="hidden" value="hidden_2">
 49          <input type="hidden" value="hidden_3">
 50          <input type="hidden" value="hidden_4">
 51          
 52          <h1>天气冷了</h1>
 53          <h2>天气又冷了</h2>
 54          
 55          <div id="one">
 56              id为one   div
 57              
 58          </div>
 59         
 60          <div id="two" class="mini"  title="test">
 61                id为two   class是 mini  div  title="test"
 62                <div  class="mini" >class是 mini</div>
 63         </div>
 64         
 65          <div class="visible" >
 66                  class是 one 
 67                <div  class="mini" >class是 mini</div>
 68                <div  class="mini" >class是 mini</div>
 69          </div>
 70          <div class="one" title="test02">
 71                class是 one    title="test02"
 72                <div  class="mini01" >class是 mini01</div>
 73                <div  class="mini" >class是 mini</div>
 74         </div>
 75         
 76         
 77         <div class="visible" >
 78                这是隐藏的
 79         </div>
 80         
 81         <div class="one">
 82             
 83             
 84         </div>
 85         <br>
 86         <div id="mover" >
 87                动画
 88         </div>
 89         <br>
 90         
 91         
 92     </body>
 93     <script type="text/javascript">
 94         //<input type="button" value=" 含有属性title 的div元素背景颜色设置为red"  id="b1"/>
 95         $('#b1').click(function(){
 96             $('div[title]').css('background-color','red');
 97         });
 98         //<input type="button" value=" 属性title值等于test的div元素背景颜色设置为orange"  id="b2"/>
 99         $("#b2").click(function(){
100             $("div[title=test]").css('background-color','orange');
101         });
102         //<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景颜色设置为yellow"  id="b3"/>
103         $("#b3").click(function(){
104             $("div[title!=test]").css('background-color','yellow');
105         });
106         //<input type="button" value=" 属性title值 以te开始 的div元素背景颜色设置为green."  id="b4"/>
107         $("#b4").click(function(){
108             $("div[title^=te]").css('background-color','green');
109         });
110         
111         //<input type="button" value=" 属性title值 以est结束 的div元素..背景颜色设置为cyan"  id="b5"/>
112         $("#b5").click(function(){
113             $("div[title$=est]").css('background-color','cyan');
114         });
115         //<input type="button" value="属性title值 含有es的div元素.背景颜色设置为blue"  id="b6"/>
116         $("#b6").click(function(){
117             $("div[title*=es]").css('background-color','blue');
118         });
119         //<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景颜色设置为purple"  id="b7"/>
120         $("#b7").click(function(){
121             $("div[id][title*=es]").css('background-color','purple');
122         });
123     </script>
124          
125 </html>

Attribute_Filter_Selector.html

　　7.子元素过滤选择器

　　　　使用该过滤选择器的时候应当注意：

　　　　　　I：索引值从1开始

　　　　　　II：在:之前一定要加上空格。

　　　　（1）空格:nth-child：可以选择有规律的索引值的子元素，如0/2/even/odd/3n+1/2n等

　　　　　　单击id为b1的按钮，每个class为one的div父元素下的第2个子元素,背景颜色设置为red

$("#b1").click(function(){
         $("div[class=one] :nth-child(2)").css('background-color','red');
     });

　　　　（2）空格:first-child：选择第一个子元素

　　　　　　单击id为b2的按钮，每个class为one的div父元素下的第一个子元素,背景颜色设置为orange

$("#b2").click(function(){
         $("div[class=one] :first-child").css("background-color","orange");
     });

　　　　（3）空格:last-child：选择最后一个子元素

　　　　　　单击id为b3的按钮，每个class为one的div父元素下的最后一个子元素，背景颜色设置为yellow

$("#b3").click(function(){
         $("div[class=one] :last-child").css("background-color","yellow");
     });

　　　　（4）空格:only-child：选择只有一个元素的子元素

　　　　　　单击id为b4的按钮，如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素，背景颜色设置为green

 $("#b4").click(function(){
         $("div[class=one] :only-child").css("background-color","green");
     });

　　　　（5）完整代码

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3   <head>
  4     <title>ddd</title>
  5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6     <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  7     <style type="text/css">
  8              div,span{
  9                  140px;
 10                 height: 140px;
 11                 margin: 20px;
 12                 background: #9999CC;
 13                 border: #000 1px solid;
 14                 float:left;
 15                 font-size: 17px;
 16                 font-family:Roman;
 17             }
 18             
 19             div.mini{
 20                  30px;
 21                 height: 30px;
 22                 background: #CC66FF;
 23                 border: #000 1px solid;
 24                 font-size: 12px;
 25                 font-family:Roman;
 26             }
 27             
 28             div.visible{
 29                 display:none;
 30             }
 31      </style>
 32      <!--引入jquery的js库-->
 33     
 34     </head>
 35      
 36     <body>
 37                 
 38          <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
 39          <input type="button" value=" 每个class为one的div父元素下的第2个子元素,背景颜色设置为red"  id="b1"/>
 40          <input type="button" value=" 每个class为one的div父元素下的第一个子元素,背景颜色设置为orange"  id="b2"/>
 41          <input type="button" value=" 每个class为one的div父元素下的最后一个子元素，背景颜色设置为yellow"  id="b3"/>
 42          <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素，背景颜色设置为green"  id="b4"/>
 43          
 44 
 45          <!--文本隐藏域-->
 46          <input type="hidden" value="hidden_1">
 47          <input type="hidden" value="hidden_2">
 48          <input type="hidden" value="hidden_3">
 49          <input type="hidden" value="hidden_4">
 50          
 51          <h1>天气冷了</h1>
 52          <h2>天气又冷了</h2>
 53          
 54          <div id="one">
 55              id为one   div
 56              
 57          </div>
 58         
 59          <div id="one" class="mini"  title="test">
 60                id为two   class是 mini  div  title="test"
 61                <div  class="mini" >class是 mini</div>
 62         </div>
 63          <div class="one"  title="test">
 64                <div  class="mini" >class是 mini******</div>
 65         </div>
 66         
 67          <div class="visible" >
 68                  class是 one 
 69                <div  class="mini" >class是 mini</div>
 70                <div  class="mini" >class是 mini</div>
 71          </div>
 72          <div class="one" title="test02">
 73                class是 one    title="test02"   (**************
 74                <div  class="mini01" >class是 mini01</div>
 75                <div  class="mini" >cdddddddlass是 mini</div>
 76         </div>
 77         
 78         
 79         <div class="visible" >
 80                这是隐藏的
 81         </div>
 82         
 83         <div class="one">
 84             
 85             
 86         </div>
 87         <br>
 88         <div id="mover" >
 89                动画
 90         </div>
 91         <br>
 92         
 93         
 94     </body>
 95     <script type="text/javascript">
 96     //索引值从1开始，并且一定要在：前加上空格。
 97      //<input type="button" value=" 每个class为one的div父元素下的第2个子元素,背景颜色设置为red"  id="b1"/>
 98      $("#b1").click(function(){
 99          $("div[class=one] :nth-child(2)").css('background-color','red');
100      });
101      //<input type="button" value=" 每个class为one的div父元素下的第一个子元素,背景颜色设置为orange"  id="b2"/>
102      $("#b2").click(function(){
103          $("div[class=one] :first-child").css("background-color","orange");
104      });
105      //<input type="button" value=" 每个class为one的div父元素下的最后一个子元素，背景颜色设置为yellow"  id="b3"/>
106      $("#b3").click(function(){
107          $("div[class=one] :last-child").css("background-color","yellow");
108      });
109      //<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素，背景颜色设置为green"  id="b4"/>
110      $("#b4").click(function(){
111          $("div[class=one] :only-child").css("background-color","green");
112      });
113     </script>
114 </html>

SubElements_Filter_Selector.html

　　8.表单对象属性过滤选择器

　　　　涉及到的操作表单对象的方法：

　　　　　　val()方法：获取或者改变表单对象的某些值。

　　　　　　length:属性，能够获取多选框选中的个数

　　　　　　text()方法：获取下拉选框选中的内容。

　　　　（1）:enabled：匹配所有可用元素，包括按钮、文本框等凡是带有enable的都被匹配。

　　　　　　单击id为b1的按钮，利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值为 ‘已经改变’

$("#b1").click(function(){
             $("input[type=text]:enabled").val("已经改变");
         });

　　　　（2）:disabled：匹配所有不可用元素，和（1）相对应。

　　　　　　单击id为b2的按钮，利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值为'不可改变但已经改变'

$("#b2").click(function(){
             $("input[type=text]:disabled").val("不可改变但是已经改变");
         });

　　　　（3）:checked：匹配所有被选中的复选框和单选框，但是不包含select中的option选项。这点是需要十分注意的地方。

　　　　　　单击id为b3的按钮，利用 jQuery 对象的 length 属性获取多选框选中的个数

$("#b3").click(function(){
             var length=$("input[type=checkbox]:checked").length;
             alert("多选框选中的个数："+length);
         });

　　　　（4）:selected：匹配所有被选中的option元素。

　　　　　　单击id为b4的按钮，利用 jQuery 对象的 text() 方法获取下拉框选中的内容

$("#b4").click(function(){
             $("option:selected").each(function(index,value){
                 //alert($(value).text());
                 //alert(this.value);//this这里和value等价
             });
         });

　　　　（5）完整代码

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3   <head>
  4     <title>ddd</title>
  5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6     <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  7     <style type="text/css">
  8              div,span{
  9                  140px;
 10                 height: 140px;
 11                 margin: 20px;
 12                 background: #9999CC;
 13                 border: #000 1px solid;
 14                 float:left;
 15                 font-size: 17px;
 16                 font-family:Roman;
 17             }
 18             
 19             div.mini{
 20                  30px;
 21                 height: 30px;
 22                 background: #CC66FF;
 23                 border: #000 1px solid;
 24                 font-size: 12px;
 25                 font-family:Roman;
 26             }
 27      </style>
 28      <!--引入jquery的js库-->
 29     
 30     </head>
 31      
 32     <body>
 33                 
 34          <input type="button" value="保存"  class="mini" name="ok"  class="mini"/>
 35          <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值为 ‘已经改变’"  id="b1"/>
 36          <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值 为'不可改变但已经改变'"  id="b2"/>
 37          <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
 38          <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
 39  
 40  
 41          <input type="text" value="不可用值1" disabled="disabled"> 
 42          <input type="text" value="可用值1" >
 43          <input type="text" value="不可用值2" disabled="disabled">
 44          <input type="text" value="可用值2" >
 45          
 46          <br>
 47          <input type="checkbox" name="items" value="美容" >美容
 48          <input type="checkbox" name="items" value="IT" >IT
 49          <input type="checkbox" name="items" value="金融" >金融
 50          <input type="checkbox" name="items" value="管理" >管理
 51          
 52          <br>
 53           <input type="radio" name="sex" value="男" >男
 54           <input type="radio" name="sex" value="女" >女
 55          <br>
 56          
 57           <select name="job" id="job" multiple="multiple" size=4>
 58               <option>程序员</option>
 59             <option>中级程序员</option>
 60             <option>高级程序员</option>
 61             <option>系统分析师</option>
 62           </select>
 63             
 64           <select name="edu" id="edu">
 65               <option>本科</option>
 66             <option>博士</option>
 67             <option>硕士</option>
 68             <option>大专</option>
 69           </select>
 70        
 71               
 72          <div id="two" class="mini" >
 73                id为two   class是 mini  div
 74                <div  class="mini" >class是 mini</div>
 75         </div>
 76         
 77          <div class="one" >
 78                  class是 one 
 79                <div  class="mini" >class是 mini</div>
 80                <div  class="mini" >class是 mini</div>
 81          </div>
 82          <div class="one" >
 83                class是 one 
 84                <div  class="mini01" >class是 mini01</div>
 85                <div  class="mini" >class是 mini</div>
 86         </div>
 87         
 88     </body>
 89     <script type="text/javascript">
 90      //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值为 ‘已经改变’"  id="b1"/>
 91          $("#b1").click(function(){
 92              $("input[type=text]:enabled").val("已经改变");
 93          });
 94      //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值 为'不可改变但已经改变'"  id="b2"/>
 95          $("#b2").click(function(){
 96              $("input[type=text]:disabled").val("不可改变但是已经改变");
 97          });
 98      
 99      //<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
100          $("#b3").click(function(){
101              var length=$("input[type=checkbox]:checked").length;
102              alert("多选框选中的个数："+length);
103          });
104      
105      //<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
106          $("#b4").click(function(){
107              $("option:selected").each(function(index,value){
108                  //alert($(value).text());
109                  //alert(this.value);//this这里和value等价
110              });
111          });
112 
113     </script>
114 </html>

Form_Attributes_Selector.html

　　9.表单选择器

　　　　（1）:input（2）:text（3）:password（4）:radio（5）:checkbox（6）:submit（7）:image（8）:reset（9）:button（10）:file（11）:hidden

　　　　这些选择器的使用方法比较简单，不做赘述。

相关阅读:
O-C相关－06:对象与对象的关系
 O-C相关05:方法的封装.
O-C相关04:类方法的概述与定义和调用
 Objective-C发展历史
 O-C相关－03:面向对象概念的具体介绍
 OC相关-02：oc和c的基本差异
 0-C相关01:NSlog函数介绍。
鞭辟入里
 objective-c中字符串长度计算
 OC多文件开发介绍
原文地址：https://www.cnblogs.com/kuangdaoyizhimei/p/4775108.html