jQuery基本筛选选择器实例代码
本文实例为大家分享了jQuery基本筛选选择器的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-type"content="text/html;charset=utf-8"/>
<title></title>
<linkrel="stylesheet"href="imooc.css"type="text/css">
<scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>基本筛选器</h2>
<h3>:first/:last/:even/:odd</h3>
<divclass="left">
<divclass="div">
<p>div:first</p>
<p>:even</p>
</div>
<divclass="div">
<p>:odd</p>
</div>
<divclass="div">
<p>:even</p>
</div>
<divclass="div">
<p>:odd</p>
</div>
<divclass="div">
<p>:even</p>
</div>
<divclass="div">
<p>div:last</p>
<p>:odd</p>
</div>
</div>
<scripttype="text/javascript">
//找到第一个div
$(".div:first").css("color","#CD00CD");
</script>
<scripttype="text/javascript">
//找到最后一个div
$(".div:last").css("color","#CD00CD");
</script>
<scripttype="text/javascript">
//:even选择所引值为偶数的元素，从0开始计数
$(".div:even").css("border","3pxgroovered");
</script>
<scripttype="text/javascript">
//:odd选择所引值为奇数的元素，从0开始计数
$(".div:odd").css("border","3pxgrooveblue");
</script>
<h3>:eq/:gt/:lt</h3>
<divclass="left">
<divclass="aaron">
<p>:lt(3)</p>
</div>
<divclass="aaron">
<p>:lt(3)</p>
</div>
<divclass="aaron">
<p>:eq(2)</p>
</div>
<divclass="aaron">
</div>
<divclass="aaron">
<p>:gt(3)</p>
</div>
<divclass="aaron">
<p>:gt(3)</p>
</div>
</div>
<scripttype="text/javascript">
//:eq
//选择单个
$(".aaron:eq(2)").css("border","3pxgrooveblue");
</script>
<scripttype="text/javascript">
//:gt选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)").css("border","3pxgrooveblue");
</script>
<scripttype="text/javascript">
//:lt选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)").css("color","#CD00CD");
</script>
<h3>:not</h3>
<divclass="left">
<div>
<inputtype="checkbox"name="a"/>
<p>Aaron</p>
</div>
<div>
<inputtype="checkbox"name="b"/>
<p>慕课</p>
</div>
<div>
<inputtype="checkbox"name="c"checked="checked"/>
<p>其他</p>
</div>
</div>
<scripttype="text/javascript">
//:not选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
$("input:not(:checked)+p").css("background-color","#CD00CD");
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。