代码改变世界

随笔分类 -  jq

jQuery的.bind()、.live()和.delegate()之间区别

2013-06-20 17:07 by jelly_chow, 216 阅读, 收藏, 编辑
摘要: 摘要:jQuery的.bind()、.live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及防止在交互应用中弹出错误。 基本要素 DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。 $('a').bind('click',function() { alert(&qu 阅读全文

offset() position() scrollTop() scrollLeft()

2013-06-18 18:12 by jelly_chow, 347 阅读, 收藏, 编辑
摘要: (1)offset:获取当前元素相对于文档的高度。只对可见元素有效。 不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移(2) position:获取元素相对于最近的一个position为relative or absolute的元素的祖父节点的相对偏移。 事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置,如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移(3)scrollTop/scrollLeft:是分别获取元素滚动条距顶端的距离。-------.. 阅读全文

width() innerwidth() outerwidth() css('width')

2013-06-18 17:15 by jelly_chow, 488 阅读, 收藏, 编辑
摘要: 不多说,用一图足以说明首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div对于普通的元素 ,他们的作用相同。比如网页上有一个 div 元素:<div style="width:200px;height:200px;"></div>我们可以使用:$(function(){ var width1 = $("div").css("width"); var width2 = $("div" 阅读全文

jQuery 中的防冲突(noConflict)机制

2013-06-18 16:23 by jelly_chow, 244 阅读, 收藏, 编辑
摘要: 许多的 JS 框架类库都选择使用 $ 符号作为函数或变量名,jQuery 是其中最为典型的一个。在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,window.jQuery 依然是保证整个类库完整性的坚强后盾。jQuery 的 API 设计充分考虑了多框架之间的引用冲突,我们可以使用 jQuery.noConflict 方法来轻松实现控制权的移交。jQuery.noConflict 方法包含一个可选的布尔参数[1],用以决定移交 $ 引用的同时是否移交 jQuery 对象本身:jQuery.noConflict([removeAll])缺省情 阅读全文

jQuery 1.4.4 中 function( window, undefined ) 写法原因

2013-06-18 16:12 by jelly_chow, 220 阅读, 收藏, 编辑
摘要: 读 jQuery 1.4.4 版本代码的时候,发现下面的写法:(function( window, undefined ){... // code goes here})(window);window 肯定是没问题, 表示 BOM 浏览器对象模型中的 window 对象。但是这里为什么会有一个名为 undefined 的形参呢?起初的时候很不理解。去技术群请教了一下,才真正理解了这里的原因。原来,Javascript 中的 undefined 并不是作为关键字(全部Javascript关键字列表)出现的。因此可以允许用户对其赋值。例如:var undefined = 'myValue& 阅读全文

jQuery(function(){})与(function(){})(jQuery)的区别

2013-06-18 16:06 by jelly_chow, 191 阅读, 收藏, 编辑
摘要: jQuery(function(){});/$(function(){});全写为$(document).ready(function(){});意义为在DOM加载完毕后执行了ready()方法。(function(){})(jQuery);实际上是匿名函数,相当于先申明一个函数,声明完后直接调用;function(arg){...}这就定义了一个匿名函数,参数为arg ,而调用函数时,是在函数后面写上括号和实参的,由于操作符的优先级,函数本身也需要用括号,即:(function(arg){...})(param) ,这就相当于定义了一个参数为arg的匿名函数,并且将param作为参数来调用这 阅读全文

jQuery队列控制方法详解queue()/dequeue()/clearQueue()

2013-06-18 15:42 by jelly_chow, 1081 阅读, 收藏, 编辑
摘要: queue(name,[callback]):当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);$('#demo').queue('name') 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. $('#demo').queue('name',fun); 用queue将函数fun加入到name队列中 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组). 阅读全文

jquery 1.6发布后,增加prop()方法部分取代attr()方法

2013-06-17 11:22 by jelly_chow, 604 阅读, 收藏, 编辑
摘要: 以前的jq中,全部使用attr来访问对象的属性,比如取一个图片的alt属性,就可以这样做$('#img').attr('alt');但是在某些时候,比如访问checkbox的disabled属性的时候,会有些问题。用JQuery的时候发现一个问题用.attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined.有些浏览器中比如说只要写disabled,checked就可以了,而有的要写成disabled = "disabl 阅读全文