在开发前台页面的时候,如果要想把页面做的交互性高一些,需要写大量的js代码和css样式.
在js中,获取对象,可以通过 document.getElementById 或 documnet.getElementByName 可以获取元素。
而在Jquery中,提供了非常简单的方法获取界面元素。通过id选择器$('#id')和name
选择器 $('.name')
就可以实现。
既然只是选择元素的方式不一样。那么使用$('#name').parent()
; 与document.getElementById(id).parentNode; 这两种使用方式,代码看起来感觉很正确,应该执行效果是一样的。但是,等真正的用的时候,才发现,这两种写法效果不一样。
区别
那么通过这两种方式 获取的对象又有什么区别呢?
对于以上两种获取对象的方法,虽然能获取到object是同一个,但是他们的类型是不一样的。使用document获取得到的对象为dom对象,而使用jquery获取的对象为JQuery对象。
如果是使用的JQuery对象,那么对其之后的操作就应该按照Jquery对象的语法进行。
简单的理解:JQuery对象就是对Dom对象的包装,JQuery对象时Jquery对象独有的,而JQuery对象是可以使用JQuery对象的方法的,而但是不能使用DOM对象的方法。
转换
DOM对象和JQuery对象的转换:
DOM对象转换成Jquery对象,因为Jquery是对DOM对象的包装,所以只需要在DOM对象的外面 加上 $(dom)
即可:
eg:
var d=document.getElementById("id"); //对象d 为DOM对象
var s=$(d); // 对象s为Jquery对象
JQuery对象转换成Dom对象:
这个方法是又Jquery方法提供的,使用Jquery的 .get(i)方法,就可以得到相应的DOM对象。
eg:
var d=document.getElementById("id"); //对象d 为DOM对象
var s=$(d); // 对象s为Jquery对象
var dd=s.get(0) // 对象dd为DOM对象
仔细对比一下,总比一直写模棱两可的代码要好很多。所以,对比的学习一些知识,才是编码效率的关键。