Jquery元素选择器详解

　　元素选择器不是很复杂，也非常简单，下面给大家举个例子，写法还在跟ID选择器、class选择器一样。

实例演示

//元素选择器

$(“#sp6”).click(function(){

$(“span”).toggleClass(‘jingshan’);

});

在这里也要相应的添加上span选择器扳机：

<h2>这里是操作按钮区域</h2>

<span id=”sp1”>ID1选择器</span>

<span id=”sp2”>ID2选择器</span>

<span id=”sp3”>ID3选择器</span>

<span id=”sp4”>class1选择器</span>

<span id=”sp5”>class2选择器</span>

<span id=”sp6”>span选择器</span>

演示效果如下图

　　发现是不是点击span选择器时，所有都变成红色了。

　　元素选择器仅仅是这样普通应用意义不大，主要是元素选择器内部的、以及它们之间的比如说ID、元素之间的综合应用。

选择器的使用方法

1、并列 $("div,span,p.myClass")

2、家族 $("form input")

3、父子 $("form > input")

4、紧邻 $("label + input")

5、同辈[后辈] $("form ~ input")

首先先来看看组合选择器的应用：

//组合选择器

//并列选择器

$(“#sp7”).click(function(){

$(“#ID1，#ID2，#ID3”).toggleClass(‘jingshan’);

});

$(“#sp8”).click(function(){

$(“.class1,.class2”).toggleClass(‘jingshan’);

});

$(“#sp9”).click(function(){

$(“#ID1,.class2”).toggleClass(‘jingshan’);

});

与之对应的添加上操作目标：

<span id=”sp7”>#ID1，#ID2，#ID3选择器</span>

<span id=”sp8”>.class1,.class2选择器</span>

<span id=”sp9”>#ID1,.class2选择器</span>

演示图效果如下：

（ID选择器演示图）

（class选择器演示图）

（ID选择器与class选择器搭配使用演示图）

 

原文链接：http://www.maiziedu.com/wiki/jquery/element/

 

转载于:https://blog.51cto.com/10537052/1869322