jq源碼講解

① 簡單易懂的jQuery導航(三級菜單)源碼

<!--三級操蛋導航-->
<divclass="nav_left">
	<divclass="nav_leftlist">
		<h2><b></b>用戶系統</h2>
		<dl>
			<dt><b></b>用戶管理</dt>
			<dd>
				<aclass="cur"href="">商戶信息<b></b></a>
				<ahref="">用戶信息<b></b></a>
			</dd>
		</dl>
	</div>
	<divclass="nav_leftlist">
		<h2><b></b>財務系統</h2>
		<dl>
			<dt><b></b>系統賬務</dt>
			<dd>
				<ahref="">平台賬單<b></b></a>
				<ahref="">賬單明細<b></b></a>
			</dd>
		</dl>
		<dl>
			<dt><b></b>商戶賬務</dt>
			<dd>
				<ahref="">商戶賬單<b></b></a>
				<ahref="">提現管理<b></b></a>
			</dd>
		</dl>
		<dl>
			<dt><b></b>用戶賬務</dt>
			<dd>
				<ahref="">用戶賬單<b></b></a>
				<ahref="">提現管理<b></b></a>
			</dd>
		</dl>
	</div>
</div>
<style>
.nav_left{background:#232b35;height:100%;width:220px;min-height:600px;position:fixed;top:100px;left:0;}
.nav_leftlist{}
.nav_leftlisth2{height:50px;line-height:50px;padding-left:40px;font-size:16px;background:#3b444f;color:#999999;position:relative;cursor:pointer;}
.nav_leftlisth2b{position:absolute;top:20px;left:13px;width:16px;height:9px;background:url(../images/icon04.png)no-repeat;background-position:00;cursor:pointer;}
.nav_leftlisth2b.cur{background-position:-16px0;}
.nav_leftlistdl{}
.nav_leftlistdldt{height:50px;line-height:50px;background:#2c3643;font-size:16px;color:#ffffff;padding-left:60px;position:relative;cursor:pointer;}
.nav_leftlistdldtb{position:absolute;top:20px;left:34px;width:16px;height:9px;background:url(../images/icon04.png)no-repeat;background-position:0-10px;}
.nav_leftlistdldtb.cur{background-position:-16px-10px;}
.nav_leftlistdldd{}
.nav_leftlistdldda{display:block;height:50px;line-height:50px;color:#fff;padding-left:80px;font-size:16px;position:relative;}
.nav_leftlistdldda.cur{color:#ee581c;}
.nav_leftlistdldda.curb{display:block;position:absolute;top:16px;right:-1px;width:11px;height:18px;background:url(../images/icon04.png)no-repeat;background-position:0-20px;}
</style>

</body>

<scripttype="text/javascript"src="../js/jquery.js"></script>
<scripttype="text/javascript">
	$(function(){
		$('.nav_leftlist').on('click','h2',function(event){
			$(this).siblings('dl').toggle();
			if($(this).siblings('dl').css('display')=='none'){
				$(this).find('b').addClass('cur');
			}else{
				$(this).find('b').removeClass('cur');
			}
		});
		$('.nav_leftlist').on('click','dldt',function(event){
			$(this).siblings('dd').toggle();
			if($(this).siblings('dd').css('display')=='none'){
				$(this).find('b').addClass('cur');
			}else{
				$(this).find('b').removeClass('cur');
			}
		});
	})
</script>

效果圖：

② jquery的開發版是什麼意思還有jquery.js,jquery-1.7.2.min.js,jquery-1.7.2.js什麼區別

jquery的開發版沒有進行壓縮，可讀性比較強；而min版是經過壓縮的，所以體積更少，但功能和開發版一樣。因此，一般做法是開發過程中使用開發版，正式發布時使用min版。

③ JQuery中的$.NextPic=function(){.......}是什麼意思

實際上，jquery只是js寫出來的對象，或者稱工廠（產生新的對象）

jquery源碼中的定義可以理解為 var jQuery = $ = function($){ } (jQuery)

即，function參數為形參，function後的括弧內的內容為實參，實參賦值給形參

在你給出的例子中，可以斷言肯定已經引入了jquery，故其實$已經被賦值為jQuery對象，因此這個函數是將jquery作為參數傳進函數內部，作為jquery的代名詞。

可能你要問為什麼要這么做，直接用$不是很好么？這有一種可能是不止引入了jquery，還引入了prototype(也是使用$作為工廠符號）之類的，為防混淆如此做。

這樣做其實是因為js編程中的封裝，防止變數污染其他作用域，使得$只作用於這個函數。

但我感覺這樣寫的不是很好，如果換成

jQuery(function(jQuery){
var$=jQuery;
//alert($);
varindex=0;
varmaximg=5;
……
}

這樣會更好點，也更好理解。

④ JQuery中$each 和$each的區別詳解

在jquery中，遍歷對象和數組，經常會用到$().each和$.each()，兩個方法。兩個方法是有區別的，從而這兩個方法在針對不同的操作上，顯示了各自的特點。
$().each,對於這個方法，在dom處理上面用的較多。如果頁面有多個input標簽類型為checkbox，對於這時用$().each來處理多個checkbook，例如：
$(「input[name=』ch』]」).each(function(i){
if($(this).attr(『checked』)==true)
{
//一些操作代碼
}
回調函數是可以傳遞參數，i就為遍歷的索引。
對於遍歷一個數組，用$.each()來處理，簡直爽到了極點。例如：
$.each([{「name」:」limeng」,」email」:」xfjylimeng」},{「name」:」hehe」,」email」:」xfjylimeng」},function(i,n)
{
alert(「索引:」+i,」對應值為：」+n.name);
});
參數i為遍歷索引值，n為當前的遍歷對象.

var arr1 = [ 「one」, 「two」, 「three」, 「four」, 「five」 ];
$.each(arr1, function(){
alert(this);
});
輸出：one two three four five
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
輸出：1 4 7
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});
輸出：1 2 3 4 5

在jQuery里有一個each方法，用起來非常的爽，不用再像原來那樣寫for循環，jQuery源碼里自己也有很多用到each方法。
其實jQuery里的each方法是通過js里的call方法來實現的。
下面簡單介紹一下call方法。
call這個方法很奇妙，其實官方的說明是：「調用一個對象的一個方法，以另一個對象替換當前對象。」網上更多的解釋是變換上下文環境，也有說是改變上下文this指針。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
參數
thisObj
可選項。將被用作當前對象的對象。
arg1, arg2, , argN
可選項。將被傳遞方法參數序列。
說明
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。
引用網上有一個很經典的例子
Js代碼
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以運行結果為：alert(4);
注意：js 中的函數其實是對象，函數名是對 Function 對象的引用。
具體call更深入的就不在這里提了。
下面提一下jQuery的each方法的幾種常用的用法
Js代碼
var arr = [ 「one」, 「two」, 「three」, 「four」];
$.each(arr, function(){
alert(this);
});
//上面這個each輸出的結果分別為：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其實arr1為一個二維數組，item相當於取每一個一維數組，
//item[0]相對於取每一個一維數組里的第一個值
//所以上面這個each輸出分別為：1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//這個each就有更厲害了，能循環每一個屬性
//輸出結果為：1 2 3 4

⑤ jquery中each 跳出為什麼用return false

由於jQuery的each是通過循環調用回調函數的方式實現的，所以在函數內寫的break只適用於函數內部的邏輯，並不能對函數外層的循環起到作用，所以break不管用。具體可以分析一下jQuery的源碼，下面以jQuery2.1.4中的each方法舉例：

each:function(obj,callback,args){
varvalue,
i=0,
length=obj.length,
isArray=isArraylike(obj);//如果obj是一個類似數組的結構（可用for遍歷的），則為true

if(args){
if(isArray){
for(;i<length;i++){
value=callback.apply(obj[i],args);//循環調用

if(value===false){//如果返回值全等於（包括類型和值）false，就退出循環
break;
}
}
}else{
for(iinobj){//這種是對象的，需要用forin遍歷
value=callback.apply(obj[i],args);

if(value===false){
break;
}
}
}
//Aspecial,fast,caseforthemostcommonuseofeach
}else{
if(isArray){
for(;i<length;i++){
value=callback.call(obj[i],i,obj[i]);

if(value===false){
break;
}
}
}else{
for(iinobj){
value=callback.call(obj[i],i,obj[i]);

if(value===false){
break;
}
}
}
}
returnobj;
}

由源碼可以看出，只有回調函數返回的值為false時，才會退出循環

⑥ jQuery 是如何判斷HTML頁面載入完畢的它的原理是什麼

jquery是一個輕量級的JS框架，這點相信大部分人都聽過，而jquery之所以有這樣一個稱呼，就是因為它悄悄披了一件外衣，將自己給隱藏了起來。

//以下截取自jquery源碼片段(function( window, undefined ) { /* 源碼內容 */})( window );

上面這一小段代碼來自於1.9.0當中jquery的源碼，它是一個無污染的JS插件的標准寫法，專業名詞叫閉包。可以把它簡單的看做是一個函數，與普通函數不同的是，這個函數沒有名字，而且會立即執行，就像下面這樣，會直接彈出字元串。

(function( window, undefined ) {
alert("Hello World!");
})( window );

可以看出來這樣寫的直接效果，就相當於我們直接彈出一個字元串。但是不同的是，我們將裡面的變數變成了局域變數，這不僅可以提高運行速度，更重要的是我們在引用jquery的JS文件時，不會因為jquery當中的變數太多，而與其它的JS框架的變數命名產生沖突。對於這一點，我們拿以下這一小段代碼來說明。

var temp = "Hello World!";
(function( window, undefined ) { var temp = "ByeBye World!";
})( window );
alert(temp);

這段代碼的運行結果是Hello而不是ByeBye，也就是說閉包中的變數聲明沒有污染到外面的全局變數，倘若我們去掉閉包，則最終的結果會是ByeBye，就像下面這樣。

var temp = "Hello World!";// (function( window, undefined ) {
var temp = "ByeBye World!";// })( window );
alert(temp);

由此就可以看出來，jquery的外衣就是這一層閉包，它是很重要的一個內容，是編寫JS框架必須知道的知識，它可以幫助我們隱藏我們的臨時變數，降低污染。

⑦ $到底是什麼-詳解jQuery的$符號和init函數

jQuery是現在最流行的Javascript框架， $是其中最常見的符號，已經在jQuery留下了深深的烙印。 接下來我會徹底分析這個符號背後隱藏的秘密。jQuery，高效，精煉，特別是對DOM元素對象操作的簡化，很大程度上將前端程序員從一大堆冗餘的代碼解放出來，大大提高了開發效率！對多瀏覽器的兼容性，也最大限度讓程序員擺脫各種bug的糾纏$符號作為元素選擇器的簡寫，最早是由Prototype庫使用，來簡寫getElementById，jQuery沿襲這一理念，並發揚光大，使$符號成為了jQuery最別具一格的特點。那麼在jQuery中，$符號到底是啥？熟悉jQuery的人應該知道，幾乎jQuery所有操作，都是從$符號開始，當作為元素選擇器的時候，操作結果返回的是一個jQuery對象。 那麼，現在就看jQuery類的構造函數的主要代碼jQuery對象的構造函數 var jQuery = (function() { //創建jQuery對象,給所有的jQuery方法提供統一的入口,避免繁瑣難記 var jQuery = function( selector, context ) { //jQuery的構造對象,調用了jQuery.fn.init方法 //最後返回jQuery.fn.init的對象 return new jQuery.fn.init( selector, context, rootjQuery ); }, ..... //定義jQuery的原型,jQuery.fn指向jQuery.prototype對象 jQuery.fn = jQuery.prototype = { //重新指定構造函數屬性,因為默認指向jQuery.fn.init constructor: jQuery, init: function( selector, context, rootjQuery ) {.....}, ...... } ...... //返回jQuery變數,同時定義將全局變數window.jQuery和window.$指向jQuery return (window.jQuery = window.$ = jQuery); })(); 從以上jQuery的主體結構，我們可以看出，當首次執行完畢後，全局變數$和jQuery，都是指向了var jQuery=function（selector，context）{}這個函數，這里，就可以下個結論，$就是jQuery的別名，實際調用jQuery.fn.init。再看看var jQuery=function（selector，context）{}這個構造函數，為什麼裡面不直接返回jQuery的對象？而是調用另外一個方法呢？假如直接返回對象的話，每次使用jQuery對象，都要new jQuery() 這樣的話，十分不方便，直接將new 這個操作封裝在jQuery構造函數裡面，簡化了實例化的操作，同時，jQuery通過了jQuery或者$符號，統一了介面，方便代碼的編寫，化繁為簡，提高效率。那麼jQuery類具體是如何構造的？居然能支持各種參數形式的調用 直接上jQuery.fn.init的「轅馬」，jQuery的真實構造器，我們就可以完全清楚了init源碼 /*所有查找或生成元素的結果，封裝為jQuery對象數組返回. */ init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // 1)處理 $(""), $(null), or $(undefined) //this指向jQuery對象 if ( !selector ) { return this; } // 2)處理 $(DOMElement) //selector.nodeType得知為DOM元素,如果是DOM元素直接放進jQuery對象數組中 if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; } //3)body元素只出現一次, 優化查找 if ( selector === "body" && !context && document.body ) { this.context = document; this[0] = document.body; this.selector = "body"; this.length = 1; return this; } //4)如果是字元串,有六種情況, /* *(1)單個html元素 不帶屬性對象字面量 ：createElement + merge *(2)單個html元素 帶屬性對象字面量 ：createElement + attr + merge *(3)多個html元素 ：buildFragment + merge *(4)#id 不帶context ：getElementById或者getElementById + Sizzle *(5)#id 帶context ：Sizzle *(6)experession string ：Sizzle *(7)標簽選擇器 ：Sizzle（內置getElementByTagName） */ if ( typeof selector === "string" ) { // 判斷是否為HTML string 還是 ID //如果是HTML strings match[1] 非空 //如果是ID strings match[1] 空 //quickExpr = /^(? jQuery.clone(ret.fragment) : ret.fragment).childNodes; } //將生成結果selector 合並到jQuery對象中 return jQuery.merge( this, selector ); // 處理$("#id"),例如$("#xxx"); } else { elem = document.getElementById( match[2] ); if ( elem && elem.parentNode ) { //處理IE和Opera ID 與 Name 混淆的bug,使用Sizzle查找 if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // 否則，簡單插入jQuery對象數組 this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // 處理 $(expr, $(...))，使用Sizzle查找，例如$("div"),$('div > a'),$('div,a'),$('div:first') } else if ( !context || context.jquery ) { return (context || rootjQuery).find( selector ); // 處理: $(expr, context),例如$('div a');或者$('a','div')或者$('div').find('a'); } else { return this.constructor( context ).find( selector ); } //5)處理: $(function),設置DOM載的時候綁定的函數,等同於$().ready(){foo} } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } //6)處理：$($(...))，完成克隆jQuery對象的簡單參數，具體由makeArray完成 if (selector.selector !== undefined) 完成加{ this.selector = selector.selector; this.context = selector.context; } //使用makeArray，為jQuery對象添加元素,例如$([1,2]); return jQuery.makeArray( selector, this ); }, 從源碼可以看出，jQuery 通過各種條件判斷和強大的正則表達式，實現了各種參數的調用。

⑧ 急 求jquery完整視頻教程

Jquery視頻教程.zip網路網盤資源免費下載

鏈接:https://pan..com/s/1nIebXgAcvf8wuTWwXXyhrw

⑨ jquery each()源代碼

復制代碼
代碼如下:
//
args
is
for
internal
usage
only
each:
function(
object,
callback,
args
)
{
var
name,
i
=
0,
length
=
object.length,
isObj
=
length
===
undefined
||
jQuery.isFunction(object);
if
(
args
)
{
if
(
isObj
)
{
for
(
name
in
object
)
{
if
(
callback.apply(
object[
name
],
args
)
===
false
)
{
break;
}
}
}
else
{
for
(
;
i
<
length;
)
{
if
(
callback.apply(
object[
i++
],
args
)
===
false
)
{
break;
}
}
}
//
A
special,
fast,
case
for
the
most
common
use
of
each
}
else
{
if
(
isObj
)
{
for
(
name
in
object
)
{
if
(
callback.call(
object[
name
],
name,
object[
name
]
)
===
false
)
{
break;
}
}
}
else
{
for
(
var
value
=
object[0];
i
<
length
&&
callback.call(
value,
i,
value
)
!==
false;
value
=
object[++i]
)
{}
}
}
return
object;
},
分析:jquery文檔說
each(callback)作用是以每一個匹配的元素作為上下文來執行一個函數。就是用each來遍歷數組，來執行同一個方法
這個方法的實現最關鍵的是：call與apply的用法:call(apply)就是將函數的對象的從初始的上下文改為thisObj指向的對象,
就是說用thisObj來代替原來的對象來執行方法:call與apply的第一個參數為this指向的對象,而後面的參數都下傳給函數的，
call傳給函數的參數用逗號分隔而apply則為一個數組。
//1.callback.apply(
object[
name
],
args
)
//2.callback.call(
object[
name
],
name,
object[
name
]
)

⑩ jQuery源碼中createOptions函數的問題

var object = optionsCache[ options ] = {};這里是一個指針引用，兩個對象指向同一個地方，所以給object賦值等同於給optionsCache賦值。

你在each外單獨給object賦值，是重新賦值一個對象給它，改變了引用，兩個指針指向已經不是同一個地方，故optionsCache不會改變。
如果想在each外通過改變object對象來修改optionsCache值，應該是通過改變屬性的方法如object["once"]=false;這樣optionsCache的值會同時改變。

舉個指針對象的例子如下：

var temp = { name: "temp" };
var temp2 = temp;
temp = { name: "not temp2" }; //修改了temp的引用
temp === temp2; //false

var temp = { name: "temp" };
var temp2 = temp;
temp.name = "also
temp2"; //修改的只是指針指向的實例本身
temp === temp2; //true