jQuery基础教程:DOM操作与样式修改

需积分: 9 1 下载量 77 浏览量 更新于2024-10-14 收藏 173KB PDF 举报
"jQuery教程jQuery教程" jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画设计和 AJAX 交互。jQuery 的语法设计使得开发者能够更快速、更简单地实现丰富的网页交互效果。以下是对jQuery常用方法的详细说明: 1. **选择器**:`$(”元素名称”)` 是 jQuery 的基本选择器,用于选取页面中的特定元素。例如,`$("p")` 会选取所有的段落元素。 2. **添加样式**:`$(”p”).addClass(css中定义样式类型)` 用于向匹配元素添加 CSS 类,增加样式表现。 3. **设置属性**:`$(”img”).attr({src:”test.jpg”,alt:”testImage”})` 用于批量设置元素属性,这里以图片元素为例,同时设置 `src` 和 `alt` 属性。 4. **单个属性设置**:`$(”img”).attr(”src”,”test.jpg”);` 用于单独设置某个属性,如图片的源地址。 5. **动态属性设置**:`$(”img”).attr(”title”,function{this.src});` 使用函数返回值作为属性值,这里的 `title` 属性会被设置为图片的 `src` 值。 6. **获取元素内容**:`$(”元素名称”).html();` 获取元素的 HTML 内容,包括标签和文本。 7. **设置元素内容**:`$(”元素名称”).html(”<b>stuff</b>”);` 用于替换元素的 HTML 内容。 8. **删除属性**:`$(”元素名称”).removeAttr(”属性名称”)` 移除指定元素的某个属性。 9. **删除样式**:`$(”元素名称”).removeClass(””)` 删除元素的指定 CSS 类,如果无参数则移除所有类。 10. **获取元素文本**:`$(”元素名称”).text();` 获取元素的纯文本内容,不包括 HTML 标签。 11. **设置元素文本**:`$(”元素名称”).text(value);` 设置元素的文本内容。 12. **切换样式**:`$(”元素名称”).toggleClass()` 在元素已有样式时去除,没有时添加,如果提供样式名则只针对该样式进行切换。 13. **获取输入元素值**:`$(”input元素名称”).val();` 获取输入元素(如 `input`、`textarea`)的值。 14. **设置输入元素值**:`$(”input元素名称”).val(value);` 设置输入元素的值。 **DOM 操作**: 15. **在元素后插入内容**:`$(”元素名称”).after(content);` 在匹配元素之后插入指定内容。 16. **内容追加**:`$(”元素名称”).append(content);` 将内容添加到元素的末尾。 17. **内容预置**:`$(”元素名称”).prepend(content);` 在元素内容的开头添加内容。 18. **内容嵌入**:`$(”元素名称”).appendTo(content);` 将元素本身插入到其他内容之后。 19. **在元素前插入内容**:`$(”元素名称”).before(content);` 在匹配元素之前插入内容。 20. **克隆元素**:`$(”元素名称”).clone(布尔表达式)` 克隆元素,可选参数决定是否保留事件绑定。 21. **清空元素内容**:`$(”元素名称”).empty();` 清除元素内的所有子元素。 22. **插入到内容后**:`$(”元素名称”).insertAfter(content);` 将元素插入到其他内容之后。 23. **插入到内容前**:`$(”元素名称”).insertBefore(content);` 将元素插入到其他内容之前。 jQuery 还提供了丰富的动画功能(如 `.fadeIn()`, `.slideToggle()`, `.animate()` 等)和 AJAX 方法(如 `.load()`, `.get()`, `.post()`),这些都极大地简化了网页开发工作。通过熟练掌握 jQuery,开发者可以编写出高效且易于维护的 JavaScript 代码,提升网站的用户体验。