jQuery基础操作总结：元素引用、对象转换与常见方法

本文档主要对jQuery常用方法进行了总结，包括页面元素引用、jQuery对象与DOM对象的转换以及核心操作的讲解。以下内容详述了几个关键知识点： 1. **页面元素引用**： jQuery使用`$()`函数作为入口，可以接收多种参数来选取DOM元素。例如，通过ID选择器获取元素(`$("#msg")`)，通过类选择器(`$(".class")`)，或者通过索引和标签名获取元素(`$("div").eq(1)`、`$("td")[5]`)。这些方法返回的是jQuery对象，但为了访问DOM属性或方法，可能需要转换成DOM对象。 2. **jQuery与DOM对象的转换**： 在进行某些操作时，如直接设置或获取HTML内容，jQuery对象可以自动转化为DOM对象。例如，`$("#msg").html()`和`$("#msg")[0].innerHTML`都可用于获取或设置元素的HTML内容。但是，需要注意的是，虽然这两种方式都能达到目的，但`html()`方法更符合jQuery的链式调用风格。 3. **选择与索引的使用**： `eq(n)`用于选择指定索引的元素，而`get(n)`则返回一个包含所有匹配元素的数组。例如，`$("div").eq(2)`选取第三个`<div>`元素，而`$("div").get(2)`则返回该元素的DOM对象。 4. **属性设置与获取**： jQuery提供了简洁的方法来设置和获取元素属性。如`$("#msg").html("<b>newcontent</b>")`用于替换元素内的HTML内容，`$("#msg").text("<b>newcontent</b>")`则设置元素的文本内容。对于尺寸属性，如高度和宽度，有`.height()`和`.width()`，它们可以接受字符串（如"300"）来直接设置值。 5. **输入元素值的获取与设置**： 对于表单元素，如`<input>`，jQuery提供了`.val()`方法，可以获取或设置其`value`属性。例如，`$("input").val()`获取输入框的当前值，`$("input").val("new value")`则设置新的值。 在使用jQuery时，理解这些基本操作和转换机制是至关重要的，它们能帮助开发人员高效地管理和操作网页元素，提升开发效率。同时，遵循jQuery的链式调用习惯，可以使代码更加简洁易读。