jQuery操作DOM:属性、内容与遍历

需积分: 10 3 下载量 47 浏览量 更新于2024-09-25 收藏 18KB TXT 举报
"jQuery常用方法包括对元素属性的增删改查、DOM操作以及遍历。这些方法使得JavaScript代码更加简洁高效,便于处理DOM元素和动态更新页面内容。以下是jQuery中的一些关键方法详解: 1. **Attribute** - `$(p).addClass('css样式');` 用于给匹配的元素添加指定的CSS类。 - `$(img).attr({src:'test.jpg', alt:'testImage'});` 设置或获取多个属性,如图片的src和alt。 - `$(img).attr('src', 'test.jpg');` 修改元素的特定属性,如图片的源URL。 - `$(img).attr('title', function(){return this.src;});` 使用函数来设置属性值,此例中返回图片的src作为title。 - `$(img).removeAttr('src');` 移除元素的指定属性。 - `$(img).removeClass('class');` 移除元素的某个CSS类。 - `$(img).toggleClass('class');` 根据当前状态切换CSS类,如果已存在则移除,否则添加。 2. **Manipulation** - `$(元素).html();` 获取元素的HTML内容。 - `$(元素).html('<b>newstuff</b>');` 替换元素的HTML内容。 - `$(元素).removeAttr('属性');` 删除元素的属性。 - `$(元素).empty();` 清空元素内的所有子元素。 - `$(元素).after(content);` 在元素后面插入内容。 - `$(元素).append(content);` 将内容追加到元素的末尾。 - `$(元素).appendTo(content);` 将元素追加到其他内容的末尾。 - `$(元素).before(content);` 在元素前面插入内容。 - `$(元素).clone(是否复制事件);` 克隆元素,可选参数决定是否复制绑定的事件。 - `$(元素).insertAfter(content);` 将元素插入到其他内容之后。 - `$(元素).insertBefore(content);` 将元素插入到其他内容之前。 - `$(元素).prepend(content);` 将内容插入到元素的开头。 - `$(元素).prependTo(content);` 将元素插入到其他内容的开头。 - `$(元素).remove();` 删除元素自身。 - `$(元素).remove(selector);` 根据选择器删除匹配的子元素。 - `$(元素).wrap(html);` 包裹元素,使用HTML字符串创建新的父元素。 - `$(元素).wrap(element);` 使用指定的DOM元素包裹元素。 3. **Traversing** - `$(元素).add(expr);` 添加更多的选择器到当前集合。 - `$(元素).children(expr);` 获取元素的所有子元素,可选表达式筛选特定子元素。 - `$(元素).contains(str);` 检查元素是否包含特定文本。 - `$(元素).end();` 返回到链式调用之前的集合。 - `$(元素).filter(expression);` 过滤元素集合,只保留匹配表达式的元素。 - `$(元素).find(expr);` 查找元素内部的后代元素。 - `$(元素).is(expression);` 检查元素是否匹配给定的选择器。 以上只是jQuery众多方法的一部分,jQuery库还包括事件处理、动画效果、AJAX交互等丰富功能,是前端开发中非常重要的工具,极大地简化了DOM操作和页面动态更新。通过熟练掌握这些方法,开发者可以更高效地构建动态、响应式的网页应用。