目前，主要的购物网站都采用了这种加载方式。今天在一个网友的站里发现一个图片延迟加载的插件，很好用，在这里介绍一下。 先介绍一下图片延迟加载原理。我们需要先将图片的真实地址保存在一个自定义的属性中（属性名任你发挥吧，这里我用的是lazy-src），而图片的src属性中用一个占位图片来替代，这个占位图片当然是越小越好，它基本上只干活、不露面。 代码如下: 首先。页面开始加载时浏览器会获取所有图片在当前页面中的位...
1.选择对象 1).基本 #id 根据给定的ID匹配一个元素。例如：$("#id")element 根据给定的元素名匹配所有元素。例如：$("div").class 根据给定的类匹配元素。例如：$(".style1");* 匹配所有元素。例如：$("*")selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如：$("#id,div,.style1") 2).表单 :button 匹配所有按钮。例如：$(":button"):checkbox 匹配所有复选框。例如：$(":checkbox"):file 匹配所有文...
事件绑定的方法有很多种，使用了jquery那么原理那种绑定方式(elem.click = function(){...}))就不太想推荐给大家了。最主要的原因是elem.click=fn这种方式只能绑定一个事件处理，多次绑定的只会保留最后一次绑定的结果。 下面给大家介绍jquery绑定事件的方式有哪些吧。代码如下: jQuery.fn.eventType([[data,] fn])比如eventType指的是事件类型，比如click: $("#chua").click(fn); data这个参数一般都不会使用。这种方式事件绑定在...
又是一个重磅功能点。在分析源码之前分析一下体系结构，有助于源码理解。实际上在jQuery出现之前，Dean Edwards的跨浏览器AddEvent()设计做的已经比较优秀了；而且jQuery事件系统的设计思想也是基于该思想的，所以我们先分析一下Dean Edwards前辈的事件绑定。 a. jQuery事件原型——Dean Edwards的跨浏览器AddEvent()设计源码解读//事件添加方法 function addEvent(element, type, handler) {//保证每个不同的事件响应函数只有唯一...
在上篇文章给大家介绍了jQuery-1.9.1源码分析系列（十）事件系统之事件体系结构，本篇继续给大家介绍jquery1.9.1源码分析系列相关知识，具体内容请看下文吧。 首先需要明白，浏览器的原生事件是只读的，限制了jQuery对他的操作。举个简单的例子就能明白为什么jQuery非要构造一个新的事件对象。在委托处理中，a节点委托b节点在a被click的时候执行fn函数。当事件冒泡到b节点，执行fn的时候上下文环境需要保证正确，是a节点执行了fn而...
还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支//document ready简便写法$(function(){…}) } else if ( jQuery.isFunction( selector ) ) {return rootjQuery.ready( selector ); }所以$(fn)===$(document).ready(fn)。来看一下jQuery.fn.ready的源码 ready: function( fn ) {// Add the callbackjQuery.ready.promise().done( fn );return this; }很明显在jQuery.ready.promise函数中设置了延时，当延时对象解决的...
DOM操作包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip。DOM操作函数中后五种方法使用的依然是前面五种方法，源码jQuery.each({appendTo: "append",prependTo: "prepend",insertBefore: "before",insertAfter: "after",replaceAll: "replaceWith"}, function( name, original ) {jQuery.fn[ name ] = function( selector ) {var elems,...
发现一个小点，先前没有注意的jQuery重载stopPropagation函数调用的本地事件对象的stopPropagation函数阻止冒泡。也就是说，阻止冒泡的是当前节点，而不是事件源。说到触发事件，我们第一反应是使用$(...).click()这种方式触发click事件。这种方式毫无疑问简洁明了，如果能使用这种方式推荐使用这种方式。但是如果是自定义事件呢？比如定义一个$(document).on("chuaClick","#middle",fn);这种情况怎么触发事件？这就要用到$("#midd...
废话不多说了直接奔入主题了。find接受一个参数表达式selector：选择器(字符串)、DOM元素(Element)、jQuery对象。分两种情况处理:第一种，如果传入的参数是非字符串，则先通过jQuery选择器将selector查找出来，然后过滤出包含于当前jQuery对象所匹配的元素的节点。if ( typeof selector !== "string" ) {self = this;return this.pushStack( jQuery( selector ).filter(function() {for ( i = 0; i < len; i++ ) {if ( jQuery.cont...
什么情况下使用到克隆节点？我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况。比如对节点使用.after/.before/.append等方法后，节点被添加到新的地方，原来的位置上的节点被移除了。有的时候需要保留原来位置上的节点，仅仅是需要一个副本添加到对应位置，这个时候克隆就有了使用场景。jQuery.fn.clone克隆当前匹配元素集合的一个副本，并以jQuery对象的形式返回。你还可以指定是否复制这些匹配元素(甚至它...
首先需要有队列（queue）的基本知识。见上一章。 相关教程：jQuery下的动画处理总结： http://www.gxlcms.com/article/42000.htm jQuery 1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween ：http://www.gxlcms.com/article/75821.htma.动画入口jQuery.fn.animate函数执行流程详解--------------------------------------------------------------------------------先根据参数调用jQuery.speed获取动画相关参数，得到一个类...
为了给下一章分析动画处理做准备，先来看一下一些工具。其中队列工具在动画处理中被经常使用。 jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback ))(获取或设置当前匹配元素上待执行的函数队列. 如果当前jQuery对象匹配多个元素：获取队列时，只获取第一个匹配元素上的队列；设置队列(替换队列、追加函数)时，则为每个匹配元素都分别进行设置。如果需要移除并执行队列中的第一个函数，请使用dequeue()...
先给大家展示谢 jQuery.fn.css (propertyName [, value ]| object )（函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值。如果需要删除指定的css属性，请使用该函数将其值设为空字符串("")注意：1、如果省略了value参数，则表示获取属性值；如果指定了该参数，则表示设置属性值。2、css()函数的所有"设置"操作针对的是当前jQuery对象所匹配的每一个元素；所有"读取"操作只针对第一个匹配的元素。） jQuery.fn.offset([...
AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 您应当具备的基础知识 在继续学习之前，您需要对下面的知识有基本的了解： HTML / XHTML CSS JavaScript / DOM 如果您希望首先学习这些项目，请在我们的首页访问这些教程。 什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可...
a.动画兼容Tween.propHooksTween.propHooks提供特殊情况下设置、获取css特征值的方法，结构如下Tween.propHooks = {_default: {get: function(){...},set: function(){...}},scrollTop: {set: function(){...}}scrollLeft: {set: function(){...}} } Tween.propHooks.scrollTop 和Tween.propHooks.scrollLeft两个主要是在ie8离线状态下会出现混乱而把css特征值保存到节点上set: function( tween ) {if ( tween.elem.nodeType && tw...