7,786
社区成员
发帖
与我相关
我的任务
分享one
two
three
jQuery 代码: $("div > p"); 结果: [two
] -------------------------------------------------------------------------------- 在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 jQuery 代码: $("input:radio", document.forms[0]); -------------------------------------------------------------------------------- 在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。 jQuery 代码: $("div", xml.responseXML); jQuery(html)jQuery(html) 根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。 你可以传递一个手写的 HTML 字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制,可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址),还有反斜杠。当你创建单个元素时,请使用闭合标签或 XHTML 格式。例如,创建一个 span ,可以用 $("") 或 $("") ,但不推荐 $("") -------------------------------------------------------------------------------- Create DOM elements on-the-fly from the provided String of raw HTML. You can pass in plain HTML Strings written by hand, create them using some template engine or plugin, or load them via AJAX. There are limitations when creating input elements, see the second example. Also when passing strings that may include slashes (such as an image path), escape the slashes. When creating single elements use the closing tag or XHTML format. For example, to create a span use $("") or $("") instead of without the closing slash/tag. 返回值 jQuery 参数 html (String) : 用于动态创建DOM元素的HTML标记字符串 示例 动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中。在这个函数的内部,是通过临时创建一个元素,并将这个元素的 innerHTML 属性设置为给定的标记字符串,来实现标记到 DOM 元素转换的。所以,这个函数既有灵活性,也有局限性。 jQuery 代码: $("Hello
,
]
--------------------------------------------------------------------------------
如果你想得到 jQuery对象,可以使用 $(this) 函数。
jQuery 代码:
$("img").each(function(){
$(this).toggleClass("example");
});
--------------------------------------------------------------------------------
你可以使用 'return' 来提前跳出 each() 循环。
HTML 代码:
jQuery 代码:
$("img").size();
结果:
2 lengthlength
jQuery 对象中元素的个数。
当前匹配的元素个数。 size 将返回相同的值。
--------------------------------------------------------------------------------
The number of elements in the jQuery object.
The number of elements currently matched. The size function will return the same value.
返回值
Number
示例
计算文档中所有图片数量
HTML 代码:
jQuery 代码:
$("img").length;
结果:
2 get()get()
取得所有匹配的 DOM 元素集合。
这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。
如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。
--------------------------------------------------------------------------------
Access all matched DOM elements.
This serves as a backwards-compatible way of accessing all matched elements (other than the jQuery object itself, which is, in fact, an array of elements). It is useful if you need to operate on the DOM elements themselves instead of using built-in jQuery functions.
返回值
Array
jQuery 代码:
$("img").get().reverse();
结果:
[
] get(index)get(index)
取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
--------------------------------------------------------------------------------
Access a single matched DOM element at a specified index in the matched set.
This allows you to extract the actual DOM element and operate on it directly without necessarily using jQuery functionality on it. This function called as $(this).get(0) is the equivalent of using square bracket notation on the jQuery object itself like $(this)[0].
返回值
Element
参数
index (Number) :取得第 index 个位置上的元素
示例
HTML 代码:
jQuery 代码:
$("img").get(0);
结果:
[
] index(subject)index(subject)
搜索与参数表示的对象匹配的元素,并返回相应元素的索引值值。
如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。
--------------------------------------------------------------------------------
Searches every matched element for the object and returns the index of the element, if found, starting with zero.
Returns -1 if the object wasn't found.
返回值
Number
参数
subject (Element) : 要搜索的对象
示例
返回ID值为foobar的元素的索引值值。
HTML 代码:
id="notMe"
P
jQuery 代码: $("*") 结果: [P
] selector1,selector2,selectorNselector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。 你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。 -------------------------------------------------------------------------------- Matches the combined results of all the specified selectors. You can specify any number of selectors to combine into a single result. 返回值 Arrayp class="myClass"
spanp class="notMyClass"
jQuery 代码: $("div,span,p.myClass") 结果: [p class="myClass"
, span ] 层级 ancestor descendantancestor descendant 在给定的祖先元素下匹配所有的后代元素 -------------------------------------------------------------------------------- Matches all descendant elements specified by descendant of elements specified by ancestor. 返回值 Array| Header 1 |
| Value 1 |
| Value 2 |
| Header 1 |
| Value 1 |
| Value 2 |
| Header 1 |
| Value 1 |
| Value 2 |
| Header 1 |
| Value 1 |
| Value 2 |
| Header 1 |
| Value 1 |
| Value 2 |
| Header 1 |
| Value 1 |
| Value 2 |
| Header 1 |
| Value 1 |
| Value 2 |
Contents 1
Contents 2
jQuery 代码: $(":header").css("background", "#EEE"); 结果: [ <h1 style="background:#EEE;">Header 1h1>,| Value 1 | |
| Value 2 |
Hello
Hello
| Value 1 | |
| Value 2 |
| Value 2 |
| Value 2 |
Hello!
| Value 2 |
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 代码:
]
--------------------------------------------------------------------------------
attr(key,value)attr(key,value)
为所有匹配的元素设置一个属性值。
--------------------------------------------------------------------------------
Set a single property to a value, on all matched elements.
返回值
jQuery
参数
key (String) : 属性名称
value (Object) : 属性值
示例
为所有图像设置src属性。
HTML 代码:
,
] 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");
结果:
[ 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 代码:Hello
Hello Again
"); 结果: [Hello Again
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 代码: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 (ArrayThis 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 代码: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中的每