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的值。