代码风格
在jquery程序中,不管是页面元素的选择还是内置的功能函数都是美元("$")来开始的。而这个"$"就是jquery当中最重要且独有的对象,jQuery对象,所以我们在页面选择元素的时候可以这样写;
$(function(){}); //执行一个匿名函数
$("#box"); //进行执行ID元素的选择
$("#box").css('color','red'); //执行功能函数
由于$本身就是jquery对象的缩写,也就是上面的三段代码也可以改成:
jQuery(function(){});
jQuery("#box");
jQuery("#box").css('color','red');
这里特别属注意的就是执行了.css() 这个功能函数后,最终返回的还是jquery对象,那么也就是说jquery采用的就是连缀模式。可以不停的调用功能函数.
$('#box').css('color','red').css('font-size','50px');
jQuery中代码注释和javascript是一样的。有两种
//$("#div1").css('background','red');
/* $("#div1").css('font-size':'40px');*/
加载模式
我们在之前的代码一直使用$(function(){})这段代码进行首尾包裹。因为我们的jquery库文件是在body元素之前加载的,我们必须等到所有的DOM元素加载后,延迟加载DOM操作,否则无法获取到。
在延迟加载Javascript 提供了一个事件为load,方法如下:
window.onload = function(){} //Javascript等待加载
$(function(){}) //第一种
$(document).ready(function(){}) //第二种
load 和ready 的区别
执行时机 window.onload必须等待网页全部加载完(包括图片等)然后在执行包裹代码 $(document).ready()只需等待网页中的DOM结构加载完毕,就能执行包裹的代码
执行次数 window.onload 只能执行一次,如果执行第二次那么第一次可能被覆盖。$(document).ready()可以执行很多次,第N次都不会被上一次覆盖
在实际运用中,我们很少直接去去使用window.onload 因为她需要等待图片之类的大量元素加载完毕才能执行JS代码。
对象互换
jQuery 对象是jQuery库独有的对象,但它也是通过Javascript进行封装而来。我们可以直接输出来得到它的信息。
alert($("#box")); //包裹IS元素返回对象,还是jQuery
从上面的代码看到最终返回的都是jQuery对象,这样的好处就是可以连缀处理。但有时我们也需要返回源生的DOM对象。比如
alert(document.getElementById("box")); //返回源生对象
jQuery要是想达到源生的DOM对象,可以这样处理
alert($("#box").get(0))
从上面的get(0)这里的索引可以看出jquery是可以批量处理DOM的,这样可以在很多需要循环遍历的处理上得心应手。
多个库之间的冲突
当一个项目中引入了多个第三方库的时候,由于没有命名空间的约束(命名空间就好比同一个目录下的文件夹一样,名字会产生冲突),库与库之间的冲突在所难免。
而很多库,比如prototype还有自定义开发都会使用"$"作为基准起始符,如果想和jQuery兼容,共享有两种方法:
- 将jQuery库在Base库之前引入,那么"$"的所有权都归Base库所有,而jQuery可以直接用jQuery对象调用,或者创建一个"$$"符给jQuery使用.
var $$ = jQuery; //创建一个$$的jQuery对象
$(function(){ //这个事Base的$
alert($("#box").get(0)); //这个是Base的$
alert($$("#box").width()) //这是jQuery的$$
})
2.如果将jquery库在base库之后引入,那么"$"所有权就归jquery所有。而Base库将会冲突所有而失去作用。在这里jQuery提供了一个方法
jQuery.noConflict(); //将$符号所有权放弃
var $$ = jQuery;
$(function(){
alert($("#box").get(0));
alert($$("#box").width())
})
结束语
jQuery 第一次基础核心结束。