jQuery各种选择器详解大全
jQuery各种选择器详解大全
层次选择器：
$(function(){
$("#btn1").click(function(){
$(“body div”).css({“background”:"#123121"});
})
$("#btn2").click(function(){
$("body>div").css({"background":"#bbffaa"});
})
$("#btn3").click(function(){
$(".one + div").css({"background":"red"});
})
$("#btn4").click(function(){
$("#two ~ div").css({"background":"orange"});
})
})
h3>层次选择器.
button id=“reset”>手动重置页面元素
input type=“checkbox” id=“isreset” checked=“checked”/>点击下列按钮时先自动重置页面
input type=“button” value=“选择 body内的所有div元素.” id=“btn1”/>
input type=“button” value=“在body内,选择子元素是div的。” id=“btn2”/>
input type=“button” value=“选择 所有class为one 的下一个div元素.” id=“btn3”/>
input type=“button” value=“选择 id为two的元素后面的所有div兄弟元素.” id=“btn4”/>
基本选择器：
$(function(){
$("#btn1").click(function(){
$("#one").css({‘background’:‘yellow’,‘color’:‘green’})
})
$("#btn2").click(function(){
$(".mini").css({‘background’:’#bfa’,‘color’:‘blue’})
})
$("#btn3").click(function(){
$(“div”).css({‘background’:‘pink’,‘color’:‘orange’})
});
$("#btn4").click(function(){
$("*").css({‘background’:‘orange’})
})
$("#btn5").click(function(){
$(“span,#two”).css({‘background’:’#abcdef’})
})
});
/script>
button id=“reset”>手动重置页面元素
input type=“checkbox” id=“isreset” checked=“checked”/>点击下列按钮时先自动重置页面
h3>基本选择器.
input type=“button” value=“选择 id为 one 的元素.” id=“btn1”/>
input type=“button” value=“选择 class 为 mini 的所有元素.” id=“btn2”/>
input type=“button” value=“选择 元素名是 div 的所有元素.” id=“btn3”/>
input type=“button” value=“选择 所有的元素.” id=“btn4”/>
input type=“button” value=“选择 所有的span元素和id为two的元素.” id=“btn5”/>
br />
基本过滤选择器：
$(function(){
$(’#btn1’).click(function(){
$(“div:first”).css({“background”:“orange”});
})
$(’#btn2’).click(function(){
$(“div:last”).css({“background”:"#bbffaa"});
})
$(’#btn3’).click(function(){
$(“div:not(.one)”).css({“background”:"#aabbff"});
})
$(’#btn4’).click(function(){
$(“div:even”).css({“background”:"#bbccdd"});
})
$(’#btn5’).click(function(){
$(“div:odd”).css({“background”:“pink”});
})
$(’#btn6’).click(function(){
$(“div:eq(3)”).css({“background”:“blue”});
})
$(’#btn7’).click(function(){
$(“div:gt(3)”).css({“background”:“green”});
})
$(’#btn8’).click(function(){
$(“div:lt(3)”).css({“background”:“chocolate”});
})
$(’#btn9’).click(function(){
$(":header").css({“background”:"#abf"});
})
$(’#btn10’).click(function(){
$(":animated").css({“background”:“red”});
})
})
/script>
h3>基本过滤选择器.
button id=“reset”>手动重置页面元素
input type=“checkbox” id=“isreset” checked=“checked”/>
label for=“isreset”>点击下列按钮时先自动重置页面
input type=“button” value=“选择第一个div元素.” id=“btn1”/>
input type=“button” value=“选择最后一个div元素.” id=“btn2”/>
input type=“button” value=“选择class不为one的 所有div元素.” id=“btn3”/>
input type=“button” value=“选择索引值为偶数 的div元素.” id=“btn4”/>
input type=“button” value=“选择索引值为奇数 的div元素.” id=“btn5”/>
input type=“button” value=“选择索引值等于3的元素.” id=“btn6”/>
input type=“button” value=“选择索引值大于3的元素.” id=“btn7”/>
input type=“button” value=“选择索引值小于3的元素.” id=“btn8”/>
input type=“button” value=“选择所有的标题元素.” id=“btn9”/>
input type=“button” value=“选择当前正在执行动画的所有元素.” id=“btn10”/>
br />
内容过滤选择器：
$(function(){
//选取含有文本di的div元素.
$(’#btn1’).click(function(){
$(“div:contains(di)”).css({‘background’:‘yellow’})
});
//选取不包含子元素(或者文本元素)的div空元素
$(’#btn2’).click(function(){
$(“div:empty”).css({‘background’:‘green’})
})
//选取含有class为mini元素 的div元素.
$(’#btn3’).click(function(){
$(“div:has(.mini)”).css({‘background’:‘pink’})
})
//选取含有子元素(或者文本元素)的div元素.
$(’#btn4’).click(function(){
$(“div:parent”).css({‘background’:‘red’})
})
})
/script>
h3>内容过滤选择器.
button id=“reset”>手动重置页面元素
input type=“checkbox” id=“isreset” checked=“checked”/>点击下列按钮时先自动重置页面
input type=“button” value=“选取含有文本di的div元素.” id=“btn1”/>
input type=“button” value=“选取不包含子元素(或者文本元素)的div空元素.” id=“btn2”/>
input type=“button” value=“选取含有class为mini元素 的div元素.” id=“btn3”/>
input type=“button” value=“选取含有子元素(或者文本元素)的div元素.” id=“btn4”/>
可见选择器：
$(document).ready(function(){
$(’#reset’).click(function(){
window.location.reload();
})
$("#btn_visible").click(function(){
alert(“不可见的元素有:”+ $(‘body :hidden’).length+‘个\n’+
“其中不可见的div元素有:”+$(‘div:hidden’).length+‘个\n’+
“其中不可见的文本元素有:”+$(‘input:hidden’).length+‘个\n’
)
// $(“div:visible”).hide(1000).css({“background”:“pink”})
$(“div:visible”).hide(1000).css({“background”:“pink”})
})
$("#btn_hidden").click(function(){
$(“div:hidden”).show(slow).css({“background”:“yellow”})
})
});
//]]>
h3>可见性过滤选择器.
button id=“reset”>手动重置页面元素
input type=“button” value=“选取所有可见的div元素.” id=“btn_visible”/>
br/>
input type=“button” value=“选取所有不可见的元素.包括和