【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对象)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
</head> <body>
<input type="text" value="zhang" id="username" name="username" /> </body>
<script language="JavaScript">
//dom转化为JQUery对象 $(DOM对象)
var username=document.getElementById("username");
$username=$(username);
alert($username.val());
</script>
</html>
DOM_To_JQuery.html
2.JQuery转DOM：var variable=JQuery对象。
JQuery对象是一种数组对象，所以如果要转换为DOM对象就必须使用下标[index]或者get(index)的方法，数组下标从0开始。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
</head> <body>
<input type="text" value="zhangxx" id="username" name="username" />
<input type="text" value="zhangsanfeng" id="username1" name="username" />
</body>
<script language="JavaScript">
//JQUERY对象转化为DOM对象
//var username=$('#username')[0];
var username=$('#username').get(0);
alert(username.value);
</script>
</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）完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库--> </head> <body> <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/>
<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/> <input type="text" value="" name="username" id="username"/> <div id="one">
id为one </div> <div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 mini</div>
</div> <div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<br>
<div id="mover" >
动画
</div>
<br>
<span class="spanone"> span
</span>
<span class="mini"> span
</span>
<script type="text/javascript"> //<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
$('#b1').click(function(){
$('#one').css('background','#0000FF');
});
//<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/>
$('#b2').click(function(){
$('div').css('background-color','#00FFFF');
});
//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/>
$('#b3').click(function(){
$('.mini').css('background-color','#FF0033');
});
//<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
$('#b4').click(function(){
$('*').css('background-color','#00FF33');
});
//<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/>
$('#b5').click(function(){
$('span,#two').css('background-color','#3399FF');
});
</script>
</body>
</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）完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value="改变 <body> 内所有 <div> 的背景色为 red" id="b1"/>
<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 blue" id="b2"/>
<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 pink" id="b3"/>
<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 black" id="b4"/>
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 orange" id="b5"/> <div id="one">
id为one </div> <div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 mini</div>
</div> <div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div> <br>
<div id="mover" >
动画
</div>
<br>
<span class="spanone"> span
</span> </body>
<script type="text/javascript">
//<input type="button" value="保存" class="mini" name="ok" class="mini" /> //<input type="button" value="改变 <body> 内所有 <div> 的背景色为red" id="b1"/>,这里选择的是所有后代节点
$('#b1').click(function(){
$('body div').css('background-color','red');
});
//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 blue" id="b2"/>
//这里选择的是所有儿子节点，使用的标识符是>。
$('#b2').click(function(){
$('body>div').css('background-color','blue');
});
//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 pink" id="b3"/>
//使用+符号进行连接的话控制的是特定元素之后的第一个元素，如果想要控制所有的话就需要使用~符号来连接。
$('#b3').click(function(){
$('#one+div').css('background-color','pink');
});
//<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为black" id="b4"/>
$('#b4').click(function(){
$('#two~div').css('background-color','black');
});
//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 orange" id="b5"/>
$('#b5').click(function(){
$('#two').siblings('div').css('background-color','orange');
});
</script>
</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）完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF" id="b10"/> <h1>天气冷了</h1>
<h2>天气又冷了</h2> <div id="one">
id为one </div> <div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 mini</div>
</div> <div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div> <br>
<div id="mover" >
动画
</div>
<br> </body>
<script type="text/javascript">
//<input type="button" value="保存" class="mini" name="ok" class="mini" />
//<input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
$('#b1').click(function(){
$('div:first').css('background-color','red');
});
//<input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
$('#b2').click(function(){
$('div:last').css('background-color','orange');
});
//<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
$('#b3').click(function(){
$('div:not(.one)').css('background-color','yellow');
});
//<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
$('#b4').click(function(){
$('div:even').css('background-color','green');
});
//<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
$('#b5').click(function(){
$('div:odd').css('background-color','cyan');
});
//<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
$('#b6').click(function(){
$('div:gt(3)').css('background-color','blue');
});
//<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
$('#b7').click(function(){
$('div:eq(3)').css('background-color','purple');
});
//<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
$('#b8').click(function(){
$('div:lt(3)').css('background-color','black');
});
//<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
$('#b9').click(function(){
$(':header').css('background-color','gray');
});
//<input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 #0000FF" id="b10"/>
$('#b10').click(function(){
$(':animated').css('background-color','#CCCCCC');
}); //设置Id为mover的动画效果
function mover()
{
$('#mover').slideToggle("slow",mover);
}
mover();
</script>
</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）完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 red" id="b1"/>
<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为orange" id="b2"/>
<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 yellow" id="b3"/>
<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 green" id="b4"/>
<input type="button" value=" 改变不含有文本 di的 div 元素的背景色为gray" id="b5"/> <h1>天气冷了</h1>
<h2>天气又冷了</h2> <div id="one">
id为one div </div> <div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 mini</div>
</div> <div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div> <div class="one"></div>
<br>
<div id="mover" >
动画
</div>
<br> </body>
<script type="text/javascript">
//<input type="button" value="保存" class="mini" name="ok" class="mini" /> //<input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/>
$('#b1').click(function(){
$('div:contains(di)').css('background-color','red');
});
//<input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/>
$('#b2').click(function(){
$("div:empty").css("background-color","orange");
});
//<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/>
$("#b3").click(function(){
$("div:has(.mini)").css("background-color","yellow");
}); //<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/>
$('#b4').click(function(){
$('div:parent').css('background-color','green');
});
//<input type="button" value=" 改变不含有文本 di的 div 元素的背景色为gray" id="b5"/>
$('#b5').click(function(){
$("div:not(:contains(di))").css('background-color','gray');
}); //设置动画效果
function mover()
{
$('#mover').slideToggle('slow',mover);
}
mover();
</script>
</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）完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改变所有可见的div元素的背景色为 red" id="b1"/>
<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 orange" id="b2"/> <!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4"> <h1>天气冷了</h1>
<h2>天气又冷了</h2> <div id="one">
id为one div </div> <div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 mini</div>
</div> <div class="visible" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div> <div class="visible" >
这是隐藏的xx
</div> <div class="one"> </div>
<br>
<div id="mover" >
动画
</div>
<br> </body>
<script type="text/javascript">
//<input type="button" value="保存" class="mini" name="ok" class="mini" /> //<input type="button" value=" 改变所有可见的div元素的背景色为 red" id="b1"/>
$('#b1').click(function(){
$('div:visible').css('background-color','red');
});
//<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为orange" id="b2"/>
$('#b2').click(function(){
$('div:hidden').css('background-color','orange');
$('div:hidden').show();
});
</script>
</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）完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 含有属性title 的div元素背景颜色设置为red" id="b1"/>
<input type="button" value=" 属性title值等于test的div元素背景颜色设置为orange" id="b2"/>
<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景颜色设置为yellow" id="b3"/>
<input type="button" value=" 属性title值 以te开始 的div元素背景颜色设置为green" id="b4"/>
<input type="button" value=" 属性title值 以est结束 的div元素..背景颜色设置为cyan " id="b5"/>
<input type="button" value="属性title值 含有es的div元素.背景颜色设置为blue" id="b6"/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景颜色设置为purple" id="b7"/> <!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4"> <h1>天气冷了</h1>
<h2>天气又冷了</h2> <div id="one">
id为one div </div> <div id="two" class="mini" title="test">
id为two class是 mini div title="test"
<div class="mini" >class是 mini</div>
</div> <div class="visible" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" title="test02">
class是 one title="test02"
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div> <div class="visible" >
这是隐藏的
</div> <div class="one"> </div>
<br>
<div id="mover" >
动画
</div>
<br> </body>
<script type="text/javascript">
//<input type="button" value=" 含有属性title 的div元素背景颜色设置为red" id="b1"/>
$('#b1').click(function(){
$('div[title]').css('background-color','red');
});
//<input type="button" value=" 属性title值等于test的div元素背景颜色设置为orange" id="b2"/>
$("#b2").click(function(){
$("div[title=test]").css('background-color','orange');
});
//<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景颜色设置为yellow" id="b3"/>
$("#b3").click(function(){
$("div[title!=test]").css('background-color','yellow');
});
//<input type="button" value=" 属性title值 以te开始 的div元素背景颜色设置为green." id="b4"/>
$("#b4").click(function(){
$("div[title^=te]").css('background-color','green');
}); //<input type="button" value=" 属性title值 以est结束 的div元素..背景颜色设置为cyan" id="b5"/>
$("#b5").click(function(){
$("div[title$=est]").css('background-color','cyan');
});
//<input type="button" value="属性title值 含有es的div元素.背景颜色设置为blue" id="b6"/>
$("#b6").click(function(){
$("div[title*=es]").css('background-color','blue');
});
//<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景颜色设置为purple" id="b7"/>
$("#b7").click(function(){
$("div[id][title*=es]").css('background-color','purple');
});
</script> </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）完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
} div.visible{
display:none;
}
</style>
<!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 每个class为one的div父元素下的第2个子元素,背景颜色设置为red" id="b1"/>
<input type="button" value=" 每个class为one的div父元素下的第一个子元素,背景颜色设置为orange" id="b2"/>
<input type="button" value=" 每个class为one的div父元素下的最后一个子元素，背景颜色设置为yellow" id="b3"/>
<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素，背景颜色设置为green" id="b4"/> <!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4"> <h1>天气冷了</h1>
<h2>天气又冷了</h2> <div id="one">
id为one div </div> <div id="one" class="mini" title="test">
id为two class是 mini div title="test"
<div class="mini" >class是 mini</div>
</div>
<div class="one" title="test">
<div class="mini" >class是 mini******</div>
</div> <div class="visible" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" title="test02">
class是 one title="test02" (**************
<div class="mini01" >class是 mini01</div>
<div class="mini" >cdddddddlass是 mini</div>
</div> <div class="visible" >
这是隐藏的
</div> <div class="one"> </div>
<br>
<div id="mover" >
动画
</div>
<br> </body>
<script type="text/javascript">
//索引值从1开始，并且一定要在：前加上空格。
//<input type="button" value=" 每个class为one的div父元素下的第2个子元素,背景颜色设置为red" id="b1"/>
$("#b1").click(function(){
$("div[class=one] :nth-child(2)").css('background-color','red');
});
//<input type="button" value=" 每个class为one的div父元素下的第一个子元素,背景颜色设置为orange" id="b2"/>
$("#b2").click(function(){
$("div[class=one] :first-child").css("background-color","orange");
});
//<input type="button" value=" 每个class为one的div父元素下的最后一个子元素，背景颜色设置为yellow" id="b3"/>
$("#b3").click(function(){
$("div[class=one] :last-child").css("background-color","yellow");
});
//<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素，背景颜色设置为green" id="b4"/>
$("#b4").click(function(){
$("div[class=one] :only-child").css("background-color","green");
});
</script>
</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）完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
} div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库--> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值为 ‘已经改变’" id="b1"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值 为'不可改变但已经改变'" id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/> <input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1" >
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2" > <br>
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理 <br>
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" >女
<br> <select name="job" id="job" multiple="multiple" size=4>
<option>程序员</option>
<option>中级程序员</option>
<option>高级程序员</option>
<option>系统分析师</option>
</select> <select name="edu" id="edu">
<option>本科</option>
<option>博士</option>
<option>硕士</option>
<option>大专</option>
</select> <div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 mini</div>
</div> <div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div> </body>
<script type="text/javascript">
//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值为 ‘已经改变’" id="b1"/>
$("#b1").click(function(){
$("input[type=text]:enabled").val("已经改变");
});
//<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值 为'不可改变但已经改变'" id="b2"/>
$("#b2").click(function(){
$("input[type=text]:disabled").val("不可改变但是已经改变");
}); //<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
$("#b3").click(function(){
var length=$("input[type=checkbox]:checked").length;
alert("多选框选中的个数："+length);
}); //<input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
$("#b4").click(function(){
$("option:selected").each(function(index,value){
//alert($(value).text());
//alert(this.value);//this这里和value等价
});
}); </script>
</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
这些选择器的使用方法比较简单，不做赘述。
【Java EE 学习 32 上】【JQuery】【选择器】的更多相关文章
- 【Java EE 学习 80 上】【WebService】
一.WebService概述 什么是WebService,顾名思义,就是基于Web的服务,它使用Http方式接收和响应外部系统的某种请求,从而实现远程调用.WebService实际上就是依据某些标准, ...
- 【Java EE 学习 74 上】【数据采集系统第六天】【使用Jfreechart的统计图实现】【Jfreechart的基本使用方法】
之前已经实现了数据的采集,现在已经有了基本的数据,下一步就需要使用这些数据实现统计图的绘制了.这里使用Jfreechart实现这些统计图的绘制.首先看一下Jfreechart的基本用法,只有知道了它的 ...
- 【Java EE 学习 25 上】【网上图书商城项目实战】
一.概述 1.使用的jdk版本:1.6 2.java EE版本:1.6 3.指导老师:传智播客 王建 二.小项目已经实现的功能 普通用户: 1.登陆 2.注册 3.购物 4.浏览 管理员用户(全部管理 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- 【Java EE 学习 76 上】【数据采集系统第八天】【角色授权】【用户授权】【权限的粗粒度控制】【权限的细粒度控制】
一.角色管理 单击导航栏上的"角色管理"超链接,跳转到角色管理界面,在该界面上显示所有角色,并提供角色的增加和删除.修改超链接. 1.增加新角色(角色授权) 流程:单击增加新角色超 ...
- 【Java EE 学习 67 上】【OA项目练习】【JBPM工作流的使用】
OA项目中有极大可能性使用到JBPM框架解决流程控制问题,比如请假流程.报销流程等等. JBPM:JBoss Business Process Management,翻译过来就是业务流程管理.实际上就 ...
- 【Java EE 学习 83 上】【SpringMVC】【基本使用方法】
一.SpringMVC框架概述 什么是SpringMVC?SpringMVC是一个和Struts2差不多的东西,他们的作用和性质几乎是相同的,甚至开发效率上也差不多,但是在运行效率上SpringMVC ...
- 【Java EE 学习 82 上】【MAVEN基本安装和使用方法】
一.Maven概述 1.什么是Maven? Maven中文意思是"行家"."专家",它是一种跨平台的项目管理工具. 2.Maven有什么作用? Maven能够实 ...
随机推荐
- bzoj4726【POI2017】Sabota?
首先可以推出来如果i没有带头叛变,那么i的父亲也一定不会带头叛变,证明显然 所以最劣情况初始的叛徒肯定是叶子,并且带头叛变的人一定是从某个叶子往上走一条链 f[i]表示i不带头叛变的话最小的x 那么我 ...
- Honeywords项目——检查密码是否被破解的一种简单方法
Honeywords项目使用一种简单的方法来改进hash后的密码的安全性——为每个账户维护一个额外的honeywords(假密码).如果有黑客拿到了密码的文件,然后试图用brute froce的方式破 ...
- python 2.6 与 2.4 区别
class 要把 class config(): 改成 class config: except Exception as e # only works in python 2.4 to 2.7 tr ...
- UnixC学习小结
1.malloc工作原理: malloc使用一个数据结构(链表)维护分配空间 链表的构成:分配的空间/上一个空间数据/下一个空间/空间大小等信息. 对malloc分配的空间不要 ...
- microsoft docx document operation with Java POI library
microsoft docx document operation with Java POI library combine multiple docx document into one docu ...
- Alpha阶段项目展示
1.团队简介 韩青长 前端工程师 我是韩青长,技术小白,抱着对软工的好奇和对未来工作的憧憬选了这门课.暂时选择了测试的工作,也对开发和UI有一定兴趣.从前上帝创造了我们,现在轮到我们来创造自己的软件了 ...
- BZOJ 4568 幸运数字
题目传送门 4568: [Scoi2016]幸运数字 Time Limit: 60 Sec Memory Limit: 256 MB Description A 国共有 n 座城市,这些城市由 n-1 ...
- Samba服务器配置
Samba服务器配置流程: (1)安装samba服务器先用#rpm -ivh samba-列出与samba有关的rpm包然后选择第一个包,用tab键补齐文件名 (2)创建新用户和其密码#useradd ...
- C#直接赋值和反射赋值（无GC）的性能比较
using System; using System.Reflection; using System.Diagnostics; using System.Runtime.InteropService ...
- 快速傅里叶（FFT）的快速深度思考
关于按时间抽取快速傅里叶(FFT)的快速理论深度思考 对于FFT基本理论参考维基百科或百度百科. 首先谈谈FFT的快速何来?大家都知道FFT是对DFT的改进变换而来,那么它究竟怎样改进,它改进的思想在 ...