jQuery中的选择器深入浅出

　　随着JavaScript的不断发展,各种各样的为了方便给jQuery变成的库应运而

生,Prototype,YUI,Extjs,bindows,JSVM(国内的),而目前较为流行的是jQuery

,这是一个轻量级的JavaScript库,它的诸多的优点:开源,兼容各种浏览器,继承css

,html,javascript,ajax等,据统计,目前世界上前10000个访问量最高的网站中,有

超过60%都使用的是jQuery,不得不说,在现在的前端界,如果你说你不会jQuery,

那么估计很多人就会对你呵呵哒了,目前由Dave Methvin率领团队大神进行开发

维护,好了,简短的介绍了jQuery后,我们先来看一下它的选择器.

　　我们都知道,JavaScript就是用来对网页进行动态操作的,也正是JavaScript

的这一功能的不断发展,才让我们的前端飞速的发展着,而jQuery作为一个JavaScript

库,那么它应用最多的也就是我们用来对HTML进行操作上,对于它的基础部分,我们

大致可以分为,样式篇,DOM操作篇,事件绑定篇,动画篇,然后再对它内部的源码架构

进行分析,那么今天,我们先来了解一下它的样式操作篇,样式操作,即为对css样式的操

作:

1 $(‘#box‘)//id选择器
2 $(‘.demo‘)//类选择器
3 $(‘div‘)//标签名选择器
4 $(‘*‘)//全选择器
5
6 <div id="box" class="demo"></div>

这是我们经常用到的几个选择器,在JavaScript中我们也有,在这里我们使用美元符号$

来进行选择,在jQuery源码最后又这么一句代码

1 window.jQuery = window.$ = jQuery;

在这里,$符号是属于window对象的一个属性,它等同于jQuery,它返回的是一个jQuery

对象,这个对象是不等同于我们的dom对象,所以我们的dom对象是不可以使用jQuery

里边的扩展方法的,但youyi部分基本的工具方法还是可以调用的,所以,在这里我们先

来看一下呢dom对象和jQuery对象之间的转换问题:

1 var $div = $(‘div‘);
2 var div = $div.get(0);//得到DOM对象
3
4 var div = document.getElementById(‘id‘);
5 var $div = $(div);//通过$()这种方法来将DOM对象转换为jQuery对象

有了转换之后,我们接着来看jQuery中的选择器:

 1  //后代选择器:$(s1 s2)将s1 中的s2全部获取到
 2 $("div span").css(‘color‘,‘red‘);//div中的所有span的color属性设置为red
 3 //这是科比,艾弗森,卡特都为红色,注意,麦迪是在div中的,所以不会选中麦迪
 4
 5
 6  //$(parent>child);将child只属于parent的,子标签(不要孙子标签);
 7  $("div > span").css(‘color‘,‘yellow‘);//选择div中直接的子元素span,不要下下级的span   艾弗森,科比,卡特为黄色 这里卡特被选中的原因是卡特的父元素也是div,
 8
 9 //兄弟选择器,选则下一个紧邻着的同级元素
10 $("div+span").css(‘color‘,‘blue‘);//这是詹姆斯将为蓝色
11 //全部兄弟选择器,选择所有的兄弟元素
12 $("div~span").css(‘color‘,‘orange‘)//这时詹姆斯和保罗为橙色
13 

14 <div>
15 <span>艾弗森</span>
16 <span>科比</span>
17 <div>麦迪<span>卡特</span></div>
18 </div>
19 <span>詹姆斯</span>
20 <span>保罗</span>

上边是我们的一些简单的选择器,那么上边的情况中,我们会遇到一下子选中很多元素,或者

我们想要去选中一些特定的元素,那么这时我们就有了过滤选择器:

 1    $(‘li‘).css(‘color‘,‘red‘);//所有都设置为红色
 2             //2设置里边的第一个
 3             $(‘li:first‘).css(‘color‘,‘blue‘);//库里为蓝色
 4             //2设置最后一个
 5             $(‘li:last‘).css(‘color‘,‘yellow‘);//利拉德为黄色
 6             //设置指定的一个
 7             $(‘li:eq(2)‘).css(‘color‘,‘orange‘);//哈登为橙色
 8             //选择索引大于几的 great than gt()但是不选中index
 9             $(‘li:gt(2)‘).css(‘color‘,‘pink‘);//罗斯和利拉德为粉红色
10             //选择索引小于index的 less than lt(index);但是也不选中index
11             $(‘li:lt(2)‘).css(‘color‘,‘black‘);//欧文和库里为黑色
12             //:even 选择偶数行
13             //:odd  选择奇数行
14             $(‘li:even‘).css(‘backgroundColor‘,‘green‘);
15             $(‘li:odd‘).css(‘backgroundColor‘,‘gray‘);
16             //:header在body体内选出所有的标题标签
17             $(‘:header‘).css(‘backgroundColor‘,‘red‘);//球星和球鞋为红色
18
19             //这时,我们也可以使用lt gt组合来选择一些元素
20             $(‘li:gt(1):lt(3)‘).css(‘backgroundColor‘,‘yellow‘);
21                     //注意,这里选择的是哈登罗斯,这里会将起点变为1,然后再从起点处计算小于3
22
23 <h2>球星</h2>
24 <h3>球鞋</h3>
25 <div>
26     <ul>
27         <li>欧文</li>
28         <li>库里</li>
29         <li>哈登</li>
30         <li>罗斯</li>
31         <li>利拉德</li>
32
33     </ul>

　　那么我们在了解了大部分的样式设置和属性筛选器之后,我们对于html节点元素的选择,基本上

是能够选择所有的html节点进行操作了,那么为了更加方便我们的选择,使我们的选择更加高效便捷

我们还有几个比较常用的选择器:

  //内容选择器
            $(‘div:contains("南海")‘).css(‘backgroundColor‘,‘red‘);//这时第一个盒子背景色会变红
            //空内容选择器
            $(‘div:empty‘).css(‘backgroundColor‘,‘red‘);//这时第3个盒子背景色会变红
            //hsa(),在这个选择器里边需要获取到指定的选择器

            $(‘div:has(.kobe)‘).css(‘backgroundColor‘,‘green‘);//这时第四个盒子会变绿,注意,这里选择的是.kobed的为盒子的父元素
            //parent 选择的元素必须要作为父标签,
            $(‘div:parent‘).css(‘background‘,‘pink‘);//除了第三个空的,其他的盒子都变粉红

<div>南海是中国的</div>
<div>菲律宾也是中国的</div>
<div style="width: 100px;height: 100px;"></div>
<div> <span class="kobe">想不想进NBA</span></div>

　　当我们选择到了一个节点元素之后,我们就要开始去获取它的属性,去设置它的属性,那么和

我们直接通过CSS()这个函数来设置属性的样式相比呢,当我们要对一个节点元素自身的属性进

行操作的时候,我们就可以使用jQuery中的attr()函数来进行设置和操作了:

 1   //获取name属性的值
 2            alert( $(‘#text_id‘).attr(‘name‘));
 3             //设置name属性的值
 4             $(‘#text_id‘).attr(‘name‘,‘allen‘);//这时会将input的name值变为allen,
 5             alert( $(‘#text_id‘).attr(‘name‘));
 6             //那么在这里我们也应该可以看到,当attr里边为一个参数的时候,是要获取到这个参数的值
 7             //当attr()里边有两个参数的时候,是要对第一个参数进行属性值的设置
 8             //当我们需要修改多个属性的时候,我们这时既可以使用json数据的方式来进行设置
 9             var atts = {‘value‘:‘123‘,‘address‘:‘shanghai‘};
10             $(‘input:first‘).attr(atts);
11
12             //除此之外,我们还可以利用函数的返回值进行设置
13             (‘input:first‘).attr(‘value‘,function (){
14                 return 20+30;
15             })
16
17
18 <input type="text" name="textfiled" value="123456" id="text_id" address="beijing">

　　以上的操作都是对于css样式以及属性的各种操作,那么如果我们可以对这个css文件进行操纵,

当我们在切换整体样式时,比如响应式布局,浏览器界面换肤等功能,我们的操作就是变得十分的高效,

当然,大神们早就给我们设计好了操作class的方法了:

<style>
.text1{background:red;}
.text2{background:yellow;}
.text3{background:green;}
</style>
<script>
$(function(){
    $(‘div‘).addClass(‘.text1‘);//通过addClass()来添加类名
    $(‘div‘).removeClass(‘.text1‘)//通过removeClass来删除类名
    $(‘div‘‘).toggleClass(‘.text2‘)//通过toggleClass来切换类
})
</script>

<div style="width: 200px;height: 200px;"> </div>    

好啦,今天的分享就到这里,有不足的地方还请大家指出,不胜感激,