1.jqueryԴ?源码?context
2.统计当前网页被访问次数的Jquery代码是什么?
3.å
³äºjQuery 代ç ç书åå½¢å¼
4.jQuery内部原理和实现方式浅析
jqueryԴ??context
$(selector)æ¯jqueryçéæ©å¨,ç¨äºéä¸ä¸ä¸ªæä¸ç»é¡µé¢å ç´ (HTML DOM),并è¿åjquery对象documentå°±æ¯HTML DOM Document 对象,对åºæ´ä¸ªhtmlææ¡£,
$(document)å°±æ¯å¯¹documentçjqueryæä½
æ常ç¨çæ¯$(document).ready(function(){ }),å³ç»å®ææ¡£å è½½å®æ¯åäºä»¶
è$(document).bind('contextmenu',function(){ })æ¯ç»å®å³é®èåäºä»¶
æµè¯ä»£ç å¦ä¸:
<!DOCTYPE html><html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="/ajax/jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(document).bind('contextmenu', function () {
alert("ä½ è§¦åäºå³é®èå"); //å æ¬é¼ æ å³å»ä¸é®ççèå触åé®
})
</script>
</body>
</html>
统计当前网页被访问次数的Jquery代码是什么?
最简单的办法:<script type="text/javascript">
if (localStorage.pagecount){ localStorage.pagecount=Number(localStorage.pagecount) +1;}else{ localStorage.pagecount=1;}document.write("访问数: " + localStorage.pagecount + " time(s).");</script>JqueryjQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的源码操作。由John Resig在年1月的源码BarCamp NYC上发布第一个版本。目前是源码由 Dave Methvin 领导的开发团队进行开发。全球前个访问最高的源码网站中,有%使用了jQuery,源码visiostudio管理系统源码是源码目前最受欢迎的JavaScript库。
简要介绍
jQuery由美国人John Resig创建,源码至今已吸引了来自世界各地的源码众多javascript高手加入其team,包括来自德国的源码Jörn Zaefferer,罗马尼亚的源码Stefan Petre等等。jQuery是源码继prototype之后又一个优秀的Javascrīpt框架。其宗旨是源码——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
由于目前高校基本尚未开JavaScript的源码相关课程,目前jQuery的源码php自定义导航网源码学习,使用,研究都仅限于在职Web程序员之间。
用jq的前提,首先要引用一个有jq的文件
lt;script type="text/javascript" src="/jquery-latest.min.js"></script>
这个是jquery官方最新的地址。可用在自己网站里加个这个,就能使用jquery了。 但仍然建议下载到本地服务器上。
特点
动态特效
AJAX
通过插件来扩展
方便的工具 - 例如浏览器版本判断
渐进增强
链式调用
多浏览器支持,支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+(在2.0.0中取消了对Internet Explorer6,7,8的支持)
工厂函数
在编写js库代码时候,你一定经常和“$”美元符号打交道吧?无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了,筑底散兵坑指标公式源码但是,它的功能远非如此,瞧瞧以下的jQuery代码,你就会发现它的美丽:
代码
var someElement = $("#myId");
看起来比其他两个框架的要多了一个#,好,看看下面的用法:
代码
$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); // (3)
$("table a",context); // (4)
在prototype里看过这样的写法吗?第一行代码得到所有div标签下的p元素。第二行代码得到class 为container的div元素,第三行代码得到标签下面id为msg的div元素(不过最好别这样写,因为jQuery需要遍历所有的div元素,对于带id的元素,直接用$("#id"))。第四行代码得到context为上下文的table里面所有的链接元素。
如果你熟悉CSS,你会觉得这些写法很眼熟!对了。激进派打板必备指标源码正是。看出奥妙了吧。jQuery就是如此强大,你可以轻易地找到DOM中的任何元素,而这也是jQuery设计之初query的真实含义(查询)。
遍历函数
jquery提供了很多遍历的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是jquery对象。使一个Dom对象成为一个jquery对象很简单,通过下面一些方式(只是一部分):
代码
var a = $("#cid");
var b = $("<p>hello</p>");
var c = document.createElement("table");
var tb = $(c);
代替标签
这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:
$(document).ready(function(){
alert"hello");
});(1)
lt;body "alert'hello');">(2)
lt;body "alert'hello');">这里的alert'hello');要等到页面全部加载完毕才执行,注意是酷狗直播场控助手源码出售全部加载,包括dom,等其它资源。
而$(document).ready(function(){
alert"hello");
});(1)
当dom加载完就可以执行了。
代码1同时做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。
当使用jquery时,推荐使用代码1。
$(document).ready(function(){ fn}); 可以用 $(function(){ fn});代替
如:
$(function(){
alert"hello");
});
事件机制
我们大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写 "fn()",使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。
代码
$(document).ready(function()
{
$("#clear").click(function(){
alert"i am about to clear the table");
});
$("form[]").submit(validate);
});
function validate(){
//do some form validation
}
实现
代码
$("selector").load(url,data,function(response,status,xhr))
该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单。
渐入淡出
代码
$("#msg").show("fast");
$("#msg").hide("slow");
$("#msg").fadeIn();
$("#msg").fadeOut();
没错,上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条,用jquery就那么简单。两个函数接受的参数除了快慢等,还可以接收整型,作为渐入或淡出的完成时间,单位为MS。
å ³äºjQuery 代ç ç书åå½¢å¼
1ãå®ä¹jQueryåéçæ¶åæ·»å varå ³é®åããè¿ä¸ªä¸ä» ä» æ¯jQueryï¼ææjavascriptå¼åè¿ç¨ä¸ï¼é½éè¦æ³¨æï¼ä¸è¦å®ä¹æå¦ä¸ï¼
$loading = $('#loading'); //è¿ä¸ªæ¯å ¨å±å®ä¹2ã使ç¨ä¸ä¸ªvaræ¥å®ä¹åé
ããå¦æ使ç¨å¤ä¸ªåéçè¯ï¼å¦ä¸æ¹å¼å®ä¹ï¼
var page = 0,$loading = $('#loading'),
$body = $('body');
ä¸è¦ç»æ¯ä¸ä¸ªåéé½æ·»å ä¸ä¸ªvarå ³é®å
3ãå®ä¹jQueryåé
ããç³ææè å®ä¹åéçæ¶åï¼è¯·è®°ä½å¦æå®ä¹çæ¯jQueryçåéï¼æ·»å ä¸ä¸ª$符å·å°åéåï¼å¦ä¸ï¼
var$loading = $('#loading');è¿éå®ä¹æè¿æ ·ç好å¤å¨äºï¼ å¯ä»¥ææçæ示èªå·±æè å ¶å®é 读 代ç çç¨æ·ï¼è¿æ¯ä¸ä¸ªjQueryçåé
4ãDOMæä½è¯·å¡å¿ è®°ä½ç¼åï¼cacheï¼
å¨jQuery代ç å¼åä¸ï¼å¸¸å¸¸éè¦æä½DOMï¼DOMæä½æ¯é常æ¶èèµæºçä¸ä¸ªè¿ç¨ï¼èå¾å¾å¾å¤äººé½å欢è¿æ ·ä½¿ç¨jQueryï¼
$('#loading').html('å®æ¯');$('#loading').fadeOut();
代ç 没æä»»ä½é®é¢ï¼ ä¹å¯ä»¥æ£å¸¸è¿è¡åºç»æï¼ä½æ¯è¿é注æ æ¯æ¬¡å®ä¹å¹¶ä¸è°ç¨$('#loading')çæ¶åï¼é½å®é å建äºä¸ä¸ªæ°çåéï¼å¦æ éè¦éç¨çè¯ï¼è®°ä½ä¸å®è¦å®ä¹å°ä¸ä¸ªåééï¼è¿æ ·å¯ä»¥ææçç¼ååéå 容ï¼å¦ä¸ï¼
var $loading = $('#loading');$loading.html('å®æ¯');$loading.fadeOut();
è¿æ ·æ§è½ä¼æ´å¥½ã
5ã使ç¨é¾å¼æä½
ããä¸é¢é£ä¸ªä¾åï¼å¯ä»¥åçæ´ç®æ´ä¸äºï¼
var $loading = $('#loading');$loading.html('å®æ¯').fadeOut();
6ãç²¾ç®jQuery代ç
ããå°½éæ代ç é½æ´åå°ä¸èµ·ï¼è¯·å¿è¿æ ·ç¼ç ï¼
// ï¼ï¼åé¢äººç©$button.click(function(){$target.css('width','%');
$target.css('border','1px solid #');
$target.css('color','#fff');
});
åºè¯¥è¿æ ·ä¹¦åï¼
$button.click(function(){$target.css({ 'width':'%','border':'1px solid #','color':'#fff'});
});
7ãé¿å 使ç¨å ¨å±ç±»åçéæ©å¨
ãã请å¿å¦ä¸æ¹å¼ä¹¦åï¼ãã $('.something > *');
ããè¿æ ·ä¹¦åæ´å¥½ï¼
ãã $('.something').children();
8ãä¸è¦å å å¤ä¸ªID
ãã请å¿å¦ä¸ä¹¦åï¼ãã $('#something #children');
ããè¿æ ·ä¹¦åæ´å¥½ï¼
ãã $('#children');
9ãå¤ç¨é»è¾å¤æ||æè &&æ¥æé
ã
ã请å¿å¦ä¸ä¹¦åï¼if(!$something) {
$something = $('#something ');
}
ããè¿æ ·ä¹¦åæ§è½æ´å¥½ï¼
$something= $something|| $('#something');
ãå°½é使ç¨æ´å°ç代ç
ãã
ä¸å ¶è¿æ ·ä¹¦åï¼if(string.length > 0){ ..}ããä¸å¦è¿æ ·ä¹¦åï¼if(string.length){ ..}
ãå°½éä½¿ç¨ .onæ¹æ³
ããå¦æ 使ç¨æ¯è¾æ°çæ¬çjQueryç±»åºçè¯ï¼è¯·ä½¿ç¨.onï¼å ¶å®ä»»ä½æ¹æ³é½æ¯æç»ä½¿ç¨.onæ¥å®ç°ç
ãå°½é使ç¨ææ°çæ¬çjQuery
ããææ°çæ¬çjQueryæ¥ææ´å¥½çæ§è½ï¼ä½æ¯ææ°ççæ¬å¯è½ä¸æ¯æie6/7/8ï¼æ以大家éè¦èªå·±é对å®é æ åµéæ©
ãå°½é使ç¨åççJavascript
ããå¦æ使ç¨åççJavascriptä¹å¯ä»¥å®ç°jQueryæä¾çåè½çè¯ï¼æ¨è使ç¨åççjavascriptæ¥å®ç°
jQuery内部原理和实现方式浅析
这段时间在学习研究jQuery源码,受益于jQuery日益发展强大,研究jQuery的大牛越来越多,学习的资料也比前两年好找了,有很多非常不错的资源,如高云的jQuery1.6.1源码分析系列。这些教程非常细致的分析了jQuery内部原理和实现方式,对学习和理解jQuery有非常大的帮助。但是个人认为很多教程对jQuery的整体结果把握不足,本人试图从整体来阐述一下jQuery的内部实现。
大家知道,调用jQuery有两种方式,一种是高级的实现,通过传递一个参数实现DOM选择,如通过$(“h1″)选择所有的h1元素,第二种是较为低级的实现,如果通过$.ajax实现ajax的操作。那么,这两种方式到底有何不同?用typeof函数检测$(‘h1′)和$.ajax,类型分别为object和function,稍微学过jQuery的都知道或者听过过,前者返回的是一个jQuery对象,那么jQuery对象是什么,它和jQuery是什么关系呢?我们先来通过for(var
i
in
$(”))
document.write(i+”
:::”+$(“”)[i]+””);打印一下jQuery对象的属性和对应的值,可以看到它有多个属性,通过console输入$(“*”)可以看到大部分属性是继承自jQuery原型的属性,jQuery对象实际上是这样一个对象:
所以我们来推测,jQuery的实现可能是类似这样的:
function
jQuery(){
this[0]="Some
DOM
Element";
this[1]="Some
DOM
Element";
this[2]="Some
DOM
Element";
this.length=3;
this.prevObject="Some
Object";
this.context="Some
Object";
this.selector="Some
selector";
}
jQuery.prototype={
get:function(){ },
each:function(){ },
......
}
这些代码通过new操作符就就能创建出拥有上述属性的jQuery对象,但是实际上我们调用jQuery创建jQuery对象时并没有使用new操作符,这是如何实现的呢?来看jQuery的实现:
var
jQuery
=
function(
selector,
context
)
{
//
The
jQuery
object
is
actually
just
the
init
constructor
'enhanced'
return
new
jQuery.fn.init(
selector,
context,
rootjQuery
);
}
jQuery.fn=jQuery.prototype={
jquery:
core_version,
init:function(selector,context){
//some
code
return
this;
}
//some
code
there
//......
}
jQuery.fn.init.prototype=jQuery.fn;
这里有几点做得非常巧妙的地方,第一点是通过jQuery原型属性的init方法来创建对象来达到不用new创建对象的目的,第二点是对init方法内this指向的处理。我们知道,通过调用init返回一个jQuery的实例,那么这个实例就必须要继承jQuery.prototype的属性,那么init里面这个this,
就继承jQuery.prototype的属性。但是init里面的this,受制于作用域的限制,并不能访问jQuery.prototype其它的属性,jQuery通过一句'jQuery.fn.init.prototype=jQuery.fn'把它的原型指向jQuery.fn,这样以来,init产生的jQuery对象就拥有了jQuery.fn的属性。
到这里,一个jQuery的基本原型就浮出水面了。这里有两个对象,一个是jQuery这个构造函数,另外一个是这个构造函数产生的对象(我们称之为jQuery对象,它和普通对象没有什么区别),
如下关系图:
可以看到jQuery构造函数和jQuery.prototype均有各自的属性和方法,两者的调用方法各不一样,这两个对象都有一个extend方法,都是用来扩展自身的属性和方法,在jQuery内部,extend的实现实际是靠一样的代码,
将在后面的源码分析中做以详细的分析。