jquery 學習二 （下）
參考資料：李炎恢老師的視頻 + 銳利的jquery.pdf
我自己練習的包也源碼已經上傳到我的csdn，需要參考的可以去下載
注意：學習jquery需要有一些javascript /html/css基礎，如果完全沒有一點基礎的是沒有辦法學習的；在我以後的筆記本用到的知識點我會寫到，如果有實在看不懂的，給我評論，我會在下次的筆記中有說明。
今天主要先說一下jquery核心問題，爲後面的學習做點鋪墊；
在做練習的時候，把上節的內容三個文件複製一份，建一個2文件夾放進去，都打開，做如下操作
首先在index.html中： 把<input>標籤換成<div>標籤 代碼如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<title>jquery 基礎核心內容</title>
<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript" src="dom.js"></script>
</head>
<body>
<div id = "box"> 基礎核心內容</div>
</body>
</html>接下來開始做我們的一些示例；（對dom.js的操作）
1、代碼
在jQuery程序中，不管是頁面元素的選擇、內置的功能函數，都是美元符號“$”來起始的。而這個“$”就是jQuery當中最重要且獨有的對象：jQuery對象，所以我們在頁面元素選擇或執行功能函數的時候可以這麼寫：
$(function () {}); //執行一個匿名函數
$(‘#box’); //進行執行的ID元素選擇
$(‘#box’).css(‘color’, ‘red’); //執行功能函數
// 整體寫到一塊也就是這樣
$(function(){
$('#box').css('color','red'); // #box就是選擇屬性的id .css添加一個行內的CSS 樣式
}); 在jquery 中 “$”就是一個jQuery對象；它有一個原本的對象就叫“jQuery” 它就是jQuery的縮寫形式；
也就是說：（$ === jQuery） 是恆成立的
執行如下代碼：看一下效果，與上面那斷代碼顯示是否一樣
注意：執行前先把上面代碼給註釋掉；以下操作都一樣，執行一段新寫的代碼把舊的先註釋掉，方便我們看效果；
jQuery(function(){
jQuery('#box').css('color','red');
}) 也可以執行如下代碼看效果：最終頁面顯示效果是，true
alert ($ === jQuery);在執行功能函數的時候，我們發現.css()這個功能函數並不是直接被“$”或jQuery對象調用執行的，而是先獲取元素後，返回某個對象再調用.css()這個功能函數。那麼也就是說，這個返回的對象其實也就是jQuery對象。
做下面的示例看一下具體顯示效果；在加深理解一下上面這段話的含意
alert($); //顯示返回的是jquery的內部；
alert($()); //顯示返回的是jquery的對象
alert($().css('color', 'red')); //顯示返回的也是jquery的對象
$().css(‘color’, ’red’); //理論上合法，但實際上缺少元素而報錯
下面同樣；
jQuery(function(){
alert($);
alert($());
alert($('#box'));
alert($('#box').css('color','red'));
}) 值得一提的是，執行了.css()這個功能函數後，最終返回的還是jQuery對象，那麼也就是說，jQuery的代碼模式是採用的連綴方式，可以不停的連續調用功能函數。
$('#box').css('color', 'red').css('font-size', '50px'); //連綴
alert($('#box').css('color','red').css('fontSize','100').css('fontWeight','bold')); //連綴
jQuery中代碼註釋和JavaScript是保持一致的，有兩種最常用的註釋：單行使用“//...” ，多行使用“/* ... */” 。
2、加載模式
我們在之前的代碼一直在使用$(function () {});這段代碼進行首尾包裹，那麼爲什麼必須要包裹這段代碼呢？
原因是我們jQuery庫文件是在body元素之前加載的，我們必須等待所有的DOM元素加載後，延遲支持DOM操作，否則就無法獲取到。
做一個示例如下：
$(function(){
});
$('#box').css('color','red');這裏是因爲:
查看一下html知道，當前頁面dom.js是在html頁面中引入的，html頁面的執行順序是一行一行的執行；當把上面的代碼寫到方法外面的時，執行到 <script type="text/javascript" src="dom.js"></script>這行代碼時就會去dom.js中逐行執行；而執行到 $('#box').css('color','red');時就會去.html找相應的元素，而此時html以下代碼還沒執行呢，所以當顯示出來時，頁面上顯示的文字沒有效果；
加下面一段代碼繼續查看效果
windows.onload = function(){ } //當網頁內容都加載完成的時候執行function裏面的代碼
window.onload = function(){
$('#box').css('color','red')
};
 |
3、對象互換
jQuery對象雖然是
jQuery
庫獨有的對象，但它也是通過
JavaScript
進行封裝而來的。 我們可以直接輸出來得到它的信息。
alert($);//jQuery對象方法內部
alert($());//jQuery對象返回的對象，還是jQuery
alert($('#box'));//包裹ID元素返回對象，還是jQuery
從上面三組代碼我們發現：只要使用了包裹後，最終返回的都是 jQuery 對象。這樣的好處顯而易見，就是可以連綴處理。但有時，我們也需要返回原生的DOM對象:
$(function(){
alert($('#box')); //顯示的是jquery的對象
alert(document.getElementById('box')); //返回原生DOM對象 （javascript寫法） [object HTMLDivElement]
alert($('#box').get(0)); // 返回原生DOM對象 (jQuery寫法) [object HTMLDivElement]
alert($(document.getElementById('box'))); //再把原生對象包裹成jQuery 對象
});4、多個庫之間的衝突
當一個項目中引入多個第三方庫的時候，由於沒有命名空間的約束（命名空間就好比同一個目錄下的文件夾一樣，名字相同就會產生衝突） ，庫與庫之間發生衝突在所難免。那麼，既然有衝突的問題，爲什麼要使用多個庫呢？原因是 jQuery 只不過是 DOM 操作爲主的庫，方便我們日常 Web 開發。但有時，我們的項目有更多特殊的功能需要引入其他的庫，比如用戶界面 UI 方面的庫，遊戲引擎方面的庫等等一系列。而很多庫，比如 prototype、還有我們 JavaScript 課程開發的 Base 庫，都使用“$”作爲基準起始符，如果想和共容有兩種方法：
方法一：
將 jQuery 庫在 Base 庫之前引入，那麼“$”的所有權就歸 Base 庫所有，而 jQuery 可以直接用 jQuery 對象調用，或者創建一個“$$”符給 jQuery 使用。(下面直接在此寫入代碼總是有問題，半個小時也沒解決，所以以下我只好截圖來解決)
首先在html中引入 base.js/tool.js庫,置於jQuery庫的後面，然後執行如下代碼(base.js/tool.js庫可以從我的csdn中源碼處獲取，源碼我已經上傳）
dom.js如下
以下是我測試的一些結果，大家可以參考一下；
$(function(){
剛纔我們已經用過 alert($('#box').get(0))，說明jquery中是有get方法;我們打印試試
如果打印成功就表示是'$'是jquery庫的，如果失敗就表示'$'已經是base 庫的了
alert($('#box').get(0));
以上驗證結果是失敗 最後通過驗證得到：將 jQuery 庫在 Base 庫之前引入，那麼“$”的所有權就歸 Base 庫所有
base 庫中有一個 ge()方法，我們引入試試，查看結果如何
alert($('#box').ge(0)); //最後結果輸出了 [object HTMLDivElement]
如果想要正確輸出結果應該怎麼辦呢？我們也可以這樣寫
alert(jQuery('#box').get(0));
如果覺得麻煩也可以這樣做 在方法外部定義jquery:
var $$= jQuery
alert($$('#box').get(0));})；
如果將 jQuery 庫在 Base 庫之後引入，那麼“$”的所有權就歸 jQuery 庫所有，而 Base庫將會衝突而失去作用。這裏，jQuery 提供了一個方法：
首先在html中將jQuery庫放置到base.js/tool.js庫後面，然後執行如下代碼
jQuery.noConflict(); //將jQuery 的 '$' 符所有權剔除掉 
這就是基礎核心的一些內容，從下次開始便正式學習jquery知識點