J. Ohn
jQuery 代码:
$("div:contains('John')")
结果:
[
John Resig
,
Malcom John Sinclair
] :empty:empty
匹配所有不包含子元素或者文本的空元素
--------------------------------------------------------------------------------
Matches all elements that are empty, be it elements or text.
返回值
Array
示例
查找所有不包含子元素或者文本的空元素
HTML 代码:
<td>Value 1td><td>td>
<td>Value 2td><td>td>
jQuery 代码:
$("td:empty")
结果:
[ <td>td>, <td>td> ] :has(selector):has(selector)
匹配含有选择器所匹配的元素的元素
--------------------------------------------------------------------------------
Matches elements which contain at least one element that matches the specified selector.
返回值
Array
参数
selector (Selector) : 一个用于筛选的选择器
示例
给所有包含 p 元素的 div 元素添加一个 text 类
HTML 代码:
Hello again!
jQuery 代码:
$("div:has(p)").addClass("test");
结果:
[ ] :parent:parent
匹配含有子元素或者文本的元素
--------------------------------------------------------------------------------
Matches all elements that are parents - they have child elements, including text.
返回值
Array
示例
查找所有含有子元素或者文本的 td 元素
HTML 代码:
<td>Value 1td><td>td>
<td>Value 2td><td>td>
jQuery 代码:
$("td:parent")
结果:
[ <td>Value 1td>, <td>Value 1td> ] 可见性
:hidden:hidden
匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到
--------------------------------------------------------------------------------
Matches all elements that are hidden, or input elements of type "hidden".
返回值
Array
示例
查找所有不可见的 tr 元素
HTML 代码:
<td>Value 1td>
<td>Value 2td>
jQuery 代码:
$("tr:hidden")
结果:
[ <td>Value 1td>
] :visible:visible
匹配所有的可见元素
--------------------------------------------------------------------------------
Matches all elements that are visible.
返回值
Array
示例
查找所有可见的 tr 元素
HTML 代码:
<td>Value 1td>
<td>Value 2td>
jQuery 代码:
$("tr:visible")
结果:
[ <td>Value 2td>
] 属性
[attribute][attribute]
匹配包含给定属性的元素
--------------------------------------------------------------------------------
Matches elements that have the specified attribute.
返回值
Array
参数
attribute (String) : 属性名
示例
查找所有含有 id 属性的 div 元素
HTML 代码:
jQuery 代码:
$("div[id]")
结果:
[ ] [attribute=value][attribute=value]
匹配给定的属性是某个特定值的元素
--------------------------------------------------------------------------------
Matches elements that have the specified attribute with a certain value.
返回值
Array
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
示例
查找所有 name 属性是 newsletter 的 input 元素
HTML 代码:
'
jQuery 代码:
$("input[name='newsletter']").attr("checked", true);
结果:
[ , ] [attribute!=value][attribute!=value]
匹配给定的属性是不包含某个特定值的元素
--------------------------------------------------------------------------------
Matches elements that don't have the specified attribute with a certain value.
返回值
Array
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
示例
查找所有 name 属性不是 newsletter 的 input 元素
HTML 代码:
'
jQuery 代码:
$("input[name!='newsletter']").attr("checked", true);
结果:
[ ] [attribute^=value][attribute^=value]
匹配给定的属性是以某些值开始的元素
--------------------------------------------------------------------------------
Matches elements that have the specified attribute and it starts with a certain value.
返回值
Array
参数
attribute (String) : 属性名
value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
示例
查找所有 name 以 'news' 开始的 input 元素
HTML 代码:
jQuery 代码:
$("input[name^='news']")
结果:
[ , ] [attribute$=value][attribute$=value]
匹配给定的属性是以某些值结尾的元素
--------------------------------------------------------------------------------
Matches elements that have the specified attribute and it ends with a certain value.
返回值
Array
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
示例
查找所有 name 以 'letter' 结尾的 input 元素
HTML 代码:
jQuery 代码:
$("input[name$='letter']")
结果:
[ , ] [attribute*=value][attribute*=value]
匹配给定的属性是以包含某些值的元素
--------------------------------------------------------------------------------
Matches elements that have the specified attribute and it contains a certain value.
返回值
Array
参数
attribute (String) : 属性名
value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
示例
查找所有 name 包含 'man' 的 input 元素
HTML 代码:
jQuery 代码:
$("input[name*='man']")
结果:
[ , , ] [selector1][selector2][selectorN][selector1][selector2][selectorN]
复合属性选择器,需要同时满足多个条件时使用。
--------------------------------------------------------------------------------
Matches elements that have the specified attribute and it contains a certain value.
返回值
Array
参数
selector1 (Selector) : 属性选择器
selector2 (Selector) : 另一个属性选择器,用以进一步缩小范围
selectorN (Selector) : 任意多个属性选择器
示例
找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
HTML 代码:
jQuery 代码:
$("input[id][name$='man']")
结果:
[ ] 子元素
:nth-child(index/even/odd/equation):nth-child(index/even/odd/equation)
匹配其父元素下的第N个子或奇偶元素
':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)
--------------------------------------------------------------------------------
Matches the nth-child of its parent.
While ':eq(index)' matches only a single element, this matches more then one: One for each parent. The specified index is one-indexed, in contrast to :eq() which starst at zero.
返回值
Array
参数
index (Number) : 要匹配元素的序号,从1开始
示例
在每个 ul 查找第 2 个li
HTML 代码:
jQuery 代码:
$("ul li:nth-child(2)")
结果:
[ Karl, Tane ] :first-child:first-child
匹配第一个子元素
':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
--------------------------------------------------------------------------------
Matches the first child of its parent.
While ':first' matches only a single element, this matches more then one: One for each parent.
返回值
Array
示例
在每个 ul 中查找第一个 li
HTML 代码:
jQuery 代码:
$("ul li:first-child")
结果:
[ John, Glen ] :last-child:last-child
匹配最后一个子元素
':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
--------------------------------------------------------------------------------
Matches the last child of its parent.
While ':last' matches only a single element, this matches more then one: One for each parent.
返回值
Array
示例
在每个 ul 中查找最后一个 li
HTML 代码:
jQuery 代码:
$("ul li:last-child")
结果:
[ Brandon, Ralph ] :only-child:only-child
如果某个元素是父元素中唯一的子元素,那将会被匹配
如果父元素中含有其他元素,那将不会被匹配。
--------------------------------------------------------------------------------
Matches the only child of its parent.
If the parent has other child elements, nothing is matched.
返回值
Array
示例
在 ul 中查找是唯一子元素的 li
HTML 代码:
- Glen
jQuery 代码:
$("ul li:only-child")
结果:
[ - Glen
] 表单
:input:input
匹配所有 input, textarea, select 和 button 元素
--------------------------------------------------------------------------------
Matches all input, textarea, select and button elements.
返回值
Array
示例
查找所有的input元素
HTML 代码:
jQuery 代码:
$(":input")
结果:
[ , , , , , , , , ] :text:text
匹配所有的单行文本框
--------------------------------------------------------------------------------
Matches all input elements of type text.
返回值
Array
示例
查找所有文本框
HTML 代码:
jQuery 代码:
$(":text")
结果:
[ ] :password:password
匹配所有密码框
--------------------------------------------------------------------------------
Matches all input elements of type password.
返回值
Array
示例
查找所有密码框
HTML 代码:
jQuery 代码:
$(":password")
结果:
[ ] :radio:radio
匹配所有单选按钮
--------------------------------------------------------------------------------
Matches all input elements of type radio.
返回值
Array
示例
查找所有单选按钮
HTML 代码:
jQuery 代码:
$(":radio")
结果:
[ ] :checkbox:checkbox
匹配所有复选框
--------------------------------------------------------------------------------
Matches all input elements of type checkbox.
返回值
Array
示例
查找所有复选框
HTML 代码:
jQuery 代码:
$(":checkbox")
结果:
[ ] :submit:submit
匹配所有提交按钮
--------------------------------------------------------------------------------
Matches all input elements of type submit.
返回值
Array
示例
查找所有提交按钮
HTML 代码:
jQuery 代码:
$(":submit")
结果:
[ ] :image:image
匹配所有图像域
--------------------------------------------------------------------------------
Matches all input elements of type image.
返回值
Array
示例
匹配所有图像域
HTML 代码:
jQuery 代码:
$(":image")
结果:
[ ] :reset:reset
匹配所有重置按钮
--------------------------------------------------------------------------------
Matches all input elements of type reset.
返回值
Array
示例
查找所有重置按钮
HTML 代码:
jQuery 代码:
$(":reset")
结果:
[ ] :button:button
匹配所有按钮
--------------------------------------------------------------------------------
Matches all input elements of type button.
返回值
Array
示例
查找所有按钮.
HTML 代码:
jQuery 代码:
$(":button")
结果:
[ , ] :file:file
匹配所有文件域
--------------------------------------------------------------------------------
Matches all input elements of type file.
返回值
Array
示例
查找所有文件域
HTML 代码:
jQuery 代码:
$(":file")
结果:
[ ] :hidden:hidden
匹配所有不可见元素,或者type为hidden的元素
--------------------------------------------------------------------------------
Matches all elements that are hidden, or input elements of type "hidden".
返回值
Array
示例
查找隐藏的 tr
HTML 代码:
<td>Value 1td>
<td>Value 2td>
jQuery 代码:
$("tr:hidden")
结果:
[ <td>Value 1td>
]
--------------------------------------------------------------------------------
匹配type为hidden的元素
HTML 代码:
jQuery 代码:
$("input:hidden")
结果:
[ ] 表单对象属性
:enabled:enabled
匹配所有可用元素
--------------------------------------------------------------------------------
Matches all elements that are enabled.
返回值
Array
示例
查找所有可用的input元素
HTML 代码:
jQuery 代码:
$("input:enabled")
结果:
[ ] :disabled:disabled
匹配所有不可用元素
--------------------------------------------------------------------------------
Matches all elements that are disabled.
返回值
Array
示例
查找所有不可用的input元素
HTML 代码:
jQuery 代码:
$("input:disabled")
结果:
[ ] :checked:checked
匹配所有选中的复选框元素
--------------------------------------------------------------------------------
Matches all elements that are checked.
返回值
Array
示例
查找所有选中的复选框元素
HTML 代码:
jQuery 代码:
$("input:checked")
结果:
[ , ] :selected:selected
匹配所有选中的选项元素
--------------------------------------------------------------------------------
Matches all elements that are selected.
返回值
Array
示例
查找所有选中的选项元素
HTML 代码:
jQuery 代码:
$("select option:selected")
结果:
[ ]
--------------------------------------------------------------------------------
Finds all option elements that are selected.
HTML 代码:
jQuery 代码:
$("select option:selected")
结果:
[ , ] 属性属性
attr(name)attr(name)
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。
--------------------------------------------------------------------------------
Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned.
返回值
Object
参数
name (String) : 属性名称
示例
返回文档中第一个图像的src属性值。
HTML 代码:
jQuery 代码:
$("img").attr("src");
结果:
test.jpg attr(properties)attr(properties)
将一个“名/值”形式的对象设置为所有匹配元素的属性。
这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
--------------------------------------------------------------------------------
Set a key/value object as properties to all matched elements.
This serves as the best way to set a large number of properties on all matched elements. Note that you must use 'className' as key if you want to set the class-Attribute. Or use .addClass( class ) or .removeClass( class ).
返回值
jQuery
参数
properties (Map) : 作为属性的“名/值对”对象
示例
为所有图像设置src和alt属性。
HTML 代码:
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
结果:
[ ]
--------------------------------------------------------------------------------
attr(key,value)attr(key,value)
为所有匹配的元素设置一个属性值。
--------------------------------------------------------------------------------
Set a single property to a value, on all matched elements.
返回值
jQuery
参数
key (String) : 属性名称
value (Object) : 属性值
示例
为所有图像设置src属性。
HTML 代码:
jQuery 代码:
$("img").attr("src","test.jpg");
结果:
[ , ] attr(key,fn)attr(key,fn)
为所有匹配的元素设置一个计算的属性值。
不提供值,而是提供一个函数,由这个函数计算的值作为属性值。
--------------------------------------------------------------------------------
Set a single property to a computed value, on all matched elements.
Instead of supplying a string value as described 'above', a function is provided that computes the value.
返回值
jQuery
参数
key (String) : 属性名称
fn (Function) : 返回值的函数 范围:当前元素, 参数: 当前元素的索引值
示例
把src属性的值设置为title属性的值。
HTML 代码:
jQuery 代码:
$("img").attr("title", function() { return this.src });
结果:
removeAttr(name)removeAttr(name)
从每一个匹配的元素中删除一个属性
--------------------------------------------------------------------------------
Remove an attribute from each of the matched elements.
返回值
jQuery
参数
name (String) : 要删除的属性名
示例
将文档中图像的src属性删除
HTML 代码:
jQuery 代码:
$("img").removeAttr("src");
结果:
[ ] 类
addClass(class)addClass(class)
为每个匹配的元素添加指定的类名。
--------------------------------------------------------------------------------
Adds the specified class(es) to each of the set of matched elements.
返回值
jQuery
参数
class (String) : 一个或多个要添加到元素中的CSS类名,请用空格分开
示例
为匹配的元素加上 'selected' 类
HTML 代码:
Hello
jQuery 代码:
$("p").addClass("selected");
结果:
[ Hello
]
--------------------------------------------------------------------------------
为匹配的元素加上 selected highlight 类
HTML 代码:
Hello
jQuery 代码:
$("p").addClass("selected highlight");
结果:
[ Hello
] removeClass(class)removeClass(class)
从所有匹配的元素中删除全部或者指定的类。
--------------------------------------------------------------------------------
Removes all or the specified class(es) from the set of matched elements.
返回值
jQuery
参数
class (String) : (可选) 一个或多个要删除的CSS类名,请用空格分开
示例
从匹配的元素中删除 'selected' 类
HTML 代码:
Hello
jQuery 代码:
$("p").removeClass("selected");
结果:
[ Hello
]
--------------------------------------------------------------------------------
删除匹配元素的所有类
HTML 代码:
Hello
jQuery 代码:
$("p").removeClass();
结果:
[ Hello
] toggleClass(class)toggleClass(class)
如果存在(不存在)就删除(添加)一个类。
--------------------------------------------------------------------------------
Adds the specified class if it is not present, removes the specified class if it is present.
返回值
jQuery
参数
class (String) :CSS类名
示例
为匹配的元素切换 'selected' 类
HTML 代码:
Hello
Hello Again
jQuery 代码:
$("p").toggleClass("selected");
结果:
[ Hello
, Hello Again
] Html代码
html()html()
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
--------------------------------------------------------------------------------
Get the html contents of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).
返回值
String
示例
HTML 代码:
jQuery 代码:
$("div").html();
结果:
Hello html(val)html(val)
设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
--------------------------------------------------------------------------------
Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).
返回值
jQuery
参数
val (String) : 用于设定HTML内容的值
示例
HTML 代码:
jQuery 代码:
$("div").html("Hello Again
");
结果:
[ ] 文本
text()text()
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
--------------------------------------------------------------------------------
Get the text contents of all matched elements.
The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents.
返回值
String
示例
HTML 代码:
Test Paragraph.
Paraparagraph
jQuery 代码:
$("p").text();
结果:
Test Paragraph.Paraparagraph text(val)text(val)
设置所有匹配元素的文本内容
与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).
--------------------------------------------------------------------------------
Set the text contents of all matched elements.
Similar to html(), but escapes HTML (replace "<" and ">" with their HTML entities).
返回值
jQuery
参数
val (String) : 用于设置元素内容的文本
示例
HTML 代码:
Test Paragraph.
jQuery 代码:
$("p").text("Some new text.");
结果:
[ Some new text.
] 值
val()val()
获得第一个匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。
--------------------------------------------------------------------------------
Get the content of the value attribute of the first matched element.
In jQuery 1.2, a value is now returned for all elements, including selects. For multiple selects an array of values is returned.
返回值
String,Array
示例
获得单个select的值和多选select的值。
HTML 代码:
jQuery 代码:
$("p").append(
"Single: " + $("#single").val() +
" Multiple: " + $("#multiple").val().join(", ")
);
结果:
[ Single:SingleMultiple:Multiple, Multiple3
]
--------------------------------------------------------------------------------
获取文本框中的值
HTML 代码:
jQuery 代码:
$("input").val();
结果:
some text val(val)val(val)
设置每一个匹配元素的值。
在 jQuery 1.2, 这也可以为select元件赋值
--------------------------------------------------------------------------------
Set the value attribute of every matched element.
In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options.
返回值
jQuery
参数
val (String) : 要设置的值。
示例
设定文本框的值
HTML 代码:
jQuery 代码:
$("input").val("hello world!"); val(val)val(val)
check,select,radio等都能使用为之赋值
返回值
jQuery
参数
val (Array) : 用于 check/select 的值
示例
设定一个select和一个多选的select的值
HTML 代码:
check1
check2
radio1
radio2
jQuery 代码:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
筛选过滤
eq(index)eq(index)
获取第N个元素
这个元素的位置是从0算起。
--------------------------------------------------------------------------------
Reduce the set of matched elements to a single element.
The position of the element in the set of matched elements starts at 0 and goes to length - 1.
返回值
jQuery
参数
index (Integer) :元素在jQuery对象中的索引
示例
获取匹配的第二个元素
HTML 代码:
This is just a test.
So is this
jQuery 代码:
$("p").eq(1)
结果:
[ So is this
] hasClass(class)hasClass(class)
检查当前的元素是否含有某个特定的类,如果有,则返回true。
这其实就是 is("." + class)。
--------------------------------------------------------------------------------
Checks the current selection against a class and returns true, if at least one element of the selection has the given class.
This is an alternative to is("." + class).
返回值
Boolean
参数
class (String) : 用于匹配的类名
示例
给包含有某个类的元素进行一个动画。
HTML 代码:
jQuery 代码:
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
}); filter(expr)filter(expr)
筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式
--------------------------------------------------------------------------------
Removes all elements from the set of matched elements that do not match the specified expression(s).
This method is used to narrow down the results of a search. Provide a comma-separated list of expressions to apply multiple filters at once.
返回值
jQuery
参数
expr (Expression) : 表达式
示例
保留带有select类的元素
HTML 代码:
Hello
Hello Again
And Again
jQuery 代码:
$("p").filter(".selected")
结果:
[ And Again
]
--------------------------------------------------------------------------------
保留第一个以及带有select类的元素
HTML 代码:
Hello
Hello Again
And Again
jQuery 代码:
$("p").filter(".selected, :first")
结果:
[ Hello
, And Again
] filter(fn)filter(fn)
筛选出与指定函数返回值匹配的元素集合
这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除,否则就会保留。
--------------------------------------------------------------------------------
Removes all elements from the set of matched elements that does not match the specified function.
The function is called with a context equal to the current element (just like '$.each'). If the function returns false, then the element is removed - anything else and the element is kept.
返回值
jQuery
参数
fn (Function) : 传递进filter的函数
示例
保留子元素中不含有ol的元素。
HTML 代码:
- Hello
How are you?
jQuery 代码:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
结果:
[ How are you?
] is(expr)is(expr)
用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合,或者表达式无效,都返回'false'. 'filter' 内部实际也是在调用这个函数,所以,filter()函数原有的规则在这里也适用。
--------------------------------------------------------------------------------
Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.
If no element fits, or the expression is not valid, then the response will be 'false'. 'filter' is used internally, therefore all rules that apply there apply here, as well.
返回值
Boolean
参数
expr (String) :用于筛选的表达式
示例
由于input元素的父元素是一个表单元素,所以返回true。
HTML 代码:
jQuery 代码:
$("input[type='checkbox']").parent().is("form")
结果:
true map(callback)map(callback)
将一组元素转换成其他数组(不论是否是元素数组)
你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。
--------------------------------------------------------------------------------
Translate a set of elements into another set of values (which may, or may not, be elements).
You could use this to build lists of values, attributes, css values - or even perform special, custom, selector transformations. This is provided as a convenience method for using '$.map()'.
返回值
jQuery
参数
callback (Function) : 给每个元素执行的函数
示例
把form中的每