jq源码讲解

① 简单易懂的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.js,jquery-1.7.2.min.js,jquery-1.7.2.js什么区别

jquery的开发版没有进行压缩，可读性比较强；而min版是经过压缩的，所以体积更少，但功能和开发版一样。因此，一般做法是开发过程中使用开发版，正式发布时使用min版。

③ JQuery中的$.NextPic=function(){.......}是什么意思

实际上，jquery只是js写出来的对象，或者称工厂（产生新的对象）

jquery源码中的定义可以理解为 var jQuery = $ = function($){ } (jQuery)

即，function参数为形参，function后的括号内的内容为实参，实参赋值给形参

在你给出的例子中，可以断言肯定已经引入了jquery，故其实$已经被赋值为jQuery对象，因此这个函数是将jquery作为参数传进函数内部，作为jquery的代名词。

可能你要问为什么要这么做，直接用$不是很好么？这有一种可能是不止引入了jquery，还引入了prototype(也是使用$作为工厂符号）之类的，为防混淆如此做。

这样做其实是因为js编程中的封装，防止变量污染其他作用域，使得$只作用于这个函数。

但我感觉这样写的不是很好，如果换成

jQuery(function(jQuery){
var$=jQuery;
//alert($);
varindex=0;
varmaximg=5;
……
}

这样会更好点，也更好理解。

④ JQuery中$each 和$each的区别详解

在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。
$().each,对于这个方法，在dom处理上面用的较多。如果页面有多个input标签类型为checkbox，对于这时用$().each来处理多个checkbook，例如：
$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代码
}
回调函数是可以传递参数，i就为遍历的索引。
对于遍历一个数组，用$.each()来处理，简直爽到了极点。例如：
$.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n)
{
alert(“索引:”+i,”对应值为：”+n.name);
});
参数i为遍历索引值，n为当前的遍历对象.

var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
});
输出：one two three four five
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
输出：1 4 7
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});
输出：1 2 3 4 5

在jQuery里有一个each方法，用起来非常的爽，不用再像原来那样写for循环，jQuery源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。
下面简单介绍一下call方法。
call这个方法很奇妙，其实官方的说明是：“调用一个对象的一个方法，以另一个对象替换当前对象。”网上更多的解释是变换上下文环境，也有说是改变上下文this指针。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
引用网上有一个很经典的例子
Js代码
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);
注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
具体call更深入的就不在这里提了。
下面提一下jQuery的each方法的几种常用的用法
Js代码
var arr = [ “one”, “two”, “three”, “four”];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1 2 3 4

⑤ jquery中each 跳出为什么用return false

由于jQuery的each是通过循环调用回调函数的方式实现的，所以在函数内写的break只适用于函数内部的逻辑，并不能对函数外层的循环起到作用，所以break不管用。具体可以分析一下jQuery的源码，下面以jQuery2.1.4中的each方法举例：

each:function(obj,callback,args){
varvalue,
i=0,
length=obj.length,
isArray=isArraylike(obj);//如果obj是一个类似数组的结构（可用for遍历的），则为true

if(args){
if(isArray){
for(;i<length;i++){
value=callback.apply(obj[i],args);//循环调用

if(value===false){//如果返回值全等于（包括类型和值）false，就退出循环
break;
}
}
}else{
for(iinobj){//这种是对象的，需要用forin遍历
value=callback.apply(obj[i],args);

if(value===false){
break;
}
}
}
//Aspecial,fast,caseforthemostcommonuseofeach
}else{
if(isArray){
for(;i<length;i++){
value=callback.call(obj[i],i,obj[i]);

if(value===false){
break;
}
}
}else{
for(iinobj){
value=callback.call(obj[i],i,obj[i]);

if(value===false){
break;
}
}
}
}
returnobj;
}

由源码可以看出，只有回调函数返回的值为false时，才会退出循环

⑥ 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框架必须知道的知识，它可以帮助我们隐藏我们的临时变量，降低污染。

⑦ $到底是什么-详解jQuery的$符号和init函数

jQuery是现在最流行的Javascript框架， $是其中最常见的符号，已经在jQuery留下了深深的烙印。 接下来我会彻底分析这个符号背后隐藏的秘密。jQuery，高效，精炼，特别是对DOM元素对象操作的简化，很大程度上将前端程序员从一大堆冗余的代码解放出来，大大提高了开发效率！对多浏览器的兼容性，也最大限度让程序员摆脱各种bug的纠缠$符号作为元素选择器的简写，最早是由Prototype库使用，来简写getElementById，jQuery沿袭这一理念，并发扬光大，使$符号成为了jQuery最别具一格的特点。那么在jQuery中，$符号到底是啥？熟悉jQuery的人应该知道，几乎jQuery所有操作，都是从$符号开始，当作为元素选择器的时候，操作结果返回的是一个jQuery对象。 那么，现在就看jQuery类的构造函数的主要代码jQuery对象的构造函数 var jQuery = (function() { //创建jQuery对象,给所有的jQuery方法提供统一的入口,避免繁琐难记 var jQuery = function( selector, context ) { //jQuery的构造对象,调用了jQuery.fn.init方法 //最后返回jQuery.fn.init的对象 return new jQuery.fn.init( selector, context, rootjQuery ); }, ..... //定义jQuery的原型,jQuery.fn指向jQuery.prototype对象 jQuery.fn = jQuery.prototype = { //重新指定构造函数属性,因为默认指向jQuery.fn.init constructor: jQuery, init: function( selector, context, rootjQuery ) {.....}, ...... } ...... //返回jQuery变量,同时定义将全局变量window.jQuery和window.$指向jQuery return (window.jQuery = window.$ = jQuery); })(); 从以上jQuery的主体结构，我们可以看出，当首次执行完毕后，全局变量$和jQuery，都是指向了var jQuery=function（selector，context）{}这个函数，这里，就可以下个结论，$就是jQuery的别名，实际调用jQuery.fn.init。再看看var jQuery=function（selector，context）{}这个构造函数，为什么里面不直接返回jQuery的对象？而是调用另外一个方法呢？假如直接返回对象的话，每次使用jQuery对象，都要new jQuery() 这样的话，十分不方便，直接将new 这个操作封装在jQuery构造函数里面，简化了实例化的操作，同时，jQuery通过了jQuery或者$符号，统一了接口，方便代码的编写，化繁为简，提高效率。那么jQuery类具体是如何构造的？居然能支持各种参数形式的调用 直接上jQuery.fn.init的“辕马”，jQuery的真实构造器，我们就可以完全清楚了init源码 /*所有查找或生成元素的结果，封装为jQuery对象数组返回. */ init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // 1)处理 $(""), $(null), or $(undefined) //this指向jQuery对象 if ( !selector ) { return this; } // 2)处理 $(DOMElement) //selector.nodeType得知为DOM元素,如果是DOM元素直接放进jQuery对象数组中 if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; } //3)body元素只出现一次, 优化查找 if ( selector === "body" && !context && document.body ) { this.context = document; this[0] = document.body; this.selector = "body"; this.length = 1; return this; } //4)如果是字符串,有六种情况, /* *(1)单个html元素 不带属性对象字面量 ：createElement + merge *(2)单个html元素 带属性对象字面量 ：createElement + attr + merge *(3)多个html元素 ：buildFragment + merge *(4)#id 不带context ：getElementById或者getElementById + Sizzle *(5)#id 带context ：Sizzle *(6)experession string ：Sizzle *(7)标签选择器 ：Sizzle（内置getElementByTagName） */ if ( typeof selector === "string" ) { // 判断是否为HTML string 还是 ID //如果是HTML strings match[1] 非空 //如果是ID strings match[1] 空 //quickExpr = /^(? jQuery.clone(ret.fragment) : ret.fragment).childNodes; } //将生成结果selector 合并到jQuery对象中 return jQuery.merge( this, selector ); // 处理$("#id"),例如$("#xxx"); } else { elem = document.getElementById( match[2] ); if ( elem && elem.parentNode ) { //处理IE和Opera ID 与 Name 混淆的bug,使用Sizzle查找 if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // 否则，简单插入jQuery对象数组 this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // 处理 $(expr, $(...))，使用Sizzle查找，例如$("div"),$('div > a'),$('div,a'),$('div:first') } else if ( !context || context.jquery ) { return (context || rootjQuery).find( selector ); // 处理: $(expr, context),例如$('div a');或者$('a','div')或者$('div').find('a'); } else { return this.constructor( context ).find( selector ); } //5)处理: $(function),设置DOM载的时候绑定的函数,等同于$().ready(){foo} } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } //6)处理：$($(...))，完成克隆jQuery对象的简单参数，具体由makeArray完成 if (selector.selector !== undefined) 完成加{ this.selector = selector.selector; this.context = selector.context; } //使用makeArray，为jQuery对象添加元素,例如$([1,2]); return jQuery.makeArray( selector, this ); }, 从源码可以看出，jQuery 通过各种条件判断和强大的正则表达式，实现了各种参数的调用。

⑧ 急 求jquery完整视频教程

Jquery视频教程.zip网络网盘资源免费下载

链接:https://pan..com/s/1nIebXgAcvf8wuTWwXXyhrw

⑨ 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源码中createOptions函数的问题

var object = optionsCache[ options ] = {};这里是一个指针引用，两个对象指向同一个地方，所以给object赋值等同于给optionsCache赋值。

你在each外单独给object赋值，是重新赋值一个对象给它，改变了引用，两个指针指向已经不是同一个地方，故optionsCache不会改变。
如果想在each外通过改变object对象来修改optionsCache值，应该是通过改变属性的方法如object["once"]=false;这样optionsCache的值会同时改变。

举个指针对象的例子如下：

var temp = { name: "temp" };
var temp2 = temp;
temp = { name: "not temp2" }; //修改了temp的引用
temp === temp2; //false

var temp = { name: "temp" };
var temp2 = temp;
temp.name = "also
temp2"; //修改的只是指针指向的实例本身
temp === temp2; //true