JavaScript中的this不总是指向当前对象,函数或类中的this指向与调用这个函数的对象以及上下文环境是息息相关的.如在全局作用域调用一个含this的对象,此时当前对象的this指向的是window.为了让this的指向符合自己的意愿,JavaScript提供了两个方法用以改变this的指向,它们是call和apply,当然也有利用闭包来实现的方法.在Jquery 中的this的指向是怎么样的呢? 一.Ajax回调函数中的this,默认情况下指向AJAX配置对象ajaxSettings.…

var path = "shiftCancelAction"; $('#queryForm').attr("action",path).submit();…

前言 zepto号称迷你版jQuery,并且成为移动端dom操作库的首选 事实上zepto很多时候只是借用了jQuery的名气,保持了与其基本一致的API,其内部实现早已面目全非! 艾伦分析了jQuery,小钗暂时没有那个本事分析jQuery,这里就恬不知耻说说自己对zepto的源码理解,希望对各位有用 首先zepto的出现其实还是很讨巧的,他看见了巨人jQuery在移动浪潮来临时的转身慢.牵挂多的问题 马上搞出了一套轻量级类jQuery框架代码,核心代码1000行不到,快速占领了移动端的市场,…

jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 jQuery.event={ global:{}, add:function(elem,types,handle,data,selector){}, remove:function(elem,types,handler,selector,mapppedTypes){}, trigger:functio…

一.jQuery extend方法介绍 jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样: 且看官方给出解释: jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中): jQuery.fn.extend():Merge t…

  jQuery是目前使用最广泛的前端框架之一,有大量的第三方库和插件基于它开发.为了避免全局命名空间污染,jQuery提供了jQuery.noConflict()方法解决变量冲突.这个方法,毫无疑问,非常有效.遗憾的是,jQuery的官方文档对该方法的描述不够清晰,许多开发者并不清楚当他们调用jQuery.noConflict()时,究竟发生了什么,从而导致在使用时出现了许多问题.尽管如此,jQuery.noConflict()背后实现原理依然值得Web开发者学习掌握,成为解决类似全局命名空间…

一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute)是指对html文档中的属性进行读取,设置和移除操作,其中,属性名一般是小写的联词符式的字符串,属性值也是字符串. DOM属性操作时对DOM元素的属性(DOM[propName]或者DOM.propName的形式)进行读取,设置和移除操作,其中,属性名一般是驼峰式字符串,属性值可以是任何类型: 类样式…

一.jQuery种的队列模块 jQuery的队列模块主要是为动画模块EFFECTS提供支持,(不过到现在为了支持动画队列的inprogress的出入队还是搞不太清楚),单独抽取出一个命名空间是为了使程序员可以自定义自己的队列.不过貌似用得不多? 具体API的调用方法可以参考这篇博客http://snandy.iteye.com/blog/1978428 二.队列模块的代码结构 低级方法jQuery下有queue,dequeue,_queueHooks这三种方法:低级方法不建议直接在外部调用: 高…

一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所有用户自定义数据都被保存在这个对象的cache属性下,cache在此姑且称之为自定义数据缓存: 自定义数据缓存和DOM元素/javascript对象通过id建立关联,id的查找通过DOM元素/javascript元素下挂载的expando属性获得 话不多说,直接上代码.相关思路在代码注释中都有讲解…

jQuery.when提供了基于一个或多个对象的状态来执行回调函数的功能,通常是基于具有异步事件的异步队列. 如果传入多个异步队列,jQuery.when会返回一个新的主异步队列的只读副本(promise),这个副本将跟踪所传递的异步队列的最终状态. 当所有异步队列都成功,主异步队列的成功回调函数将会被调用,参数是包含所有异步队列成功参数的数组:为了达到这一效果,方法jQuery.when会维护一个计数器,并在每个异步队列上,添加成功回调,当每个异步队列的成功回调触发时,会将该计数器减1,当计算…

jQuery.Defered——异步队列用于管理一组回调函数(成功resolve,失败reject,消息progress),基于上一节实现的jQuery.callbacks完成. done,fail,progress分别表示添加成功,失败,消息回调函数.和callbacks中的add相对应:resolve/resolveWith,reject/rejectWith,notify/notifyWith分别代表触发成功/失败/消息回调,和callbacks中的fire/fireWith相对应: 整体…

自己实现的callbacks模块相较于jquery源代码中的callbacks模块有所简化,表面上看没有考虑firing这个参数,没有对之进行任何处理,即没有考虑在函数执行过程中,再次调用add,remove,fire的种种情况. 话不多少,直接上代码,所有的思考都在代码里面: var optionsCache={}; function createOptions(options){ var object=optionsCache[options]={}; //\S+,匹配非空格字符 //正则表…

jQuery实例方法及属性相关的代码结构如下 jQuery.fn=jQuery.prototype={ jQuery:core_version, constructor:jQuery, selector:'', length:, init:function(selector,context,rootjQuery){}, toArray:function(){}, get:function(num){}, pushStack:function(elems){}, each:function(cal…

JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery对象的函数,通过选择的具体对象调用,类似$(dom).html(). JQuery类扩展方法 直接给$增加方法 $.foo=function(){ console.log('foo'); } $.bar=function(){ console.log('bar'); } 或者给属性增加命名空间 $.…

写在开头: 昨天开始,我决定要认真的看看jQuery的源码,选择1.7.2,源于公司用的这个版本.由于源码比较长,这将会是一个比较持久的过程,我将要利用业余时间,和偶尔上班不算忙的时间来进行.其实原本是打算对着源码抄一遍,将对其的理解写成注释,这也算是在强行堆代码量了吧(我想我这是有多懒,必须要反省).不过鉴于自己平时比较懒惰的可耻行径,和太多的东西都写在一起有点庞大,我想我还是有必要写成一个专栏,来记录这个过程.其实最根本的原因是:源码里都是有注释的,而且注释写得那么详尽,翻译过来就是了,但是…

有時候寫 jQuery 時,常會發現一些簡單的效果可以重複利用.只是每次用 Copy & Paste 大法似乎不是件好事,有沒有什麼方法可以讓我們把這些效果用到其他地方呢? 沒錯,就是用 jQuery 的 Plugin 機制. 不過 jQuery 的 Plugin 機制好像很難懂?其實一點也不.以下我用最簡單的方式來為大家解說如何自製一個簡單的 Plugin . 當然在此之前,你得先瞭解 JavaScript 的 class . object . variables scope 還有 anony…

jQuery选择这样返回对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context );//从jQuery.fn里调用的方法 }; jQuery.fn = jQuery.prototype = { //这里jQuery.prototype,目前在这段代码中没用 . init: function(){ console.log("初始化完成"); return th…

今天操作一个Array数组对象,本来想着先取出该数组某一行数据,然后把该数据当作另一份数据进行操作. 结果发现,对该数据操作的同时,也对Array数组进行了修改,因为这个数据指向了array数组对象. 要想实现单独把数组某一行数据拿出来,进行操作,而不影响原数据,需要拷贝一份. 其他的各种 var  a=b 一样类似.对a进行操作的同时,由于a指向了b,所以是一样的效果.要想把a当作一个新对象,操作不影响b,需要把b单独拷贝一份. 使用方法: jQuery extend 方法如下:  浅层复制(…

3.1 创建HTML元素 使用 jquery 创建动态元素是相当容易的.可以通过 $() 函数包含一个 HTML 标签的字符串来创建. $('<div>Hello</div>') 任何在已经存在的元素上执行的 jQuery 方法都是可以在新创建的元素上使用. 注意,如果想创建一个空的 div 元素,可以这样写: $('<div>'); 前面介绍了 $() 函数的第二个参数 context.当使用 $() 函数来创建新元素时,可以使用 context 参数来为正要创建的新…

最近几天一直在研究jquery源码,由于水平太低看得昏头转向.本来理解的也不是很深刻,下面就用自己的想法来说下jquery是如何定义构造函数初始化的.如果有什么不对的地方,希望个位高手指出.  一般写构造函数如下 function Aaa(){} Aaa.prototype.init = function(){}; Aaa.prototype.css = function(){}; var a1 = new Aaa(); a1.init(); //初始化 a1.css(); jQuery写法如下…

1.总体架构 1.1自调用匿名函数 //自调用匿名函数 (function(window,undefined){ //jquery code})(window); 1.这是一个自调用匿名函数.第一个括号内创建一个匿名函数,第二个括号,立即执行2.为什么要创建这样一个“自调用匿名函数”呢???通过定义一个匿名函数,创建一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间.这点非常有用也是js框架必须支持的功能,jQuery应用,必须要确保jQuery创建的变量不能和导入他的程序所…

//添加实例属性和方法 jQuery.fn = jQuery.prototype = { // 版本,使用方式:$().jquery弹出当前引入的jquery的版本 jquery: core_version, // 修正指向问题(后有详解) constructor: jQuery, // 初始化和参数管理 init: function( selector, context, rootjQuery ) { var match, elem; // 写错之后的处理,如果写成: $(""),…

jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery 的最外层 $,jQuery (function (global, factory) { "use strict"; if (typeof module === "object" && typeof module.exports === "ob…

一般我们去写一个框架,会采用什么样的设计呢?比如设计一个jQuery框架,一般我们会创建一个函数对象 function jQuery(params){ //构造函数 }jQuery.prototype.init = function(params){ //初始化操作} jQuery.prototype.html = function(html){ //实现类似设置innerHTML的操作 } var jq = new jQuery("#id"); jq.init(); jq.html(…

本文所有代码,出自jQuery.1.5.2,为方便理解,引入类的概念,虽然jQuery不是基于面向对象思想. jQuery是现在最流行的JavaScript框架, $是其中最常见的符号,已经在jQuery留下了深深的烙印.那么$到底是什么东西,它可以接受一个字符,也可以接受一个文档对象,亦或者一个函数,也可以调用一个函数.接下来我会彻底分析这个符号背后隐藏的秘密. jQuery,高效,精炼,特别是对DOM元素对象操作的简化,很大程度上将前端程序员从一大堆冗余的代码解放出来,大大提高了开发效率!对…

上一篇主要讲解了jQuery原型中最重要的方法init.接下来再讲一些比较常用的原型方法和属性 core_slice = [].slice, jQuery.fn = jQuery.prototype = { toArray: function(){ //把jQuery对象转换成原生元素的数组,比如:$("div").toArray(),{0:"div",1:"div"}   ->   ["div","div&q…

1.调用页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="js/jquery-1.1.0.js"></script> <script>…

jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为5个子模块来实现:插入元素.删除元素.复制元素.替换元素和包裹元素,本节讲解第一个子模块:插入元素 插入元素模块可用于新增DOM节点,修改文本节点等,API如下: append(content)      ;在被选元素子节点的末尾插入指定内容,内部调用appendChild(elem)方法    ;…

所谓Web体验,就是Web服务器与Web浏览器之间的合作.过去,都是由服务器生成HTML文档,然后浏览器负责解释并显示该文档.后来,我们可以用CSS技术来动态修改页面的外观. ###操作属性 jQuery实际上是在操作DOM中的className属性. ####非类属性 jQuery提供了.attr()和.removeAttr()方法,这些方法可以修改属性. 通过jQuery还可以一次修改多个属性. .attr()方法也接受一对参数,第一个参数是属性名,第二个是属性值.更常用的是传入一个包含键值…

jQuery1.9.1源码分析--数据缓存Data模块 阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(elem, name, data)源码分析 internalRemoveData方法源码分析 internalData方法的源码分析 jQuery.fn.extend({data: function( key, value ) {}})源码分析 jQuery.extend({removeData: fu…