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