原文链接:http://www.jianshu.com/p/98a0c82c47e4
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
一、为什么要用Jquery?
DOM API
1.难用
要想拿到一个对象,要写很长的代码比如document.getElementById('xxx'),但是如果是Jquery的话可以直接$('#xxx')。
2.存在兼容性问题
采用DOM操作的时候往往需要兼容IE和非IE浏览器问题,
3.功能太少,不能与时俱进
DOM可以获取第一个子元素却不能获取第二个子元素,而且有时候还要搞一个判断语句,很麻烦。
Jquery API
1.兼容性好
2.API友好
比如在做事件监听的时候DOM需要addEventListener和attachEvent等等;而Jquery直接为我们封装为on(),bind()。 还有就是它可以链式操作。
3.功能强大,与时俱进
二、什么时候适合用Jquery?
三、Jquery对象与DOM对象可以相互转换
图中代码
var node=document.getElemtById('foo')表示node是DOM获取的一个对象,
var $node=$('#foo')表示$node是Jquery获取的一个对象。
node===$node[0]
node===$node.get(0)
所以,$node[0]===$node.get(0),DOM提供了一个get()API调用方式,这两种写法是等价的。($node[0]/$node.get(0) //Jquery ->DOM ; $(node) //DOM->Jquery )
四、Jquery对象与DOM对象的调用方法不一样
DOM对象只能用DOM API调用,Jquery对象只能用Jquery API来调用。
例如上图所示:
node对象只能通过getAttribute('name')和setAttribute('name','bar')两个DOM API来获取和设置对象的属性;
$node对象只能通过attr('name')和attr('name','bar')两个Jquery API来获取和设置对象的属性。
如果两者用混了会返回undefined!
五、DOM的get()方法和Jquery的eq()方法
上图代码表示:
1、console.log($("div").get(0));//拿到的是DOM元素;
2、console.log($("div").eq(0));//拿到的是Jquery元素;
3、console.log($($("div").get(1)));//DOM元素转换为Jquery元素。
eq()和get()一样,都是获取元素的下标,Jquery对象默认是一个伪数组!
六、after(),before(),append(),prepend(),appendTo() API
上图代码表示:
1、after()方法是将对象作为元素的弟弟放入DOM结构;
2、before()方法是将对象作为元素的哥哥放入DOM结构;
3、append()方法是将对象作为元素的小儿子放入DOM结构;
4、prepend()方法是将对象作为元素的大儿子放入DOM结构;
5、appendTo() 方法表示$("div").append($p)->($p).appendTo$("div"),它们是等价的。