西安php网站开发培训班,wordpress评论通知代码,智能网站价格,无法进入wordpressjQuery选择器之基本筛选选择器
很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素#xff0c;为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范#xff0c;而是jQuery自己为了开发者的便利延展出来的选择…jQuery选择器之基本筛选选择器
很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范而是jQuery自己为了开发者的便利延展出来的选择器
1、筛选选择器
筛选选择器的用法与CSS中的伪元素相似选择器用冒号“”开头通过一个列表看看基本筛选器的描述
2、注意事项
:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素根据之前匹配的元素在进一步筛选注意jQuery合集都是从0开始索引 gt是一个段落筛选从指定索引的下一个开始gt(1) 实际从2开始
3、示例代码
!DOCTYPE html
html
headmeta http-equivContent-type contenttext/html; charsetutf-8 /title基本筛选选择器/titlescript srchttp://libs.baidu.com/jquery/1.9.1/jquery.js/scriptstyle.left {width: auto;height: 120px;}.left div {width: 70px;height: 70px;padding: 5px;margin: 5px;float: left;background: #bbffaa;border: 1px solid #ccc;}.bottom {width: 800px;}.bottom div,.bottom span {display: block;width: 80px;height: 80px;margin: 5px;background: #bbffaa;float: left;font-size: 14px;}.bottom .small {width: 60px;height: 25px;font-size: 12px;background: #fab;}/style
/head
bodyh2基本筛选器/h2h3:first/:last/:even/:odd/h3div classleftdiv classdivpdiv:first/pp:even/p/divdiv classdivp:odd/p/divdiv classdivp:even/p/divdiv classdivp:odd/p/divdiv classdivp:even/p/divdiv classdivpdiv:last/pp:odd/p/div/divscript typetext/javascript//找到第一个div$(.div:first).css(color, #CD00CD);/scriptscript typetext/javascript//找到最后一个div$(.div:last).css(color, #CD00CD);/scriptscript typetext/javascript//:even 选择所引值为偶数的元素从 0 开始计数$(.div:even).css(border, 3px groove red);/scriptscript typetext/javascript//:odd 选择所引值为奇数的元素从 0 开始计数$(.div:odd).css(border, 3px groove blue);/scripth3:eq/:gt/:lt/h3div classleftdiv classaaronp:lt(3) and :eq(0)/p/divdiv classaaronp:lt(3) and :eq(1)/p/divdiv classaaronp:lt(3) and :eq(2)/p/divdiv classaaronp:eq(3)/p/divdiv classaaronp:gt(3) and :eq(4)/p/divdiv classaaronp:gt(3) and :eq(5)/p/div/divscript typetext/javascript//:eq//选择单个$(.aaron:eq(2)).css(border, 3px groove blue);/scriptscript typetext/javascript//:gt 选择匹配集合中所有索引值大于给定index参数的元素$(.aaron:eq(3)).css(border, 3px groove green);/scriptscript typetext/javascript//:gt 选择匹配集合中所有索引值大于给定index参数的元素$(.aaron:gt(3)).css(border, 3px groove red);/scriptscript typetext/javascript//:lt 选择匹配集合中所有索引值小于给定index参数的元素//与:gt相反$(.aaron:lt(3)).css(color, red);/scripth3:not/h3div classleftdivinput typecheckbox namea /pAaron/p/divdivinput typecheckbox nameb /p数据/p/divdivinput typecheckbox namec checkedchecked /p其他/p/div/divscript typetext/javascript//:not 选择所有元素去除不匹配给定的选择器的元素//选中所有紧接着没有checked属性的input元素后的p元素赋予颜色$(input:not(:checked) p).css(background-color, #CD00CD);/script
/body/html
