jQuery操作DOM:属性、内容与遍历
需积分: 10 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操作和页面动态更新。通过熟练掌握这些方法,开发者可以更高效地构建动态、响应式的网页应用。
2012-07-31 上传
2011-04-26 上传
2010-08-10 上传
2014-04-23 上传
2012-12-20 上传
点击了解资源详情
whk010
- 粉丝: 22
- 资源: 9
最新资源
- Android圆角进度条控件的设计与应用
- mui框架实现带侧边栏的响应式布局
- Android仿知乎横线直线进度条实现教程
- SSM选课系统实现:Spring+SpringMVC+MyBatis源码剖析
- 使用JavaScript开发的流星待办事项应用
- Google Code Jam 2015竞赛回顾与Java编程实践
- Angular 2与NW.js集成:通过Webpack和Gulp构建环境详解
- OneDayTripPlanner:数字化城市旅游活动规划助手
- TinySTM 轻量级原子操作库的详细介绍与安装指南
- 模拟PHP序列化:JavaScript实现序列化与反序列化技术
- ***进销存系统全面功能介绍与开发指南
- 掌握Clojure命名空间的正确重新加载技巧
- 免费获取VMD模态分解Matlab源代码与案例数据
- BuglyEasyToUnity最新更新优化:简化Unity开发者接入流程
- Android学生俱乐部项目任务2解析与实践
- 掌握Elixir语言构建高效分布式网络爬虫