前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型。 jQuery的事件系统离不开jQuery的缓存系统。...jQuery的第一代缓存是直接将数据存储在 缓存体 这个数据结构中,但是需要在元素上添加一个uuid来作为标示, 标记在缓存体中的位置。...所以jQuery第二代缓存系统应运而生,这次不对元素进行添加属性,而是判断元素的valueOf()方法的返回值,如果没有返回值是 对象,则说明缓存体中并没有该元素的缓存数据,进而使用ECMA5的Object.defineProperty...简单讲述了缓存系统,现在着重讲解下jQuery的事件系统: 主要使用了几个数据结构,即元素的缓存体,Event构造函数,和Handler构造函数。 ...其次就是对fn的封装,在库中,fn的包装函数 实现了新事件对象的创建,以及对新创建的事件对象的修补,并调整了在回调中this的指向。
一、事件 在1.7之前的版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一的使用on/off方法 1、.on( events...click", "click.name1", 或者 ".myname" 参数2selector:一个选择器字符串,用于过滤和选中能触发事件的后代元素 参数3data:当一个事件被触发时,要传递给事件处理函数的...最大的问题是,后面新增的元素没有绑定click显示值的事件,需要使用事件代理解决这个问题 $('.box li').on('click', function(){ var str = $(this)...二、动画 1、.hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置display属性=none 参数1:动画时长的毫秒数值(如...function() { alert('Animation complete.'); }) 2、.show( [duration ] [, easing ] [, complete ] ) 用于显示元素
jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件处理能力。 ...第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定的处理函数。举个实际的例子,下面网页中,单击“标题”链接将显示内容。 ... 按照需求,需要完成以下几个步骤: (1)等待DOM装载完毕; (2)找到“标题”所在的元素,绑定click事件; (3)找到“内容”元素,将“内容”显示出来。...).next().show(); //获取并显示“内容”元素 }) }) 当然可以加强效果,并且改变绑定事件的类型,比如鼠标悬停时显示“内容”,鼠标离开时隐藏“内容”。...明天继续完成jQuery事件的下半部分,包括的内容有合成事件、事件冒泡、移除事件等内容。
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。 ...接上篇jQuery:详解jQuery中的事件(一) 3、合成事件 jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义的方法...hover()方法:hover()方法的语法结构为: hover(enter, leave); hover()方法用于模拟鼠标悬停事件。...上篇有过下面的一个例子,在其中如果要连续单击“标题”链接,实现“内容”隐藏和显示的效果,那么按照之前的做法就需要在绑定“click”事件的时候判断当前的“内容”部分是隐藏还是显示,然后进行相反的操作,显然就麻烦的多...最后就是编写用于移除所有click事件的处理函数了。
实现的细节: 1)怎样让datepicker默认就显示在指定的地方而不是通过输入框焦点触发?...这点其实很简单,通过查datepicker的api就可以知道datepicker初始化的时候会自动判断调用它的元素类型是什么,如果是input,它就会等待点击触发,如果是div,它默认就会显示出来了,所以...,这里,只需要在要显示的位置放一个div,然后用jquery的选择器找到这个元素,并且在上面调用datepicker()方法就可以了,示例:$('.datePickerWraper').datepicker...hover事件触发时显示的内容,相当于a的title。...选中有课程的日期时,会触发控件的onSelect事件,弹出课程列表的操作写在onSelect事件的响应方法里面就可以了。下面是初始化控件的完整代码,仅供参考。
我用的是jQuery1.12.4版本 uncompressed:未压缩版本,适用于开发环境,方便查看源代码 minified:压缩版本,适用于生产环境 jQueryapi文档 官方api文档:英文版本...jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。...$(":image") 所有 type="image" 的 元素 $(this) 当前 HTML 元素 4,jQuery 事件函数及效果显示 jQuery 事件处理方法是 jQuery...事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中....可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。 jQuery animate() 方法用于创建自定义动画。
My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。 ...1、下载My97DatePicker组件包 下载地址:http://download.csdn.net/detail/emoven/8249073 2、在页面中引入该组件js文件: ...日期控件使用 My97DatePicker日期控件的使用 显示周 highLineWeekDay:true, //高亮周日 isShowClear:true, //是否显示清空 isShowToday...:true, //是否显示今天 isShowOK:true, //是否显示OK isShowOthers:true, readOnly:false, //是否只读 qsEnabled:
jQuery Verbose Calendar 是一个可以把整年的日历显示在一个页面上的 jQuery 插件,加载之后,它会自动滚到今天的日期处,当你鼠标移动到日期上,可以显示今天星期几。...并且这个日历插件支持 Callback 函数,当你点击某个日期的时候,你可以执行一些自定义行为,或者插入任意的 HTML 元素。...因为整年的日期都显示在一个页面上,所以这个日历用来分享事件和任务会非常方便。...jQuery Verbose Calendar 使用 先加载 CSS 文件,jQuery 和 jQuery Verbose Calendar 类库。.../jquery.calendar.js" type="text/javascript" charset="utf-8"> 调用日历并显示: <!
蚂蚁金服的前端UI框架Ant Design 有专门针对 React 设计的 Ant Design for React 。...今天在使用其中的 DatePicker 日期组件时遇到一个问题,其中有一些按钮显示英文,如下图所示: ?...div> ); } } ReactDOM.render(, mountNode); 这样就可以显示中文了...YourNonceCode' }}> My Button 声明:本文由w3h5原创,转载请注明出处:《Ant Design for React的DatePicker...日期组件设置默认显示中文的方法》 https://www.w3h5.com/post/440.html
jquery的datetimepicker时间控件除了样式有点不太美观,功能性还是相当强大的。...').datetimepicker({ step: 10, format: 'Y-m-d H:i' }); 以上只是叙述jquery datetimepicker的用法;知道了它的用法,就会想知道它的配置参数有哪些...// true 显示datepicker false 隐藏datepicker weeks: false, // true 显示周数 false 隐藏周数 defaultTime...显示滑动条 false设置timepicker不显示滑动条 todayButton: true, // ture显示今天按钮 false不显示今天按钮 位置在datepicker...false隐藏 }); 简单叙述jquery datetimepicker的相关点击方法 /* 监听时间插件显示时的事件 */ $('#datetimepicker').datetimepicker
一个简单的记录,在调试jquery的事件绑定时会用到。查看某元素是否绑定上了事件。...在JQuery1.8之前: obj=$('div.event');obj.data('events'); 在JQuery1.8中: objs=$('div.event');$...._data(objs[0],'events'); 参考: http://stackoverflow.com/questions/12214654/jquery-1-8-find-event-handlers
大图猛戳
对于控件的事件,jQuery已经提供了丰富的方法,包括绑定、一次绑定、触发等,阿拉今早看看叫一哪能用额伐,大虾路古就可以了。...jQuery的绑定事件非常方便,有bind、live、one还有它帮你把一些常用的事件给单独了出来,比如控件的onclick事件,我们绑定onclick事件的时候只需要 $("#testButton")...jQuery有unbind的方法,专门来取消绑定的,也就是取消事件,按照上面的例子的话,应该使用: $("#testButton").unbind("click"); 恩,看上去非常好,如果你的...我这里取消了绑定,又删除了特定的绑定,为什么还会执行Eat呢? 其中的原由要看jQuery的类库了,我估计它只删除了通过JQuery绑定的那些事件了,呵呵。 那这时候我们该如何呢?...好在jQuery有很多方法,其中一个就是attr,他是对Dom元素的属性进行操作,我们利用attr来消除input上的click事件。
(不会更改DOM结构),但是该属性是存在的,且可以获取输出②attr():在元素本身是可以看到设置的属性,也可以获取输出二、遍历操作1、区别(1)隐式迭代:给同一类元素做同样的操作(2)遍历操作:给同一类元素做不同的事情...(jQuery 事件 | 菜鸟教程)1、单个事件注册element.事件(fuction(){})(1).hover:模仿鼠标悬停事件(2)参数 ①函数1:鼠标移上去触发什么事件 ...②函数2:鼠标离开触发什么事件事件$('选择器').on('类型',fuction(){})(1)优点一:可以绑定多个函数,处理相同或不同的程序①处理相同的程序 $('button').on('click...('仅一次');})5、自动触发事件$('button').click()五、插件jQuery插件库-收集最全最新最好的jQuery插件小伙伴可以在这个网站找喜欢的作品,下载压缩包后,可以直接看效果,而且都有源码的哦
在工作中,经常用到js的点击事件,有好多种表现形式,今天抽空总结一下它们的区别与联系。废话不多说,开始写测试案例。首先声明,本人水平有限,如果有错误之处,还请指正。...DOCTYPE html> jquery/1.10.2/jquery.min.js...,添加的事件。...其次,在js操作的效率上: $('body').on('click', '#btn_delete', function() {});方式为运用事件冒泡,有效减少内存的占用 。...原理为首先确定第一个标签$('body')的位置,再在下面搜索#btn_delete的位置,执行click事件 冒泡方式的恰当运用为: $('.action-box').on('click', '#btn-add
代码 输入框选择日期 label 用于显示选中的时间 button1 清除 label 时间 button2 重新赋值 label 时间 js代码实现功能 1. input 使用插件,并设置回调函数用来将控件选中的值赋值给...$("input[name=callbackDate]").daterangepicker( { singleDatePicker: true, //只显示单日期选择 },function...输出 datepicker 对象一看,#¥%……& datepicker对象居然是一个 jQuery 对象$("input[...]")。 what???...$.fn.这是在扩展 jQuery 对象,daterangepicker是扩展的一个方法,(对象方法中的this指向谁的问题同样参考上一篇文章)。...关于插件作者代码 当然了,代码中返回什么对象,返回哪个对象的问题,我不明白作者是怎么想的。如果是我来写插件,肯定不会返回一个jQuery对象,因为没什么必要。
键盘按键事件主要分为键盘的按下过程和键盘的弹起过程。常见键盘事件如表5-4所示。...表5-4键盘按键事件 键盘事件 说 明 keydown 当键盘按下时第一个发生的事件,对所有按键有效 keypress 当键盘按下时第二个发生的事件,对中文和特殊按键无效 keyup 当键盘弹起时发生的事件...对整个页面上下文分别做了三个键盘事件的绑定,先打开chrome浏览器的console窗体,然后在文本框中随意输入一个英文字母或数字时,就可以看到这个在三个键盘事件的执行顺序,如图5-14所示。...图5-15按下中文按键测试 在jQuery中,如果你要获取键盘输入的是什么按键,那么可以利用事件参数的which属性即可(event.which)。...a,此时在console窗体中的keydown事件中显示的却是大写字母A对应的ascii码值65,而在keypress事件中显示的是正确的小写字母a对应的ascii码97。
如果你使用asp.net mvc,而且使用的js库是jQuery, 那么一定别错过使用jQuery UI,使用jQuery UI 有个一套的mvc套件值得使用jQuery ASP.Net MVC Controls...默认MVC3模板项目已集成jQuery: jQuery ASP.Net MVC Controls是一个基于jQuery和jqGrid框架ASP.Net MVC的兼容控制的完整的包,主要包括jqGrid的...Ajax的分页,编辑,分格,批量更新以及标准的控件: * DatePicker * AutoComplete * Tab Strip * Accordion Control 使用文档参考官方的: Setting
jquery 对事件委托的支持 在jQuery里对事件委托的支持,有以下几个函数: ?...看一下相应的定义: delegate(selector,[type],[data],fn) selector:选择器字符串,用于过滤器触发事件的元素。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。...备注: 自jQuery1.9后 就废除这个函数,只能在jQuery1.9以前的版本中使用。...selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的的元素,事件总是触发。
最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下。希望读者不要在遇到和我一样的问题。 1 datepicker。...不知道怎么自己下载的bootcss里面没找到datepicker,于是就选了Jquery UI的datepicker。使用的时候要注意两个问题。 ...还有就是如果modal里面有datepicker,那么,默认情况下无法在点击input的时候显示出datepicker的日期选择框的。解决方案在stackoverflow有。链接戳这里。 ...,查了文档,上面给出的事件名字叫'hide.bs.modal'。...虽然知道了上面的两点,但是做页面的时候还是出现了modal里面的datepicker"无法正常显示",还有就是显示了之后"无法选中日期的问题"。