JQuery之基本筛选选择器简介（一部分）

来源：互联网发布：淘宝创意挂钩编辑：程序博客网时间：2024/06/05 12:19

<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="js/jquery-2.1.0.js" ></script>

更多请访问<title>JQuery对象之基本筛选器</title></head><body><div class="div"><p>第一个</p><p>第一个---</p></div><div class="div"><p>第二个</p><p>第二个---</p></div><div class="div"><p>第三个</p><p>第三个---</p></div><div class="div"><p>第四个</p><p>第四个---</p></div><div class="div"><p>第五个</p><p>第五个---</p></div><script type="text/javascript">//筛选第一个元素，格式：$("pre:first") 筛选pre的第一个元素$(".div:first").css("color","blue");//筛选最后一个元素,格式：$("pre:last") 筛选pre的最后一个元素$(".div:last").css("color","red");//筛选索引值为偶数的元素 个数：$("pre:even") 筛选pre索引值为偶数行的元素//索引值从0开始计数$(".div:even").css("background-color","aquamarine");//筛选索引值为奇数的元素 个数：$("pre:odd") 筛选pre索引值为奇数行的元素//索引值从0开始计数$(".div:odd").css("background-color","royalblue");</script><hr /><!--   -------------------     这是分界线         ----------------------                                    --><div class="div1"><p>div1第一个</p><p>div1第一个---</p></div><div class="div1"><p>div1第二个</p><p>div1第二个---</p></div><div class="div1"><p>div1第三个</p><p>div1第三个---</p></div><div class="div1"><p>div1第四个</p><p>div1第四个---</p></div><div class="div1"><p>div1第五个</p><p>div1第五个---</p></div><script type="text/javascript">//选择索引值大于2的元素。//格式：$("pre:gt(x)") 选择pre元素中索引值大于x的元素。$(".div1:gt(2)").css("background","chartreuse");//选择索引值小于2的元素。//格式：$("pre:lt(x)") 选择pre元素中索引值小于x的元素。$(".div1:lt(2)").css("background","#A52A2A");//选择索引值等于2的元素。//格式：$("pre:eq(x)") 选择pre元素中索引值等于x的元素。$(".div1:eq(2)").css("background","aqua");</script><hr /><!------------------------------------这是分界线 -----------------------------><div><input type="checkbox" name="a" value="" /><p>第一个</p></div><div><input type="checkbox" name="b" value="" /><p>第一个</p></div><div><input type="checkbox" name="c" value=""  checked="checked"/><p>第一个</p></div><script type="text/javascript">//选择input中没有checked属性的之后的紧邻的P元素的背景色。//格式$("pre:not(:X)") 选择pre元素中没有X属性的其他元素。$("input:not(:checked)+p").css("background-color","chocolate");</script></body></html>

0 0