《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。
大家好,欢迎回到我们的jQuery零基础入门,上一节课我们对jQuery做了一个初步的认识,这一节课,我们来讲一讲jQuery的选择器。
选择器对大家来说我想并不陌生,在《JavaScript零基础入门》的DOM基础部分,我们就讲了js怎么去获取DOM元素,当时我们讲了getElement(s)ByXXX或者querySelector(All)两大种方法,而querySelector和querySelectorAll属于HTML5新增的选择器,他依照CSS选择器的标准来实现。
其实我们jQuery的选择器跟querySelector基本上相似,也是按照CSS选择器的标准来的,它通过$('')来选择,括号里边跟querySelector的写法一样,可以写class,也可以写id,也可以写tagName,具体写法我上一节课在讲优点时已经说了,大家可以回头去看看,也可以去看看我《JavaScript零基础入门》DOM部分的博文和视频。选择器的优点,无非是用更简洁的代码来操作DOM。
需要说明的是,jQuery选择器选出来的对象,已经不是DOM对象,而是jQuery对象。
那什么是jQuery对象呢?jQuery对象有点像数组,它的每一个item对是一个引用了DOM节点的对象。比如说我查找一个id为s1的span(假设存在),那么将得到[<span id="s1">...</span>]。如果目标不存在,jQuery对象不会像DOM对象那样出现null或者undefined,它会返回类似空数组的对象[]。
当然,我们的jQuery对象和DOM对象是可以相互转化的:
var div = $('#abc');//jQuery对象
var divDom = div.get(0);//假设存在,获取第一个,得到DOM
var another = $(divDom);//重新变为jQuery对象
一般情况下,我们直接用jQuery对象即可,因为封装了很多API方便我们去操作。如果真的需要获取DOM,也可以像上边一样做转化。