jQuery操作DOM:属性、内容与遍历
需积分: 10 159 浏览量
更新于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操作和页面动态更新。通过熟练掌握这些方法,开发者可以更高效地构建动态、响应式的网页应用。
2012-07-31 上传
2023-05-20 上传
2023-06-07 上传
2023-05-24 上传
2023-07-29 上传
2023-05-18 上传
2023-07-11 上传
whk010
- 粉丝: 22
- 资源: 9
最新资源
- 彩虹rain bow point鼠标指针压缩包使用指南
- C#开发的C++作业自动批改系统
- Java实战项目:城市公交查询系统及部署教程
- 深入掌握Spring Boot基础技巧与实践
- 基于SSM+Mysql的校园通讯录信息管理系统毕业设计源码
- 精选简历模板分享:简约大气,适用于应届生与在校生
- 个性化Windows桌面:自制图标大全指南
- 51单片机超声波测距项目源码解析
- 掌握SpringBoot实战:深度学习笔记解析
- 掌握Java基础语法的关键知识点
- SSM+mysql邮件管理系统毕业设计源码免费下载
- wkhtmltox下载困难?找到正确的安装包攻略
- Python全栈开发项目资源包 - 功能复刻与开发支持
- 即时消息分发系统架构设计:以tio为基础
- 基于SSM框架和MySQL的在线书城项目源码
- 认知OFDM技术在802.11标准中的项目实践