jQuery操作DOM与内容指南

"jQuery函数大全，涵盖DOM操作、内容操纵、遍历等核心功能" jQuery是一种广泛使用的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。以下是一些主要的jQuery函数及其详细解释： 1. DOM操作： - `$(p).addClass("css样式");` 为指定的`<p>`元素添加CSS类。 - `$(img).attr({src: 'test.jpg', alt: 'testImage'});` 设置或改变`<img>`元素的属性，如`src`和`alt`。 - `$(img).attr('src', 'test.jpg');` 更改`<img>`元素的`src`属性。 - `$("img").attr("title", function() { return this.src; });` 为所有`<img>`元素设置`title`属性，值为其`src`属性。 - `$("div").removeAttr("class");` 移除所有`<div>`元素的`class`属性。 - `$("div").removeClass("class");` 移除`<div>`元素的指定CSS类。 - `$("div").text();` 获取`<div>`元素内的文本内容。 - `$("div").text("新内容");` 替换`<div>`元素内的文本内容。 2. 内容操纵： - `$("div").html();` 获取`<div>`元素的HTML内容。 - `$("div").html("<b>newstuff</b>");` 设置`<div>`元素的HTML内容。 - `$("input").val();` 获取输入元素（如`<input>`）的值。 - `$("input").val("新值");` 设置输入元素的值。 - `$("div").toggleClass("class");` 切换`<div>`元素的CSS类，如果已存在则移除，不存在则添加。 3. 遍历和选择： - `$("div").after("新内容");` 在每个`<div>`元素之后插入内容。 - `$("div").append("新内容");` 在每个`<div>`元素末尾添加内容。 - `$("div").appendTo("父元素");` 将所有`<div>`元素添加到指定的“父元素”末尾。 - `$("div").before("新内容");` 在每个`<div>`元素之前插入内容。 - `$("div").clone(true);` 克隆`<div>`元素，如果参数`true`，则包括绑定的事件和数据。 - `$("div").empty();` 清空`<div>`元素内的所有内容。 - `$("div").insertAfter("目标元素");` 将所有`<div>`元素插入到“目标元素”之后。 - `$("div").insertBefore("目标元素");` 将所有`<div>`元素插入到“目标元素”之前。 - `$("div").prepend("新内容");` 在每个`<div>`元素开头添加内容。 - `$("div").prependTo("目标容器");` 将所有`<div>`元素作为内容添加到“目标容器”的开头。 - `$("div").remove();` 删除所有`<div>`元素。 - `$("div").remove(":even");` 删除所有偶数索引的`<div>`元素。 - `$("div").wrap("包裹元素");` 将所有`<div>`元素包裹在指定的“包裹元素”内。 - `$("div").wrapElement);` 将每个`<div>`元素分别包裹在给定的`element`内。 4. 过滤与选择： - `$("div").add("expr");` 合并两个或多个选择器的结果集。 - `$("div").children("expr");` 获取`<div>`元素的子元素，过滤出匹配表达式的子元素。 - `$("div").contains("str");` 查找包含指定文本的`<div>`元素。 - `$("div").end();` 返回到最近的匹配集，用于链式调用。 - `$("div").filter("expr");` 过滤`<div>`元素，仅保留匹配表达式的元素。 以上只是一部分jQuery函数的概述，jQuery库中还包括许多其他功能，如动画效果、事件处理、Ajax请求等。学习和掌握这些函数，将极大提高在网页开发中的效率。