jQuery API 详解 中文版

jQuery1.1 API 中文版 第二部分DOM url: http://jquery.org.cn/visual/cn/index.xml 第二部分DOM 1. Attributes 1.1 addClass(class) 为每个匹配的元素添加指定的类名。 Adds the specified class to each of the set of matched elements. 返回值 jQuery 参数 class (String): 要添加到元素中的CSS类名 示例 HTML 代码: <p>Hello</p> jQuery 代码: $("p").addClass("selected") 结果: [ <p class="selected">Hello</p> ] 1.2 attr(name) 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。 Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. 返回值 Object 参数 name (String): 属性名称 示例 说明: 返回文档中第一个图像的src属性值。 HTML 代码: <img src="test.jpg"/> jQuery 代码: $("img").attr("src"); 结果: test.jpg 1.3 attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性。 这是一种在所有匹配元素中批量设置很多属性的最佳方式。 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. 返回值 jQuery 参数 properties (Map): 作为属性的“名/值对”对象 示例 说明: 为所有图像设置src和alt属性。 HTML 代码: <img/> jQuery 代码: $("img").attr({ src: "test.jpg", alt: "Test Image" }); 结果: <img src="test.jpg" alt="Test Image"/> 1.4 attr(key, value) 为所有匹配的元素设置一个属性值。 可以是由${规则}表达式提供的计算值，见示例2。 注意，不能在IE中设置input元素的name属性。可以使用$(html)或.append(html)或.html(html)动态地创建包含name属性的input元素。 Set a single property to a value, on all matched elements. Can compute values provided as ${formula}, see second example. Note that you can't set the name property of input elements in IE. Use $(html) or .append(html) or .html(html) to create elements on the fly including the name property. 返回值 jQuery 参数 key (String): 要设置的属性名 value (Object): 要设置的值 示例 说明: 为所有图像设置src属性。 HTML 代码: <img/> jQuery 代码: $("img").attr("src","test.jpg"); 结果: <img src="test.jpg"/> -------------------------------------------------------------------------------- 说明: 以src属性的值作为title属性的值。使用了attr(String,Function)的简写方式。 HTML 代码: <img src="test.jpg" /> jQuery 代码: $("img").attr("title", "${this.src}"); 结果: <img src="test.jpg" title="test.jpg" /> 1.5 attr(key, value) 为所有匹配的元素设置一个计算的属性值。 不提供值，而是提供一个函数，由这个函数计算的值作为属性值。 Set a single property to a computed value, on all matched elements. Instead of a value, a function is provided, that computes the value. 返回值 jQuery 参数 key (String): 要设置的属性名称 value (Function): 返回值的函数 示例 说明: 把src属性的值设置为title属性的值。 HTML 代码: <img src="test.jpg" /> jQuery 代码: $("img").attr("title", function() { return this.src }); 结果: <img src="test.jpg" title="test.jpg" /> 1.6 html() 取得第一个匹配元素的html内容。这个函数不能用于XML文档。 Get the html contents of the first matched element. This property is not available on XML documents. 返回值 String 示例 HTML 代码: <div><input/></div> jQuery 代码: $("div").html(); 结果: <input/> 1.7 html(val) 设置每一个匹配元素的html内容。这个函数不能用于XML文档。 Set the html contents of every matched element. This property is not available on XML documents. 返回值 jQuery 参数 val (String): Set the html contents to the specified value. 示例 HTML 代码: <div><input/></div> jQuery 代码: $("div").html("<b>new stuff</b>"); 结果: <div><b>new stuff</b></div> 1.8 removeAttr(name) 从每一个匹配的元素中删除一个属性。 Remove an attribute from each of the matched elements. 返回值 jQuery 参数 name (String): 要删除的属性名 示例 HTML 代码: <input disabled="disabled"/> jQuery 代码: $("input").removeAttr("disabled") 结果: <input/> 1.9 removeClass(class) 从所有匹配的元素中删除全部或者指定的类。 Removes all or the specified class from the set of matched elements. 返回值 jQuery 参数 class (String): (可选) 要删除的类名 示例 HTML 代码: <p class="selected">Hello</p> jQuery 代码: $("p").removeClass() 结果: [ <p>Hello</p> ] -------------------------------------------------------------------------------- HTML 代码: <p class="selected first">Hello</p> jQuery 代码: $("p").removeClass("selected") 结果: [ <p class="first">Hello</p> ] 1.10 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 代码: <p><b>Test</b> Paragraph.</p><p>Paraparagraph</p> jQuery 代码: $("p").text(); 结果: Test Paragraph.Paraparagraph 1.11 text(val) 设置所有匹配元素的文本内容。这个函数与html()函数具有同样的效果。 Set the text contents of all matched elements. This has the same effect as html(). 返回值 String 参数 val (String): 文本内容 示例 说明: 设置所有段落的文本内容。 HTML 代码: <p>Test Paragraph.</p> jQuery 代码: $("p").text("Some new text."); 结果: <p>Some new text.</p> 1.12 toggleClass(class) 如果存在（不存在）就删除（添加）一个类。 Adds the specified class if it is not present, removes it if it is present. 返回值 jQuery 参数 class (String): CSS类名 示例 HTML 代码: <p>Hello</p><p class="selected">Hello Again</p> jQuery 代码: $("p").toggleClass("selected") 结果: [ <p class="selected">Hello</p>, <p>Hello Again</p> ] 1.13 val() 获得第一个匹配元素的当前值。 Get the current value of the first matched element. 返回值 String 示例 HTML 代码: <input type="text" value="some text"/> jQuery 代码: $("input").val(); 结果: "some text" 1.14 val(val) 设置每一个匹配元素的值。 Set the value of every matched element. 返回值 jQuery 参数 val (String): 要设置的值。 示例 HTML 代码: <input type="text" value="some text"/> jQuery 代码: $("input").val("test"); 结果: <input type="text" value="test"/> 2. Manipulation 2.1 after(content) 在每个匹配的元素之后插入内容。 Insert content after each of the matched elements. 返回值 jQuery 参数 content (<Content>): 插入到每个目标后的内容 示例 说明: 在所有段落之后插入一些HTML标记代码。 HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").after("<b>Hello</b>"); 结果: <p>I would like to say: </p><b>Hello</b> -------------------------------------------------------------------------------- 说明: 在所有段落之后插入一个元素。 HTML 代码: <b id="foo">Hello</b><p>I would like to say: </p> jQuery 代码: $("p").after( $("#foo")[0] ); 结果: <p>I would like to say: </p><b id="foo">Hello</b> -------------------------------------------------------------------------------- 说明: 在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。 HTML 代码: <b>Hello</b><p>I would like to say: </p> jQuery 代码: $("p").after( $("b") ); 结果: <p>I would like to say: </p><b>Hello</b> 2.2 append(content) 向每个匹配的元素内部追加内容。 这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。 Append content to the inside of every matched element. This operation is similar to doing an appendChild to all the specified elements, adding them into the document. 返回值 jQuery 参数 content (<Content>): 要追加到目标中的内容 示例 说明: 向所有段落中追加一些HTML标记。 HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").append("<b>Hello</b>"); 结果: <p>I would like to say: <b>Hello</b></p