jQuery学习笔记一--基础核心

一、    代码风格

      “$”是jQuery当中最重要且独有的对象：jQuery对象。所以我们在页面元素选择或执行功能函数的时候可以这么写：

             $(function(){});          //执行一个匿名函数
             $(‘#box’);             //进行执行的ID元素选择
             $(‘#box’).css(‘color’,‘red’);            //执行功能函数
       由于$本身就是jQuery对象的缩写形式，那么也就是说上面的三段代码也可以写成如下形式：
             jQuery(function(){});
             jQuery(‘#box’);
             jQuery(‘#box’).css(‘color’,‘red’);

jQuery在执行了功能函数后，最终返回的还是jQuery对象。即jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数（链式）。

             $('#box').css('color','red').css('font-size','50px');    //连缀

 

二、    加载模式

jQuery库文件是在body元素之前加载的，我们必须等待所有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。
在延迟等待加载，JavaScript提供了一个事件为load，方法如下：
window.οnlοad=function(){};            //JavaScript等待加载
$(document).ready(function(){});             //jQuery等待加载
load和ready区别：

	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码
执行次数	只能执行一次，如果第二次，那么第一次的执行会被覆盖	可以执行多次，第N次都不会被上一次覆盖
简写方案	无	$(function(){ });

在实际应用中很少直接去使用window.onload，因为他需要等待图片之类的大型元素加载完毕后才能执行JS代码。所以网速较慢的情况下，页面已经全面展开，图片还在缓慢加载，这时页面上任何的JS交互功能全部处在假死状态。并且只能执行单次在多次开发和团队开发中会带来困难。

三、    对象互换

       DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
             $(document.getElementById("Element")) ;

      由于jQuery对象本身是一个集合，所以jQuery对象要转换为Dom对象必须取出其中的某一项，一般可通过索引取出。两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); 

       （1）jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

             $("Element")[index];

       （2）jQuery本身提供，通过.get(index)方法，得到相应的DOM对象如。

             $("Element").get(index);

       注意：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

 

四、    多个库之间的冲突

       当一个项目中引入多个第三方库的时候，由于没有命名空间的约束（命名空间就好比同一个目录下的文件夹一样，名字相同就会产生冲突），库与库之间发生冲突在所难免。

       比如prototype、Base库，都使用“$”作为基准起始符，如果想和jQuery共容有两种方法（“$”的所有权归后引入的库所有）：

       （1）将jQuery库在Base库之前引入，那么“$”的所有权就归Base库所有，而jQuery可以直接用jQuery对象调用，或者创建一个“$$”符给jQuery使用。
             var $$=jQuery;          //创建一个$$的jQuery对象
             $(function(){             //这是Base的$
                 alert($('#box').ge(0));             //这是Base的$
                 alert($$('#box').width());             //这是jQuery的$$
              });
       （2）如果将jQuery库在Base库之后引入，那么“$”的所有权就归jQuery库所有，而Base库将会冲突而失去作用。这里，jQuery提供了一个方法：
             jQuery.noConflict();          //将$符所有权剔除
             var $$=jQuery;
             $(function(){
                 alert($('#box').ge(0));
                 alert($$('#box').width());
              });

 

学习资料：jQuery初级入门【李炎恢老师】