jQuery基本筛选选择器实例代码
投稿:lijiao
这篇文章主要为大家详细介绍了jQuery基本筛选选择器实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
link rel="stylesheet" href="imooc.css" type="text/css"
script src="jquery/1.9.1/jquery.js" /script
/head
body
h2 基本筛选器 /h2
h3 :first/:last/:even/:odd /h3
div
div
p div:first /p
p :even /p
/div
div
p :odd /p
/div
div
p :even /p
/div
div
p :odd /p
/div
div
p :even /p
/div
div
p div:last /p
p :odd /p
/div
/div
script type="text/javascript"
//找到第一个div
$(".div:first").css("color", "#CD00CD");
/script
script type="text/javascript"
//找到最后一个div
$(".div:last").css("color", "#CD00CD");
/script
script type="text/javascript"
//:even 选择所引值为偶数的元素,从 0 开始计数
$(".div:even").css("border", "3px groove red");
/script
script type="text/javascript"
//:odd 选择所引值为奇数的元素,从 0 开始计数
$(".div:odd").css("border", "3px groove blue");
/script
//:gt 选择匹配集合中所有索引值大于给定index参数的元素
$(".aaron:gt(3)").css("border", "3px groove blue");
/script
script type="text/javascript"
//:lt 选择匹配集合中所有索引值小于给定index参数的元素
//与:gt相反
$(".aaron:lt(2)").css("color", "#CD00CD");
/script
h3 :not /h3
div
div
input type="checkbox" name="a" /
p Aaron /p
/div
div
input type="checkbox" name="b" /
p 慕课 /p
/div
div
input type="checkbox" name="c" checked="checked" /
p 其他 /p
/div
/div
script type="text/javascript"
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素,赋予颜色
$("input:not(:checked) + p").css("background-color", "#CD00CD");
/script
/body
/html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。