由于前三天幫其他同學(xué)做個(gè)項(xiàng)目的界面設(shè)計(jì)和布局之類的事情，很久沒上來寫點(diǎn)東西來記錄自己的歷程了

好了，再未來的三天內(nèi)，我會(huì)重溫一下jquery的知識(shí)，都是自己的深入的理解，因?yàn)樽罱谧鲰?xiàng)目，或者幫其他同學(xué)做他們的畢業(yè)設(shè)計(jì)之類的前端東西，感覺juqery實(shí)在是一個(gè)很好的東西，所以最近想重溫一下以前的東西，自己感觸很深，理解更加透徹了，所以在這里寫下來，也算是自己對(duì)自己的歷程的總結(jié)吧，不過不是很全面，但是我覺得是精彩的地方，我沒有寫過書什么的，所以記下來的東西不是很 全面，所以有閱讀的朋友需要全面地知識(shí)的話，還是勸你上網(wǎng)找個(gè)全面的電子書看一下，學(xué)習(xí)一下，比較好一點(diǎn)

好了，今天開始了，重返博客園呢，呵呵。。又在自言自語了，不過，已經(jīng)習(xí)慣了

首先，說一下js吧，由于js的出現(xiàn)，使得網(wǎng)頁和用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)的，動(dòng)態(tài)的，交互的關(guān)系，使網(wǎng)頁更加炫，更加酷了。

但同時(shí)，js的弊端也慢慢浮現(xiàn)出來了，js自身的三大弊端：第一：復(fù)雜的文檔對(duì)象模型（Dom問題） 第二：不一致的瀏覽器實(shí)現(xiàn)（瀏覽器問題） 第三：缺乏便捷的開發(fā)，調(diào)試工具（工具問題）

正當(dāng)js慢慢退下的時(shí)候，這個(gè)時(shí)候ajax出現(xiàn)了，ajax得出現(xiàn)，使得wed的應(yīng)用更強(qiáng)大很多很多，所以圍繞實(shí)現(xiàn)的ajax技術(shù)的相應(yīng)的知識(shí)或者框架就慢慢浮現(xiàn)出來了

就在這個(gè)時(shí)候2006年的一個(gè)開源項(xiàng)目里，jquery出現(xiàn)了。

好把，這里自己總結(jié)一下jquery的優(yōu)勢(shì)：

第一：輕量級(jí)，

完整的jquery的庫有一百多k的，經(jīng)過普通的壓縮后，變成了四十多k吧，然后如果再經(jīng)過服務(wù)器的gzip壓縮后，就剩下十幾k了，這是相當(dāng)?shù)臉酚^的，能夠用上jquery強(qiáng)的功能，卻不用付出太大的用戶體驗(yàn)的網(wǎng)頁瀏覽速度來得到，是非常好的，對(duì)于現(xiàn)在家庭的帶寬如此大，這都只是瞬間完成的

第二：強(qiáng)大的選擇器；

這個(gè)提一下js對(duì)dom進(jìn)行選擇吧，每一個(gè)都是getelementbyid或者getelementbytagname或者getelementbyname之類的，過長(zhǎng)的提取方法和每一次單一的提取，讓很多程序員都很抓狂，相對(duì)js的選擇操作，jquery的強(qiáng)大的選擇器絕對(duì)是玩爆呢，只要是css1--css3幾乎所有的選擇器，以及jquery獨(dú)創(chuàng)的高級(jí)而復(fù)雜的選擇器，甚至可以讓開發(fā)者自己編寫屬于自己的選擇器，這實(shí)在是太強(qiáng)大了

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

jquery封裝了大量常用的dom操作，使開發(fā)者在編寫dom操作相關(guān)程序的時(shí)候能夠得心應(yīng)手

第四：可靠的事件處理機(jī)制

第五：完善的ajax

jquery將所有的ajax操作封裝到一個(gè)函數(shù)$.(ajax)里，使得開發(fā)者處理ajax的時(shí)候能夠?qū)Ｐ奶幚順I(yè)務(wù)邏輯而無需關(guān)心復(fù)雜的的瀏覽器兼容性和XMLHttpRequet對(duì)象的創(chuàng)建和使用的問題

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

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

在jquery庫中，$就是juqery的一個(gè)簡(jiǎn)寫形式

往下，我們?cè)诰W(wǎng)頁里面調(diào)用js的時(shí)候，都是在<script></script>之間的寫入jquery或者js的操作的，我們寫入jquery的操作的時(shí)候，第一句總是$(document).ready(function){},而我們?cè)?調(diào)用js操作的時(shí)候，第一句總是window.onload=function(){}，然而，他們之間有什么區(qū)別呢？

首先，討論執(zhí)行時(shí)機(jī)這個(gè)點(diǎn)上，windon.onload必須等待網(wǎng)頁中的內(nèi)容加載完畢后（包括圖片）才能執(zhí)行，而$(document).ready()，在網(wǎng)頁中所有的dom結(jié)構(gòu)繪制完畢后就執(zhí)行，可能dom元素關(guān)聯(lián)的東西并沒有加載完，也是可以執(zhí)行的

然后，在編寫一個(gè)數(shù)上，window.onload=function{}不能出現(xiàn)多個(gè)，只能出現(xiàn)一個(gè)，而$(document).ready()則可以出現(xiàn)多個(gè)。然后在這多個(gè)里面執(zhí)行他們要處理的動(dòng)作

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

好，繼續(xù)往下學(xué)習(xí)：

jquery強(qiáng)大的鏈?zhǔn)讲僮鳎?/p>

例子：

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

$(this).addClass("highlight")

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

.siblings().removeClass("highlight")

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

})

來學(xué)習(xí)一下js對(duì)象：

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

var ObjHtml = domObj.innerHTML;

學(xué)習(xí)jquery對(duì)象：

說白了，jquery對(duì)象就是通過jquery包裝DOM對(duì)象后產(chǎn)生的對(duì)象

jquery對(duì)象是獨(dú)有的，如果一個(gè)對(duì)象是jquery對(duì)象，那么就可以使用jquery里的方法

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

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

jquery對(duì)象轉(zhuǎn)換成DOM對(duì)象：

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

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

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

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

DOm對(duì)象轉(zhuǎn)換jquery對(duì)象：

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

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

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

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

平時(shí)用到的jquery對(duì)象都是通過$()函數(shù)制造出來的，$()函數(shù)就是一個(gè)jquery對(duì)象的制造工廠

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

1.jquery庫在其他庫之后導(dǎo)入：

可以在任何時(shí)候調(diào)用jQuery.noConflict()函數(shù)來講變量$的控制權(quán)交給其他的js庫

例子：<script>

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

JQuery(function(){ //使用jQuery

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

})

})

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

</script>

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

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

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

$j(function(){})

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

第一種：

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

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

$("p").click(function(){ //在函數(shù)內(nèi)部繼續(xù)使用$()方法

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

})

})

第二種方法：

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

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

$(function(){ //匿名函數(shù)內(nèi)部的$均為jQury

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

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

})

})

})

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

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

例子：

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

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

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

})

})

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

好了，到這里，jQuery深入學(xué)習(xí)的第一節(jié)完成了

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。