• jQuery中的选择器


    jQuery选择器使得获得页面元素变得更加容易、更加灵活,从而大大减轻了开发人员的压力

    jQuery选择器具有如下特点:
    1.简化代码的编写
    2.隐式迭代
    3.无须判断对象是否存在

     在jQuery中 $符号是等价于 jQuery的  所以 ,我们为了方便一般都会直接写成 $()的形式

    一、基本选择器
    基本选择器包括5种选择器:#id、element、.class、*和selectorl,selector2.selectorN,下面将配合实例分别介绍每种选择器的作用及使用方法。
    1.#id选择器(id选择器)
    #id选择器根据给定的ID匹配一个元素。如果选择器中包含特殊字符,可以用两个斜杠转义。
    2.element选择器(标签选择器)
    element选择器是一个用于搜索的元素。指向DOM节点的标签名。也就是我们所说的标签选择器
    3.class选择器(类选择器)
    .class选择器根据给定的类匹配元素,是一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配

    例如:

    <input type="text" id="ID" value="根据ID选择" />
    <a>根据元素名称选择</a>
    <input type="text" class="classname" value="根据元素css类名选择" />
    jQuery("#ID").val();
    jQuery("a").text();
    jQuery(".classname").val();

    4.*选择器(全局选择器)
    *选择器多用于结合上下文来搜索,匹配所有元素的选择器。
    5.selector1,selector2,selectorN选择器(并集选择器)
    这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内,也就是我们所说的并集选择器

    二、层级选择器
    层级选择器包括5种形式:ancestor、descendant、parent > child、prev + next和prev ~ siblings。下面配合实例分别详细介绍每种选择器的作用及使用方法。
    1.ancestor descendant选择器(后代选择器)
    其指在给定的祖先元素下匹配所有的后代元素,作为参数的ancestor代表任何有效的选择器,而descendant则用以匹配元素的选择器,并且它是第一个选择器的后代。
    2.parent>child选择器(子集选择器)
    parent>child选择器代表在给定的父元素下匹配所有的子元素。两个参数分别代表的意思如下:parent代表任何有效选择器;child用以匹配元素的选择器,并且它是第一个选择器的子元素
    3.prev+next选择器(相邻元素选择器)
    这类选择器的作用是匹配所有紧接在prev元素后的next元素。两个参数分别代表的意思如下:prev代表任何有效选择器;next代表一个有效选择器并且紧接着第一个选择器。
    4.prev ~ siblings选择器(同辈元素选择器)
    prev ~ siblings选择器代表匹配prev元素之后的所有siblings元素。两个参数分别代表的意思如下:prev代表任何有效选择器;siblings代表一个选择器,并且它作为第一个选择器的同辈。

    例如:

    <div id="divTest">
            <input type="text" value="投资" />
            <input id="next" type="text" />
            <input type="text"  value="担当" />
            <input type="text" title="学习" value="学习" />
            <a>1</a>
            <a>2</a>
    </div>
    //得到div中的a标签内容 结果为12
    jQuery("#divTest a").text();
    //输出div直接子节点 结果为投资
    jQuery("#divTest>input").val();
    //输出id为next的后一个同级别元素 结果为担当
    jQuery("#next+input").val();
    //同上,并且是有title的元素 结果为学习
    jQuery("#next~[title]").val();

    三、过滤选择器
    过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号开头。

    1.基本过滤选择器
    基本过滤选择器是过滤选择器中最常用的一种,其主要包括以下几种形式,在此做详细说明:
    (1):first/:last选择器。
    (2):not选择器。
    (3):even和:odd选择器。
    (4):eq:gt、:lt、选择器。
    (5):header选择器。
    (6):animated选择器。

    举例:

    <div id="divTest">
        <ul>
            <li>投资</li>
            <li>理财</li>
            <li>成熟</li>
            <li>担当</li>
            <input type="radio" value="学习" checked="checked" />
            <input type="radio" value="不学习" />
        </ul>
    </div>
    //第一个li内容 结果为投资
    jQuery("li:first").text();
    //最后一个li内容 结果为担当
    jQuery("li:last").text();
    //input未被选中的值 结果为不学习
    jQuery("li input:not(:checked)").val();
    //索引为偶数的li 结果为投资 成熟
    jQuery("li:even").text();
    //索引为奇数的li 结果为理财 担当
    jQuery("li:odd").text();
    //索引大于2的li的内容 结果为担当
    jQuery("li:gt(2)").text();
    //索引小于1的li的内容 结果为投资
    jQuery("li:lt(1)").text();

    2.内容过滤选择器
    内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器,这部分过滤器是对上面介绍基本过滤选择器的一个补充,对于页面选取、设置元素显示等方面发挥着重要的作用。下面将对各选择器进行详细的介绍。
    (1):contains选择器。
    (2):empty选择器。
    (3):has选择器。
    (4):parent选择器。

    举例:

    <div id="Test">
        <ul>
            <li>hyip投资</li>
            <li>hyip</li>
            <li></li>
            <li>理财</li>
            <li><a>投资</a></li>
        </ul>
    </div>   
    //包含hyip的li的内容 结果为hyip投资 hyip
    jQuery("li:contains('hyip')").text();
    //内容为空的li的后一个li内容 结果为理财
    jQuery("li:empty+li").text();
    //包含a标签的li的内容 结果为投资
    jQuery("li:has(a)").text();

    3.可见性过滤选择器
    可见性过滤选择器比较简单,其包含两种选择器,主要是用来匹配所有可见元素和不可见元素。下面将会对这两种选择器进行详细介绍。
    (1):hidden选择器。

    (2):visible选择器。

    举例:

    <ul>
        <li>可见</li>
        <li style="display:none;">不可见</li>
    </ul>
    //不可见的li的内容 结果为不可见
    jQuery("li:hidden").text();
    //可见的li的内容 结果为可见
    jQuery("li:visible").text();

    4.属性过滤选择器
    属性过滤选择器是用于匹配包含给定属性的元素,当然也可以匹配不包含此属性的元素等。属性过滤选择器共含有以下7种选择器。
    (1) [attribute]选择器。
    (2)[attribute=value]、[attribute!=value]选择器(此处包含两种)。
    (3)[attribute^=value]、[attribute$=value]、[attribute*=value]选择器(此处包含三种)。
    (4)[selector][selector2]选择器。
    举例:

    <input type="text" name="hyipinvest" value="hyip投资" />
    <input type="text" name="investhyip" value="投资hyip" />
    <input type="text" name="google" value="HYIP" />
    //name为hyipinvest的值 结果为hyip投资
    alert(jQuery("input[name='hyipinvest']").val());
    //name以hyip开始的值 结果为hyip投资
    alert(jQuery("input[name^='hyip']").val());
    //name以hyip结束的值 结果为投资hyip
    alert(jQuery("input[name$='hyip']").val());
    //name包含oo的值 结果为HYIP
    alert(jQuery("input[name*='oo']").val());

    jQuery选择器就总结到这里,还有一些表单元素选择器,这方面会在后续再给大家补上!

  • 相关阅读:
    vue, 同一个页面有多处地方需要上传图片
    单张图片上传,vue
    replace 替换只会替换找到的第一个字符
    vue ant design table中rowSelection属性的应用
    一般做页面时需要注意的事项
    vue 为form 表单赋值 获取form表单的值
    vue 父子组件中的传值
    vue 页面跳组件,实现点击浏览器自带返回箭头,返回到上一个页面,而不是返回道上个路由
    vue ant design a-table 的分页
    初建vuex项目
  • 原文地址:https://www.cnblogs.com/liujiayun/p/5511608.html
Copyright © 2020-2023  润新知