jQuery零基础入门——Selector选择器

Posted 振丹敲代码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery零基础入门——Selector选择器相关的知识,希望对你有一定的参考价值。

《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对象是可以相互转化的:


一般情况下,我们直接用jQuery对象即可,因为封装了很多API方便我们去操作。如果真的需要获取DOM,也可以像上边一样做转化。

以上是关于jQuery零基础入门——Selector选择器的主要内容,如果未能解决你的问题,请参考以下文章

jquery基础入门

零基础学前端.jQuery入门与实践教程

零基础学前端.jQuery入门与实践教程

jQuery选择器基础入门教程

jQuery零基础入门——初识jQuery

jQuery入门基础:动画和特效