jquery选择器用法_jQuery属性选择器

jquery选择器用法_jQuery属性选择器jQuery的选择器一、基本选择器1.ID选择器ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对象。使用公式:$("#id")示例:$("#box")//获取id属性值为box的元素2.元素选择器…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

jQuery的选择器

   一、 基本选择器
       1. ID选择器
            ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对象。
            使用公式:$(“#id”)
            示例:$(“#box”)    //获取id属性值为box的元素
       2. 元素选择器
            元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名,也就是说元素选择器是根据元素的标记名选择的。
            使用公式:$(“element”)
            示例:$(“div”)    //获取所有div元素
        3.类名选择器
            类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。
            使用公式:$(“.class”)
            示例:$(“.box”)     //获取class属性值为box的所有元素
        4.复合选择器
            复合选择器将多个选择器(可以是ID选择器、元素选择器或是类名选择器)组合在一起,两个选择器之间以逗号”,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象。
            注意:多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个匹配的元素合并后一起返回。
            使用公式:$(“selector1,selector2,……,selectorN”)
            selector1:一个有效的选择器,可以是ID选择器、元素选择器或类名选择器等
            selector2:另一个有效的选择器,可以是ID选择器、元素选择器或类名选择器等
            selectorN:(可选择)任意多个选择器,可以是ID选择器、元素选择器或类名选择器等
            示例:$(“div,#btn”)    //要查询文档中的全部的<div>元素和id属性为btn的元素
        5.通配符选择器
            $(“*”)   //取得页面上所有的DOM元素集合的jQuery包装集

    二、层次选择器
       1. ancestor   descendant选择器
            ancesdor  descendant选择器中ancestor代表祖先,descendant代表子孙,用于在给定的祖先元素下匹配所有的后代元素
            使用公式:$(“ancestor   descendant”)
            ancestor是指任何有效的选择器。
            descendant是用以匹配元素的选择器,并且它是ancestor所指定元素后代元素
            示例:$(“ul   li”)       //匹配ul元素下的全部li元素
        2. parent>child选择器
            parent>child选择器中的parent代表父元素,child代表子元素,用于在给定的父元素下匹配所有的子元素,使用该选择器只能选择父元素的直接子元素
            使用公式:$(” parent>child “)
            parent是指任何有效的选择器
            child是用以匹配元素的选择器,并且它是parent元素的子元素
            示例:$(” form>input “)      //匹配表单中所有的子元素input
        3.prev+next选择器
            pev+next选择器用于匹配所有紧接在prev元素后的next元素,其中,prev和next是两个相同级别的元素
            使用公式:$(“prev+next”)
            prev是指任何有效的选择器
            next是一个有效选择器并紧接着prev选择器
            示例:$(“div+img”)        //匹配<div>标签后的<img>标记
       4. prev~siblings选择器
            prev~siblings选择器用于匹配prev元素之后的所有siblings元素,其中prev和siblings是个相同辈元素
            使用公式:$(“prev~siblings”)
            prev是指任何有效的选择器

    三、过滤选择器
        1.简单过滤器
            简单过滤器是指以冒号开头,通常用于实现简单过滤效果的过滤器
            :first
                说明:匹配找到的第一个元素,它是与选择器结合使用的
                示例:$(“tr:first”)     //匹配表格的第一行
            :last
                说明:匹配找到的最后一个元素,它是与选择器结合使用的
                示例:$(“tr:last”)    //匹配表格最后一行
            :even
                说明:匹配所有索引值为偶数的元素,索引值从0开始计数
                示例:$(“tr:even”)       //匹配索引值为偶数的行
            :odd
                说明:匹配所有索引值为奇数的元素,索引值从0开始计数
                示例:$(“tr:odd”)       //匹配索引值为奇数的行
            :eq(index)
                说明:匹配一个给定索引值的元素
                示例:$(“div:eq(1)”)      //匹配第二个div元素
            :gt(index)
                说明:匹配所有大于给定索引值的元素
                示例:$(“span:gt(0)”)       //匹配索引大于0的span元素(注:大于0,而不包括0)
            :lt(index)
                说明:匹配所有小于给定索引值的元素
                示例:$(“div:lt(2)”)     //匹配索引小于2的div元素(注:小于2,而不包括2)
            :header
                说明:匹配h1,h2,h3……之类的标题元素
                示例:$(“.cls:header”)      //匹配全部类名为cls的标题元素,如果”:”前不写则匹配所有的标题元素
            :not(selector)
                说明:去除所有给定选择器匹配的元素
                示例:$(“input:not(:checked)”)         //匹配没有被选中的input元素
            animated
                说明:匹配所有正在执行动画效果的元素
                示例:$(“div:animated”)          //匹配正在执行的动画的div元素
        2.内容过滤器
            内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选
            :contains(text)
                说明:匹配包含给定文本的元素
                示例:$(“li:contains(‘word’)”)      //匹配含有”word”文本内容的元素
            :empty
                说明:匹配所有不包含子元素或者文本的空元素
                示例:$(“td:empty”)        //匹配不包含子元素或者文本的单元格
            :has(selector)
                说明:匹配含有选择器所匹配元素的元素
                示例:$(“td:has(p)”)           //匹配表格的单元格中还有<p>标记的单元格
            :parent
                说明:匹配含有子元素或者文本的元素
                示例:$(“td:parent”)      //匹配不为空的单元格,即在该单元格中还包括子元素或则文本
        3.可见性过滤器
            元素的可见状态有两种,分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的
            :visible
                说明:匹配所有可见元素
            :hidden
                说明:匹配所有不可见元素
                注意:在应用:hidden过滤器时,display属性是none以及input元素的type属性为hidden的元素都会被匹配识别
        4.表单对象的属性过滤器
            表单对象的属性过滤器通过表单元素的状态属性(例如:选中、不可用等状态)匹配元素
            :checked
                说明:匹配所有选中的被选中元素
                示例:$(“input:checked”)            //匹配所有被选中的input元素
            :disabled
                说明:匹配所有不可用元素
                示例:$(“input:disenabled”)           //匹配所有不可用input元素
            :enabled
                说明:匹配所有可用的元素
                示例:$(“input:enabled”)         //匹配所有可用的input元素
            :selected
                说明:匹配所有选中的option元素
                示例:$(“select option:selected”)            //匹配所有被选中的选项元素
        5.子元素过滤器
            子元素选择器就是筛选给定某个元素的子元素,具体的过滤条件由选择器的种类而定
            :first-child
                说明:匹配所有给定元素的第一个子元素
                示例:$(“ul  li:first-child”)            //匹配ul元素中的第一个子元素li
            :last-child
                说明:匹配所有给定元素的最后一个子元素
                示例:$(“ul  li:last-child”)            //匹配ul元素中的最后一个子元素li
            :only-child
                说明:如果某个元素是它父元素中唯一的子元素,那么将会被匹配,如果父元素中含有其他元素,则不会被匹配
                示例:$(“ul  li:only-child”)            //匹配只含有一个li元素的ul元素中的li
            :nth-child(index/even/odd/equation)
                说明:匹配可每个父元素下的第index个子或奇偶元素,index从1开始,而不是从0开始
                示例:$(“ul li :nth-child(even)”)           //匹配ul中索引值为偶数的li元素
                $(“ul li:nth-child(3)”)              //匹配ul中第3个li元素

    四、属性选择器
        属性选择器就是通过元素的属性作为过滤条件进行筛选对象
        [attribute]
            说明:匹配包含给定属性的元素
            示例:$(“div[name]”)       //匹配包含有name属性的div元素
        [attribute=value]
            说明:匹配属性值为value的元素
            示例:$(“div[name=’test’]”)           //匹配name属性是test的div元素
        [attribute!=value]
            说明:匹配属性值不等于value的元素
            示例:$(“div[name!=’test’]”)         //匹配name属性不是test的div元素
        [attribute*=value]
            说明:匹配属性值含有value的元素
            示例:$(“div[name*=”test”]”)         //匹配name属性值中含有test值的div元素
        [attribute^=value]
            说明:匹配属性值以value开始的元素
            示例:$(“div[name^=’test’]”)         //匹配name属性以test开头的div元素
        [attribute$=value]
            说明:匹配属性值以value结束的元素
            示例:$(“div[name$=’test’]”)         //匹配name属性以test结尾的div元素
        [selector1][selector2][selectorN]
            说明:复合属性选择器,需要同时满足多个条件时使用
            示例:$(“div[id][name^=’test’]”)            //匹配具有id属性并且name属性是以test开头的div元素

    五、表单选择器
        表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中
        :input
            说明:匹配所有的input元素
            示例:
                 $(“:input”)        //匹配所有的input元素
                 $(“form :input”)         //匹配<form>标记中的所有input元素,需要注意,在form和冒号之间有一个空格
        :button
            说明:匹配所有的普通按钮,即type=”button”的input元素
            示例:$(“.button”)             //匹配所有普通按钮
        :checkbox
            说明:匹配所有的复选框
            示例:$(“:checkbox”)           //匹配所有的复选框
        :file
            说明:匹配所有的文件域
            示例:$(“:file”)             //匹配所有的文件域
        :hidden
            说明:匹配所有的不可见元素,或者type为hidden的元素
            示例:$(“:hidden”)         //匹配所有的隐藏域
        :image
            说明:匹配所有的图像域
            示例:$(“:image”)            //匹配所有的图像域
        :password
            说明:匹配所有的密码域
            示例:$(“:password”)            //匹配所有的密码域
        :radio
            说明:匹配所有的单选按钮
            示例:$(“:radio”)            //匹配所有的单选按钮
        :reset
            说明:匹配所有的重置按钮,即type=”reset”的input元素
            示例:$(“:reset”)          //匹配所有的重置按钮
        :submit
            说明:匹配所有的提交按钮,即type=”submit”的input元素
            示例:$(“:submit”)            //匹配所有的提交按钮
        :text
            说明:匹配所有的单行文本框
            示例:$(“.text”)           //匹配所有的单行文本框
    

选择器中注意事项

 1.选择器中含有特殊符号的注意事项
            含有”.”、”#”、”{“、”}”等特殊字符:根据W3C规定,属性值中是不能包含这些特殊字符的,但在实际的项目中偶尔会遇到这种表达式中含有”#”和”}”等特殊字符的情况。这时,如果按照普通方法去处理的话就会出现错误,解决这类错误的方法是使用转义符号将其转义。

<div id=”li#db”>liaidb</div>
<div id=”lidb(1)”>lilovedb</div>
如果按照普通方式来获取,例如:
$(“#li#db”);
$(“#lilovedb(1)”);
这样是不能正确获取到元素的,正确的写法如下:
$(“#li\\#db”);
$(“#lilovedb\\(1\\)”);

 2.属性选择器的@符号问题:
在jQuery升级版本过程中,jQuery在1.3.1版本中彻底放弃了1.1.0版本遗留的@符号,假如我们使用1.3.1以上的版本,那么不需要在属性前添加@符号

$(“div[@name=”lidb”]”);
正确写法是将@符号去掉,即改为如下形式:
$(“div[name=”lidb”]”);
        选择器中空格的注意事项
            在实际应用当中,选择器中含有空格也是不容忽视的,多一个空格或则少一个空格也会得到截然不同的结果。

    <div class=”name”>
        <div style=”display: none;”>小李</div>
        <div style=”display: none;”>小王</div>
        <div style=”display: none;”>小明</div>
        <div style=”display: none;” class=name>小张</div>
    </div>
    <div style=”display: none;” class=name>小玉</div>
    <div style=”display: none;” class=name>小刘</div>
    
    使用如下的jQuery选择器分别获取它们
    <script type=”text/javascript”>
        var $a=$(“.name :hidden”);
        var $b=$(“.name:hidden”);
        console.log($a)
        console.log($b)
    </script>
    以上代码会出现不同的结果,是因为后代选择器和过滤选择器的不同

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/230951.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 【pymongo】连接认证 auth failed解决方法

    【pymongo】连接认证 auth failed解决方法故事背景:我在虚拟机(ip:192.168.xx.xx)上建立了一个mongo的数据库,里面已经存好了内容。里面的一个database叫做"adb",里面有个collectio

  • 淘宝,天猫,京东,苏宁抢购茅台、手机等脚本(适合兼职,亲测可用)「建议收藏」

    淘宝,天猫,京东,苏宁抢购茅台、手机等脚本(适合兼职,亲测可用)「建议收藏」由来:最近用钱比较多,缺钱,自己也是除了一份死工资就没有别的收入了,而且每个月的工资发了就立马还给了马爸爸,所以一直在想是不是工作之余搞点什么兼职做做,但是一直也是找不到什么门路。碰巧看到uc给我推了一个文章(其实一直有推只是之前没有想法每注意),说天猫,京东,苏宁这些网购平台的茅台90%都是买来卖的,一瓶利润能有一千块。我顿时有了想法,就想着能不能搞个脚本啥的去抢抢,总比自己手动来得好,然后就上网去找脚本,修修补补改改,基于别人的基础上搞了个脚本(目前只有安卓版,后续可能会出苹果的)。然后坚持了几天,

  • ArrayList扩容详解

    ArrayList扩容详解本文探讨一下ArrayList的扩容过程ArrayList底层是数组elementData,用于存放插入的数据。初始大小是0,当有数据插入时,默认大小DEFAULT_CAPACITY=10。如果在创建ArrayList时指定了initialCapacity,则初始大小是ArrayList1.验证扩容的代码示例从示例中可以看到,当添加元素时,如果元素个数+1>当前数组长度【size+1>elementData.length】时,进行扩容,扩容后的数组大小是:oldC.

  • python中如何打开csv文件_python如何读取csv文件

    python中如何打开csv文件_python如何读取csv文件python如何读取csv文件,我们这里需要用到python自带的csv模块,有了这个模块读取数据就变得非常容易了。工具/原料python3方法/步骤1这里以sublimetext3编辑器作为示范,新建一个文档。2我们可以先确认CSV文档是否可以正确打开。并且放在同一个文件夹里面。3importcsv这是第一步要做的,就是调用csv模块。4importcsvfile=open(‘data…

  • Python:将列表转为字符串的3种方法「建议收藏」

    Python:将列表转为字符串的3种方法「建议收藏」#一天一个Python小技巧#将列表转为字符串:1、使用for循环testlist=[‘h’,’e’,’l’,’l’,’o’]teststr=”foriintestlist:teststr+=iprint(teststr)2、join方法:testlist=[‘h’,’e’,’l’,’l’,’o’]teststr=””.join(testlist)print(teststr)3、reduce方法:fromfunctools

  • 第k短路径_典型的分类算法K均值

    第k短路径_典型的分类算法K均值给定一张 N 个点(编号 1,2…N),M 条边的有向图,求从起点 S 到终点 T 的第 K 短路的长度,路径允许重复经过点或边。注意: 每条最短路中至少要包含一条边。输入格式第一行包含两个整数 N 和 M。接下来 M 行,每行包含三个整数 A,B 和 L,表示点 A 与点 B 之间存在有向边,且边长为 L。最后一行包含三个整数 S,T 和 K,分别表示起点 S,终点 T 和第 K 短路。输出格式输出占一行,包含一个整数,表示第 K 短路的长度,如果第 K 短路不存在,则输出 −1。数据范围

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号