jquery 选择器

最新推荐文章于 2022-02-22 09:01:46 发布

cb_121

最新推荐文章于 2022-02-22 09:01:46 发布

阅读量1.4k

点赞数

分类专栏： JQuery 文章标签： jquery 浏览器 function input button ie

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/cb_121/article/details/2711967

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文内容

    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;p OR4P;F-WC OI0        });

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
   });

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 选择器

无标题文档本文内容 jQuery1.2选择器 css选择器 jQuery1.1x升级到1.2开发注意事项 jQuery提供了两个方法来选择元素。第一个是使用一个CSS和XPath选择器的结合作为一个字符串被传递给jQuery构造器。第二种方法是使用jQuery对象的一些方法。这两个事可以结合使用的。。 Lk)K6[g/J
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。