JQuery常用思路方法

### JQuery常用思路与方法详解 #### 一、简介 JQuery 是一款轻量级的 JavaScript 库，它简化了许多常见的 JavaScript 操作，如 HTML 文档遍历、操作、事件处理、动画以及 AJAX 交互等。通过使用 JQuery，开发者能够更加高效地编写功能强大的网页应用程序。本文将详细介绍 JQuery 的一些常用思路与方法，帮助读者快速掌握这门技术。 #### 二、基本概念与操作 ##### 1. 选择器 JQuery 提供了丰富的选择器来定位 DOM 元素，使得获取元素变得非常简单。 - **基础选择器**： - `$(“p”)`：选择所有 `<p>` 元素。 - `$(“#id”)`：选择 ID 为 `id` 的元素。 - `$(“.class”)`：选择所有 class 为 `class` 的元素。 - `$(“elementName”)`：选择所有名为 `elementName` 的元素。 - **后代选择器**： - `$(“div p”)`：选择所有位于 `<div>` 内的 `<p>` 元素。 - `$(“div > p”)`：选择所有直接位于 `<div>` 内的 `<p>` 元素。 - **属性选择器**： - `$(“[attr]”)`：选择具有 `attr` 属性的所有元素。 - `$(“[attr=value]”)`：选择具有 `attr` 属性且其值为 `value` 的所有元素。 - `$(“[attr!=value]”)`：选择具有 `attr` 属性但其值不为 `value` 的所有元素。 ##### 2. 常用方法 - **添加类名**： - `$(“p”).addClass(“css中定义样式类型”)`：给所有 `<p>` 元素添加一个 CSS 类。 - **添加属性**： - `$(“img”).attr({src:”test.jpg”,alt:”testImage”})`：给所有 `<img>` 元素添加 `src` 和 `alt` 属性及其值。 - `$(“img”).attr(“src”,”test.jpg”)`：给所有 `<img>` 元素添加 `src` 属性及其值。 - `$(“img”).attr(“title”, function {this.src})`：给所有 `<img>` 元素动态添加 `title` 属性及其值（这里应该修改为正确的语法：`$(“img”).attr(“title”, function() {return this.src;})`）。 - **获取/设置元素内容**： - `$(“元素名称”).html()`：获取该元素的内容。 - `$(“元素名称”).html(“<b>stuff</b>”)`：设置该元素的内容为 `<b>stuff</b>`。 - `$(“元素名称”).text()`：获取该元素的文本。 - `$(“元素名称”).text(value)`：设置该元素的文本值为 `value`。 - **移除属性/类**： - `$(“元素名称”).removeAttr(“属性名称”)`：移除指定元素的属性及其值。 - `$(“元素名称”).removeClass(“样式名称”)`：移除指定元素的 CSS 类。 - **切换类**： - `$(“元素名称”).toggleClass(“样式名称”)`：如果元素有该样式则移除，如果没有则添加。 - **获取/设置 input 元素值**： - `$(“input元素名称”).val()`：获取 input 元素的值。 - `$(“input元素名称”).val(value)`：设置 input 元素的值为 `value`。 #### 三、DOM 操作 - **插入元素**： - `$(“元素名称”).after(content)`：在匹配元素后面添加内容。 - `$(“元素名称”).append(content)`：将内容追加到该元素的末尾。 - `$(“元素名称”).prepend(content)`：将内容添加到该元素的开头。 - `$(“元素名称”).appendTo(content)`：将该元素附加到另一个元素的末尾。 - `$(“元素名称”).insertBefore(content)`：将该元素插入到另一个元素之前。 - **克隆元素**： - `$(“元素名称”).clone([withDataAndEvents])`：克隆元素，可选择是否复制数据和事件。 - **清空内容**： - `$(“元素名称”).empty()`：清除该元素的所有子节点。 - **移除元素**： - `$(“元素名称”).remove()`：移除该元素。 - `$(“元素名称”).remove(“exp”)`：移除包含指定表达式的元素。 - **包装元素**： - `$(“元素”).wrap(“html”)`：用 HTML 包围该元素。 - `$(“元素”).wrap(element)`：用另一个元素包围该元素。 #### 四、遍历元素 - **基本遍历方法**： - `add(expr)`：向集合添加元素。 - `children(expr)`：返回所有直接子元素。 - `next(expr)`：返回下一个兄弟元素。 - `prev(expr)`：返回上一个兄弟元素。 - `siblings(expr)`：返回所有的兄弟元素。 - `parent(expr)`：返回父元素。 - `parents(expr)`：返回所有祖先元素。 - `find(expr)`：返回所有后代元素。 - **过滤方法**： - `filter(expression)`：返回与表达式匹配的元素。 - `not(expression)`：返回不与表达式匹配的元素。 - **检查方法**： - `is(expr)`：判断是否与表达式匹配。 #### 五、核心方法 - **创建元素**： - `$(html).appendTo(“body”)`：将 HTML 字符串转换为元素并附加到 body。 - **获取元素**： - `$(“elems”)`：获取 DOM 上的元素。 - **执行函数**： - `$(function{…})`：页面加载完成后执行函数。 - **扩展方法**： - `$.extend(prop)`：扩展 jQuery 对象的方法或属性。 #### 六、示例 ```javascript // 示例 1: 为所有 span 元素添加/移除 class "example" 当点击任意 li 元素时 $(“span”).click(function(){ $(“li”).each(function(){ $(this).toggleClass(“example”); }); }); // 示例 2: 获取所有 div 子节点中的 p 元素，并添加边框样式 $(“div>p”).css(“border”, “1px solid gray”); // 示例 3: 扩展 jQuery 对象 jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); // 示例 4: 查询 DOM 元素 jQuery(“div>p”); // 查询所有 div 子节点中的 p 元素 ``` #### 七、总结 通过上述介绍，我们了解了 JQuery 中常用的思路与方法。JQuery 的强大之处在于它可以极大地简化复杂的 DOM 操作，使得开发者能够更加专注于业务逻辑而不是底层细节。掌握了这些基本概念和方法之后，你可以更加高效地利用 JQuery 来构建动态的 Web 应用程序。