Jquery基础核心

代码风格

在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 第一次基础核心结束。

Jquery基础核心