jQuery选择器

2015-12-6来源:Javascript教程人气:4274

选择器
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")