jquery 选择器
无标题文档 本文内容
css
选择器
既然选择器支持css 标准，以下是css选择器的参数列表，同样适应jquery。
部分解释
*匹配所有元素: $("*")
指定任意多个选择器: $("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
});
- jQuery1.2选择器
- css选择器
- jQuery1.1x升级到1.2开发注意事项
jQuery提供了两个方法来选择元素。第一个是使用一个CSS和XPath选择器的结合作为一个字符串被传递给jQuery构造器。第二种方法是使用jQuery对象的一些方法。这两个事可以结合使用的。。
对于每个onxxx事件,象onclick,onchange,onsubmit等,都有一个和jquery同意义的对应的事件,而向ready,hover等,都是为某个方法提供。
还有jquery特有的，把一个选择器的所有事件并排列出来,中间用"."隔开(有点像对象方法的调用 ，特别提醒：每次方法调用后，返回本对象的引用，即选择器选择的对象)：
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this.html() + " BAM! " + i);
});
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选择器的参数列表，同样适应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
});