jQuery基础核心

代码风格

在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“ $”来起始的。而这个“$”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写：

$(function () {}); //执行一个匿名函数

返回值:jQueryjQuery(callback)

概述

$(document).ready()的简写。 允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的 $()操作符都包装到其中来。从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。 你可以在一个页面中使用任意多个$(document).ready事件。参考 ready(Function) 获取更多 ready 事件的信息。

$(‘#box’);//进行执行的ID元素选择
$(‘#box’).css(‘color’, ‘red’);//执行功能函数

知识点：

在执行功能函数的时候，我们发现.css()这个功能函数并不是直接被“$”或jQuery对象调用执行的，而是先获取元素后，返回某个对象再调用.css()这个功能函数。那么也就是说，这个返回的对象其实也就是jQuery对象。
$(“#dom”), 结果如下：

$().css(‘color’, ’red’); //理论上合法，但实际上缺少元素而报错

知识点：连缀方式调用

值得一提的是，执行了.css()这个功能函数后，最终返回的还是jQuery对象，那么也就是说，jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。

$('#d_box').css('color', 'red').css("border", "1px solid red").width(600).height(600);//执行功能函数

知识点：

jQuery中代码注释和JavaScript是保持一致的，有两种最常用的注释：单行使用“//…”，多行使用“/* … */”。

加载模式
知识点：
在延迟等待加载，JavaScript提供了一个事件为load，方法如下：

window.onload = function () {}; //JavaScript等待加载  
$(document).ready(function () {}); //jQuery等待加载  

load 和 ready的区别

对象互换

alert($);//jQuery 对象方法内部
alert($());//jQuery 对象返回的对象，还是 jQuery
alert($('#box'));//包裹 ID 元素返回对象，还是 jQuery

从上面三组代码我们发现：只要使用了包裹后，最终返回的都是 jQuery 对象。这样的好处显而易见，就是可以连缀处理。但有时，我们也需要返回原生的 DOM 对象，比如：

alert(document.getElementById('box')); //[object HTMLDivElement]

jQuery 想要达到获取原生的 DOM 对象，可以这么处理：

alert($('#box').get(0));//ID 元素的第一个原生 DOM
$('#box')[0] //ID 元素的第一个原生 DOM

多个库之间的冲突

知识点 jQuery.noConflict()方法：转让$的控制权！

1、可以通过jQuery全名替代简写的方式来使用 jQuery

在其他库和jQuery库都加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaSript库。然后就可以在程序里将jQuery()函数作为jQuery对象的制造工厂。

<p id="pp">test---prototype</p>
<p>test---jQuery</p>
<script type="text/javascript">
jQuery.noConflict();                //将变量$的控制权让渡给prototype.js，全名可以不调用。
jQuery(function(){                    //使用jQuery
    jQuery("p").click(function(){
        alert( jQuery(this).text() );
    });
});
//此处不可以再写成$,此时的$代表prototype.js中定义的$符号。
$("pp").style.display = 'none';        //使用prototype
</script>

2、自定义一个快捷方式

noConflict() 可返回对 jQuery 的引用，可以把它存入自定义名称，例如jq,$J变量，以供稍后使用。这样可以确保jQuery不会与其他库冲突，同时又使用自定义一个快捷方式。

<script type="text/javascript">
var $j = jQuery.noConflict();        //自定义一个比较短快捷方式
$j(function(){                        //使用jQuery
    $j("p").click(function(){
        alert( $j(this).text() );
    });
});
$("pp").style.display = 'none';        //使用prototype
</script>

3、在不冲突的情况下仍然用$

如果想在jQuery 代码块使用 $ 简写，不愿意改变这个快捷方式，可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 ， 而在函数外，依旧不得不使用 “jQuery”。

<script type="text/javascript">
jQuery.noConflict();     //将变量$的控制权让渡给prototype.js
jQuery(document).ready(function($){
    $("p").click(function(){        //继续使用 $ 方法
        alert( $(this).text() );
    });
});
//或者如下
jQuery(function($){                    //使用jQuery
    $("p").click(function(){        //继续使用 $ 方法
        alert( $(this).text() );
    });
});
</script>

或者使用IEF语句块，这应该是最理想的方式，因为可以通过改变最少的代码来实现全面的兼容性。
在我们自己写jquery插件时,应该都使用这种写法，因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

<script type="text/javascript">
jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
(function($){                        //定义匿名函数并设置形参为$
    $(function(){                    //匿名函数内部的$均为jQuery
        $("p").click(function(){    //继续使用 $ 方法
            alert($(this).text());
        });
    });
})(jQuery);                            //执行匿名函数且传递实参jQuery
$("pp").style.display = 'none';        //使用prototype
</script>

源码原理分析

在jQuery加载的时候，通过事先声明的_jQuery变量获取到当前window.jQuery，通过_ $获取到当前window.$。
通过jQuery.extend()把noConflict挂载到jQuery下面。所以我们在调用的时候都是jQuery.noConflict()这样调。
在调用noConflict()时做了2个判断，
第一个if，把$的控制权交出去。
第二个if，在noConflict()传参的时候把，jQuery的控制权交出去。
最后noConflict()返回jQuery对象，用哪个参数接收，哪个参数将拥有jQuery的控制权。

jQuery.noConflict(true|false)源码如下：