jquery内容选择器

日期:2018-02-25 16:28:01 章节:  jquery选择器

jquery内容选择器主要有:

(1) :contains(text) :匹配内容中包含指定内容的元素

(2) :empty :匹配内容为空的元素

(3) :has(selector) :匹配内容中包含指定选择器的所有元素

(4) :parent :匹配内容不为空的元素

新建demo4.html,并且引入jquery文件

<head>
    <meta charset="UTF-8">
    <title>www.isoftvip.com</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>

增加html标签元素

<ol>
   <li>谢霆锋</li>
   <li></li>
   <li>
       <a href="http://www.isoftvip.com">张柏芝</a>
   </li>
   <li>巨石强森</li>
</ol>

最后在body结尾处写js脚本代码如下:

<script>
    $(function () {
        //contains
        $('li:contains("谢")').css('color','blue');
        //empty
        $('li:empty').text("陈冠希");
        //has
        $('li:has(a)').css('font-size','22px');
        //parent
        $('li:parent').css('text-decoration','underline');
    });
</script>

jquery内容选择器做了如下操作:

(1)将内容包含“谢”字的颜色变为蓝色

(2)将空内容的,填充“程冠希”

(3)将张柏芝 字体改为22像素

(4)将内容不为空的都加下划线

http://www.isoftvip.com/topics/jquery-vedio/jquery-content-selector.html


最后的效果就是这样的:

TIM截图20180225164403.png