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>层次选择器.</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>基本选择器.</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 /><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>基本过滤选择器.</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 /><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>内容过滤选择器.</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>可见性过滤选择器.</h3
button id=“reset”>手动重置页面元素
input type=“button” value=“选取所有可见的div元素.” id=“btn_visible”/>
br/>
input type=“button” value=“选取所有不可见的元素.包括<input type=‘hidden’/>和<div style=‘display:none;’>.” id=“btn_hidden”/>
br /><br /
表单对象的属性选择器：
$(function(){
$("#btn3").click(function(){
setTimeout(function(){
countChecked();
$(“select”).change()
},0)
})
$("#btn1").click(function(){
$("#form1 input:enabled").val(‘这里发生变化了’)
})
$("#btn2").click(function(){
$("#form1 input:disabled").val(‘这里的值你看看变化了’)
})
function countChecked(){
var n = $(“input:checked”).length;
$(“div”).eq(0).html(""+n+“个被选中”)
}
countChecked();
//操作下拉列表被选中的
$(“select”).change(function(){
var str = “”;
$(“select :selected”).each(function(){
str += $(this).text()+","
})
$(“div”).eq(1).html(“你选中的是:”+str+"/strong>")
})
})
表单对象属性过滤选择器.
form id=“form1” action="#">
button type=“reset” id=“btn3”>重置所有表单元素
br /><br /
button id=“btn1”>对表单内 可用input 赋值操作.
button id=“btn2”>对表单内 不可用input 赋值操作.
子元素过滤选择器：
$(function(){
$("#btn1").click(function(){
$(".one :nth-child(2)").css({“background”:“pink”})
});
$("#btn2").click(function(){
$(".one :first-child").css({“background”:“green”})
});
$("#btn3").click(function(){
$(".one :last-child").css({“background”:“yellow”})
});
$("#btn4").click(function(){
$(".one :only-child").css({“background”:“orange”})
});
})
button id=“reset”>手动重置页面元素
input type=“checkbox” id=“isreset” checked=“checked”/>
h3>子元素过滤选择器.</h3
input type=“button” value=“选取每个class为one的div父元素下的第2个子元素.” id=“btn1”/>
input type=“button” value=“选取每个class为one的div父元素下的第一个子元素.” id=“btn2”/>
input type=“button” value=“选取每个class为one的div父元素下的最后一个子元素.” id=“btn3”/>
input type=“button” value=“如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素.” id=“btn4”/>
属性选择器：
$(document).ready(function(){
//选取含有 属性title 的div元素.
$("#btn1").click(function(){
$(“div[title]”).css({“background”:“red”})
})
//选取 属性title值等于 test 的div元素.
$("#btn2").click(function(){
$(“div[title=test]”).css({“background”:"#bbffaa"})
})
//选取 属性title值不等于 test 的div元素.
$("#btn3").click(function(){
$(“div[title!=test]”).css({“background”:"#bbffcc"})
})
//选取 属性title值 以 te 开始 的div元素.
$("#btn4").click(function(){
$(“div[title^=te]”).css({“background”:"#bbffee"})
})
//选取 属性title值 以 est 结束 的div元素.
$("#btn5").click(function(){
( " d i v [ t i t l e ("div[title ("div[title=est]").css({“background”:"#bbffff"});
})
//选取 属性title值 含有 es 的div元素.
$("#btn6").click(function(){
$(“div[title*=es]”).css({“background”:“orange”});
})
//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
$("#btn7").click(function(){
$(“div[id][title*=es]”).css({“background”:“blue”});
})
});
下面的标签括号被我删了，因为不删的话系统显示不了
button id=“reset”>手动重置页面元素</button
input type=“checkbox” id=“isreset” checked=“checked”/>
h3> 属性选择器.</h3
input type=“button” value=“选取含有 属性title 的div元素.” id=“btn1”/>
input type=“button” value=“选取 属性title值等于“test”的div元素.” id=“btn2”/>
input type=“button” value=“选取 属性title值不等于“test”的div元素(没有属性title的也将被选中).” id=“btn3”/>
input type=“button” value=“选取 属性title值 以“te”开始 的div元素.” id=“btn4”/>
input type=“button” value=“选取 属性title值 以“est”结束 的div元素.” id=“btn5”/>
input type=“button” value=“选取 属性title值 含有“es”的div元素.” id=“btn6”/>
input type=“button” value=“组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素.” id=“btn7”/>
表单选择器：
$(function(){
var alltext = $("#form1 :text");
var allpassword = $("#form1 :password");
var allradio = $("#form1 :radio");
var allcheckbox = $("#form1 :checkbox");
var allsubmit = $("#form1 :submit");
var allimage = $("#form1 :image");
var allreset = $("#form1 :reset");
var allbutton = $("#form1 :button");//button 按钮 type=button 全部被选中
var allfile = $("#form1 :file");
var allhidden = $("#form1 :hidden");//type = hidden display none 都被匹配到
var allselect = $("#form1 select");
var alltextarea = $("#form1 textarea");
$(‘div’).append(“有”+alltext.length+"个(:text)元素
")
.append(“有”+allpassword.length+"个(:password)元素
")
.append(“有”+allradio.length+"个(:radio)元素
")
.append(“有”+allcheckbox.length+"个(:checkbox)元素
")
.append(“有”+allsubmit.length+"个(:submit)元素
")
.append(“有”+allimage.length+"个(:image)元素
")
.append(“有”+allreset.length+"个(:reset)元素
")
.append(“有”+allbutton.length+"个(:button)元素
")
.append(“有”+allfile.length+"个(:file)元素
")
.append(“有”+allhidden.length+"个(:hidden)元素
")
.append(“有”+allselect.length+"个(:select)元素
")
.append(“有”+alltextarea.length+"个(:textarea)元素
")
})
123
12
Option
Button
<meta charset="utf-8">
<style type="text/css">
#menu{
width: 300px;
}
.parents{
background: #666;
color: #fff;
cursor: pointer;
}
.highlight{
color: #fff;
background: green;
}
div{
padding:0;
}
div a {
background: #888;
display: none;
float: left;
width:300px;
}
手风琴导航栏：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".parents").click(function(){ //绑定一个点击事件
$(this).addClass(‘highlight’).children(‘a’).show().end() //给所有a标签设置为高亮
.siblings().removeClass(‘highlight’).children(‘a’).hide() //让同级其他元素移除高亮并将其他a标签隐藏。
})
})
<div id="menu">
<div class="parents">
web
<a href="#" >python</a>
<a href="#">php</a>
<a href="#">.net</a>
<a href="#">j2ee</a>
<div class="parents">
服务器
<a href="#">windows server 2012</a>
<a href="#">RedHat</a>
<a href="#">Debian</a>
<div class="parents">
嵌入式
<a href="#">c</a>
<a href="#">c++</a>
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
