JQuery：常用方法一览

### JQuery：常用方法一览 #### 属性操作 (Attribute) 1. **`addClass(cssClass)`**： - **功能**：为元素添加一个或多个类名（用于样式控制）。 - **示例**：`$("p").addClass("highlight");` - **说明**：此方法可以快速地为页面中的元素添加类名，便于CSS样式的控制。 2. **`attr(name[, value])`**： - **功能**：获取或设置属性值。 - **示例**： - 获取属性值：`var src = $("img").attr("src");` - 设置属性值：`$("img").attr("src", "test.jpg");` - **说明**：`attr()`方法可以获取或设置HTML元素的属性值，例如`src`、`title`等。 3. **`html([htmlString])`**： - **功能**：获取或设置HTML元素的内容。 - **示例**： - 获取元素内容：`var content = $("#element").html();` - 设置元素内容：`$("#element").html("<b>New Content</b>");` - **说明**：使用此方法可以动态地更改页面元素的内容。 4. **`removeAttr(attribute)`**： - **功能**：删除指定的属性。 - **示例**：`$("element").removeAttr("class");` - **说明**：可以移除HTML元素的特定属性，例如`class`、`id`等。 5. **`removeClass(cssClass)`**： - **功能**：移除一个或多个类名。 - **示例**：`$("p").removeClass("highlight");` - **说明**：与`addClass()`相对，该方法用于移除元素的类名。 6. **`text([content])`**： - **功能**：获取或设置文本内容。 - **示例**： - 获取文本内容：`var textContent = $("#element").text();` - 设置文本内容：`$("#element").text("New Text");` - **说明**：适用于纯文本的获取和设置，不支持HTML标签。 7. **`toggleClass(cssClass)`**： - **功能**：切换类名，如果存在则移除，不存在则添加。 - **示例**：`$("p").toggleClass("highlight");` - **说明**：在动态样式控制时非常有用。 8. **`val([value])`**： - **功能**：获取或设置表单元素的值。 - **示例**： - 获取表单值：`var inputValue = $("input").val();` - 设置表单值：`$("input").val("New Value");` - **说明**：适用于各种表单输入类型，如文本框、选择框等。 #### 操作修改 (Manipulation) 1. **`after(content)`**： - **功能**：在每个匹配的元素后插入内容。 - **示例**：`$("p").after("<span>New Span</span>");` 2. **`append(content)`**： - **功能**：向每个匹配的元素追加内容。 - **示例**：`$("div").append("<p>New Paragraph</p>");` 3. **`appendTo(content)`**： - **功能**：将每个匹配的元素插入到另一个指定元素的末尾。 - **示例**：`$("p").appendTo("#container");` 4. **`before(content)`**： - **功能**：在每个匹配的元素前插入内容。 - **示例**：`$("p").before("<span>New Span</span>");` 5. **`clone(deep)`**： - **功能**：复制元素及其子元素。 - **示例**：`var clone = $("p").clone(true);` - **说明**：参数`true`表示深克隆，即包括子元素。 6. **`empty()`**： - **功能**：清空匹配元素的所有子节点。 - **示例**：`$("div").empty();` 7. **`insertAfter(content)`**： - **功能**：将每个匹配的元素插入到另一个指定元素之后。 - **示例**：`$("p").insertAfter("#anotherDiv");` 8. **`insertBefore(content)`**： - **功能**：将每个匹配的元素插入到另一个指定元素之前。 - **示例**：`$("p").insertBefore("#anotherDiv");` 9. **`prepend(content)`**： - **功能**：在每个匹配的元素前面添加新的内容。 - **示例**：`$("div").prepend("<p>New Paragraph</p>");` 10. **`prependTo(content)`**： - **功能**：将每个匹配的元素插入到另一个指定元素的开始位置。 - **示例**：`$("p").prependTo("#container");` 11. **`remove()`**： - **功能**：从DOM中删除匹配的元素。 - **示例**：`$("p").remove();` 12. **`wrap(html)`**： - **功能**：用指定的HTML结构包裹每个匹配的元素。 - **示例**：`$("p").wrap("<div class='wrapper'></div>");` #### 遍历 (Traversing) 1. **`add(expr)`**： - **功能**：将元素添加到当前的匹配集合中。 - **示例**：`$("p").add(".highlight");` 2. **`children(expr)`**： - **功能**：返回匹配元素的直接子元素。 - **示例**：`$("div").children("p");` 3. **`contains(str)`**： - **功能**：检查匹配的元素是否包含指定的文本。 - **示例**：`$("div").contains("Hello World");` 4. **`end()`**： - **功能**：结束遍历，并返回到上一步的状态。 - **示例**：`$("div > p").end().css("color", "red");` 5. **`filter(expression)`**： - **功能**：创建一个新集合，包含匹配集合中通过指定函数过滤的元素。 - **示例**：`$("p").filter(":visible");` 6. **`find(expr)`**： - **功能**：返回匹配元素后代中匹配选择器的元素。 - **示例**：`$("div").find("p");` 7. **`is(expr)`**： - **功能**：判断匹配集合中的元素是否符合指定的选择器。 - **示例**：`$("p").is(":visible");` 8. **`next(expr)`**： - **功能**：返回匹配元素后的同辈元素。 - **示例**：`$("p").next("div");` 9. **`not(expr)`**： - **功能**：创建一个新集合，排除匹配集合中通过指定函数过滤的元素。 - **示例**：`$("p").not(".highlight");` 10. **`parent(expr)`**： - **功能**：返回匹配元素的父元素。 - **示例**：`$("p").parent();` 11. **`parents(expr)`**： - **功能**：返回匹配元素的所有祖先元素。 - **示例**：`$("p").parents("div");` 12. **`prev(expr)`**： - **功能**：返回匹配元素之前的同辈元素。 - **示例**：`$("p").prev("div");` 13. **`siblings(expr)`**： - **功能**：返回匹配元素的兄弟元素。 - **示例**：`$("p").siblings("div");` #### 核心方法 (Core) 1. **`$(html).appendTo(body)`**： - **功能**：将HTML字符串作为元素插入到页面中指定的位置。 - **示例**：`$("<div>Hello World</div>").appendTo("body");` 2. **`$(elems)`**： - **功能**：创建一个jQuery对象，包含DOM树中的元素。 - **示例**：`var $elems = $("p");` 3. **`$(function(){...})`**： - **功能**：文档加载完成时执行函数。 - **示例**：`$(function() { $("p").hide(); });` 4. **`each(callback)`**： - **功能**：对匹配的每个元素执行指定的函数。 - **示例**： - 示例1：`$("span").click(function() { $("li").each(function() { $(this).toggleClass("example"); }); });` - 示例2：`$("button").click(function() { $("div").each(function(index, domEle) { // domEle == this $(domEle).css("background-color", "yellow"); if ($(this).is("#stop")) { $("span").text("Stopped at div index #" + index); return false; } }); });` #### 事件处理 (Events) 1. **`ready(fn)`**： - **功能**：当DOM加载完成后，执行一个函数。 - **示例**：`$(document).ready(function() { /* 执行代码 */ });` 2. **`bind(type, [data], fn)`**： - **功能**：为匹配的元素绑定事件处理器。 - **示例**：`$("button").bind("click", function() { alert("Button clicked!"); });` 3. **其他事件**： - **功能**：支持多种事件，如`click`, `blur`, `focus`, `load`, `resize`, `scroll`, `unload`, `dblclick`, `mousedown`, `mouseup`, `mousemove`, `mouseover`, `mouseout`, `mouseenter`, `mouseleave`等。 - **示例**：`$("input[type='text']").bind("focus", function() { $(this).css("border", "1px solid blue"); });` 以上是JQuery中常用的属性、操作、遍历及核心方法的相关介绍。这些方法在Web开发中极为常见，能够极大地简化JavaScript代码的编写过程，提高前端开发效率。