jquery源碼推薦

Ⅰ jquery源碼 ，jquery選擇器，javascript，正則表達式

quickExpr應該是個二義正則。前半段是:
^[^<]*(<[\w\W]+>)[^>]*$:我猜測意思是一個簡單的標簽。如$('<div>new Div</div>')匹配的用法。
後半段是:
^#([\w-]+)$:這個顯然就是id選擇器。->getElementById
注意兩個正則用了|來分隔二義,所以你這里的匹配不成功是正常的。
jquery應該是根據這個quickExpr來判斷
if(match[1]) createNewfragment();....
else if(match[2]) getElementById();
當然這只是個人猜測,沒有細讀jquery源碼。僅做參考

Ⅱ 如何正確閱讀jquery源碼和jquery插件源碼

1. jQuery 裡面有很多東西是出於兼容性，歷史遺留。

比如 .ready() 之類的函數，為什麼會很scroll 有關，那是為了兼容某些ie。這種代碼對於編程思想來說不僅沒用，而且是雜音，你要篩選出來就得了解這段代碼的變動，費心費力得不償失。

2. jQuery 裡面的代碼不一定是最優的，例如事件委託，每一次事件觸發都要調用選擇器，實際上是效率很低的。但是我又比較懶，沒有提交patch。

3. jQuery 實際上很容易寫出來一個 barebone alternative，在使用的過程中多想，多思考多總結就可以了。

4. jQuery 這類框架里真正有思維挑戰性的東西不多，一半以上是堆代碼而已，剩下的一點價值在於架構、抽象、擴展能力。

5. 我有一句話與所有的同行分享：工程師讓需求成為現實，優秀工程師化復雜為簡單，頂尖工程師變不可能為可能；架構師掌握現在，優秀架構師展望未來，頂尖架構師創造時代。

jQuery 的設計目的是，讓前端工程師的工作更簡單更輕松，但它並不適合所有的前端工程師，假如你的目標是成為優秀架構師、頂尖架構師的話，你在jQuery里也看不清未來。

Ⅲ 簡單易懂的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>

效果圖：

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

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

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

至於easy UI 舍棄 不考慮

Ⅳ 求一個源碼jquery json 例子

1.獲取DataSet
2.轉成DataTable
3.
public static string DataTableToJson(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
//jsonBuilder.Append("{"); //輸出的要求不要'}'
//jsonBuilder.Append(dt.TableName);
jsonBuilder.Append("[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
//jsonBuilder.Append("}"); //輸出的要求不要'}'
return jsonBuilder.ToString();
}
4.把Json字串Response出來
5.獲取Json字串

function load() //頁面載入
{
$.ajax({
type:"post",
url:"../Handler/LinkManHandler.ashx",//從哪獲取Json
data:"action=getLinkMan&id="+comId,//Ajax傳遞的參數

beforeSend:function(){
//獲取之前顯示 loading 或 正在載入
},

success:function(mess)
{
$("#divImage").hide();
if(mess!="]")// 如果獲取的數據不為空
{
var type=eval(mess);
var str="<a>首頁</a>"
for(var i=0;i<type.length;i++)
{
//操作type 獲取東西
str+="<a>"+type[i].資料庫欄位名+"</a>
}
$("#divLinkMan").html(str);//把str嵌入div divLinkMan 中
}
else
{
var notfind="<h2>未找到數據<a href='../Main.htm' target='_parent'>返回</a></h2>"
$("#divLinkMan").html(notfind);
}

},

complete:function()
{
//所有的都執行完後的方法
}
});
}

Ⅵ 基於jquery實現的tab選項卡功能示例【附源碼下載】

本文實例講述了基於jquery實現的tab選項卡功能。分享給大家供大家參考，具體如下：
jquery這款殺手級別的js框架，顯然已成了開發界的標准js庫，在開發一般web應用的時候，常常用到。今天找到一個實現jquery
tab頁的插件，效果還不錯，比自己用javascript和css去實現一個tab頁好多了。用
tab
頁美化界面，對於用戶體驗來說是顯而易見，讓各種不同類型的數據分布在不同的tab頁中。很直觀，也避免了很多數據現在在一個界面中，顯得很臃腫，看上去就怕。這一款基於jquery
的tab
頁插件名字叫:billy.carousel.
先看看效果圖
看上去效果還不錯吧。
下面看jquery
tab
的html頁面代碼吧
<!DOCTYPE
html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<meta
name="description"
content="jQuery實現的tab選項卡式圖片切換效果"
/>
<title>jQuery實現的tab選項卡式圖片切換效果</title>
<!--
JS
Includes
-->
<script
src="images/jquery.js"
type="text/javascript"></script>
<script
src="images/billy.carousel.jquery.min.js"
type="text/javascript"></script>
<!--
CSS
Includes
-->
<link
rel="stylesheet"
href="images/demonstration.css"
rel="external
nofollow"
type="text/css"
media="screen"
/>
<title>tab選項測試</title>
</head>
<body>
<script
type="text/javascript">
$(document).ready(
function()
{
$('#tabber').billy({
slidePause:
5000,
indicators:
$('ul#tabber_tabs'),
customIndicators:
true,
autoAnimate:
false,
noAnimation:
true
});
});
</script>
<div
id="container"
>
<h3>Jquery
Tab
選項卡測試</h3>
<p>點擊tab頁切換</p>
<!--
The
Tabs
標題
-->
<ul
id="tabber_tabs">
<li><a
href="#0"
rel="external
nofollow"
>Tab
One</a></li>
<li><a
href="#1"
rel="external
nofollow"
>Tab
Two</a></li>
<li><a
href="#2"
rel="external
nofollow"
>Tab
Three</a></li>
<li><a
href="#3"
rel="external
nofollow"
>Tab
Four</a></li>
</ul>
<!--
Tabbed
內容區
-->
<div
id="tabber_clip">
<ul
id="tabber">
<li><img
src="images/desert.jpg"
width="900"
height="400"
alt="Desert"></li>
<li>
<br
/>
我想有一座房子，面朝大海，春暖花開....
</li>
<li><img
src="images/wood.jpg"
width="900"
height="400"
alt="Wood"></li>
<li><img
src="images/pond.jpg"
width="900"
height="400"
alt="Pond"></li>
</ul>
</div>
</div>
</body>
</html>
在<head>中引入相關的jquery文件之後，按照上面的例子，就可以做出tab頁面的樣式了，非常簡單了。如果需要調整樣式，可以修改css.
代碼點擊此處本站下載。
更多關於jQuery相關內容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
您可能感興趣的文章:基於JQuery的6個Tab選項卡插件JQuery
Tab選項卡效果代碼改進版jQuery實現TAB選項卡切換特效簡單演示jQuery實現Tab選項卡切換效果簡單演示jquery實現超簡潔的TAB選項卡效果代碼jQuery實現滾動切換的tab選項卡效果代碼jQuery實現移動端Tab選項卡效果jQuery封裝的tab選項卡插件分享jquery實現tab選項卡切換效果（懸停、下方橫線動畫位移）動感效果的TAB選項卡jquery
插件

Ⅶ 給我一個jquery源代碼，不要文件，就是源代碼

你要什麼效果的源代碼啊。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.nyroModal').css("background-color","red");
});
</script>
</head>

<body>
<a href="demoSent.php" class="nyroModal" rev="modal">Ajax without closing</a>
</body>
</html>

Ⅷ 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程序設計有所幫助。

Ⅸ 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 源代碼看不懂，怎麼辦。。有沒有解釋jQuery 源代碼的書籍

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