jQuery常用方法详解与示例

"Jquery 常用方法一览表" JQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和Ajax交互等任务。本摘要将详细解释标题和描述中提到的JQuery方法，以及一些额外的操纵DOM的方法。 1. **添加样式和属性** - `$(“p”).addClass(“样式类名”)`: 这个方法用于向选定的`<p>`元素添加CSS类，使得可以应用预先定义的样式。 - `$(“img”).attr({src:”test.jpg”, alt:”test Image”})`: 使用对象形式的`attr`方法可以同时为多个属性设置值，这里是为图片元素设置`src`和`alt`属性。 - `$(“img”).attr(“src”,”test.jpg”)`: 单独使用`attr`方法可以为一个属性设置值，例如改变图片的源URL。 - `$(“img”).attr(“title”, function() { return this.src })`: 使用函数返回的值作为属性值，这里将图片的`src`属性值设为`title`。 2. **获取和设置元素内容** - `$(“元素名称”).html()`: 获取选定元素内部的所有HTML内容，包括子元素。 - `$(“元素名称”).html(“<b>newstuff</b>”)`: 用新的HTML内容替换选定元素的现有内容。 - `$(“元素名称”).text()`: 获取选定元素的纯文本内容，不包含HTML标签。 - `$(“元素名称”).text(value)`: 设置选定元素的文本内容为指定的`value`。 3. **操作样式和属性** - `$(“元素名称”).removeAttr(“属性名称”)`: 删除选定元素的指定属性。 - `$(“元素名称”).removeClass(“class”)`: 移除选定元素上的指定样式类。 - `$(“元素名称”).toggleClass(“class”)`: 切换选定元素的样式类，如果已存在则移除，不存在则添加。 4. **输入元素的值** - `$(“input元素名称”).val()`: 获取输入元素（如`<input>`或`<textarea>`）的当前值。 - `$(“input元素名称”).val(value)`: 设置输入元素的值为`value`。 5. **DOM 操作** - `$(“元素名称”).after(content)`: 在选定元素后面插入`content`。 - `$(“元素名称”).append(content)`: 将`content`追加到选定元素的末尾。 - `$(“元素名称”).appendTo(content)`: 将选定元素附加到`content`之后。 - `$(“元素名称”).before(content)`: 在选定元素前面插入`content`。 - `$(“元素名称”).clone(布尔表达式)`: 克隆选定元素，可选地保留事件处理程序。 - `$(“元素名称”).empty()`: 清空选定元素的所有子元素和内容。 - `$(“元素名称”).insertAfter(content)`: 将选定元素插入到`content`之后。 - `$(“元素名称”).insertBefore(content)`: 将选定元素插入到`content`之前。 - `$(“元素”).prepend(content)`: 在选定元素的开头插入`content`。 这些方法只是JQuery库中的一部分，JQuery还提供了丰富的选择器、事件处理、动画效果和Ajax功能，使JavaScript开发更加高效和简洁。通过熟练掌握这些方法，开发者可以轻松地操作DOM，实现复杂的网页交互。