jquery选择器之基本选择器和层次选择器

对于jquery来说，选择器是很强大的一部分，jquery的基本语法是：

$('选择器').动作或者方法();

jquery的选择器基本可以把页面的每个dom节点都能选择到。从而为人们的开发带来了便利，所以选择器是jquery的重头戏。

选择器的分类：

jquery的选择器分成四类：

基本选择器，层次选择器，过滤选择器，表单选择器。

基本选择器

基本选择器最简单也最常用。

//这是一个html片段
<div>
    <button class="but" id="one" >按我啊</button>
    <button class="but1" id="two">居然按我</button>
    <span   class='haha'>哈哈</span>
    <div>
        <button class="but2" id="three">没错我就是第三个</button>
    </div>
    <div class="div1">
        <button class="but3-1" id="four">我不是老四</button>
    </div>
    <div>
        <button class='but3'  id='five'>我是老四的弟弟</button>
    </div>
    <div>
        <button class='but4' id='six'>666</button>
        <button class='but5' id='7'>seven</button>

    </div>
    <div></div>

</div>

现在我要用基本选择器改变button的样式

$('#one').css('font-size','40px')//改变id为one的元素的字体为40像素
$('.but').css('background','black')//改变but类的背景颜色为黑色
$('div').css('padding','10px')//把元素名是div的内边距设置成10px
$('*').css('color','red')//把所有元素设置成红色
$('div,#two,.haha').css('background','green')//把名称为div，id为two，类为haha的元素背景设置成绿色

上一段代码所说的就是基本选择器啦。

接下来是层次选择器

$('body div').css('background','blue');//选取body内的所有div（后代）元素，把背景改为蓝色
$('body > div').css('background','red')//选取body内的所有子div的背景色。。。。注意这个和上一个的区别  一个是后代  一个是子元素
$('.div1+div').css('background','gray');//改变class为but3的下一个div同辈元素的背景色为灰色   也就是上面页面中的id=five的那个div
$('.div1').next('div').css('background','gray');//改变class为but3的下一个div同辈元素的背景色为灰色   也就是上面页面中的id=five的那个div，显然这个比上一个要好的多所以平时都用这个
$('#four~div').css('background','yellow');//改变id=four的元素之后的所有<div>同辈元素的背景色  在上面的程序中  就是把‘我不是老四’，‘我是老四的弟弟’和‘666’这三个块的背景颜色改变了
$('#four').nextAll('div').css('background','yellow');//改变id=four的元素之后的所有<div>同辈元素的背景色  在上面的程序中  就是把‘我不是老四’，‘我是老四的弟弟’和‘666’这三个块的背景颜色改变了  这个方法可以代替上一个方法
$('#four').sibling('div').css('background','yellow');//把所有#four的同辈元素背景都改成黄色  无论前后     这个和上一个和倒数第三个是笔记爱哦容易混淆的

到这里层次选择器就已经说完了。

过滤选择器，就是按照一定的规则来删选元素

第一段代码是所有的基本过滤选择器

$('div:first').css('background','yellow');//把div中的第一个div元素的背景设置成黄色，把first改成last就是最后一个div了
$('div:not(.but3)').css('margin','10px');//除了class是but3的这个div，其余的div外边距设置成10像素
$('div:even').css('background','black');//把所有索引值是偶数的div背景颜色改成黑色，如果把even换成odd的话就是所有索引值是奇数的背景颜色了
$('div:eq(1)').css('background','black');//这个就是把索引值等于3的div背景改变，如果把eq改成gt的话就是大于3,把eq改成lt的话就是小于3;
$(':header').css('background','black');//这个是改变所有标题元素的（h1.h2.....）
//另外还有两个，
$(':animated')//把正在执行动画的元素进行操作
$(':focus')//把当前的获取的焦点元素进行操作

下一段代码是所有的内容过滤选择器

$('div:contains(是)').css('background','black')//把含有文本‘是’的div背景改变
$('div:empty').css('background','black')//把不包含子元素，也就是上买html中写的空div块的背景
$('div:parent').css('background','green')//把包含子元素的div块进行背景改变。子元素也包括文字
$('div:has('.but3')').css('background','black'))//把包含class为but3的div背景进行改变，是改变div不是改变but3

下一段是所有的可见性过滤选择器

//顾名思义，根据可见和不可见状态来进行改变
$('div:visible').css('background','black')//改变所有可见的div元素背景色,上面的html中所有的div都被改变
$('div:hidden').show(900000)//让display为‘none’的元素和type='hidden'和visibility:hidden的 元素显示90000ms的时间

下一段是属性过滤选择器

$('div[id]').css('background','red')//把含有id属性的div块进行该变
//属性过滤选择器的标志是[]，[属性=value]就是把所有属性为value的元素进行改变，属性过滤选择器改变属性和值之间的符号就达到相应的目的，!=是属性的值不是value的元素，其余的符号还有：^=(以value开始的元素)，$=（以value结束的值),*=（含有value的元素），|=（属性等于字符串value或者以value为前缀的元素），~=（属性用空格分隔的值中包括value的元素）

下一段是子元素过滤选择器

:first-child//每个父元素的第一个子元素
:last-child//每个父元素的最后一个子元素
:only-child//选取只有一个子元素的父元素的子元素
:nth-child()//这个是重点，每个父元素的下的()元素
//()这里的内容可以是odd（索引值是奇数），even（索引值是偶数），1（索引值是1），2n（索引值是2的倍数）。
$(div.one:nth-child(1)).css('background','black')//把class为one的div父元素下的第一个子元素的背景色进行改变。

到这里基本的选择器已经说完，不过还有一个很重要的部分就是表单选择器，我会再写博客来分享。