jQuery学习笔记——jQuery选择器详解种类与方法
jQuery的选择器根据页面中元素的不同，可以分为基本选择器、层次选择器、表单选择器、过滤选择器，而过滤选择器又有简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性选择器6种。(图片序号与文章序号不一致，以文章序号为准)
一、基本选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
.clsFrame{width:300px;height:100px}
.clsFrame div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px;}
.clsOne{background-color:#EEE}
</style>
<body>
<script type="text/javascript">
$(function(){
$('#divOne').css('display','block');//选择id为divOne的标签
});
$(function(){
$('div span').css('display','block');//选择div中的所有span标签
});
$(function(){
$('.clsFrame').css('display','block');//选择class为clsFrame的标签
});
$(function(){
$('*').css('display','block');//选择所有的内容
});
$(function(){
$('#divOne,span').css('display','block');//选择id为divOne和标签为span的所有标签
});
</script>
<div class="clsFrame">
<div id="divOne">ID</div>
<div class="clsOne">CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>
二、层次选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div,span{float:left;border:solid 1px #ccc;margin:8px;display:none}
.clsFraA{width:65px;height:65px}
.clsFraP{width:45px;height:45px;background-color:#eee}
.clsFraC{width:25px;height:25px;background-color:#ddd}
.a{width:15px;height:15px;background-color:#bbb}
</style>
<body>
<script type="text/javascript">
$(function(){
$('#divMid').css('display','block');
$('div span').css('display','block');//选择div中的所有span标签
});
$(function(){
$('#divMid').css('display','block');
$('div>span').css('display','block');//选择div中的子标签（div中第一层span标签）
});
$(function(){
$('#divMid+div').css('display','block');//选择id为divMid的下一个div标签(这里的div必须与该ID标签相邻)
$('#divMid').next().css('display','block');//选择该ID后的一个标签（任意）
});
$(function(){
$('#divMid~div').css('display','block');//选择id 为divMid后边所有的div标签
$('#divMid').nextAll().css('display','block');//选择该ID后的所有标签
});
$(function(){
$('#divMid').siblings('div').css('display','block');//选择该ID相邻的所有标签
});
</script>
<div class="clsFraA">Left</div>
<div class="clsFraA" id="divMid">
<span class="clsFraP" id="Span1">Span1
<span class="clsFraC" id="Span2">Span2</span>
</span>
</div>
<span class="a">Test</span>
<div class="clsFraA">Right_1</div>
<div class="clsFraA">Right_2</div>
</body>
</html>
三、表单选择器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
form{width:241px}
textarea,select,button,input,span{display:none}
.btn{border:#666 solid 1px;padding:2px;width:60px;filter:progid:DXImageTransform.Mircrosoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D0);}
.txt{border:#666 1px solid;padding:3px}
.img{padding:2px;border:#ccc 1px solid}
.div{border:solid 1px solid;background-color:#eee;padding:5px}
</style>
<body>
<script type="text/javascript">
$(function(){
$('#form1 div').html('表单共找出Input类型元素。。。'+$('#form1 :input').length);//选择子标签
$('#form1 div').addClass('div');
});
$(function(){
$('#form1 :text').show(3000);//选择form中的类型为text的标签
});
$(function(){
$('#form1 :password').show(3000);
});
$(function(){
$('#form1 :radio').show(3000);
$('#form1 #Span1').show(3000);
});
$(function(){
$('#form1 :image').show(3000);
});
</script>
<form method="post" action="" id="form1">
<textarea name="" rows="" cols="" class="txt">TextArea</textarea>
<select name="">
<option value="0">Item 0</option>
</select>
<input type="text" name="" value="Text" class="txt" />
<input type="password" name="" value="Password" class="txt" />
<input type="radio" name=""/><span id="Span1">Radio</span>
<input type="checkbox" name="" />
<span id="Span2">CheckBox</span>
<input type="submit" name="" value="submit" class="btn" />
<input type="image" name="" title="Image" src="http://img.baidu.com/img/logo-news.gif" class="img" />
<input type="reset" value="Reset" class="btn"/>
<input type="button" value="Button" onclick="" class="btn" />
<input type="file" name="" title="File" class="txt" />
<div id="divShow"></div>
</form>
</body>
</html>
四、过滤器选择器：
1、简单过滤选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div{width:241px;height:83px;border:solid 1px #eee}
h1{font-size:13px;}
ul{list-style-type:none;padding:0px}
.DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee}
.GetFocus{width:58px;border:solid 1px #666;background-color:#eee}
#spanMove{width:238px;height:23px;line-height:23px}
</style>
<body>
<script type="text/javascript">
$(function(){
$('li:first').addClass('GetFocus');//第一个
});
$(function(){
$('li:last').addClass('GetFocus');//最后一个
});
$(function(){
$('li:not(.NotClass)').addClass('GetFocus');//非
});
$(function(){
$('li:even').addClass('GetFocus');//取偶数，从0开始
});
$(function(){
$('li:odd').addClass('GetFocus');//取奇数，从0开始
});
$(function(){
$('li:eq(2)').addClass('GetFocus');//等于2,从0开始
});
$(function(){
$('li:gt(1)').addClass('GetFocus');//大于1
});
$(function(){
$('li:lt(2)').addClass('GetFocus');//小于2
});
$(function(){
$('div h1').css('width','238');
$(':header').addClass('GetFocus');//标题类元素
});
$(function(){
animateIt();
$('#spnMove:animated').addClass('GetFocus');//增加动画效果元素
});
function animateIt(){//动画函数
$('#spnMove').slideToggle('slow',animateIt);
}
</script>
<div>
<h1>基本过滤选择器</h1>
<ul>
<li class="DefClass">Item 0</li>
<li class="DefClass">Item 1</li>
<li class="NotClass">Item 2</li>
<li class="DefClass">Item 3</li>
</ul>
<span id="spnMove">Span Move</span>
</div>
</body>
</html>
2、内容过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}
span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee}
</style>
<body>
<script type="text/javascript">
$(function(){
$('div:contains("a")').css('display','block');//给定文本中有“A”
});
$(function(){
$('div:empty').css('display','block');//空div的
});
$(function(){
$('div:has(span)').css('display','block');//div中有子标签是span的
});
$(function(){
$('div:parent').css('display','block');//含有子标签或文本的
});
</script>
<div>ABCD</div>
<div><span></span></div>
<div>EFaH</div>
<div></div>
</body>
</html>
3、可见性过滤选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div,span{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px}
.GetFocus{border:solid 1px #666;background-color:#eee}
</style>
<body>
<script type="text/javascript">
$(function(){
$('span:hidden').show();
$('div:visible').addClass('GetFocus');
});
$(function(){
$('span:hidden').show().addClass('GetFocus');
});
</script>
<span style="display:none">Hidden</span>
<div>Visible</div>
</body>
</html>
4、属性过滤选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}
</style>
<body>
<script type="text/javascript">
$(function(){
$('div[id]').show(3000);//选出div中包含ID的标签
});
$(function(){
$('div[title="A"]').show(3000);//选出div中title是A的标签
});
$(function(){
$('div[title!="A"]').show(3000);//选出div中title不是A的标签
});
$(function(){
$('div[title^="A"]').show(3000);//选出div中的title是以A开头的
});
$(function(){
$('div[title$="C"]').show(3000);//选出id中title是以C为结尾的
});
$(function(){
$('div[title*="B"]').show(3000);//选出div中title中有B的
});
$(function(){
$('div[id="divAB"][title*="B"]').show(3000);//选出div中ID为divAB并且title中含有B
});
</script>
<div id="divID">ID</div>
<div title="A">Title A</div>
<div id="divAB" title="AB">ID <br />Title AB</div>
<div title="ABC">Title ABC</div>
</body>
</html>
5、子元素过滤选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
ul{width:250px;list-style-type:none;padding:0px}
ul li{height:23px;width:60px;line-height:23px;float:left;border:solid 1px #eee;border-bottom:solid 1px #eee;margin-bottom:5px}
.GetFocus{width:58px;border:solid 1px #666;background-color:#eee}
</style>
<body>
<script type="text/javascript">
$(function(){
$('li:nth-child(2)').addClass('GetFocus');//li中第二个字子元素 :nth-child(eq/even/odd/index)
});
$(function(){
$('li:first-child').addClass('GetFocus');//li中第一个子元素
});
$(function(){
$('li:last-child').addClass('GetFocus');//li中最后一个子元素
});
$(function(){
$('li:only-child').addClass('GetFocus');//li中有唯一一个元素
});
</script>
<ul>
<li>Item 1-0</li>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul>
<li>Item 2-0</li>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
</ul>
<ul>
<li>Item 3-0</li>
</ul>
</body>
</html>
6、表单对象属性过滤选择器：
<!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div{display:none}
select{height:65px}
.clsIpt{width:100px;padding:3px}
.GetFocus{border:solid 1px #666 ;background-color:#eee}
</style>
<body>
<script type="text/javascript">
$(function(){
$('#divA').show(3000);
$('#form1 input:enabled').addClass('GetFocus');//input标签中enabled
});
$(function(){
$('#divA').show(3000);
$('#form1 input:disabled').addClass('GetFocus');
});
$(function(){
$('#divB').show(3000);
$('#divB input:checked').addClass('GetFocus');//input中的checked
});
$(function(){
$('#divC').show(3000);
$('#Span2').html('选中项是'+$('select option:selected').text());//select中option的selected项
});
</script>
<form method="post" action="" id="form1" style="width:241px">
<div id="divA">
<input type="text" name="" class="clsIpt" value="可用文本" />
<input type="text" name="" class="clsIpt" disabled="disabled" value="不可用文本框" />
</div>
<div id="divB">
<input type="checkbox" name="" value="1" checked="checked" />选中
<input type="checkbox" name="" value="0" />未选中
</div>
<div id="divC">
<select name="">
<option value="0">Item 0</option>
<option value="1" selected="selected">Item 1</option>
<option value="2">Item 2</option>
<option value="3" selected="selected">Item 3</option>
</select>
<span id="Span2"></span>
</div>
</form>
</body>
</html>
