jQuery技巧大放送很实用.doc

### jQuery技巧详解 #### 一、页面元素的引用方式 在使用jQuery时，最基础的操作之一就是选择页面上的元素。通常我们使用`$()`符号来完成这一任务，它支持多种选择器，包括但不限于： - **ID选择器**：通过元素的ID来定位，例如：`$("#elementId")`。 - **类选择器**：通过类名来定位一组元素，例如：`$(".className")`。 - **标签选择器**：通过HTML标签名称来选择元素，例如：`$("div")`。 - **属性选择器**：根据属性值来选择元素，例如：`$("[name='username']")`。 - **层级关系**：通过父子关系、兄弟关系等方式定位元素，例如：`$("ul li")`选择所有`<li>`元素，这些元素是`<ul>`的直接子元素。 返回的对象是一个jQuery对象（集合对象），这意味着无法直接调用DOM API定义的方法，而是需要调用jQuery提供的方法。 #### 二、获取jQuery集合中的某一项 在使用jQuery获取元素集合后，可能需要进一步获取集合中的特定项。有多种方式可以做到这一点： - **`eq(index)`**：返回一个新集合，包含原集合中索引为`index`的元素。例如：`$("div").eq(2)`返回索引为2的`<div>`元素（jQuery对象）。 - **`get(index)`**：返回集合中索引为`index`的DOM元素（非jQuery对象）。例如：`$("div").get(2)`返回索引为2的`<div>`元素的DOM对象。 - **索引号访问**：类似于数组访问的方式，例如：`$("div")[2]`也返回索引为2的`<div>`元素的DOM对象。 需要注意的是，`eq(index)`返回的是jQuery对象，而`get(index)`和索引号访问返回的是DOM对象。这意味着如果希望继续使用jQuery方法，则应使用`eq(index)`；如果希望使用DOM API，则应使用`get(index)`或索引号访问。 #### 三、同一函数实现设置(set)和获取(get) jQuery中的许多方法都支持同时作为获取和设置功能使用。以下是一些示例： - **`html()`**：获取或设置元素内的HTML内容。 - 获取：`$("#msg").html();`返回ID为`msg`的元素的HTML内容。 - 设置：`$("#msg").html("<b>newcontent</b>");`将`<b>newcontent</b>`作为HTML串写入ID为`msg`的元素中。 - **`text()`**：获取或设置元素内的文本内容。 - 获取：`$("#msg").text();`返回ID为`msg`的元素的文本内容。 - 设置：`$("#msg").text("<b>newcontent</b>");`将`<b>newcontent</b>`作为普通文本串写入ID为`msg`的元素中。 - **`height()`** 和 **`width()`**：获取或设置元素的高度和宽度。 - 获取：`$("#msg").height();`返回ID为`msg`的元素的高度。 - 设置：`$("#msg").height("300");`将ID为`msg`的元素的高度设为300像素。 - **`val()`**：获取或设置表单元素的值。 - 获取：`$("input").val();`返回表单输入框的值。 - 设置：`$("input").val("test");`将表单输入框的值设为`test`。 - **事件绑定**：例如，`click()`方法可以用来触发或绑定事件处理函数。 - 触发：`$("#msg").click();`触发ID为`msg`的元素的单击事件。 - 绑定：`$("#msg").click(function(){ /* ... */ });`为ID为`msg`的元素单击事件添加函数。 #### 四、jQuery对象与DOM对象的转换 - **从DOM对象到jQuery对象**：可以通过`$()`将DOM对象转换为jQuery对象，例如：`$(document.getElementById("msg"))`。 - **从jQuery对象到DOM对象**：若需将jQuery对象转换为DOM对象，可以通过`get(index)`或索引号访问方式获取DOM对象，例如：`$("#msg").get(0)`。 #### 五、集合处理功能 为了简化对元素集合的操作，jQuery提供了一系列集合处理方法，使得开发者无需手动循环即可对集合中的每个元素执行相同的操作。例如： - **`each()`**：对集合中的每个元素执行指定的函数。 - 示例：`$("p").each(function(i){ this.style.color = ['#f00', '#0f0', '#00f'][i % 3]; })`。 - **链式操作**：可以连续调用多个方法来处理集合。 - 示例：`$("tr").each(function(i){ this.style.backgroundColor = ['#ccc', '#fff'][i % 2]; })`实现表格的隔行换色效果。 #### 六、扩展jQuery的功能 jQuery还允许开发者通过`$.extend()`方法为其添加自定义功能。例如： ```javascript $.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); ``` 这样就可以在全局范围内使用这些自定义方法，例如： ```javascript var minVal = $.min(5, 10); console.log(minVal); // 输出5 ``` 以上介绍了一些常用的jQuery技巧，可以帮助开发者更加高效地操作DOM元素，实现网页动态效果。