jquery網頁開發實例精解源碼

㈠ 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導航(三級菜單)源碼

<!--三級操蛋導航-->
<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 源代碼的書籍

要不要閱讀別人代碼？
要。
閱讀別人代碼干什麼？
提高自己的代碼質量。
試圖通過閱讀別人代碼找出代碼的邏輯？
錯誤。
試圖通過閱讀別人代碼找出想要實現自己的邏輯的代碼？
正確，只有遵循了這個原則，才能實現物為我所用。
毫無目的去看別人代碼 不暈才怪呢。

㈣ JQuery實戰教程30講（視頻+源碼）

http://www.verycd.com/topics/2920302/

㈤ jquery方面的技術材料等。

當然是官方的文檔了，其實你把api.jquery.com的內容看一遍，看懂了，掌握jQuery沒啥問題。
中文的Sina愛問資料共享上有 [jQuery基礎教程].(JonathanChaffer&KarlSwedberg).掃描版.pdf，此處不方便貼鏈接，你直接去搜一下吧。

㈥ 求 《jQueryUI開發指南》的源代碼

ExtJS適合使用在內部網路，例如mes系統，內部辦公系統之類的
JQuery適合使用在對外的網路，例如企業的門戶網站，對外的報名系統之類的

說白了 extjs較大，jquery較小，一個適合大帶寬，一個適合小帶寬

至於easy UI 舍棄 不考慮

㈦ 如何查看網頁jquery源代碼

右擊頁面，點擊「查看元素」或「查看源碼」就可以查案網頁的html
一般<script>juqery代碼</script>標簽包裹的就是寫在頁面上的jQuery代碼
另外還有寫在jQuery文件在頁面通過<script src="jquery文件地址"></script>這里的地址一般是相對地址，找到相應的地址打開文件就可以了

㈧ jQuery實例教程:jQuery網頁圖片切換效果

假設你有一組作品，你想不用轉跳到另外一個頁面就可以顯示多個圖片，你可以將JPG圖片載入到目標元素中去。下面是jQuery圖片切換效果示例：
該示例的核心jQuery代碼：
$(document).ready(function()
{
$("h2").append('<em></em>')
$(".thumbs
a").click(function()
{
var
largePath
=
$(this).attr("href");
var
largeAlt
=
$(this).attr("title");
$("#largeImg").attr({
src:
largePath,
alt:
largeAlt
});
$("h2
em").html("
("
+
largeAlt
+
")");
return
false;
});
});
首先給H2添加一個空的<em>元素。
當點擊<p>中的鏈接
將鏈接的href屬性保存到
“largePath”變數中。
然後將標題屬性保存到”largeAlt”變數中
將<img
id=”largeImg”>的scr屬性用變數
“largePath”替代，而alt屬性用變數”largeAlt”替代
將em(在h2中)的內容設置成變數largeAlt的值。