学过JQuery的人都知道,选择器可以说是它的精髓,在我的工作中,选择器天天都用,很多用法google或者百度无结果后,开始自动动手琢磨,终是有了许多心得,下面分享给大家。
1、基础选择器
任何标签都能够给它id值和class,JQuery选择器获取他们和定义css一样。假如我要设置一个div的css:
html部分:
<div id="idstr" class="classstr">示例div</div>
js部分:
$(function(){
$('#idstr').css('color','red');
$('.classstr').css('background','green');
})
这样就会是一个红字加上绿色背景,#加上id值即选中此id对应的标签,同理 .(点号)加上对应class值即选中此class对应的所有标签
2、间接选择器
很多时候html部分的id或者class值并不是静态写上去的,或者说这里的id或者class是一个变量,这个时候我们如何取到这些id或者class呢?
html部分:
<div id="idstr">示例div</div>
js部分:
$(function(){
var p1 = "abc"; //定义两个变量
var p2 = "cde";
var sel = $('#idstr'); //选择器选中div标签
sel.append("<p id = "+p1+">这是第一段</p><p class = "+p2+">这是第二段</p>"); //动态写入两个p标签,其id值为前面定义的变量
$('#'+p1).css('color','red'); //选择器取得变量id值
$('.' + p2).css('background','green'); //选择器取得变量class值
})
这部分的代码即选择变量id和class,非常实用。
3、属性选择器
相信大家对attr()这个方法不会陌生,它是用来设置标签中除id和class之外其他属性值的,除了html标签原本就有的属性外,甚至可以想定义什么属性就定义什么属性,其实,当定义好这些属性后,我们能不能把这个自己定义的属性也像基础选择器那样使用呢?
html部分:
<div id="idstr">示例div</div>
js部分:
$(function(){
$('#idstr').attr('name','namestr');//设置属性name的值为
$("div[name='namestr']").css('color','red');//通用选择器加上属性
});
4、组合选择器
你也许会遇到这样一种情况,你需要给一组 li 标签遍历动态加上id,然后你又需要给这个组每个 li 标签下面的 a 标签遍历动态加上id,这个时候就会造成 id 出现两个,再使用选择器的时候,你会遇上不少麻烦。小编曾近头疼这个问题,经过一番思考,我发现选择器其实也可以这么使用。
html部分:
<div id="idstr">
示例div
<ul id="ulstr">
</ul>
</div>
js部分:
$(function(){
var idstr = [1,2,3,4,5];//定义一个数组
var sel = $('#ulstr');//选择ul标签,将在ul中动态写入li
var str = "";//定义字符串
for(i=0;i<idstr.length;i++){//循环写入li标签
str+="<li id='li-"+idstr[i]+"'><a id='a-"+idstr[i]+"'>第"+idstr[i]+"个Li</a></li>";//这里是重点哦!字符串连接动态id,就成功写入并区分了li和a标签的id
}
sel.append(str);//将样式和编码调入html
});
打开调试工具,便能看到效果,其中的li标签和a标签的id是不是被动态改变了呢?
如果对JQuery不是太懂,需要补充下基础知识哦,以上所述只是个人经验,当然选择器还有更多方法可以待开发,同时我的说法不一定正确,如果有错,还望大家共同指正。