ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> Javascript教程 >> 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器(1/3)

来源:网络整理     时间:2016-08-26     关键词:

本篇文章主要介绍了" 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器",主要涉及到方面的内容,对于Javascript教程感兴趣的同学可以参考一下: ×目录[1]contains [2]empty [3]parent[4]has[5]not前面的话  本文介绍过滤选择器中的内容选择器。内容选择器的...

×

目录
[1]contains [2]empty [3]parent[4]has[5]not

前面的话

  本文介绍过滤选择器中的内容选择器。内容选择器的过滤规则主要体现在它所包含的子元素或文本内容上

:contains(text)

  :contains(text)选择器选择含有文本内容为'text'的元素,返回集合元素

//返回所有文本内容包含'test'的元素$(':contains("test")')

//返回所有文本内容包含'test'的span元素$('span:contains("test")')

  该选择器并没有对应的CSS选择器,如果使用javascript实现类似$('span:contains("test")').css('color','red')的效果

var spans = document.getElementsByTagName('span');
for(var i = 0; i < spans.length; i++){
    if(/test/.test(spans[i].innerHTML)){
        spans[i].style.color = 'red';
    }
}

  [注意]如果:contains(text)选择器中的文本内容text包含在子元素中也可以,但是要小心使用

  【1】$('div span:contains("test")').css('color','blue')可以匹配<div><span><i>test</i></span></div>,但实际上匹配的是<span>元素,<i>元素由于是<span>元素的子元素,所以i元素的文本颜色变为蓝色

  【2】$('div :contains("test")').css('color','red')也可以匹配<div><span><i>test</i></span></div>,但直接匹配的是<i>元素,所以i元素的文本元素变为红色。如果两个选择器同时存在,则文本元素为红色。因为直接给元素设置颜色比通过父级继承颜色的优先级高

<button id="btn1" style="color: red;">$('div :contains("test")')</button><button id="btn2" style="color: blue;">$('div span:contains("test")')</button><button id="reset">还原</button><div><span>test1</span><span>test2</span><span><i>test3</i></span><i><span>test4</span></i><i>test5</i><i>1</i></div><script>reset.onclick =function(){history.go();}
//对于test3,就是上面讨论的直接给元素设置颜色比通过父级继承颜色的优先级高的情况btn1.onclick =function(){$('div :contains("test")').css('color','red');}  
btn2.onclick =function(){$('div span:contains("test")').css('color','blue');}  
</script>

:empty

  :empty选择器选择不包含子元素或文本的空元素,返回集合元素

$('div :empty').css('color','red');

  对应的CSS选择器是:empty选择器,该选择器选择没有子元素的元素,而且该元素也不包含任何文本节点

:empty{color:red;}

  如果使用javascript实现类似效果

相关图片

相关文章