开发工具与关键技术:vs jQuery
作者:
撰写时间:2019年7月 7日
在看到jQuery对象和DOM对象时,可能会一时半会分别不出来那些是jQuery对象,那些是DOM对象,但你要只要知道JQuery和Dom对象是不一样的。在这里主要是介绍JQuery对象。
那就利用一个例子简单区分JQuery对象和Dom对象,那么我们给个标签它。
}
$(document).ready(function () {
/**
* 通过jQuery语法获取id为dome的元素获得一个jQuery对象
* 调用该对象的html()方法进行更改内容
* 调用该对象的css()方法进行更改颜色样式
/
var $h = $(’#dome’);
KaTeX parse error: Expected 'EOF', got '#' at position 42: …).css('color','#̲900'); …p.append(“a标签”).children().html(“标签标签”).css({‘color’:‘red’,‘font-size’:20});
});
通过对比,我们不难发现:
通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。
通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。/
我们既然得知它们都能操作DOM,那么就肯定能转化,jQuery本质上是JavaScript代码,只是它被包装起来了,在某些场景中就需要用到jQuery和Dom的相互转换。jQuery是一个类数组对象,而Dom对象就是一个单独的Dom元素。
//jQuery对象转化成DOM对象 JavaScript代码
var $div = $(‘div’); //jQuery对象
var div = $div[0];//转化成DOM对象
div.style.color = ‘red’;
//jQuery对象转化成DOM对象 jQuery代码 get()方法
var $div = $(‘div’) //jQuery对象
var div =
d
i
v
.
g
e
t
(
0
)
/
/
通
过
g
e
t
方
法
,
转
化
成
D
O
M
对
象
d
i
v
.
s
t
y
l
e
.
c
o
l
o
r
=
′
r
e
d
′
/
/
操
作
d
o
m
对
象
的
属
性
/
∗
相
比
较
j
Q
u
e
r
y
转
化
成
D
O
M
,
开
发
中
更
多
的
情
况
是
把
一
个
d
o
m
对
象
加
工
成
j
Q
u
e
r
y
对
象
。
div.get(0) //通过get方法,转化成DOM对象 div.style.color = 'red' //操作dom对象的属性 /*相比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。
div.get(0)//通过get方法,转化成DOM对象div.style.color=′red′//操作dom对象的属性/∗相比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。
如果传递给
(
D
O
M
)
函
数
的
参
数
是
一
个
D
O
M
对
象
,
j
Q
u
e
r
y
方
法
会
把
这
个
D
O
M
对
象
给
包
装
成
一
个
新
的
j
Q
u
e
r
y
对
象
通
过
(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象 通过
(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象通过(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了
HTML代码
那就说到了jQuery对象与DOM对象的差别和它们间的相互转换。