您的位置：首页 > Web前端 > JQuery

【锋利的JQuery】0x02 JQuery选择器

2012-07-09 00:12 309 查看 
<!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>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/assist.js"></script>
<script type="text/javascript">
//基本选择器
$(document).ready(function() {
//选择 id为 one 的元素
$("#btn1-1").click(function() {
$("#one").css("background", "#368E01");
});
//选择 class 为 mini 的所有元素.
$("#btn1-2").click(function() {
$(".mini").css("background", "#368E01");
});
//选择 元素名是 div 的所有元素.
$("#btn1-3").click(function() {
$("div").css("background", "#368E01");
});
//选择 所有的元素.
$("#btn1-4").click(function() {
$("*").css("background", "#368E01");
});
//选择 所有的span元素和id为two的元素.
$("#btn1-5").click(function() {
$("span,#two").css("background", "#368E01");
});
});
//层次选择器
$(document).ready(function() {
//选择 body内的所有div元素.
$("#btn2-1").click(function() {
$("body div").css("background", "#368E01");
});
//在body内,选择子元素是div的。
$("#btn2-2").click(function() {
$("body>div").css("background", "#368E01");
});
//选择 所有class为one 的下一个div元素.
$("#btn2-3").click(function() {
$(".one+div").css("background", "#368E01");
});
//选择 id为two的元素后面的所有div兄弟元素.
$("#btn2-4").click(function() {
$("#two~div").css("background", "#368E01");
});
});
//基本过滤选择器
$(document).ready(function() {
//选择第一个div元素.
$("#btn3-1").click(function() {
$("div:first").css("background", "#368E01")
});
//选择最后一个div元素.
$("#btn3-2").click(function() {
$("div:last").css("background", "#368E01")
});
//选择class不为one的 所有div元素.
$("#btn3-3").click(function() {
$("div:not('.one')").css("background", "#368E01")
});
//选择索引值为偶数 的div元素.
$("#btn3-4").click(function() {
$("div:even").css("background", "#368E01")
});
//选择索引值为奇数 的div元素.
$("#btn3-5").click(function() {
$("div:odd").css("background", "#368E01")
});
//选取索引值等于3的元素
$("#btn3-6").click(function() {
$("div:eq(3)").css("background", "#368E01")
});
//选择索引值大于3的元素.
$("#btn3-7").click(function() {
$("div:gt(3)").css("background", "#368E01")
});
//选择索引值小于3的元素.
$("#btn3-8").click(function() {
$("div:lt(3)").css("background", "#368E01")
});
//选择所有的标题元素.
$("#btn3-9").click(function() {
$(":header").css("background", "#368E01")
});
//选择当前正在执行动画的所有元素.
$("#btn3-10").click(function() {
$(":animated").css("background", "#368E01")
});
});
//内容过滤选择器
$(document).ready(function() {
//选取含有文本“di”的div元素.
$("#btn4-1").click(function() {
$("div:contains('di')").css("background", "#368E01");
});
//选取不包含子元素(或者文本元素)的div空元素.
$("#btn4-2").click(function() {
$("div:empty").css("background", "#368E01");
});
//选取含有class为mini元素 的div元素.
$("#btn4-3").click(function() {
$("div:has('.mini')").css("background", "#368E01");
});
//选取含有子元素(或者文本元素)的div元素.
$("#btn4-4").click(function() {
$("div:parent").css("background", "#368E01");
});
});
//可见性过滤选择器
$(document).ready(function() {
//选取所有可见的div元素.
$("#btn_visible").click(function() {
$("div:visible").css("background", "#368E01");
});
//选取所有不可见的元素.
$("#btn_hidden").click(function() {
$("div:hidden").show(2000).css("background", "#368E01");
});
});
//属性选择器
$(document).ready(function() {
//选取含有 属性title 的div元素.
$("#btn6-1").click(function() {
$("div[title]").css("background", "#368E01");
});
//选取 属性title值等于“test”的div元素.
$("#btn6-2").click(function() {
$("div[title='test']").css("background", "#368E01");
});
//选取 属性title值不等于“test”的div元素(没有属性title的也将被选中).
$("#btn6-3").click(function() {
$("div[title!='test']").css("background", "#368E01");
});
//选取 属性title值 以“te”开始 的div元素.
$("#btn6-4").click(function() {
$("div[title^='test']").css("background", "#368E01");
});
//选取 属性title值 以“est”结束 的div元素.
$("#btn6-5").click(function() {
$("div[title$='test']").css("background", "#368E01");
});
//选取 属性title值 含有“es”的div元素.
$("#btn6-6").click(function() {
$("div[title*='test']").css("background", "#368E01");
});
//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素.
$("#btn6-7").click(function() {
$("div[id][title*='es']").css("background", "#368E01");
});
});
//子元素过滤选择器.
$(document).ready(function() {
//选取每个class为one的div父元素下的第2个子元素.
$("#btn7-1").click(function() {
//div.one :nth-child(2)中间添加空格  若未添加则无法显示
$("div.one :nth-child(2)").css("background", "#368E01");
});
//选取每个class为one的div父元素下的第一个子元素.

$("#btn7-2").click(function() {
$("div.one :first-child").css("background", "#368E01");
});
//选取每个class为one的div父元素下的最后一个子元素.
$("#btn7-3").click(function() {
$("div.one :last-child").css("background", "#368E01");
});
//如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素.
$("#btn7-4").click(function() {
$("div.one :only-child").css("background", "#368E01");
});
});

</script>
</head>
<body>
<!--
<h3>基本选择器</h3>
<input type="button" value="选择 id为 one 的元素." id="btn1-1"/>
<input type="button" value="选择 class 为 mini 的所有元素." id="btn1-2"/>
<input type="button" value="选择 元素名是 div 的所有元素." id="btn1-3"/>
<input type="button" value="选择 所有的元素." id="btn1-4"/>
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn1-5"/>
<br/>
<br/>

<h3>层次选择器</h3>
<input type="button" value="选择 body内的所有div元素." id="btn2-1"/>
<input type="button" value="在body内,选择子元素是div的。" id="btn2-2"/>
<input type="button" value="选择 所有class为one 的下一个div元素." id="btn2-3"/>
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn2-4"/>
<br/>
<br/>

<h3>基本过滤选择器</h3>
<input type="button" value="选择第一个div元素." id="btn3-1"/>
<input type="button" value="选择最后一个div元素." id="btn3-2"/>
<input type="button" value="选择class不为one的 所有div元素." id="btn3-3"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btn3-4"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btn3-5"/>
<input type="button" value="选择索引值等于3的元素." id="btn3-6"/>
<input type="button" value="选择索引值大于3的元素." id="btn3-7"/>
<input type="button" value="选择索引值小于3的元素." id="btn3-8"/>
<input type="button" value="选择所有的标题元素." id="btn3-9"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btn3-10"/>
<br/>
<br/>

<h3>内容过滤选择器</h3>
<input type="button" value="选取含有文本“di”的div元素." id="btn4-1"/>
<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn4-2"/>
<input type="button" value="选取含有class为mini元素 的div元素." id="btn4-3"/>
<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4-4"/>
<br/>
<br/>

<h3>可见性过滤选择器</h3>
<input type="button" value="选取所有可见的div元素." id="btn_visible"/>
<input type="button" value="选取所有不可见的元素.包括<input type='hidden'/>和<div style='display:none;'>." id="btn_hidden"/>
<br/>
<br/>

<h3> 属性选择器.</h3>
<input type="button" value="选取含有 属性title 的div元素." id="btn6-1"/>
<input type="button" value="选取 属性title值等于“test”的div元素." id="btn6-2"/>
<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn6-3"/>
<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn6-4"/>
<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn6-5"/>
<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6-6"/>
<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn6-7"/>
<br/>
<br/>
-->

<h3>子元素过滤选择器.</h3>
<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn7-1"/>
<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn7-2"/>
<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn7-3"/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn7-4"/>
<br/>
<br/>
<!---->
<!--1号元素开始-->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">
class为mini
</div>
</div>
<!--1号元素结束-->
<!--2号元素开始-->
<div class="one"  id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini"  title="other">
class为mini,title为other
</div>
<div class="mini"  title="test">
class为mini,title为test
</div>
</div>
<!--2号元素结束-->
<!--3号元素开始-->
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini"></div>
</div>
<!--3号元素结束-->
<!--4号元素开始-->
<div class="one">
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini"  title="tesst">
class为mini,title为tesst
</div>
</div>
<!--4号元素结束-->
<!--5号元素开始  元素隐含-->
<div style="display:none;"  class="none">
style的display为"none"的div
</div>
<!--5号元素结束  元素隐含-->
<!--6号元素开始  元素隐藏-->
<div class="hide">
class为"hide"的div
</div>
<!--6号元素结束  元素隐藏-->
<!--7号元素开始-->
<div>
包含input的type为"hidden"的div
<input type="hidden" size="8"/>
</div>
<!--7号元素结束-->
<!--8号元素开始-->
<span id="mover">正在执行动画的span元素.</span>
<!--8号元素结束-->
</body>
</html>

附：assist.js

$(document).ready(function() {
//给id为mover的元素添加动画
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}

animateIt();
})
style.css

div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}


JQuery选择器：

选择器实例选取
*$("*")所有元素
#id$("#lastname")id="lastname" 的元素
.class$(".intro")所有 class="intro" 的元素
element$("p")所有 <p> 元素
.class.class$(".intro.demo")所有 class="intro" 且 class="demo" 的元素
:first$("p:first")第一个 <p> 元素
:last$("p:last")最后一个 <p> 元素
:even$("tr:even")所有偶数 <tr> 元素
:odd$("tr:odd")所有奇数 <tr> 元素
:eq(index)$("ul li:eq(3)")列表中的第四个元素（index 从 0 开始）
:gt(no)$("ul li:gt(3)")列出 index 大于 3 的元素
:lt(no)$("ul li:lt(3)")列出 index 小于 3 的元素
:not(selector)$("input:not(:empty)")所有不为空的 input 元素
:header$(":header")所有标题元素 <h1> - <h6>
:animated所有动画元素
:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
:empty$(":empty")无子（元素）节点的所有元素
:hidden$("p:hidden")所有隐藏的 <p> 元素
:visible$("table:visible")所有可见的表格
s1,s2,s3$("th,td,.intro")所有带有匹配选择的元素
[attribute]$("[href]")所有带有 href 属性的元素
[attribute=value]$("[href='#']")所有 href 属性的值等于 "#" 的元素
[attribute!=value]$("[href!='#']")所有 href 属性的值不等于 "#" 的元素
[attribute$=value]$("[href$='.jpg']")所有 href 属性的值包含以 ".jpg" 结尾的元素
:input$(":input")所有 <input> 元素
:text$(":text")所有 type="text" 的 <input> 元素
:password$(":password")所有 type="password" 的 <input> 元素
:radio$(":radio")所有 type="radio" 的 <input> 元素
:checkbox$(":checkbox")所有 type="checkbox" 的 <input> 元素
:submit$(":submit")所有 type="submit" 的 <input> 元素
:reset$(":reset")所有 type="reset" 的 <input> 元素
:button$(":button")所有 type="button" 的 <input> 元素
:image$(":image")所有 type="image" 的 <input> 元素
:file$(":file")所有 type="file" 的 <input> 元素
:enabled$(":enabled")所有激活的 input 元素
:disabled$(":disabled")所有禁用的 input 元素
:selected$(":selected")所有被选取的 input 元素
:checked$(":checked")所有被选中的 input 元素
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航