![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jquery
文章平均质量分 87
魔豆爸
擅长Web开发前端技术,具有多种浏览器下开发经验。精通 JavaScriptAJAX编程熟练使用主流JS库。手写JS能力强,运用无干扰的JS思想进行开发。熟练使用CSS及DHTML,W3C标准的推广和贯彻者。熟悉Java语言,MVC设计模式,StrutsSpring架构
展开
-
javascript1.6数组新特性和jquery的几个工具方法
JavaScript 1.6 引入了几个新的Array方法,具体的介绍见:https://developer.mozilla.org/cn/New_in_JavaScript_1.6 JavaScript 1.6在firefox1.5及其后版本支持,但在IE6,IE7甚至IE8上仍然未被支持。jquery的工具方法中提供了类似的功能。 1、Array.forEach()和j原创 2010-05-11 09:01:00 · 458 阅读 · 0 评论 -
读jq之七(判断点击了鼠标哪个键)
jQuery丢弃了标准的 button 属性采用which,这有点让人费解。which 是Firefox引入的,IE不支持。which的本意是获取键盘的键值(keyCode)。jQuery中的which即可以是键盘的键值,也可以是鼠标的键值。即当判断用户按下键盘的哪个键时可以使用which,当判断用户按下鼠标的哪个键时也可以用which。它一举两用了。见jQuery1.4.4源...2010-12-03 18:31:24 · 103 阅读 · 0 评论 -
读jq之八(原生事件对象的修复及扩充)
由于各个浏览器中原生事件对象的 差异性 ,多数 JS库/框架 都或多或少的对原生事件对象进行了修复及扩充。比如,停止事件冒泡IE用 cancelBubble ,标准浏览器则用 stopPropagation 。获取事件源对象,IE用 srcElement,标准浏览器则用 target诸如此类。jQuery 对原生事件对象的修复和扩充主要使用 jQuery.Ev...2010-12-04 09:13:01 · 100 阅读 · 0 评论 -
读jQuery之十八(元素位置)
本篇所读源码版本为1.7.2 jQuery中提供了获取设置HTML元素位置的接口方法。如下 .offset().position().offsetParent().scrollTop().scrollLeft() 所有位置相关的代码在项目的offset.js中,总共250行代码。里面还有些未公开的方法,如...原创 2012-04-24 07:09:25 · 98 阅读 · 0 评论 -
读jQuery之九(一些瑕疵)
jQuery1.6.1 发布有一段时间了,发现一些冗余代码,列出如下 1,bind 方法,最后一个参数fn是多余的// Handle object literalsif ( typeof type === "object" ) { for ( var key in type ) { this[ name ](key, data, type[k...原创 2012-04-18 14:34:39 · 82 阅读 · 0 评论 -
读jQuery之十(事件模块概述)
jQuery的事件模块是较复杂的,前面仅仅提到了对事件对象的包装。即统一了一些兼容性的问题。这篇会综述下jQuery的整个事件模块。后面会详细分析jQuery.event.add/jQuery.event.remove/jQuery.event.trigger。虽然事件模块代码很难读,但其提供的API接口还是很清晰的。如下 1、 添加事件(bind/one/li...原创 2012-04-18 14:39:59 · 78 阅读 · 0 评论 -
jQuery1.8的几个小变化
一,.width() 和 .height()方法1.8增加了对css属性box-sizing的支持,需要注意与1.7.2的区别了。1.7.2及以前的版本无论是否定义box-sizing: border-box返回的都是盒模型中元素内容的宽度或高度,不包括padding和border。1.8后则不同了,当设置了css属性box-sizing: box-border后,使用width(...2013-05-18 07:57:33 · 94 阅读 · 0 评论 -
读jQuery之十四
最近看完了添加事件和删除事件的核心方法,忍不住想把jQuery的事件模块抠出来。jQuery的代码是非常内聚的,一环套一环。想独立出来不容易。jQuery的事件模块严重依赖于其数据储存(jQuery.data),你会发现我的代码中的dataManager对象对应它。 这里只提供bind和unbind方法。暂不包含1, 事件命名空间(event namespace)2, 事件代...原创 2012-04-20 22:12:04 · 106 阅读 · 0 评论 -
读jQuery之十五
在之前的event-jq-0.2.js基础上继续提取jQuery的trigger和namespace。实现功能如下 // add event E.bind(el, 'click', fn);E.bind(el, 'click.name', fn);E.bind(el, 'click', fn, data); // remove event : E.unbi...原创 2012-04-21 08:27:37 · 87 阅读 · 0 评论 -
读jQuery之十六(事件代理)
事件代理的实现原理很简单:利用浏览器中事件的冒泡(event bubbling)和事件源(target || srcElement)。 某些场景中特别适合使用事件代理,它有如下好处1、需要管理的handler更少。2、占用的内存更少(创建的驻留在内存中的handler少了)。3、DOM元素与代码更少的绑定。4、DOM变更后(如添加dom节点)无须重新绑定事件处理器。...原创 2012-04-21 11:45:57 · 104 阅读 · 0 评论 -
读jQuery之十七(attribute/property/class)
jQuery的属性模块提供了如下方法attr/removeAttrprop/removeProp(1.6)addClass/removeClass/toggleClass/hasClassval 提供了几个静态方法以支持JQ对象以上方法,如jQuery.attr 对应 attr,即jq对象的attr方法内部调用了jQuery.attr。其次还有j...原创 2012-04-23 07:44:42 · 81 阅读 · 0 评论 -
读jQuery之十一(添加事件核心方法)
上一篇提到jQuery中添加事件提供给客户端程序员的接口方法有很多bind/click等,但其实现的核心方法是jQuery.event.add。这篇看看其源码,这个add定义如下(省略大部分)add: function( elem, types, handler, data ) { if ( elem.nodeType === 3 || elem.nodeType === 8 ) {...2012-04-19 07:07:58 · 101 阅读 · 0 评论 -
读jQuery之十二(删除事件核心方法)
使用jQuery删除事件(或称解除事件绑定)有三个函数:unbind、die和undelegate。这三个方法都依赖于未公开的jQuery.event.remove(后续使用.remove简写)。此为删除事件的核心方法。 .remove 所作的事情与上一篇提到的.add 刚好相反。且与.add中的处理代码一一对应,即 .add 中有多少种添加事件的方式.remove就...原创 2012-04-19 13:57:41 · 139 阅读 · 0 评论 -
读jQuery之十三(触发事件核心方法)
触发事件,或称模拟用户动作。比如点击,我们可以用代码去模拟用户点击,达到的效果与真实的鼠标点击是一样的。在 事件模块的演变 我使用了dispatchEvent(标准) 和fireEvent(IE)来主动触发事件。 如下...dispatch = w3c ? function(el, type){ try{ ...原创 2012-04-20 07:40:50 · 141 阅读 · 0 评论 -
读jQuery之二十一(队列queue)
queue模块在jQuery中分在Effects中,搜索整个库会发现queue也仅在特效模块effects.js中被使用。jQuery抽取出独立的命名空间给queue,说明除了内部Effects模块使用外,客户端程序员可以充分发挥聪明才智使用queue来构建非动画API。queue模块向外开放的API分别是挂在$上的$.queue、$.dequeue、$._queueHooks(仅内部...2013-11-21 14:13:02 · 87 阅读 · 0 评论 -
读jQuery之十九(多用途回调函数列表对象)
$.Callbacks是在版本1.7中新加入的。它是一个多用途的回调函数列表对象,提供了一种强大的方法来管理回调函数队列。整个$.Callbacks的源码不到200行,它是一个工厂函数,使用函数调用方式(非new,它不是一个类)创建对象,它有一个可选参数flags用来设置回调函数的行为。$.Callbacks是在jQuery内部使用,如为$.ajax,$.Deferred等组件提供基础...原创 2013-08-08 07:39:27 · 94 阅读 · 0 评论 -
如何定制你自己的jQuery
jQuery随着版本的不断升级代码量也随之增加,从1.0.0的不到两千行到现在的1.10.2已经突破1万行。新的API不断增加,但有些在项目中并没有用到。jQuery团队很早就考虑到这一点,按模块来划分,并可以按需定制自己的jQuery。 jQuery从1.9开始构建工具迁移到grunt。grunt是基于node的,因此需要安装node,下面详细介绍。一、安装node很简单...2015-01-12 08:38:07 · 209 阅读 · 0 评论 -
jq中html()方法使用不当带来的陷阱
.html方法当不传参数时用来获取元素的html内容,查看源码 return this[0] && this[0].nodeType === 1 ? this[0].innerHTML.replace(rinlinejQuery, "") : null; 得知其通过非标准的但所有浏览器都支持的innerHTML实现。注:html5已接纳该属性(http:...2010-05-29 10:54:22 · 180 阅读 · 0 评论 -
jQuery1.4.2的一些瑕疵
jQuery1.4.2 发布有一段时间了,发现一些多余的代码,列出如下: 1, jQuery.event.add 方法,1592行,最后的eventHandle是多余的。 var events = elemData.events = elemData.events || {}, eventHandle = elemData.handle, eventHandle;...2010-05-05 09:31:13 · 138 阅读 · 0 评论 -
读jq之七(判断点击了鼠标哪个键)
<br />jQuery丢弃了标准的 button 属性采用which,这有点让人费解。<br /><br />which 是Firefox引入的,IE不支持。which的本意是获取键盘的键值(keyCode)。<br /><br />jQuery中的which即可以是键盘的键值,也可以是鼠标的键值。<br />即当判断用户按下键盘的哪个键时可以使用which,当判断用户按下鼠标的哪个键时也可以用which。它一举两用了。<br /><br />见jQuery1.4.4源码<br />原创 2010-12-15 14:41:00 · 858 阅读 · 0 评论 -
读jq之四(实用方法)
<br />这篇看了jQuery.map,jQuery().map,jQuery.grep,jQuery.merge。<br /> <br />1,jQuery.map<br />该方法是挂在functoin jQuery上静态方法,通过jQuery.extend({...})方式扩展的。作用是数组(伪数组)每个元素上运行一个函数,返回新修改的数组。<br />见:http://api.jquery.com/jQuery.map/<br /> <br />2,jQuery().map<br />该方法是jq原创 2010-12-15 14:36:00 · 482 阅读 · 0 评论 -
读jq之三(优雅的迭代)
<br />上篇读到了jquery库如何通过其中的jQuery.extend及jQuery.fn.extend去扩展自身的。这篇将分析下jQuery.each及jQuery().each方法。看看他们如何与jQuery.extend一起扩展jquery库。查看源码,我们发现里面有10多处用到$.each及$().each。<br /> <br />jQuery1.4 已发布,后续将已1.4版本作为示例。部分源码如下:<br /> <br />jQuery.fn = jQuery.prototyp原创 2010-12-15 14:35:00 · 614 阅读 · 0 评论 -
读jq之八(原生事件对象的修复及扩充)
<br />由于各个浏览器中原生事件对象的 差异性 ,多数 JS库/框架 都或多或少的对原生事件对象进行了修复及扩充。<br /><br />比如,停止事件冒泡IE用 cancelBubble ,标准浏览器则用 stopPropagation 。<br /><br />获取事件源对象,IE用 srcElement,标准浏览器则用 target诸如此类。<br /><br />jQuery 对原生事件对象的修复和扩充主要使用 jQuery.Event 类和 jQuer原创 2010-12-15 14:43:00 · 454 阅读 · 0 评论 -
读jq之二(两种扩展)
<br />上一篇分析了jquery对象的组成,这次来分析下jquery的extend方法。部分如下:<br /> <br />jQuery.extend = jQuery.fn.extend = function() { ...};<br /> <br />我们可以用$.extend去扩展自定义的对象,如:<br /> <br />var myself = {name:jack};$.extend(myself, {setName:function)(n){this.name=n;}原创 2010-12-15 14:32:00 · 710 阅读 · 0 评论 -
读jq之五(jq对象的slice方法)
<br />这篇看看jq的slice方法,源码是jQuery1.4.2。先了解下first,last,eq方法。以下html片段<br /> <br /><div id="a">A</div><div id="b">B</div><div id="c">C</div><div id="d">D</div><br /> <br />$('div').first() 返回jq对象集合的第一个元素, 即Div[id=a],结构:{0:div,length:1,...};//...表示省略了其它属性原创 2010-12-15 14:37:00 · 1106 阅读 · 0 评论 -
读jq之六(数据暂存)
<br />jq的$.data,$.removeData方法设计的很巧妙,为增强理解模仿其写了个。都三个方法set,get,remove都挂在data对象上。<br /> <br />(function (){ var stamp = '$' + (new Date).getTime(), uid = 0, cache = {}; var data = { set : function(el, name, data) { var id = el[ stamp ], thisCache;原创 2010-12-15 14:39:00 · 548 阅读 · 0 评论 -
读jq之一(jq对象的组成)
以下是jquery 1.3.2 代码片段...jQuery = window.jQuery = window.$ = function( selector, context ) { return new jQuery.fn.init( selector, context );};jQuery.fn=jQuery.prototype={ init:function(){...}, ...}jQuery.fn.init.prototype = jQuery.fn原创 2010-11-18 09:02:00 · 891 阅读 · 1 评论 -
Think in Jquery
大部分情况下,我们面临的背景是:设计者高高在上,不食人间烟火,只是提供约束,不要这样,必须那样,而不是提供方法和可以复用的API。开发者是处于解决问题的一线,饱尝重复造轮子的疾苦,他们最需要的是快速的解决问题,以更恰当的方式工作,寻找更容易构建系统的技术和方式。Jquery给设计者上了很好的一课。Jquery就像一个魔法师一样,$()就像魔法棒一样,随手一指,一个木偶变复活了,一瞬...原创 2009-03-04 10:30:56 · 77 阅读 · 0 评论 -
用jquery循环map
前些天记录了java中for循环取map,发现用jquery的each一样可以取map(我称之为js的map,不要较劲),且顺序和map中顺序一致。废话少说,看代码 var map = { 地名: ["北京","天津","上海"], 民族: ["汉族","藏族","维吾尔族"] }; $.each(map,function(key2008-10-23 12:42:37 · 204 阅读 · 0 评论 -
读jq之五(jq对象的slice方法)
这篇看看jq的slice方法,源码是jQuery1.4.2。先了解下first,last,eq方法。以下html片段 <div id="a">A</div><div id="b">B</div><div id="c">C</div><div id2010-03-14 13:34:49 · 244 阅读 · 0 评论 -
读jq之六(数据暂存)
jq的$.data,$.removeData方法设计的很巧妙,为增强理解模仿其写了个。都三个方法set,get,remove都挂在data对象上。 (function (){ var stamp = '$' + (new Date).getTime(), uid = 0, cache = {}; var data = { set : function(el, na...2010-03-19 16:52:38 · 138 阅读 · 0 评论 -
读jq之一(jq对象的组成)
以下是jquery1.3.2 代码片段...jQuery = window.jQuery = window.$ = function( selector, context ) { return new jQuery.fn.init( selector, context );};jQuery.fn=jQuery.prototype={ init:function(){.....原创 2009-12-13 13:55:00 · 141 阅读 · 0 评论 -
读jq之二(两种扩展)
上一篇分析了jquery对象的组成,这次来分析下jquery的extend方法。部分如下: jQuery.extend = jQuery.fn.extend = function() { ...}; 我们可以用$.extend去扩展自定义的对象,如: var myself = {name:jack};$.extend(myself, {setName:f...原创 2010-01-09 16:00:32 · 73 阅读 · 0 评论 -
读jq之三(优雅的迭代)
上篇读到了jquery库如何通过其中的jQuery.extend及jQuery.fn.extend去扩展自身的。这篇将分析下jQuery.each及jQuery().each方法。看看他们如何与jQuery.extend一起扩展jquery库。查看源码,我们发现里面有10多处用到$.each及$().each。 jQuery1.4 已发布,后续将已1.4版本作为示例。部分源码如下:...原创 2010-01-19 17:00:55 · 105 阅读 · 0 评论 -
读jq之四(实用方法)
这篇看了jQuery.map,jQuery().map,jQuery.grep,jQuery.merge。 1,jQuery.map该方法是挂在functoin jQuery上静态方法,通过jQuery.extend({...})方式扩展的。作用是数组(伪数组)每个元素上运行一个函数,返回新修改的数组。见:http://api.jquery.com/jQuery.map/...原创 2010-01-21 17:39:53 · 66 阅读 · 0 评论 -
读jQuery之二十(Deferred对象)
Deferred对象是由$.Deferred构造的,$.Deferred被实现为简单工厂模式。它用来解决JS中的异步编程,它遵循 Common Promise/A 规范。实现此规范的还有 when.js 和 dojo。 $.Deferred作为新特性首次出现在版本1.5中,这个版本利用Deferred又完全重写了Ajax模块。$.Deferred在jQuery代码自身四处被使用...原创 2013-09-24 07:23:51 · 82 阅读 · 0 评论