jquery 选择器

来源：互联网发布：天天炫斗刷任务软件编辑：程序博客网时间：2024/05/01 15:36

无标题文档本文内容

jQuery1.2选择器
css选择器
jQuery1.1x升级到1.2开发注意事项

    jQuery提供了两个方法来选择元素。第一个是使用一个CSS和XPath选择器的结合作为一个字符串被传递给jQuery构造器。第二种方法是使用jQuery对象的一些方法。这两个事可以结合使用的。。
Lk)K6['g/J{PTG0
fQ:N(ni:A.b0/]'B#Pk)W!}rLB%h3}0   对于每个onxxx事件,象onclick,onchange,onsubmit等,都有一个和jquery同意义的对应的事件,而向ready,hover等,都是为某个方法提供。

还有jquery特有的，把一个选择器的所有事件并排列出来,中间用"."隔开(有点像对象方法的调用，特别提醒：每次方法调用后，返回本对象的引用，即选择器选择的对象)：

"w/ee-o?iB1h}y!L0        $("#orderedlist").find("li").each(function(i) {
            $(this).html( $(this.html() + " BAM! " + i);
'o;pOR4P;F-WCOI0        });

.sel_cate {font-size: 14px;font-weight: bold;background-color: #72A381;color: #FFFFFF;padding: 5px 0 3px 5px;}.sel_table {width: 100%;font-size: 12px;}.sel_table td {width: 50%;}.sel_line {background-color: #CFE6D7;}.sel_code {color: #0033CC;font-weight: bold;font-family: Tahoma;padding: 3px;}.sel_return {padding: 3px;color: #666666;font-family: Tahoma,"宋体";}.sel_content {padding: 7px 0 7px 0;width: 100%;line-height: 150%;}.feiyu_say {color: #FF0000;}

jQuery1.2选择器
绯雨汉化：http://feiyu.asgard.cn

基本选择器

#myid 返回: <jQuery对象> 匹配一个id为myid的元素。 element 返回: <jQuery对象> 数组匹配所有的element元素 .myclass 返回: <jQuery对象> 数组匹配所有class为myclass的元素 * 返回: <jQuery对象> 数组匹配所有元素。该选择器会选择文档中所有的元素，包括html，head，body selector1,selector2,selectorN 返回: <jQuery对象> 数组匹配所有满足selector1或selector2或selectorN的元素

层次选择

elementParent elementChild 返回: <jQuery对象> 数组匹配elementParent下的所有子元素elementChild。例如：$("div p") 选择所有div下的p元素 elementParent > elementChild 返回: <jQuery对象> 数组匹配elementParent下的子元素elementChild。例如：$("div>p") 选择所有上级元素为div的p元素 prev+next 返回: <jQuery对象> 数组匹配prev同级之后紧邻的元素next。例如：$("h1+div") 选择所有div同级之前为h1的元素（<h1 /><div />） prev ~ siblings 返回: <jQuery对象> 数组匹配prev同级之后的元素siblings。例如：$("h1~div") 可以匹配（<h1 /><div /><div />）

基本滤镜

:first 返回: <jQuery对象> 匹配第一个元素 :last 返回: <jQuery对象> 匹配最后一个元素 :not(selector) 返回: <jQuery对象> 数组匹配不满足selector的元素 :has(selector) 返回: <jQuery对象> 数组匹配包含满足selector的元素。此选择器为1.2新增 :even 返回: <jQuery对象> 数组从匹配的元素集中取序数为偶数的元素。 :odd 返回: <jQuery对象> 数组从匹配的元素集中取序数为奇数的元素。 :eq(index) 返回: <jQuery对象> 数组从匹配的元素集中取第index个元素 :gt(index) 返回: <jQuery对象> 数组从匹配的元素中取序数大于index的元素 :lt(index) 返回: <jQuery对象> 数组从匹配的元素中取序数小于index的元素 :header 返回: <jQuery对象> 数组匹配所有的标题元素，例如h1，h2，h3……hN。此选择器为1.2新增 :animated 返回: <jQuery对象> 数组匹配正在执行动画的元素。此选择器为1.2新增 :empty 返回: <jQuery对象> 数组匹配所有没有子元素（包括文本内容）的元素 :parent 返回: <jQuery对象> 数组匹配包含子元素（包含文本内容）的所有元素 :contains(text) 返回: <jQuery对象> 数组匹配所有含有text的元素 :hidden 返回: <jQuery对象> 数组匹配所有隐藏的元素，包含属性type值为hidden的元素 :visible 返回: <jQuery对象> 数组匹配所有非隐藏的元素

子元素滤镜

E:nth-child(index/even/odd/equation) 返回: <jQuery对象> 数组匹配所有E在其父元素下满足（index/even/odd/equation）条件的集合。注：下标从1开始 E:first-child 返回: <jQuery对象> 数组匹配所有E在其父元素下是第一个子元素的集合。例如：HTML（<div><p id="p1"></p></div><div><p id="p2"></p><p id="p3"></p></div>"），使用$("p:first-child")，选取：<p id="p1"></p><p id="p2"></p> E:last-child 返回: <jQuery对象> 数组匹配所有E在其父元素下是最后一个子元素的集合。例如：同上的HTML，使用$("p:last-child")，选取：<p id="p1"></p><p id="p3"></p> E:only-child 返回: <jQuery对象> 数组匹配所有E是其父元素的唯一子元素的集合。例如：同上的HTML，使用$("p:only-child")，选取：<p id="p1"></p>

表单滤镜

:input 返回: <jQuery对象> 数组匹配所有的input、textarea、select、button :text 返回: <jQuery对象> 数组匹配文本域。注：在IE浏览器下，选择的对象是所有type属性为text的元素，在非IE浏览器下，选择的对象是input元素type属性为text的元素 :password 返回: <jQuery对象> 数组匹配密码域。注：在IE浏览器下，选择的对象是所有type属性为password的元素，在非IE浏览器下，选择的对象是input元素type属性为password的元素 :radio 返回: <jQuery对象> 数组匹配单选按钮。注：在IE浏览器下，选择的对象是所有type属性为radio的元素，在非IE浏览器下，选择的对象是input元素type属性为radio的元素 :checkbox 返回: <jQuery对象> 数组匹配复选框。注：在IE浏览器下，选择的对象是所有type属性为checkbox的元素，在非IE浏览器下，选择的对象是input元素type属性为checkbox的元素 :submit 返回: <jQuery对象> 数组匹配提交按钮。注：在IE浏览器下，选择的对象是所有type属性为submit的元素，在非IE浏览器下，选择的对象是input元素type属性为submit的元素和button元素type属性为空或为submit的元素 :image 返回: <jQuery对象> 数组匹配图像域。注：在IE浏览器下，选择的对象是所有type属性为image的元素，在非IE浏览器下，选择的对象是input元素type属性为image的元素 :reset 返回: <jQuery对象> 数组匹配重置按钮。注：在IE浏览器下，选择的对象是所有type属性为reset的元素，在非IE浏览器下，选择的对象是input或button元素type属性为reset的元素 :button 返回: <jQuery对象> 数组匹配按钮。注：在IE浏览器下，选择的对象是所有type属性为button的元素和元素名为button的元素，在非IE浏览器下，选择的对象是input元素type属性为button的元素和元素名为button的元素 :file 返回: <jQuery对象> 数组匹配文件域。注：在IE浏览器下，选择的对象是所有type属性为file的元素，在非IE浏览器下，选择的对象是input元素type属性为file的元素 :enabled 返回: <jQuery对象> 数组匹配所有可用的元素。注：即:not(:disabled)，参考:disabled的注释 :disabled 返回: <jQuery对象> 数组匹配所有禁用的元素。注：在非IE浏览器下，选择的对象是禁用的表单元素 :checked 返回: <jQuery对象> 数组匹配所有被选中的表单。注：在IE浏览器下，选择的对象是含有checked属性的所有元素 :selected 返回: <jQuery对象> 数组匹配所有选择的表单。注：在IE浏览器下，选择的对象是含有selected属性的所有元素

属性滤镜

[attribute] 返回: <jQuery对象> 数组匹配拥有attribute属性的元素 [attribute=value] 返回: <jQuery对象> 数组匹配属性attribute为value的元素 [attribute!=value] 返回: <jQuery对象> 数组匹配属性attribute不为value的元素 [attribute^=value] 返回: <jQuery对象> 数组匹配属性attribute的值以value开始的元素 [attribute$=value] 返回: <jQuery对象> 数组匹配属性attribute的值以value结尾的元素 [attribute*=value] 返回: <jQuery对象> 数组匹配属性attribute的值包含value的元素 [selector1][selector2][selectorN] 返回: <jQuery对象> 数组匹配满足属性选择器selector1、selector2、selectorN的元素

css选择器
既然选择器支持css 标准，以下是css选择器的参数列表，同样适应jquery。

Pattern Meaning Described in section First defined in CSS level * any element Universal selector 2 E an element of type E Type selector 1 E[foo] an E element with a "foo" attribute Attribute selectors 2 E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" Attribute selectors 2 E[foo~="bar"] an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "bar" Attribute selectors 2 E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" Attribute selectors 3 E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" Attribute selectors 3 E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" Attribute selectors 3 E[hreflang|="en"] an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en" Attribute selectors 2 E:root an E element, root of the document Structural pseudo-classes 3 E:nth-child(n) an E element, the n-th child of its parent Structural pseudo-classes 3 E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one Structural pseudo-classes 3 E:nth-of-type(n) an E element, the n-th sibling of its type Structural pseudo-classes 3 E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one Structural pseudo-classes 3 E:first-child an E element, first child of its parent Structural pseudo-classes 2 E:last-child an E element, last child of its parent Structural pseudo-classes 3 E:first-of-type an E element, first sibling of its type Structural pseudo-classes 3 E:last-of-type an E element, last sibling of its type Structural pseudo-classes 3 E:only-child an E element, only child of its parent Structural pseudo-classes 3 E:only-of-type an E element, only sibling of its type Structural pseudo-classes 3 E:empty an E element that has no children (including text nodes) Structural pseudo-classes 3 E:link
E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) The link pseudo-classes 1 E:active
E:hover
E:focus an E element during certain user actions The user action pseudo-classes 1 and 2 E:target an E element being the target of the referring URI The target pseudo-class 3 E:lang(fr) an element of type E in language "fr" (the document language specifies how language is determined) The :lang() pseudo-class 2 E:enabled
E:disabled a user interface element E which is enabled or disabled The UI element states pseudo-classes 3 E:checked
E:indeterminate a user interface element E which is checked or in an indeterminate state (for instance a radio-button or checkbox) The UI element states pseudo-classes 3 E:contains("foo") an E element containing the substring "foo" in its textual contents Content pseudo-class 3 E::first-line the first formatted line of an E element The :first-line pseudo-element 1 E::first-letter the first formatted letter of an E element The :first-letter pseudo-element 1 E::selection the portion of an E element that is currently selected/highlighted by the user The UI element fragments pseudo-elements 3 E::before generated content before an E element The :before pseudo-element 2 E::after generated content after an E element The :after pseudo-element 2 E.warning an E element whose class is"warning" (the document language specifies how class is determined). Class selectors 1 E#myid an E element with ID equal to "myid". ID selectors 1 E:not(s) an E element that does not match simple selector s Negation pseudo-class 3 E F an F element descendant of an E element Descendant combinator 1 E > F an F element child of an E element Child combinator 2 E + F an F element immediately preceded by an E element Direct adjacent combinator 2 E ~ F an F element preceded by an E element Indirect adjacent combinator 3

部分解释

*匹配所有元素: $("*")
指定任意多个选择器: $("div,span,p,Myclass")
在给定的祖先元素下匹配所有的后代元素:
找到表单中所有的input元素：$("form input")
在给定的父元素下匹配所有的子元素: $("form >input")
匹配所有紧接在label元素后的next元素: $("label + input")
匹配找到的第一个元素: $("tr:first")
去除所有与给定选择器匹配的元素: $("input:not(checked)")
匹配所有索引值为偶数的元素(从0开始): $("tr:even")
与上相反,匹配索引值为奇数: $("tr:odd")
匹配一个给定索引值的元素: $("tr:eq(1)")
匹配索引大于给定索引值的元素: $("tr:gt(0)")
匹配其父元素下的第N个子或奇偶元素 $("tr:nth-child(index/even/odd/equation)")
            ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。
            :nth-child从1开始的，而:eq()是从0算起的！可以使用:
     :nth-child(even)
    :nth-child(odd)
    :nth-child(3n)
    :nth-child(2)
    :nth-child(3n+1)
    :nth-child(3n+2)
与上相反小于索引值: $("tr:lt(2)")
匹配如h1,h2,h3之类的标题元素: $(":header").css("background","red")
匹配所有正在执行动画效果的元素
   <button id="run">Run</button><div></div>
   $("#run").click(function() {
        $("div:not(:animated)").animate(left:"+20"},1000);
   });
匹配所有不可见元素(包括input的type="hidden"): $("tr:hidden")
匹配所有可见元素: $("tr:visible")

一些简单应用实例：
1.列表有一个ID="orderedlist",给list添加一样式
        $("#orderedlist").addClass("red");
若为class="myClass"
        $(".myClass").addClass("blue");

2.为orderedlist的所有子标签li添加一class.blue的样式
        $("#orderedlist > li").addClass("blue");

3.当鼠标移动li元素时,增加和删除一个Class样式：
        $("#orderedlist li:last").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });

4.多个表单执行reset()方法：
        $("#reset").click(function() {
            $("form").each(function() {
                this.reset();
            });
        });

5.选择所有的li元素且不包含ul子元素
        $("li").not("[ul]").css("border","1px solid black");

6.选择包含有name属性的a标签
        $("a[@name]").background("red");7.对于FAQ的隐藏与显示
'dd'和'dt'都是#faq的子元素,find():找到它的子元素,end()和next()搭配,end()
实质上是把'dd'过滤了,也就是next()时实质上是参考的'dt',这样每个'dt'的next就
是'dd'.
        $('#faq').find('dd').hide().end().find('dt').click(function() {
            var answer = $(this).next();
            if(answer.is(':visible')) {
                answer.slideUp();
            else
                answer.slideDown();
            }
        });

8.除同属元素外,我们也可选择父元素(在此,p就是a的父元素):
        $("a").hover(function() {
          $(this).parents("p").addClass("highlight");
        }, function() {
          $(this).parents("p").removeClass("highlight");
        });

插件的制作：

插件：写自己的jquery插件
1.给你的插件命名,比如叫 "footbar"
2.创建一个文件名为：jquery.[插件名].js 如：jquery.footbar.js
3.扩展jquery的内部对象,创建一个或多个插件的方法,如
   jQuery.fn.footbar = function() {
        //do something
   });

4.用帮助函数创建一个对象(可选)
    jQuery.footbar = {
        height: 5,
        calculateBar = function() {...},
        checkDependencies = function() {...}
    };

然后你能在你的插件里调用这些帮助函数
    jQuery.fn.footbar = function() {
        //do something
    jQuery.footbar.checkDependencies(value);
    //do something
    };

5.创建一个用户能修改的默认设置(可选)
   jQuery.fn.footbar = function(options) {
        var settings = {
           value: 5,
           name: "pete",
           bar: 655
        };
        if(options) {
           jQuery.extend(settings,options);
        }
   };
然后你就能用下面的默认调用该插件(有选项)
   $("...").footbar({
        value:123,
        bar:9
   });