JQuery基础选择器

最新推荐文章于 2024-10-31 15:39:18 发布

原创最新推荐文章于 2024-10-31 15:39:18 发布 · 468 阅读

0 ·

CC 4.0 BY-SA版权

JQuery学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文介绍了jQuery中各种选择器的使用方法，包括基本的选择器如ID选择器、元素选择器、类选择器，以及复杂的层次选择器如后代选择器、子元素选择器等。

我们想改变页面中所有段落标签中的文本内容：

jQuery更加的简洁方便，我们在处理DOM时不必关心功能的实现细节。 $()就是jQuery中的函数，它的功能是获得（）中指定的标签元素。如示例中$(“p”)会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素，也可能是函数。

在jQuery中 $()方法等价于jQuery()方法,前者比较常用，是后者的简写。一般只有在$()与其它语言冲突时才会使用jQuery()方法。

jquery能使用CSS选择器来操作网页中的标签元素。如果你想要通过一个id号去查找一个元素，就可以使用如下格式的选择器： $("#my_id")

element 选择器(寻找铅笔)

$(“element”)

.class 选择器(寻找红色铅笔)

使用元素名称查询元素的方法，其实，还可以通过元素的类别属性查找元素，就好比在文具盒中要找一个“红色”铅笔一样，根据元素的某个特征进行查找

在页面中，通过class选择器获取某个元素，并显示该元素的class类别名称:

* 选择器(取走全部铅笔)

“*”号选择器，它的功能是获取页面中的全部元素，“全部”啊!包括<head>、<body>、<script>这些元素，相当于可以取走你文具盒中的所有铅笔,格式为： $(“*”)

由于该选择器的特殊性，它常与其他元素组合使用，表示获取其他元素中的全部子元素。

如下图所示：使用*选择器，获取div中的所有子元素并设置三个子元素显示相同的内容:

sele1,sele2,seleN选择器

$(“sele1,sele2,seleN”)

通过选择器获取其中的任意两个元素，并将它们显示的内容设为相同:

ance desc选择器

在实际应用开发中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：

$("ance desc")

其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个ance desc选择器把这几个人给定位出来。