jquery事件

最近项目前端使用 jquery+easyui来做，用了几个月，觉得easyui是一个很不错的开源前端UI框架， 虽然偶尔会遇到一些小问题，但是凭借多年前端开发的实力积累 都一一解决了，其中比较典型的就是 这个 easyui.editgrid插件了，是基于easyui.datagrid扩展的。其实只用easyui.datarid也能实现 类似的功能，但是速度很慢，用户体验极差，所以抛弃了原来easyui.datagrid 中编辑功能的架构 自己扩展实现了其可编辑部分，就是现在的easyui.editgrid. easyui.editgrid主要侧重于编辑功能，当然也可以当做datagrid使用，主要增加功能如下： 1.显著提升了easyui.datagrid 中beginEdit的性能 使得大量的行处于编辑状态成为可能，并提供了快速调用函数allBeginEdit 2.封装了键盘控制单元格元素间的切换功能，并作为一个单独的模块提供 3.在控件内封装了一个请求函数，请求后台数据时，控件处于等待状态 4.增加了一个自由选择列，可以点击选择按钮后弹出任意内容 5.提供了一个提示气泡的功能 只要指定行号 气泡就附着在该行上显示提示消息 6.增加了各种和编辑相关的事件，如行失去焦点，获得焦点，新建行，下一行，上一行 easyui.editgrid满足了这次项目的需求，做出了一些很好

jQuery简介 JQuery是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的js库 ，它兼容 CSS3 ，还兼容各种浏览器（ IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理 HTML （ 标准通用标记语言 下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的 插件 可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。 jQuery是一个兼容多浏览器的 javascript 库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。 jQuery是免费、开源的，使用

Query UI Autocomplete 是jQuery UI的自动完成组件，是我用过的最强大、最灵活的Autocomplete，它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据。 支持的数据源 jQuery UI Autocomplete 主要支持字符串 Array 、 JSON 两种数据格式。 普通的Array格式没有什么特殊的，如下： 1 [ "cnblogs" , "博客园" , "囧月" ] 对于JSON格式的Array，则要求有： label 、 value 属性，如下： 1 [{label: "博客园" , value: "cnblogs" }, {label: "囧月" , value: "囧月" }] 其中label属性用于显示在autocomplete弹出菜单，而value属性则是选中后给文本框赋的值。 如果没有指定其中一个属性则用另一个属性替代(即value和label值一样)，如下： 1 2 [{label: "cnblogs" }, {label: "囧月" }] [{value: "cnblogs" }, {value: "囧月" }] 如果label和value都没有指定，则无法用于autocomplete的提示。 另外需要注意，对于 从服务器端输出的JSON

2013-11-17 一.首先我们要了解jQuery与JavaScript的区别: *JavaSipt是为了适应动态网页制作的需要而诞生的一种编辑语音.他是由Netscape公司开发的一种脚本语音(scripting language). *JQuery是继Prototype之后有一个优势的JavaScript库,他由John Resig创建于2006年1月.他简化了遍历HTML文档.操作DOM.处理事件.执行动画和Ajax的操作.他独特而优雅的代码风格改变了JavaScript程序员的设计方式和思维. 二.jQuery的优势 1.轻量级: 　　jQuery非常轻巧,采用Dean Edwards 的Packer压缩后,只有不到30kb的大小,如果服务器端启用gzip压缩后,甚至只有16kb的大小! 2.强大的选择器: 　　jQuery可以让操作者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器. 3.出色的DOM操作的封装 　　jQuery封装了大量常用DOM操作,使用编写DOM操作相关程序员的时候能够得以应手,优雅的完成各种原版非常复杂的操作,让JavaScript新手也能写出出色的程序. 4.可靠的事件处理机制 　　jQuery的事件处理机制吸取了JavaScript专家Dean Edwards 编写的事件处理函数的精华

（1）轻量级。jQuery非常轻巧，采用Dean Edwards的Packer(http://dean.edwards.name/packer/)压缩后，只有不到30KB的大小，如果服务器端启用gzip压缩后，甚至只有16KB的大小！ （2）强大的选择器。jQuery可以让操作者使用从CSS 1到CSS 3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。如果你需要，还可以加入插件使其支持XPath选择器！下一章我们将为你详细讲解jQuery中强大的选择器。 （3）出色的DOM操作的封装。jQuery封装了大量常用DOM操作，使你编写DOM操作相关程序的时候能够得心应手，优雅的完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。第三章将为你重点介绍jQuery中优雅的DOM操作。 （4）可靠的事件处理机制。jQuery的事件处理机制吸取了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery处理事件绑定的时候相当的可靠。在预留退路(graceful degradation)方面，jQuery也做的非常不错。第四章将为你重点介绍jQuery中的事件处理。 （5）完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax里

jQuery的理念是写得少做的多(write less，do more)。 jQuery独特的选择器、链式的DOM操作、事件处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。 概括起来有以下优势： (1)轻量级。 jQuery非常轻巧，采用Packer压缩后不到30KB。 (2)强大的选择器。 jQuery允许开发者使用 从CSS1到CSS3几乎所有的选择器 ，以及jQuery独创的高级而复杂的选择器。 (3)出色的DOM操作的封装 jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序时能够得心应手。 (4)可靠的事件处理机制 jQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。 (5 )出色的浏览器兼容 jQuery能在IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+下正常运行。 (6 )完善的Ajax。 jquery将所有的Ajax操作封装到一个函数里$.ajax()里，使得开发者处理Ajax时能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。 (7 )链式操作方式 jQuery最具有特色的莫过于它的链式操作模式—即对发生在同一个jQuery对象上的一组动作

前两天做了一个点击任意位置，都能关闭菜单的功能，因为菜单里面的每一个a,的点击事件都是用on绑定的。所以在阻止冒泡的时候不管用，今天特意来理解一下on的机制 on 是委托事件，利用的就是冒泡原理 $(selector).on(event,[selector],handler); selector 如果为空，表示的就是目标元素就是所选元素，如果有值代表的是符合所选元素的所有后代元素 实际上，事件委托的事件处理函数是 当被委托的元素上的事件触发时判断e.target后执行 ，而不是目标元素上的事件被触发后就立即执行，在没有阻止冒泡的情况下，事件还是一层层传播的，只是处理函数在事件到达那一层被触发的问题。根据事件代理的规则，点击li元素后，click事件是从li至ul至ul父元素一层层冒泡上去的，沿途触发各个元素上的事件处理函数。如果我们将事件委托在ul上，调用了stopPropagation，就 阻止了事件从ul继续向上冒泡，而不是阻止事件从li向上冒泡 。这样从ul开始，ul及其祖先元素上的事件冒泡被阻止。 重要说明 ： 如果传递了 selector 参数，那么 on() 函数并 不是 为当前jQuery对象匹配的元素绑定事件处理函数，而是 为它们的 后代元素中符合选择器 selector 参数的元素绑定事件处理函数 。 on() 函数并不是直接为这些后代元素挨个绑定事件

插件是JQuery强大之处的体现,把最聪明的功能封装到插件中，可以为你及你的团队节省大量开发时间. 编写一个JQuery插件，在于给JQuery.fn加入新的功能属性，此处添加的对象属性名称就是你插件的名称 js代码 jQuery.fn.myPlugin = function(){ //你自己的插件代码 } 可以看到，好像$符号不见了。它仍然存在，为了确保你的插件不与其他使用$的库发生冲突。有一个最佳实践: 把jQuery传递给IIFE (立即调用函数) (自我执行的封闭程序，jQuery在此程序中映射成$符号), 并通过它映射成$, 这样就避免了在执行的作用域中被其他库所覆盖. js代码 (function($){ $.fn.myPlugin = function(){ //你自己的插件代码 }; })（jQuery） 在这个封闭的程序中，我们可以无限制的使用$符号来表示jQuery函数 上下文 现在，整个外壳已经写好，就可以开始编写真正的插件代码了. 在插件的范围内，this 关键字代表了这个插件将要执行的jQuery对象. 这里要特别注意一下, 因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素. 这容易导致开发人员误将this关键字无谓的包含在jQuery中,如下： (function($){ $.fn.myPlugin =

第十七章 jQuery http://jquery.cuishifeng.cn/ 一.过滤选择器 ： 目的：处理更复杂的选择，是jQuery自定义的，不是CSS3中的选择器。 语法：jQuery的过滤选择器借鉴了css中伪类的语法，即选择器以冒号（：）开始。 　　　　jQuery常用的过滤选择器 　　 选择器 说明 :animated　 所有处于动画中的元素 :button 所有按钮，包括input[type=button]、input[type=submit]、input[type=reset]和<button>标记 :checkbox 所有复选框，等同于input[type=checkbox] :checked 选择被选中的复选框或单选框 :contains( characters ) 选择所有包含了文本" characters "的元素 :disabled 页面中被禁用了的元素 :enabled 页面中没有被禁用的元素 :file 表单中的文件上传元素，等同于input[type=file] :header 选中所有标题元素，例如<h1>~<h6> :hidden 匹配所有的不可见元素，例如设置为display:none的元素或input元素的type属性为“hidden”的元素 :image 表单中的图片按钮，等同于input[type=image] :input

一、jQuery初步认知 jQuery概述 JQuery概念 javascript概念 基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素 JQuery概念 基于javascript的，同上，提高了代码的效率 jQuery是什么: 是一个javascript代码仓库，我们称之为javascript框架。 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。 它可以帮我们做什么(有什么优势) 轻量级、体积小，使用灵巧(只需引入一个js文件) 强大的选择器 出色的DOM操作的封装 出色的浏览器兼容性 可靠的事件处理机制 完善的Ajax 链式操作、隐式迭代 方便的选择页面元素(模仿CSS选择器更精确、灵活) 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式) 控制响应事件(动态添加响应事件) 提供基本网页特效(提供已封装的网页特效方法) 快速实现通信(ajax) 易扩展、插件丰富 如何引入JQuery包 引入本地的JQuery 引入Google在线提供的库文件（稳定可靠高速） 使用Google提供的API导入 写第一个JQUery案例 解释:在JQuery库中，$是JQuery的别名，$()等效于就jQuery() <script type=“text