jQuery核心语法
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的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0][removed];
$("#msg").eq(0)[0][removed];
$("#msg").get(0)[removed];
3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2)[removed]; //调用dom的方法属性
4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
$("#msg").text(); //返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>
$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300"); //将id为msg的元素的高度设为300
$("#msg").width(); //返回id为msg的元素的宽度
$("#msg").width("300"); //将id为msg的元素的宽度设为300
$("input").val("); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test
$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法
### jQuery核心语法详解
#### 一、页面元素的引用
在使用jQuery时，最基础的操作之一就是选择页面上的元素。这通常通过`$()`函数来完成。`$()`函数可以根据不同的选择器（如ID、类名、元素名称、层级关系等）来定位页面中的元素，并返回一个jQuery对象。需要注意的是，这个返回的对象是jQuery对象而不是DOM对象，因此它无法直接使用DOM API中定义的方法。
##### 举例说明：
- 通过ID选择元素：`$("#elementId")`
- 通过类名选择元素：`$(".className")`
- 通过元素名选择元素：`$("elementName")`
- 通过层级关系选择元素：`$("parent > child")`
- 通过DOM或XPath条件选择元素：`$("[attribute=value]")`
#### 二、jQuery对象与DOM对象之间的转换
在jQuery中，对象分为两类：jQuery对象和DOM对象。这两类对象之间存在一定的区别，主要体现在它们可以使用的API上。只有jQuery对象才能使用jQuery定义的方法，而DOM对象则只能使用DOM API中的方法。
- **从DOM对象到jQuery对象**：可以通过`$()`函数将DOM对象转换为jQuery对象。例如，`$(document.getElementById("myElement"))`将返回一个jQuery对象。
- **从jQuery对象到DOM对象**：可以通过索引或`get()`方法从jQuery对象中获取DOM对象。例如，`$("#myElement")[0]`或`$("#myElement").get(0)`都将返回一个DOM对象。
#### 三、获取jQuery集合中的某一项
当使用jQuery选择器选取多个元素时，返回的结果是一个包含这些元素的jQuery对象集合。若需要访问集合中的特定元素，则可以使用`eq()`方法、`get()`方法或直接通过索引访问。需要注意的是，`eq()`返回的是jQuery对象，而`get()`和索引返回的是DOM对象。
- 使用`eq()`获取元素：`$("div").eq(2)`（返回第3个`<div>`元素的jQuery对象）
- 使用`get()`获取元素：`$("div").get(2)`（返回第3个`<div>`元素的DOM对象）
#### 四、同一函数实现设置和获取
jQuery中的一些方法支持同时作为设置器和获取器使用，具体取决于调用方式。例如，`html()`、`text()`、`height()`、`width()`和`val()`等方法既可以用来获取属性值，也可以用来设置属性值。
- **获取属性值**：`$("#msg").html()`（获取ID为`msg`的元素的HTML内容）
- **设置属性值**：`$("#msg").html("<b>new content</b>")`（将ID为`msg`的元素的内容设置为粗体的新内容）
#### 五、集合处理功能
jQuery提供了方便的方法来处理返回的元素集合。例如，可以使用`.each()`方法对集合中的每个元素执行相同的操作。
- 为集合中的每个元素设置不同的样式：`$("p").each(function(i){ this.style.color = ['#f00', '#0f0', '#00f'][i]; })`
- 实现表格的隔行换色：`$("tr").each(function(i){ this.style.backgroundColor = ['#ccc', '#fff'][i % 2]; })`
#### 六、扩展jQuery的功能
除了jQuery自带的方法外，还可以通过`.extend()`方法自定义新的方法，进一步增强jQuery的功能。
- 定义最小值函数：`$.extend({ min: function(a, b) { return a < b ? a : b; } })`
- 定义最大值函数：`$.extend({ max: function(a, b) { return a > b ? a : b; } })`
使用这些自定义方法的方式类似于使用jQuery内置的方法，只需调用相应的扩展即可。
通过以上详细介绍，我们可以看到jQuery在处理DOM操作时的强大和灵活。掌握这些基本概念将有助于更高效地使用jQuery进行网页开发。
