jquery选择器之内容选择器

HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--HTML区域-->
    <h1>第一个标题</h1>
    <div class="nav-2014">
        <div class="w">
            <div class="w-spacer"></div>
            <div class="categorys">
                <div class="dt">家用电器分类</div>
                <div class="dp">家用电器价格</div>
            </div>
            <span class="hr"></span>
            <div class="navitems-2014">
                <div id="treasure"></div>
                <span class="clr"></span>
                <span class="chr"></span>
                男:<input type="checkbox" checked="checked" value="nan">
                女:<input type="checkbox" value="nv">
            </div>
        </div>
    </div>
    <h2>第二个标题</h2>
    <div id="electronic">
        <div id="firstScreen">1
            <div class="w">2</div>
        </div>
        <ul>
            <div class="u_c" lang="en-us"></div>
            <li class="ui-switch-curr">第一</li>
            <li class="ui-switch-item"></li>
            <li class="ui-switch-next">第三</li>
            <li class="ui-switch-sub">第四</li>
        </ul>
        <div class="secord_screen">
            <div></div>
        </div>
        <div class="third_screen"></div>
    </div>
</body>
</html>

  1、contains:  包含选择器,匹配包含给定文本的元素

  2、empty:  空元素选择器,匹配所有不包含子元素或文本的空元素

  3、parent: 内容选择器,匹配所有含有子元素或文本的元素

  4、has(selector): 匹配含有选择器所匹配的元素的元素

    <!--jquery区域-->
    <script src="jquery-3.1.0.js"></script>
    <script>
//        包含‘家用‘文本的所有div标签及其其父标签
        $("div:contains(‘家用‘)")
//        匹配所有不包含子元素且空文本的div元素,官网说这是或的关系
        $("div:empty")
//        匹配所有包含子元素或文本的div标签
        $("div:parent")
//        给含有div标签的ul标签添加一个test类
        $("ul:has(‘div‘)").addClass(‘test‘)
    </script>

  

时间: 2025-01-17 23:24:31

jquery选择器之内容选择器的相关文章

深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

× 目录 [1]contains [2]empty [3]parent[4]has[5]not 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过滤规则主要体现在它所包含的子元素或文本内容上 :contains(text) :contains(text)选择器选择含有文本内容为'text'的元素,返回集合元素 //返回所有文本内容包含'test'的元素 $(':contains("test")') //返回所有文本内容包含'test'的span元素 $('span:contai

jquery选择器之层级选择器

<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css&q

jQuery选择器之过滤选择器

      过滤选择器类似于CSS中的伪类选择器,以冒号开头.过滤选择器根据其过滤规则分为:基本过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.以及表单对象属性过滤选择器. 1.基本过滤选择器 名称        说明                                               举例 :first 匹配到第一个元素 查找表格的第一行:$("tr:first") :last 匹配到最后一个元素 查找表格的最后一行:$(&qu

jQuery学习——入门jQuery选择器之层次选择器

今天说的是层次选择器,那层次选择器有哪几个? $("ancestor descendant"):选取parent元素后所有的child元素 $("parent > child"):选取parent元素后所有的直属child元素,何谓“直属”,也就是第一级的意思了 $("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素 $("prev ~ siblings"):选择p

jquery选择器之ID选择器

<html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color:

jQuery选择器之基本选择器

获得页面各种元素节点 1.$(#id属性值) $('#useremail').css('color','red'); 2. $(tag标签名称) $('h2').css('backgroundColor','pink'); $('input').css('backgroundColor','lightblue'); 3.$(.class属性值) $('.pear').css('fontSize','30px'); 4.$(*) 通配符(获得页面"全部"元素节点对象) $('*').cs

jquery选择器之属性选择器

[attribute]   匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 [attribute^=value] 以开头 [attribute$=value] 以结尾 [attribue*=value] 给定的属性包含某些值的元素 [selector1][selector2][selectorN] 复合选择器,需要同是满足所有条件 HTML示例代码 <!DOCTYPE h

jQuery选择器之全选择器(*选择器)

在css中,经常会在第一行写下这样一段样式: * { margin: 0; padding:0; } 通配符*意味着给所有的元素设置默认的边距.jQuery中我们也可以通过传递*选择器来选中文档页面中的元素. 描述: $('*') 抛开jQuery,如果要获取文档中所有的元素,通过document.getElementsByTagName()中传递'*'同样可以获取到. 不难发现,id,class,tag都可以通过原生的方法获取到对应的节点,但是我们还是要考虑到一个兼容性的问题,我们这里顺便提一

jQuery选择器之特殊选择器this

相信很多刚接触jQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? this是JavaScript中的关键字,指的是当前的上下文对象,简单的说就是方法/属性的所有者 下面例子中,imooc是一个对象,拥有name属性与getName方法,在getName中this指向了所属的对象imooc var imooc = { name:"慕课网", getName:function(){ //this,就是imooc对象 return this.name