标签：
随着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>
好啦,今天的分享就到这里,有不足的地方还请大家指出,不胜感激,
标签：
原文地址：http://www.cnblogs.com/blackgan/p/5790636.html
