在JQuery中,单个选择器是最简单的选择方式,没有逻辑问题。

一般地,有类型(tag)选择器,

如:h1 {...},有id选择器,

如:#myid {...},有类选择器,

如:.myclass{...},等等。

这些选择器还可以聚集在一起使用,这样就出现了逻辑关系。

以逗号(,)为分隔符的组合:

多个选择器可以以逗号连接在一起,逻辑关系为或,即任何一个选择器都被选中。如:#myid,#yourid,.myclass {...}。这里任何具有#myid,#yourid,.myclas属性的元素将被选中。

使用 jQuery 时,我们能够通过逗号(,)分隔符,实现多个元素的选择。方便我们对多种元素进行同时操作。
 

$(".class1, .class2, #id1")

使用样例:
下面代码将页面上所有 class 为“c1”,id为“d1”的所有元素隐藏起来。

$('.c1, #d1').hide();

以空格( )为分隔符的组合:

多个选择器可以以空格连接在一起,逻辑关系为,前者为后者的祖先,后者为前者的子孙。从第一个选择器开始,下一个选择器从上一个选择器的子集中选择元素。如:h1.myclass {...}。这里,首先,所有h1元素被选中,然后这些被选中的元素要具有.myclass类。

以大于号( >)为分隔符的组合:

多个选择器可以以大于号连接在一起,逻辑关系为,前者为后者的父亲,后者为前者的儿子。和空格分隔符不同,这里必须是直接的父子关系,非祖先和后代关系。如:h1>.myclass {...}。这里,首先,所有h1元素被选中,然后这些被选中的元素的儿子(child)中具有.myclass类的元素被选中。

  • 以加号( +)为分隔符的组合:

两个选择器可以以加号连接在一起,逻辑关系却和加号关系不大。加号左右的两个选择器将选择两个兄弟元素,但是,奇怪的是,并非这两个元素都被选中,而只能选中第二个。为什么要用加号呢?

 例如:


<h1>The red style has not been applied to this element.</h1>
<p>The red style has been applied to this element.</p>
<p>The red style has not been applied to this element.</p>


h1 + p {...} 将选中第一个<p>元素,<h1>和第二个<p>元素将不会选中。