jQuery操作DOM：属性、操作与遍历

"jQuery函数大全" 在Web开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将详细介绍jQuery中的一些核心函数，帮助开发者更好地理解和运用jQuery。 一、属性操作（Attribute） 1. `$(p).addClass(css样式)`：向匹配元素集合中的每个元素添加指定的CSS类。 2. `$(img).attr({src: 'test.jpg', alt: 'testImage'})`：设置多个属性，这里同时设置了图片的src和alt属性。 3. `$(img).attr('src', 'test.jpg')`：设置单个属性值，如图片的src属性。 4. `$(img).attr('title', function(){return this.src})`：使用函数返回的值设置属性，这里将图片的title设置为其src属性的值。 5. `$(元素).html()`：获取匹配元素集合中第一个元素的HTML内容。 6. `$(元素).html('<b>newstuff</b>')`：替换匹配元素集合中所有元素的HTML内容。 7. `$(元素).removeAttr(属性名)`：移除匹配元素集合中所有元素的指定属性。 8. `$(元素).removeClass(类名)`：移除匹配元素集合中所有元素的指定CSS类。 9. `$(元素).text()`：获取匹配元素集合中第一个元素的文本内容。 10. `$(元素).text(值)`：设置匹配元素集合中所有元素的文本内容为指定的值。 11. `$(元素).toggleClass(类名)`：根据当前元素是否具有指定的类，切换该类。如果元素已包含该类，则删除；如果未包含，则添加。 12. `$(input元素).val()`：获取匹配的输入元素（如input）的值。 13. `$(input元素).val(值)`：设置匹配的输入元素的值为指定的值。 二、操作（Manipulation） 1. `$(元素).after(内容)`：在匹配元素集合中每个元素后面插入指定的内容。 2. `$(元素).append(内容)`：将内容追加到匹配元素集合中每个元素的末尾。 3. `$(元素).appendTo(内容)`：将匹配元素集合中的元素追加到指定的内容后面。 4. `$(元素).before(内容)`：在匹配元素集合中每个元素前面插入指定的内容。 5. `$(元素).clone(复制事件)`：复制匹配元素集合中的元素，可选参数决定是否复制事件绑定。 6. `$(元素).empty()`：清空匹配元素集合中每个元素的子内容。 7. `$(元素).insertAfter(内容)`：将匹配元素集合中的元素插入到指定内容的后面。 8. `$(元素).insertBefore(内容)`：将匹配元素集合中的元素插入到指定内容的前面。 9. `$(元素).prepend(内容)`：将内容预置于匹配元素集合中每个元素的开头。 10. `$(元素).prependTo(内容)`：将匹配元素集合中的元素预置于指定内容的开头。 11. `$(元素).remove([表达式])`：移除匹配元素集合中的元素，可选的表达式用于筛选要移除的元素。 12. `$(元素).wrap(HTML)`：用指定的HTML内容包裹匹配元素集合中的每个元素。 13. `$(元素).wrap(element)`：用指定的DOM元素包裹匹配元素集合中的每个元素。 三、遍历（Traversing） - `add(expr)`：将选择器、HTML字符串或DOM元素添加到当前匹配集。 - `add(html)`：添加HTML字符串到当前匹配集。 - `add(elements)`：添加DOM元素到当前匹配集。 - `children(expr)`：获取匹配元素集合中每个元素的所有直接子元素，可选的expr参数用于筛选特定的子元素。 - `contains(str)`：选择包含指定文本的元素。 - `end()`：返回上一个选择器的结果集，用于链式调用中恢复到之前的集合。 - `filter(expression)`：过滤匹配元素集合，只保留符合给定表达式的元素。 - `filter(filter)`：过滤匹配元素集合，只保留通过指定过滤函数的元素。 - `find(expr)`：在匹配元素集合中搜索子元素，匹配指定的选择器。 - `is(expression)`：检查匹配元素集合中是否存在满足给定表达式的元素。 以上是jQuery中的部分核心函数，它们极大地简化了JavaScript的DOM操作，提高了开发效率。了解并熟练掌握这些函数，能让你在开发中更加得心应手。