jQuery选择器分类

jQuery的基本选择器

选择器的分类

<!--1.基本选择器
2.层级选择器
3.过滤选择器
3.1 基本过滤选择器
3.2 内容过滤选择器
3.3 可见性过滤选择器
3.4 子元素过滤选择器
3.5 表单对象属性过滤选择器
4.表单选择器

1. 基本选择器

id

element 根据给定的元素名匹配所有元素

.class
* 改变所有元素的背景色
selector, 将每一个选择器匹配到的元素合并后一起返回。

-->

#id HTML的代码如下：

id="notMe"

id="myDiv"

#id 用于搜索的，通过元素的 id 属性中给定的值

jQuery 代码如下；

结果: id=“myDiv”字体变为红色

[

id="myDiv"

]

element HTML的代码如下：

DIV1

DIV2

SPAN

element 一个用于搜索的元素。指向 DOM 节点的标签名。

jQuery 代码如下；

结果:显示所有div，且字体为3em；

[

DIV1

,

DIV2

]

.class HTML的代码如下：

div class="notMe"

div class="myClass"

span class="myClass"

.class 根据给定的类匹配元素。

jQuery 代码如下；

$(".myClass").css("background","blue");

结果:显示所有，myClass背景为蓝色；

[

div class="myClass"

, span class="myClass" ]

* HTML 代码如下：

DIV

SPAN

P

* 匹配所有元素

jQuery 代码如下；

$("*").css("background","yellow");

结果: body 背景为黄色

jQuery 代码

[

DIV

, SPAN,

P

]

selector HTML 的代码如下：

div

p class="myClass"

span

p class="notMyClass"

selector 将每一个选择器匹配到的元素合并后一起返回。

jQuery 代码如下；

$("div,span,p.myClass")

结果:注意元素合并用 , 表示;

[

div

,

p class="myClass"

, span ]