jQuery学习笔记（3）（DOM对象，js对象，jQuery对象的区别与转换）

1.DOM对象

DOM对象是以面向对象的方式来描述文档模型，通过DOM可以访问所有HTML以及他的内容与相关属性并可以进行增删改查等操作，他不是一种语言，更像是一种操作方法，可以使用任何语言进行操作

2.JS对象

上面说到了DOM对象可以使用任何语言进行操作，所以通过js获取的DOM对象就是js对象，js通过DOM操作获取页面上的标签对象就是js对象

3.*jQuery对象

用jQuery包装了DOM对象，用jQuery获取的元素对象就是jQuery对象，其实是属于js对象的一个集合，一个伪数组里面存放了一大堆js对象，

（注：三者不能相互使用对方的方法，可以转换）

4.DOM对象与jQuery对象之间的转换

1.DOM对象转jQuery对象
$(js对象)；

在这里插入代码片

例
html代码：

<ul>
	<li id="one">0</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

js代码：

var idone = document .getElementById("one");  //DOM对象
$(idone).css("color", "red");  //jQuery对象

（以上效果0会变红）

2.jQuery对象转js对象
方法一[index]（常用方法）

var name = $("index")[0];//$后括号是元素名 后面方括号中的是它是的几个（从0开始遍历）

例：

html代码：

<ul>
	<li>0</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

js代码：

var $li = $("li");//前面定义的变量名可以随意，我在前面加一个$是为了以后看代码方便知道这是jq对象
$li[1].style.color="red";

（以上效果1会变红）

方法二 get(index)
这是jQuery对象本身提供的get函数
实际上jQuery内部走的也是方法一

var name=$("index").get(0);

例：

html代码：

<ul>
	<li>0</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

js代码：

var $li = $("li");
$li.get(2).style.color="red";

（以上效果2会变红）