jquery源碼分析
A. 完全理解jQuery源代碼，在前端行業算什麼水平
依讀了2周jQuery源碼的人感覺來說，完全理解jQuery，就拿jQuery 1.11這個版本10337行代碼來說，水平已經很不錯了。謙虛點說，已經入門。驕傲點，國內領先水平。但其碼我感覺是js架構之路起行的第一步，完全理解源碼，說明有獨立構建或組織大型web前端框架的能力和基礎。然後看看完全理解jQuery是一個怎麼樣的狀態。
看下面幾個鏈接就明白了：
RubyLouvre/avalon · GitHub
artDialog
aui/artDialog · GitHub(後來的新版代碼有所改變)
沒錯，這兩個里邊，就是在繼承jquery的基礎上做了自己的創新嘗試。
然後在看下面這位：
[原創] jQuery1.6.1源碼分析系列（停止更新）
是唯一出過jquery源碼分析書的一位：
《jQuery技術內幕：深入解析jQuery架構設計與實現原理》(高雲)【摘要 書評 試讀】
然後在看這位：
jQuery 2.0.3 源碼分析系列
是目前一直在更新的一位，通俗有深度且版本比較新。
在說一下我2周閱讀jquery源碼的心得，初看源碼寫的惡心，再看寫的不錯，細看寫的真是精妙。然後今天在看ext 4.2的源碼，真是流暢易讀。基本來說，看懂jQuery源碼，以後的源碼學習之路可以說，平坦。
然後說是不是高手，高手只是一個自我定位的心理暗示，是一種人格魅力的體現，是業務與技術的完美結合。個人感覺只能無限的接近，不能在有限的生命里邊到達。我們在通往目的地過程中享受一路的風景，這才是生命的意義。
然後在說前端，前端的核心是js，外圍打醬油的技術太多，不一一列舉。
css就像一瓶酒，得品。
html,css總共就那些標簽跟選擇器屬性什麼的，但是要寫一個有擴展性，健壯性或維護性的頁面不容易。現在寫頁面基本條件反射，不是如何快速的完成，而是思考如果有前端界面需求修改，怎麼在修改代碼最少的情況下完成整體需求任務。
js就像一把劍，得磨。
js剛開始只是為了較驗，隨便技術社會的發展，承擔的角色越來越重，剛開始玩玩jQuery感覺已經會js了，其實只是冰山一角。隨著對js的了解越來越多，他即變態又可愛，即好玩又難控，即有很多兼容問題，但解決兼容是我們基本生存之道。
人生就是一場夢，得作。
技術只是生活的一部分，曾經雄心鬥志，如今低頭寫碼。改變能改變的，接受不能改變的。人生有限，兄爭朝夕啊。
最後說，什麼時候能閱讀jQuery源碼，我感覺其碼是純js編碼一年以上，js基礎知識沒有盲點。閱讀源碼，確實能學到很多東西。不只是技術，而是一種生活的態度。一種把一件事情做到極致的態度
B. 如何查看網頁jquery源代碼
右擊頁面，點擊「查看元素」或「查看源碼」就可以查案網頁的html
一般<script>juqery代碼</script>標簽包裹的就是寫在頁面上的jQuery代碼
另外還有寫在jQuery文件在頁面通過<script src="jquery文件地址"></script>這里的地址一般是相對地址，找到相應的地址打開文件就可以了
C. jQuery實現的導航動畫效果(附demo源碼)
本文實例講述了jQuery實現的導航動畫效果。分享給大家供大家參考，具體如下：
經常在網上看到的，滑鼠在導航上移動時，導航底部的橫條會自動移動到滑鼠懸浮的導航項上。
效果如下圖：
利用jquery的
animate
函數，很好實現。代碼很簡單！
代碼如下：
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<title>測試</title>
<script
src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div
class="nav"
style="margin:
100px
auto;
width:960px;">
<a
class="active"
href="#">首頁</a>
<a
href="#">產品</a>
<a
href="#">新聞中心</a>
<a
href="#">關於我們</a>
<a
href="#">聯系我們</a>
<a
href="#">首頁</a>
<a
href="#">首頁</a>
<div
class="line"></div>
</div>
<style>
.nav{
position:relative;
}
.nav
a{
padding:10px
20px;
border-bottom:solid
3px
#fff;
text-decoration:
none;
color:#666;
}
.nav
a:hover{
color:#66f;
}
.nav
.active,
.nav
.active:hover{
color:#f33;
}
.nav
.line{
position:absolute;
border-top:solid
2px
red;
width:0;
left:0;
top:0;
}
</style>
<script>
function
navLine(o,
bo)
{
var
x
=
''
+
(o.position().top
+
o.outerHeight()
-
2)
+
'px';
var
y
=
''
+
o.position().left
+
'px';
var
w
=
''
+
o.outerWidth()
+
'px';
var
h
=
'2px';
$('.nav
.line').stop();
if
(bo)
{
$('.nav
.line').css({width:w,
height:h,
top:x,
left:y});
}
else
{
$('.nav
.line').animate({width:w,
height:h,
top:x,
left:y});
}
}
$(function(){
navLine($('.nav
.active'),
true);
$('.nav
a').hover(function(){
navLine($(this));
},
function(){
navLine($('.nav
.active'));
});
});
</script>
</body>
</html>
完整實例代碼點擊此處本站下載。
更多關於jQuery相關內容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
D. 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
]
)
E. jquery的源碼看過嗎能不能簡單概況一下它的實現原理
原理就是對常用操作的封裝，順便解決了兼容性問題
F. 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框架必須知道的知識，它可以幫助我們隱藏我們的臨時變數，降低污染。
G. jQuery 源代碼看不懂，怎麼辦。。有沒有解釋jQuery 源代碼的書籍
建議去找原碼看，一般網上下載下來都是經過壓縮的。
H. 簡述一下jQuery的運用了什麼設計思想
設計思想,你指的是設計模式吧
一般的JS框架,都應該具備DOM,AJAX,Event,Plugin這幾種機制,
Dom的增刪改,CSS的控制,animate.
AJAX的post,get,都應具備
Event事件的處理,包括load,click等
Plugin插件機制,這在一些框架裡面必須要有的.
至於設計模式,就不jquery而言,其他框架比如extjs,mootools,prototype等,都應該具備,繼承,多態,介面,工廠,觀察者,調用鏈等.
另外多瀏覽器支持,
話說,一種框架有一種框架的特色,你如果想探究的話,還是閱讀源碼分析比較好.
I. 簡單易懂的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>
效果圖：
J. 急 求jquery完整視頻教程
Jquery視頻教程.zip網路網盤資源免費下載
鏈接:https://pan..com/s/1nIebXgAcvf8wuTWwXXyhrw