jQuery-$ ready() DOM对象 库冲突解决

本文内容：

• $符号的意义
• $(document).ready()函数
• 分清jQuery对象和DOM对象
• 链式操作风格
• 解决jQuery和其他库的冲突

• 首次接触jquery的同学，第一感觉肯定是被 $ 符号刷屏...
  所以首先明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如：
  $("#foo") 等价于 jQuery("#foo")
  $.ajax 等价于 jQuery.ajax

• 再一个需要优先知道的是$(document).ready函数，该函数所有代码都将在DOM加载完毕后，页面全部内容（包括图片等）完全加载完毕前被执行。事件的绑定等就放在这里。
  它还可以在一个js文件中被反复调用。

$(document).ready(function) {
    // 将jQuery代码放在这里
});
$(document).ready(function) {
    // 将jQuery代码放在这里
});

可以使用如下的简写形式

$(function() {
    // 将jQuery代码放在这里
});

• 另一个是需要分清jQuery对象和DOM对象
  DOM对象：各种html标签都是DOM元素节点，可以通过javascript的getElementsByTagName或者getElementById来获取。
  jQuery对象：通过jQuery包装DOM对象后产生的对象

约定风格

var $variable = jQuery对象;
var variable = DOM对象; 

jQuery对象转成DOM对象

var $cr = $("#cr");
var cr = $cr[0];  // jQuery对象是一个类似数组的对象
或
var cr = $cr.get(0);

DOM对象转成jQuery对象

var cr = document.getElementById("cr");
var $cr = $(cr); // $()函数就是一个jQuery对象的制造工厂

• 链式操作风格
  此种操作帮程序猿节省了大量代码。不过写法应该注意可读性，看如下示例
  （1）对于同一个对象不超过3个操作的，可以直接写成一行

$("li").show().unbind("click");

（2）对于同一个对象的较多操作，建议每行写一个操作

$(this).removeClass("mouseout")
          .addClass("mouseover")
          .stop()
          .fadeTo("fast", 0.6)
          .fadeTo("fast", 1)
          .unbind("click")
          .click(function() {
              // do something.
           });

（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进

$(this).addClass("hightlight")
          .children("li").show().end()
.siblings().removeClass("hightlight")
          .children("li").hide();

• 解决jQuery和其他库的冲突

1. jQuery库在其他库之后导入
   方法一（直接使用jQuery）

   jQuery.noConflict(); // 将变量$的控制权交出去
   jQuery(function() { // 使用jQuery
   jQuery("p").click(function() {
   alert( jQuery(this).text() );
   });
   });

方法二（自定义备用名称）

var $j = jQuery.noConflict(); // 自定义一个快捷方式
$j(function() { //使用快捷方式
    $j("p").click(function() {
        alert( $j(this).text() );
    });
});

方法三（仍使用$）

jQuery.noConflict();
jQuery(function($) { // 先用jQuery设定页面加载时执行的函数
    $("p").click(function() { // 在函数内部继续使用$()方法
        alert( $(this).text() );
    });
});

或

jQuery.noConflict();
(function($) { // 定义匿名函数并设置形参为$
    $(function() { // 匿名函数内部的$均为jQuery
        $("p").click(function() {
            alert( $(this).text() );
        });
    });
});

2.jQuery库在其他库之前导入

jQuery(function() { // 直接使用jQuery，无需调用“jQuery.noConflict()”函数
    jQuery("p").click(function() {
        alert( jQuery(this).text() );
    });
});