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会变红)