由于前三天幫其他同學做個項目的界面設計和布局之類的事情，很久沒上來寫點東西來記錄自己的歷程了

好了，再未來的三天內，我會重溫一下jquery的知識，都是自己的深入的理解，因為最近在做項目，或者幫其他同學做他們的畢業設計之類的前端東西，感覺juqery實在是一個很好的東西，所以最近想重溫一下以前的東西，自己感觸很深，理解更加透徹了，所以在這里寫下來，也算是自己對自己的歷程的總結吧，不過不是很全面，但是我覺得是精彩的地方，我沒有寫過書什么的，所以記下來的東西不是很 全面，所以有閱讀的朋友需要全面地知識的話，還是勸你上網找個全面的電子書看一下，學習一下，比較好一點

好了，今天開始了，重返博客園呢，呵呵。。又在自言自語了，不過，已經習慣了

首先，說一下js吧，由于js的出現，使得網頁和用戶之間實現了一種實時的，動態的，交互的關系，使網頁更加炫，更加酷了。

但同時，js的弊端也慢慢浮現出來了，js自身的三大弊端：第一：復雜的文檔對象模型（Dom問題） 第二：不一致的瀏覽器實現（瀏覽器問題） 第三：缺乏便捷的開發，調試工具（工具問題）

正當js慢慢退下的時候，這個時候ajax出現了，ajax得出現，使得wed的應用更強大很多很多，所以圍繞實現的ajax技術的相應的知識或者框架就慢慢浮現出來了

就在這個時候2006年的一個開源項目里，jquery出現了。

好把，這里自己總結一下jquery的優勢：

第一：輕量級，

完整的jquery的庫有一百多k的，經過普通的壓縮后，變成了四十多k吧，然后如果再經過服務器的gzip壓縮后，就剩下十幾k了，這是相當的樂觀的，能夠用上jquery強的功能，卻不用付出太大的用戶體驗的網頁瀏覽速度來得到，是非常好的，對于現在家庭的帶寬如此大，這都只是瞬間完成的

第二：強大的選擇器；

這個提一下js對dom進行選擇吧，每一個都是getelementbyid或者getelementbytagname或者getelementbyname之類的，過長的提取方法和每一次單一的提取，讓很多程序員都很抓狂，相對js的選擇操作，jquery的強大的選擇器絕對是玩爆呢，只要是css1--css3幾乎所有的選擇器，以及jquery獨創的高級而復雜的選擇器，甚至可以讓開發者自己編寫屬于自己的選擇器，這實在是太強大了

第三：出色的dom操作的封裝

jquery封裝了大量常用的dom操作，使開發者在編寫dom操作相關程序的時候能夠得心應手

第四：可靠的事件處理機制

第五：完善的ajax

jquery將所有的ajax操作封裝到一個函數$.(ajax)里，使得開發者處理ajax的時候能夠專心處理業務邏輯而無需關心復雜的的瀏覽器兼容性和XMLHttpRequet對象的創建和使用的問題

第六：出色的瀏覽器兼容性

作為一個流行的js庫，jquery能夠在IE6以上，或者ff safari opera等都是很好的兼容的

在jquery庫中，$就是juqery的一個簡寫形式

往下，我們在網頁里面調用js的時候，都是在<script></script>之間的寫入jquery或者js的操作的，我們寫入jquery的操作的時候，第一句總是$(document).ready(function){},而我們在 調用js操作的時候，第一句總是window.onload=function(){}，然而，他們之間有什么區別呢？

首先，討論執行時機這個點上，windon.onload必須等待網頁中的內容加載完畢后（包括圖片）才能執行，而$(document).ready()，在網頁中所有的dom結構繪制完畢后就執行，可能dom元素關聯的東西并沒有加載完，也是可以執行的

然后，在編寫一個數上，window.onload=function{}不能出現多個，只能出現一個，而$(document).ready()則可以出現多個。然后在這多個里面執行他們要處理的動作

在簡寫方面：window.onload是沒有簡寫的，而$(document).ready()有幾個簡寫的，其中一個就是：$(function(){})

好，繼續往下學習：

jquery強大的鏈式操作：

例子：

$(".has_children").click(function{

$(this).addClass("highlight")

.children("a").show().end() //將子節點的<a>元素顯示出來并重新定位到上次操作的元素

.siblings().removeClass("highlight")

.children("a").hid();

})

來學習一下js對象：

var domObj = document.getElementById("id"); //獲得DOM對象

var ObjHtml = domObj.innerHTML;

學習jquery對象：

說白了，jquery對象就是通過jquery包裝DOM對象后產生的對象

jquery對象是獨有的，如果一個對象是jquery對象，那么就可以使用jquery里的方法

$("#foo").html(); 等同于： document.getElementById("foo").innerHTML;

在jquery中無法使用DOM對象的人和方法，Dom也不能用jquery對象的任何方法

jquery對象轉換成DOM對象：

var $cr = $("#cr"); //juqery 對象

var cr = $cr[0]; 或者 var cr = $cr.get(0); //Dom對象

alert(cr.checked) //檢測這個checkbox是否被選中了

這樣子轉換之后，就可以使用DOM對象的方法了 if(cr.checked) //DOm方式判斷

DOm對象轉換jquery對象：

var cr = document.getElementById("cr"); //dom對象

var $cr =$(cr); //jquery對象

這樣子轉換之后就可以使用jquery的方法了 if($cr.is(":checked")) //jquery方法判斷 返回boolean值

備注：DOM對象才能使用DOM方法，jquery對象才能不可以使用DOM中的方法，但jquery對象提供了一套更加完整的工具用于操作DOM元素，后面會講到

平時用到的jquery對象都是通過$()函數制造出來的，$()函數就是一個jquery對象的制造工廠

解決jquery庫和其他庫的沖突問題：

1.jquery庫在其他庫之后導入：

可以在任何時候調用jQuery.noConflict()函數來講變量$的控制權交給其他的js庫

例子：<script>

jQuery.noConflict(); //將變量$的控制權移交給prototype,js

JQuery(function(){ //使用jQuery

jQuery（“p”）.click(function(){

})

})

$("pp").style.display='none'; //使用prototype

</script>

然而，就可以在程序里將jQuery()函數作為jQuery對象的制造工廠

此外，還有另一種選擇，如果想確保jQuery不會與其他庫沖突，但又想自定義一個快捷方式，可以進行如下操作：

var $j= jQuery.noConflict(); //自定義一個快捷方式

$j(function(){})

如果不想給jQuery自定義這些備用名稱，還想用$而不管其他庫的$()方法，同時又不想與其他庫相沖突，那么有以下兩種解決方法

第一種：

jQuery.noConflict(); //將變量$控制權讓給其他庫

jQuery(function($){ //使用jQuery設定頁面加載時執行的函數

$("p").click(function(){ //在函數內部繼續使用$()方法

alert($(this).text());

})

})

第二種方法：

jQuery.noConfict(); //將變量$的控制權交給其他庫，

(function($){ //定義匿名函數并設置形參為$

$(function(){ //匿名函數內部的$均為jQury

$('p").click(function(){ //繼續使用$()方法

alert($(this).text());

})

})

})

如果jQury庫在其他庫之前倒入

這樣子的情況下，直接用"jQuery"來做一些jQuery的一些工作，其他后面的庫直接用$來用就行的

例子：

jQuery(function(){ //使用jQuery來進行工作

jQuery("p").click(function(){

alert(jQuery(this).text()); //直接用jQuery來代替$

})

})

$("pp").style.display="none"; //使用prototype庫

好了，到這里，jQuery深入學習的第一節完成了

總結

以上是生活随笔為你收集整理的jquery的发展由来和深入理解（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。