逐行jquery源碼
『壹』 jQuery 源代碼看不懂,怎麼辦。。有沒有解釋jQuery 源代碼的書籍
建議去找原碼看,一般網上下載下來都是經過壓縮的。
『貳』 jquery源碼報錯 TypeError: a is undefined。求大神解答
因為jquery為了節省代碼,很多函數的參數都是用單字母表示的,有可能是你寫的函數參數出現錯誤。
『叄』 jquery 逐行遍歷table
varobj={};
Array.prototype.forEach.call($('table兆山舉tr'),function(tr,族碧唯戚index){
obj['tr'+index]=tr;
});
console.dir(obj);
『肆』 Jquery 代碼解釋
這些都是javaSCRIPT函數定義的方法敏舉,空函數,匿名函數等等
推薦你一本書《征服Ajax+-+Web20開發技術詳解試讀版.pdf》
裡面有你想知道的所有不明白的JS問題
這段代碼還不是最巧仔難懂的
1,把一個對象定義成一個過程,這個是被允許的
2,JS語法與C語法類似,變數名可以用非數字開始
3,siSimple是function()一個橋寬碧參數,而非單獨一行JS代碼
4,把init這個參數定義為一個過程,其中帶2個參數
『伍』 簡單易懂的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源代碼
右擊頁面,點擊「查看元素」或「查看源碼」就可以查案網頁的html
一般<script>juqery代碼</script>標簽包裹的就是寫在頁面上的jQuery代碼
另外還有寫在jQuery文件在頁面通過<script src="jquery文件地址"></script>這里的地址一般是相對地址,找到相應的地址打開文件就可以了
『柒』 完全理解jQuery源代碼,在前端方面算什麼水平
依讀了2周jQuery源碼的人感覺來說,完全理解jQuery,就拿jQuery 1.11這個團答缺版本10337行代碼來說,水平已經很塌辯不錯了。謙虛點說,已經入門。驕傲點,國內領先水平。但其碼我感覺是js架構之路起行的第一步,完全理解源碼,說明有獨立構建或組織大型web前端框架的能舉粗力和基礎。然後看看完全理解jQuery是一個怎麼樣的狀態。
『捌』 jquery 逐行替換table
$("#table td:last").append("要在頁面填充的數據");
每次笑謹祥填充之前用.empty()清空一晌巧下 就不會重復碰搏了
『玖』 如何正確閱讀jquery源碼和jquery插件源碼
1. jQuery 裡面有很多東西是出於兼容性,歷史遺留。
比如 .ready() 之類的函數,為什麼會很scroll 有關,那是為了兼容某些ie。這種代碼對於編程思想來說不僅沒用,而且是雜音,你要篩選出來就得了解這段代碼的變動,費心費力得不償失。
2. jQuery 裡面的代碼不一定是最優的,例如事件委託,每一次事件觸發都要調用選擇器,實際上是效率很低的。但是我又比較懶,沒有提交patch。
3. jQuery 實際上很容易寫出來一個 barebone alternative,在使用的過程中多想,多思考多總結就可以了。
4. jQuery 這類框架里真正有思維挑戰性的東西不多,一半以上是堆代碼而已,剩下的一點價值在於架構、抽象、擴展能力。
5. 我有一句話與所有的同行分享:工程師讓需求成為現實,優秀工程師化復雜為簡單,頂尖工程師變不可能為可能;架構師掌握現在,優秀架構師展望未來,頂尖架構師創造時代。
jQuery 的設計目的是,讓前端工程師的工作更簡單更輕松,但它並不適合所有的前端工程師,假如你的目標是成為優秀架構師、頂尖架構師的話,你在jQuery里也看不清未來。
『拾』 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程序設計有所幫助。