jquery选择器的分类
Posted newcityboy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery选择器的分类相关的知识，希望对你有一定的参考价值。
一、基本选者器
<script type="text/javascript">
$(function ()
// <input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
$("#b1").click(function ()
$("#one").css("backgroundColor","pink");
)
// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
$("#b2").click(function ()
$("div").css("backgroundColor","red");
)
// <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
$("#b3").click(function ()
$(".mini").css("backgroundColor","pink");
)
// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
$("#b4").click(function ()
$("span,#two").css("backgroundColor","blue");
)
);
</script>
二、属性选择器
<script type="text/javascript">
$(function ()
// <input type="button" value="保存" class="mini" name="ok" class="mini" />
// <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
$("#b1").click(function ()
$("div[title]").css("backgroundColor","pink");
) ;
// <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
$("#b2").click(function ()
$("div[title=‘test‘]").css("backgroundColor","blue");
) ;
// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
$("#b3").click(function ()
$("div[title!=‘test‘]").css("backgroundColor","pink");
) ;
// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
$("#b4").click(function ()
$("div[title^=‘te‘]").css("backgroundColor","pink");
) ;
// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
$("#b5").click(function ()
$("div[title$=‘est‘]").css("backgroundColor","pink");
) ;
// <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
$("#b6").click(function ()
$("div[title*=‘es‘]").css("backgroundColor","pink");
) ;
// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
$("#b7").click(function ()
$("div[id][title*=‘es‘]").css("backgroundColor","pink");
) ;
)
</script>
三、层级选择器
<script type="text/javascript">
$(function ()
// <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
$("#b1").click(function ()
$("body div").css("backgroundColor","yellow");
)
// <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
$("#b2").click(function ()
$("body > div").css("backgroundColor","pink");
)
)
</script>
四、过滤选择器
<script type="text/javascript">
$(function ()
// <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
$("#b1").click(function ()
$("div:first").css("backgroundColor","pink");
)
// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
$("#b2").click(function ()
$("div:last").css("backgroundColor","pink");
)
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
$("#b3").click(function ()
$("div:not(.one)").css("backgroundColor","pink");
)
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
$("#b4").click(function ()
$("div:even").css("backgroundColor","pink");
)
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
$("#b5").click(function ()
$("div:odd").css("backgroundColor","pink");
)
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
$("#b6").click(function ()
$("div:gt(3)").css("backgroundColor","pink");
)
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
$("#b7").click(function ()
$("div:eq(3)").css("backgroundColor","pink");
)
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
$("#b8").click(function ()
$("div:lt(3)").css("backgroundColor","pink");
)
// <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
$("#b9").click(function ()
$(":header").css("backgroundColor","pink");
)
)
</script>
五、表单过滤选择器
<script type="text/javascript">
$(function ()
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
$("#b1").click(function ()
$("input[type=‘text‘]:enabled").val("aaaa")
);
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function ()
$("input[type=‘text‘]:disabled").val("aaaa")
);
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
$("#b3").click(function ()
alert($("input[type=‘checkbox‘]:checked").length);
);
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
$("#b4").click(function ()
alert($("#job > option:selected").length);
);
)
</script>
以上是关于jquery选择器的分类的主要内容，如果未能解决你的问题，请参考以下文章