开始用的是jquery框架,操作DOM。但是并没有仔细研究和原生js之间的区别是什么?今天就对这个进行可分析。
如有补充,欢迎大家指教,已完善的更好!
jquery : $("IDname or ClassName")
js : Document.getElementsByClassName('className')
1. 比较alert的区别:
alert(jq_box) // [object Object] 一个jquery返回的jquery对象集合
alert(jq_box.eq(0)) // [object Object] 一个jquery返回的jquery对象集合
alert(jq_box[0]) // [object HTMLDivElement] 一段HTML代码
alert(jq_box.get(0)) // [object HTMLDivElement] 一段HTML代码
alert(js_box) // [object HTMLCollection] js返回的类数组对象集合
说明:
[object Object]: jquery包装后的对象,jquery特有,可以使用jquery特有的方法
[object HTMLCollection]:js获取到的一个对象集合,类数组集合,不是数组,使用DOM对象特有的属性和方法
注意:二者方法不能混合使用
2. 互相转化:
2.1 jquery -> js对象
jQuery: $("#id") $("#id").eq(0)
js: $("#id")[0] $("#id").get(0) $("#id").eq(0)[0] $("#id").eq(0).get(0)
2.2 js对象 -> jquery
js: Document.getElementsByClassName('className')
jquery: $(Document.getElementsByClassName('className'))
jquery固有方法: