jQuery属性选择器


这节教程主要给大家讲解伪类选择器中的属性选择器



属性选择方式的类型


1、[attribute]——$("div[id]")

2、[attribute=value]——$("input[name='newsletter']")

3、[attribute!=value]——$("input[name!='newsletter']")

4、[attribute^=value]——$("input[name^='news']")

5、[attribute$=value]——$("input[name$='letter']")

6、[attribute*=value]——$("input[name*='man']")

7、[selector1] [selector2] [selectorN]——$("input[id][name$='man']")



新建input


在讲解之前,首先我们需搭建它的环境,在我们前面的例子中是没有input标签,下面我们来新建input:


<br/><br/>

<br/><br/>

<br/><br/>

<div>

<input type=”text” name=”in_1” value=”in_val_1”/>

<input type=”text” name=”in_2” value=”in_val_2”/>

<input type=”text” name=”on_1” value=”on_val_1”/>

<input type=”text” name=”on_2” value=”on_val_2”/>

</div>


环境搭建好了之后,现在我们来写属性选择器:


//属性

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

$(“input[name=’in_1’]”).toggleClass(‘jingshan’);

});

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

$(“input[name!=’in_1’]”).toggleClass(‘jingshan’);

});

 

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

$(“input[name$=’n_3’]”).toggleClass(‘jingshan’);

});

 

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

$(“input[name*=’n_’]”).toggleClass(‘jingshan’);

});

 

与之对应的添加上点击按钮:


<span id=”sp17”>input[name=’in_1’]选择器</span>

<span id=”sp18”>input[name!=’in_1’]选择器</span>

<span id=”sp19”>input[name$=’n_3’]选择器</span>

<span id=”sp20”>input[name*=’n_’]选择器</span>



演示效果


jQuery1.png

(name=’in_1’时的效果图)


jQuery2.png

(name!=’in_1’时的效果图)


jQuery3.png

(name$=’n_3’时的效果图)


jQuery4.png 

(name*=’n_’时的效果图)



总结


在基础选择器中,ID选择器、class选择器是后端程序员或web前端程序员特别常用的。剩下的就是选择器的组合方式,有时候我们需要各种各样神奇的组合,因为我们要各种不同的格式或样式,这时就需要它。接下来就是伪类,伪类选择器大家练习一遍,每个都需要用的时候直接拿过来用就可以咯。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部