• jquery 选择器


    选择器
    1.基本选择器
        1.1 #id    
            <div id="one"></div><div id="two:id">
            $("#one")   $("#two\:id")
        1.2 element
            $("div")
        1.3 .class
            $(".class")
        1.4 *    //匹配所有元素
            $("*")
        1.5 selector1,selector2,selectorN
            $("div,p,span,.class")
    2.层级选择器
        2.1 ancestor descendant 在给定的祖先元素下匹配所有的后代元素
            $("form input")    form下的所有input
        2.2 parent > child
            $("div > p")    div下的所有子辈元素
        2.3 prev + next
            $("div + p")    div后紧跟着的p,同辈元素
        2.4 prev ~ siblings
            $("div ~ p")    div后面的所有p,同辈元素
    3.筛选选择器
        3.1 :first 获取第一个元素
            $("li:first")
        3.2 :last 获取最后一个元素
            $("li:last")
        3.3 :not(selector)  selector用于筛选的选择器
            $("input:not(:checked)")
            $("li:not(#li)")    #li是li的id
        3.4 :even  匹配所有索引值为偶数的元素,从0开始
            $("li:even") li的第1、3、5...行,索引值为0,2,4
        3.5 :odd  匹配所有索引值为技术的元素,从0开始
            $("li:odd")
        3.6 :eq(index) 匹配一个给定索引值的元素,从0开始
            $("li:eq(2)")
        3.7 :gt(index) 匹配所有大于给定索引值的元素
            $("li:gt(2)")
        3.8 :lt(index)    匹配所有小于给定索引值的元素
            $("li:lt(2)")
        3.9 :lang(language) 选择指定语言的所有元素
            <div lang="en"></div> <div lang="en-se">
            $("div:lang(en)")
        3.10 :header  匹配如h1,h2,h3,h4之类的标题元素
             $(":header")
        3.11 :animated 匹配所有正在执行动画效果的元素
             $("div:animated")
        3.12 :focus 匹配当前获取焦点的元素
             $("#id").delegate("*","focus blur",function(event){
                 var elem=$(this);
                setTimeout(function(){
                    elem.toggleClass("focused",elem.is(":focus"));
                   },0);
             })
             delegate(sel,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
        3.13 :root 选择该文档的根元素 在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是<html>元素。
             $(":root")
        3.14 :target 选择由文档URI的格式化识别码表示的目标元素。
             显示哪个 DOM 元素触发了事件:
             $("p, button, h1, h2").click(function(event){  
                     $("div").html("Triggered by a " + event.target.nodeName + " element.");
             });
    4.内容选择器
        4.1 :contains(text) 匹配包含给定文本的元素
            $("p:contains('text')")
        4.2 :empty 匹配所有不包含子元素或者文本的空元素
            $("li:empty")
        4.3 :has(selector) 匹配含有选择器所匹配的元素的元素
            $("p:has(span)")
        4.4 :parent 匹配含有子元素或者文本的元素
            $("p:parent")
    5.可见性选择器
        5.1 :hidden 匹配所有不可见元素,或者type为hidden的元素
            $("div:hidden")
            $("input:hidden")
        5.2 :visible 匹配所有可见元素
            $("div:visible")
    6.属性选择器
        6.1 [attribute] 匹配包含给定属性的元素
            $("p[class]")
        6.2 [attribute=value] 匹配给定的属性是某个特定值的元素
            $("img[title='img']")
        6.3 [attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
            此选择器等价于:not([attr=value]) 要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
            $("img[title!='img']")
        6.4 [attribute^=value] 匹配给定的属性是以某些值开始的元素
            $("img[title^='img']")
        6.5 [attribute$=value] 匹配给定的属性是以某些值结尾的元素
            $("img[title$='img']")
        6.6 [attribute*=value] 匹配给定的属性是以包含某些值的元素
            $("img[title*='img']")
        6.7 [selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用
            $("img[class][title='img'][alt*='alt']")
    7.子元素选择器
        7.1 :first-child 匹配第一个子元素
            $("ul li:first-child")
            与:first不同的是,':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
        7.2 :last-child 匹配最后一个子元素
            $("ul li:last-child")
            与:last不同的是,':last' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
        7.3 :first-of-type 选择所有相同的元素名称的第一个兄弟元素。
            <div><span>span1</span><span>span2</span></div>
            $("span:first-of-type") 将选择span1
        7.4 :last-of-type 选择所有相同的元素名称的最后一个兄弟元素。
            <div><span>span1</span><span>span2</span></div>
            $("span:last-of-type") 将选择span2
        7.5 :nth-child(index) 匹配其父元素下的第N个子或奇偶元素,index从1开始,':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素
            $("li:nth-child(2)")
            $("li:nth-child(3n+1)")
            $("li:nth-child(even)")
        7.6 :nth-last-child(index) 匹配其父元素下的第N个子或奇偶元素,从最后一个元素开始计数.index从1开始,':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素,
            $("li:nth-last-child(2)")
            $("li:nth-last-child(3n)")
        7.7 :nth-last-of-type(n|even|odd|formula) 选择的所有他们的父级元素的第n个子元素,计数从最后一个元素到第一个。
            $("ul li:nth-last-of-type(2)");
        7.8 :nth-of-type(n|even|odd|formula) 选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。
            $("span:nth-of-type(2)");
        7.9 :only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配
            $("ul li:only-child")
        7.10 :nth-last-of-type 选择所有没有兄弟元素,且具有相同的元素名称的元素。
             $("button:only-of-type")
    8.表单选择器
        8.1 :input 匹配所有input,textarea,select,button元素
            $(":input")
        8.2 :text 匹配所有的单行文本
            $("input:text")
        8.3 :password 匹配所有密码框
            $("input:password")
        8.4 :radio 匹配所有单选按钮
            $("input:radio")
        8.5 :checkbox 匹配所有的复选框
            $("input:checkbox")
        8.6 :submit 匹配所有提交按钮
            $("input:submit")
        8.7 :image 匹配所有图像域
            $("input:image")
        8.8 :reset 匹配所有重置按钮
            $("input:reset")
        8.9 :button 匹配所有的按钮
            $("input:button")
        8.10 :file 匹配所有文件狱
             $("input:file")
        8.11 :hidden 匹配所有不可见元素,或者type为hidden的元素
             $(":hidden")
    9.表单对象属性选择器
        9.1 :enabled 匹配所有可用元素
            $("input:enabled")
        9.2 :disabled 匹配所有不可用元素
            $("input:disabled")
        9.3 :checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
            $("input:checked")
        9.4 :selected 匹配所有选中的option元素
            $("select option:selected")

  • 相关阅读:
    httpclient的并发连接问题
    Java中使用多线程、curl及代理IP模拟post提交和get访问
    有强大的cURL,忘掉httpclient的吧!
    JavaScript正则表达式在不同浏览器中可能遇到的问题
    Meta对照表
    IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结
    虚拟机centos7服务器下,启动oracle11g数据库和关闭数据库
    Step 4: Install and Configure Databases
    docker 中部署一个springBoot项目
    docker保存对容器的修改
  • 原文地址:https://www.cnblogs.com/qianyouluo/p/5029534.html
Copyright © 2020-2023  润新知