逐行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程序设计有所帮助。