本站提供最佳ojdk源码服务,欢迎转载和分享。

【medusa 源码编译】【scratch 踢球 源码】【建仓线源码】jquery源码context

2024-12-23 23:00:40 来源:html动态源码黑 分类:知识

1.jqueryԴ?源码?context
2.统计当前网页被访问次数的Jquery代码是什么?
3.关于jQuery 代码的书写形式
4.jQuery内部原理和实现方式浅析

jquery源码context

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>Jquery 

       jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的源码操作。由John Resig在年1月的源码BarCamp NYC上发布第一个版本。目前是源码由 Dave Methvin 领导的开发团队进行开发。全球前个访问最高的源码网站中,有%使用了jQuery,源码medusa 源码编译是源码目前最受欢迎的JavaScript库。

简要介绍

       jQuery由美国人John Resig创建,源码至今已吸引了来自世界各地的源码众多javascript高手加入其team,包括来自德国的源码J&ouml;rn Zaefferer,罗马尼亚的源码Stefan Petre等等。jQuery是源码继prototype之后又一个优秀的Javascrīpt框架。其宗旨是源码——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

       由于目前高校基本尚未开JavaScript的源码相关课程,目前jQuery的源码scratch 踢球 源码学习,使用,研究都仅限于在职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的实现实际是靠一样的代码,

       将在后面的源码分析中做以详细的分析。

【本文网址:http://04.net.cn/news/47b339796555.html 欢迎转载】

copyright © 2016 powered by 皮皮网   sitemap