jQuery基础与一些细节（1）

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选择器，类选择器，标签选择器的使用:

        <divid="d1"class="box">

             div

       </div>

        <script>

        //模拟CSS选择元素

        $('#d1').css('background','red');

        //根据标签选择

        $('div').css('background','blue');

        //根据类选择

        $('.box').css('background','yellow');

</script>

 

如果我们此时再向页面中添加一个类名为box的span标签:

<divid="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>

   <liclass="box"></li>

   <liclass="box"></li>

   <li></li>

</ul>

<script>

   $('li.box').css('background','red');

   $('li').filter('.box').css('background','red');

</script>

 

这时，我们再为上述的li标签中的某两个li标签加上一个title属性,这时我们又可以通过以下的方式来选择到对应的元素:

<ul>

   <li></li>

   <lititle="jquery"></li>

   <liclass="box"></li>

   <liclass="box"></li>

   <lititle="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中的onclick=function(){}，到jQuery中变成了click(function(){});。所以，原生的Javascript都可以转化为jQuery的写法，这就是典型的jQuery式的方法函数化。接下来我们可以写一个小效果:

   先定义一个id为d1的div标签，里面的内容为”Hello,jQuery”,在点击这个盒子时我们需要弹出这一段内容。

我们先用Javascript的写法来看一下:
<divid="d1">

 Hello,jQuery!

</div>

<script>

 window.onload = function(){

      var oDiv = document.getElementById('d1');

      oDiv.onclick=function(){

          alert(this.innerHTML); 

      };

 };

</script>

我们现在再用jQuery来写一下看看:

<divid="d1">

 Hello,jQuery!

</div>

<script>

    $(function(){

     $('#d1').click(function(){

          alert($(this).html());

     });

    });

</script>

我们可以发现一些小问题，jQuery当中基本可以把“=”忽略掉，操作都是通过传参来完成。调用jQuery的时候一定要带上括号，因为方法函数化是jQuery的基本写法。另外再来说下什么是链式操作吧，这很简单，但却也是jQuery那么受欢迎的一个重要原因。下面是一个链式操作的例子:

<divid="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>

上面的这个赋值与取值的细节是很正确的，很符合生活中的思路。取值只取相同的一组元素中的一个，而赋值则为这一组元素都赋值。