jQuery 技巧大全：元素引用、对象转换、集合操作等

jQuery 技巧大放送 jQuery 是一个功能强大且灵活的 JavaScript 库，它提供了许多实用的方法和功能来简化 Web 开发。以下是 jQuery 技巧大放送，涵盖了 jQuery 对象和 DOM 对象的转换、获取 jQuery 集合的某一项、同一函数实现 set 和 get 等多个使用技巧。 **1. 关于页面元素的引用** 通过 jQuery 的 `$()` 引用元素，包括通过 ID、Class、元素名以及元素的层级关系及 DOM 或 XPath 条件等方法，且返回的对象为 jQuery 对象（集合对象），不能直接调用 DOM 定义的方法。 **2. jQuery 对象与 DOM 对象的转换** 只有 jQuery 对象才能使用 jQuery 定义的方法。注意 DOM 对象和 jQuery 对象是有区别的，调用方法时要注意操作的是 DOM 对象还是 jQuery 对象。普通的 DOM 对象一般可以通过 `$()` 转换成 jQuery 对象。 例如：`$(document.getElementById("msg"))` 则为 jQuery 对象，可以使用 jQuery 的方法。 由于 jQuery 对象本身是一个集合。所以如果 jQuery 对象要转换为 DOM 对象则必须取出其中的一项，一般可通过索引取出。 例如：`$("#msg")[0]`, `$("div").eq(1)[0]`, `$("div").get()[1]`, `$("td")[5]` 这些都是 DOM 对象，可以使用 DOM 中的方法，但不能再使用 jQuery 的方法。 **3. 如何获取 jQuery 集合的某一项** 对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用 `eq` 或 `get(n)` 方法或者索引号获取，要注意，`eq` 返回的是 jQuery 对象，而 `get(n)` 和索引返回的是 DOM 元素对象。 对于 jQuery 对象只能使用 jQuery 的方法，而 DOM 对象只能使用 DOM 的方法，如要获取第三个 `<div>` 元素的内容。有如下两种方法： * `$("div").eq(2).html();` // 调用 jQuery 对象的方法 * `$("div").get(2).innerHTML;` // 调用 DOM 的方法 **4. 同一函数实现 set 和 get** jQuery 中的很多方法都是如此，主要包括如下几个： * `$("#msg").html();` // 返回 id 为 msg 的元素节点的 HTML 内容。 * `$("#msg").html("<b>newcontent</b>");` // 将“<b>newcontent</b>”作为 HTML 串写入 id 为 msg 的元素节点。 这些方法可以同时实现 set 和 get 功能，提高开发效率和代码简洁性。 理解 jQuery 对象和 DOM 对象的转换、获取 jQuery 集合的某一项、同一函数实现 set 和 get 等技巧，对提高 Web 开发效率和代码质量非常重要。