1.jQuery的简介 : )
jQuery是什么?
一个优秀的JS库,大型开发必备。官方的宣传为Write less,do more(写的更少,做的更多)。
jQuery的三大好处:
1. 简化Javascript的复杂操作
2. 不需要再关心浏览器兼容性
3. 提供了大量实用简便的方法
现在的jQuery有1.x和2.x两大版本,最主要的区别在于2.x版本不再提供对IE6,7,8的兼容,1.x则还是会对原来的老版本浏览器进行兼容。如果我们的项目主要运用于移动端的话,则可以选择使用2.x版本,2.x版本的jQuery代码也更为简洁,如果需要考虑兼容IE6等老版本的浏览器,则还是选择1.x的jQuery。
如何学习jQuery?
总的来说,jQuery只是一个辅助工具,就像做饭一样,就算给你准备好了成百上千的材料,你也不一定能做出一道很美味的晚餐。真正能实现我们想要的效果的东西,其实是我们自己的一个操作过程,也就是我们的逻辑思维和我们掌握的细节知识,所以最后还是得通过我们自身的能力来操作,工具始终只能是工具而已。另外,jQuery很庞大,想要获得提高,必须分阶段的来学习,不可能一口气就掌握。
2.选择元素:
全球100万个网站当中有50%的网站都在使用着jQuery,这归结于jQuery在选择网页元素的操作上为开发者们提供了很大的方便,除此之外,jQuery的写法也极为简洁,如链式操作,取值与赋值合体,方法函数化等。但是,jQuery始终只是Javascript下的一个子集,它们可以出现在同一个项目中,但是不能混用,这就像男厕和女厕,虽然可以放在一起来使用,但终究男性只能使用男厕,女性只能使用女厕一个道理。下面就通过一些具体的例子来看看jQuery的一些基本操作,这里我们选择使用的jQuery为1.10.1。
Case01 jQuery中ID选择器,类选择器,标签选择器的使用:
<div id="d1" class="box">
div
</div>
<script>
//模拟CSS选择元素
$('#d1').css('background','red');
//根据标签选择
$('div').css('background','blue');
//根据类选择
$('.box').css('background','yellow');
</script>
如果我们此时再向页面中添加一个类名为box的span标签:
<div id="d1" class="box">
div
</div>
<span class="box">span</span>
这时再使用jQuery类选择器代码:
$(‘.box’).css(‘background’,’yellow’);进行背景色变化时,会发现span标签的背景色也会和div标签的背景色一样变为黄色。虽然这只是一个显而易见,可想而知的改变,但这就是jQuery与原生的Javascript的一个基本区别——省略了循环。在原生Javascript中,要想让选择到的一组元素都去进行操作,必须要加入一个循环,而在jQuery中,选择到了一组元素,我们可以直接对这一组元素进行后续操作,而不用进行繁琐的循环。
Case02 jQuery中独有表达式的选择操作:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
//让所有li标签的背景色变红
$('li').css('background','red');
//让第一个li标签的背景色变红
$('li:first').css('background','red');
//让最后一个li标签的背景色变红
$('li:last').css('background','red');
//让中间的某个li标签的背景色变红,eq()当中的数字为li标签的索引值,和数组一样,也是从0开始
$('li:eq(2)').css('background','red');
//让li标签进行隔行换色(奇数行用even表示)
$('li:even').css('background','red');
//让li标签进行隔行换色(偶数行用odd表示)
$('li:odd').css('background','red');
</script>
除了这些选择方式外,jQuery还有很多其他独有的选择方式,比如为上述的li标签中的某两个添加一个box的类,这时我们可以通过$(‘li.box’)或者$(‘li’).filter(‘.box’)来选择我们想要的元素:
<ul>
<li></li>
<li></li>
<li class="box"></li>
<li class="box"></li>
<li></li>
</ul>
<script>
$('li.box').css('background','red');
$('li').filter('.box').css('background','red');
</script>
这时,我们再为上述的li标签中的某两个li标签加上一个title属性,这时我们又可以通过以下的方式来选择到对应的元素:
<ul>
<li></li>
<li title="jquery"></li>
<li class="box"></li>
<li class="box"></li>
<li title="jquery"></li>
</ul>
<script>
$('li').filter('[title=jquery]').css('background','red');
</script>
3.jQuery的写法:
jQuery与Javascript的写法,我们只需要注意一点,jQuery中的所有操作都已经函数化了。
举个例子,在原生的Javascript中我们想让页面在加载完毕后做一些事情,使用的是:
window.onload = function(){ //你想要做的事情 };
如果用jQuery来写,就是这样的:
$() //很简单吧,这相当于定义了一个名为$的函数
$(function(){ //你想要做的事情 });
再比如,Javascript中的innerHTML,到jQuery中变成了html(),Javascript中的οnclick=function(){},到jQuery中变成了click(function(){});。所以,原生的Javascript都可以转化为jQuery的写法,这就是典型的jQuery式的方法函数化。接下来我们可以写一个小效果:
先定义一个id为d1的div标签,里面的内容为”Hello,jQuery”,在点击这个盒子时我们需要弹出这一段内容。
我们先用Javascript的写法来看一下:
<div id="d1">
Hello,jQuery!
</div>
<script>
window.onload = function(){
var oDiv = document.getElementById('d1');
oDiv.οnclick=function(){
alert(this.innerHTML);
};
};
</script>
我们现在再用jQuery来写一下看看:
<div id="d1">
Hello,jQuery!
</div>
<script>
$(function(){
$('#d1').click(function(){
alert($(this).html());
});
});
</script>
我们可以发现一些小问题,jQuery当中基本可以把“=”忽略掉,操作都是通过传参来完成。调用jQuery的时候一定要带上括号,因为方法函数化是jQuery的基本写法。另外再来说下什么是链式操作吧,这很简单,但却也是jQuery那么受欢迎的一个重要原因。下面是一个链式操作的例子:
<div id="d1">
Hello,jQuery!
</div>
<script>
$(function(){
var oDiv= $('#d1');
oDiv.html('hello');
oDiv.css('background','red');
oDiv.click(function(){
alert(123);
});
});
</script>
上面的操作,我们可以写成:
$('#d1').html('hello').css('background','red').click(function(){
alert(123);
});
但是,如果我们对链式操作不是很熟练的话,我们还是分开来写,这样代码也易于阅读和修改。
在jQuery中,还有一个很重要的东西,那就是取值与赋值的合体这样一个思想。
在原生的Javascript中,为元素赋值取值是这样来做的:
window.onload = function(){
oDiv.innerHTML = ‘jQuery’;//赋值
alert(oDiv.innerHTML); //取值
};
在jQuery中,是这样来做:
$(function(){
$(‘#d1’).html(‘jQuery’);//赋值
alert($(‘#d1’).html());//取值
});
可以看出,jQuery中的html()方法同时承担了取值和赋值,这就是取值和赋值合体的特征表现。讲到这里,有一个很重要的细节不得不说,那就是在针对一组,而不是一个元素进行赋值取值时,jQuery又是怎么来做的呢,下面我们还是通过一个例子来说明一下:
我们定义了一组li元素,现在要做的就是使用jQuery选择li元素,然后来弹出li下面的内容:
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
<script>
$(function(){
alert($('li').html());
});
</script>
弹出的结果可以看出,jQuery只是取到了这组li元素中的第一个li标签中的内容,不会取出所有li元素中的内容。如果想要取出所有li元素中的内容,我们必须通过循环才能做到。
由此可以得出一个类似于结论的东西:
当选取到的是一组元素时,对其进行取值时,取到的只是这组元素中的第一个元素的值。相反,如果进行的是赋值操作,则会对取到的所有元素都进行赋值而不用通过循环。下面的操作可以证明这一点:
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
<script>
$(function(){
alert($('li').html(‘jQuery’));
});
</script>
上面的这个赋值与取值的细节是很正确的,很符合生活中的思路。取值只取相同的一组元素中的一个,而赋值则为这一组元素都赋值。