wordpress中文主题站,阳江网红桥,网络商城建设费用,排名优化关键词jQuery选择器之内容筛选选择器
基本筛选选择器针对的都是元素DOM节点#xff0c;如果我们要通过内容来过滤#xff0c;jQuery也提供了一组内容筛选选择器#xff0c;当然其规则也会体现在它所包含的子元素或者文本内容上
内容过滤器描述如下表#xff1a;
注意事项如果我们要通过内容来过滤jQuery也提供了一组内容筛选选择器当然其规则也会体现在它所包含的子元素或者文本内容上
内容过滤器描述如下表
注意事项 :contains与:has都有查找的意思但是contains查找包含“指定文本”的元素has查找包含“指定元素”的元素 如果:contains匹配的文本包含在元素的子元素中同样认为是符合条件的。 :parent与:empty是相反的两者所涉及的子元素包括文本节点
代码示例
!DOCTYPE html
htmlheadmeta 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: 100px;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;}.ul01 li{padding:10px;margin:10px;}.li02{font-size:24px;}/style
/headbody h2内容筛选选择器/h2h3:contains/:has/h3div classleftdiv classdivp:contains1111/p/divdiv classdivp:contains2222/p/divdiv classdivpspan:has3333/span/p/divdiv classdivp:contains4444/p/div/divscript typetext/javascript//查找上面所有标题元素包括h1h2h3...不包括后面的标题元素//并且设置颜色$(:header).css(color,red);/scriptscript typetext/javascript//查找所有classdiv中DOM元素中包含:contains的元素节点//并且设置颜色$(.div:contains(:contains)).css(color, red);/scriptscript typetext/javascript//查找所有classdiv中DOM元素中包含span的元素节点//并且设置颜色$(.div:has(span)).css(color, blue);/scripth3:parent/:empty/h3div classleftdiv classaarona:parent/a/divdiv classaarona:parent/a/divdiv classaarona/a/divdiv classaarona/a/div/divscript typetext/javascript//选择所有包含子元素或者文本的a元素//增加一个蓝色的边框$(a:parent).css(border, 3px groove blue);/scriptscript typetext/javascript//找到a元素下面的所有空节点(没有子元素)//增加一段文本与边框$(a:empty).text(:empty).css(border, 3px groove red); /script
/body
/html
