【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>
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的根基，在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>
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>
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>
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 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=" 改变含有文本 ‘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>
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 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 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>
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 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 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>
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 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 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>
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 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=" 利用 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>
9.表单选择器
（1）:input（2）:text（3）:password（4）:radio（5）:checkbox（6）:submit（7）:image（8）:reset（9）:button（10）:file（11）:hidden
这些选择器的使用方法比较简单，不做赘述。
