Web前端成长日记--JQuery选择器的妙用

学过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不是太懂，需要补充下基础知识哦，以上所述只是个人经验，当然选择器还有更多方法可以待开发，同时我的说法不一定正确，如果有错，还望大家共同指正。