一、 代码风格
“$”是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初级入门【李炎恢老师】