jquery事件

1.jQ操作DOM元素的绑定事件的四种方式 jQ中提供了四种事件监听方式，bind、live、delegate、on，对应的解除监听的函数分别是unbind,die,undelegate,off 2.bind $(selector).bind(event,data,function) event:事件，必选，一个或多个事件；data：参数，可选； fn：绑定事件发生时执行的函数，必选 bind（）是最直接的，存在最久的绑定方法 优点：兼容性好，任何浏览器都可以使用 缺点：它会绑定事件到所有的目标元素上，有一个绑定一个，在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个元素，点击它是没有反应的，必须再bind一次才执行，所以效率不太高。 3.live $(selector).live(event,data,function) 这个方法用到了事件委托的概念来处理事件的绑定 优点：这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的 元素挨个绑定，动态添加的元素仍然可以触发那些早先绑定的事件，因为事件真正的绑定是在document上 4.delegate $(selector).delegate(childSelector,event,data,function) childSelector:selector的子元素，必须写的 优点

jqGrid 3.6.2 中文文档——BasicGrid（3） 上一篇： 4、jqGrid 3.6.2 中文文档——BasicGrid（2） 下一篇： 6、jqGrid 3.6.2 中文文档——BasicGrid（4） Events（事件） 事件响应动作被设置为表格的属性，以下定义了行被选中时的响应： var lastSel; jQuery("#gridid").jqGrid({ ... onSelectRow: function(id){ if(id && id!==lastSel){ jQuery('#gridid').restoreRow(lastSel); lastSel=id; } jQuery('#gridid').editRow(id, true); }, ... }); 以下按字母顺序列出了可响应的时间： 事件 参数 描述 afterInsertRow Rowed Rowdata Rowelem 此事件发生在每次插入行后 rowid 为插入的行ID rowdata 是被插入行的数据数组。格式为name:value对，name在colModel定义 rowelem 是应答元素。xml为xml行，json为所有行数据。 注意：若gridview 为true，此事件不会发生 beforeRequest none 此事件发生在任何数据请求前

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 一.jquery中的事件 1.执行时机 jquery中使用$(document).ready()方法代替window.onload。区别在于window.onload在网页中的所有元素（包括元素的所有关联文件）完全加载到浏览器中才开始执行，而$(document).ready()在DOM完全就绪时就可以被调用。解决方法是另外一个页面加载方法load()，load()会在元素的onload事件中绑定一个处理函数。如果处理函数绑定在元素上，会在元素的内容加载完毕后触发，如果绑定给window对象，会在所有内容加载完毕后触发。 $(window).load(function{})等价于window.onload=function(){} 多个事件的绑定以及简写 格式：$(document).ready(function(){ })只需多次追加新的行为即可 简写$(function(){ }) ；也可以简写把document省略，即$().ready(function(){}) 2.事件绑定 使用bind()方法来匹配元素进行特定事件的绑定，调用格式bind(type,[.data],fn); 第一个参数是事件类型，包括：blue、focus、load、resize、scroll、unload、click

1.所有API自带遍历 对jQuery对象调用的修改，会自动应用到集合中每个DOM元素上 2.所有API都返回正在查询的结果集合，可使用链式操作对同一个结果集合执行多个操作，$是构造函数，多次创建浪费内存 3.一个API两用：如果提供了新值，就修改。没提供新值，就获取 修改：$(...).css(属性名，值) 获取：$value=$(...).css(属性名) 修改CSS样式： DOM：elem.style.css属性=值 jquery:elem.css("属性名","值"); 绑定事件：dom：elem.onclick=function(){} jq:$().click(function(){...}) 层级选择器： 父子：parent child 所有后代 parent>child 直接子代 兄弟： child1+next 紧邻child1的下一个，且满足next的要求 child1~nextsiblings 不必紧邻，只要满足nextsiblings的要求 过滤选择器 子元素过滤：同css 选择在父元素下指定位置的子元素 first-chid last-child nth-child(n/even/odd/2n) only-child 问题：旧浏览器不支持：last-child nth-child 基本过滤：css中没有 选择查找结果中指定位置的元素 :first/last

jQuery是一个JavaScript·框架， 作用：简化开发 　　　　本质上是一些js文件，然后对元素的js进行了封装 　　1js和jquery对象的互相转换，jquery对象在操作时更方便 　　　　　1.1jQuery对象和js对象方法不通用　 　　　　　1.2 　　　　　　js-->jQuery 　　　　　　$(js对象) 　　　　　　jQuey对象-->js对象 　　　　　　jq对象[索引] 或者 jQuery对象.get(索引) 选择器： 筛选具有相似特征的元素（标签） 　　　　1基本操作学习： 　　　　　　1事件绑定 　　　　　　　　//获取b1按钮 　　　　　　　　$("#b1").click(function(){}) 　DOM操作： 　　　　1 html(): 获取/设置元素的标签体内容 　　　　2 text(): 获取/设置元素的标签体文本内容 　　　　3 val() :获取/设置元素的value属性值 　　2.属性操作　　 　　　　1通用性操作 　　　　　　1.attr():获取/设置元素的属性。 　　　　　　2.removeAttr（）删除属性 　 来源： https://www.cnblogs.com/qmk-716/p/12160821.html

转载： https://www.cnblogs.com/panie2015/p/6170788.html 1.zDialog.js 各种弹窗插件 详细案例： http://www.2ky.cn/Pri_upfile/txdemo/0811/zDialog/zDialogDemo.html 2.基于Bootstrap Ace模板的菜单和Tab页效果，ace.min.js，ace-element.min.js 一款漂亮的后台模板(html/js)可直接部署于项目中 详细介绍： http://www.tuicool.com/articles/aiiQFjb 3.jquery.flot.js Jquery的图表插件float Flot是一个Jquery下图表插件，具有简单使用，交互效果，具有吸引力外观特点。目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等浏览器，是一个基于Javascript和Jquery纯客端户的脚本库 4.jquery.easypiechart.js 主要是用来统计新的访问、跳出率、服务器负载、使用的RAM等，功能很强大，带有HTML5的动画效果，效果非常炫。 5. jquery画小图插件-jquery.sparkline.js 基本的线图，柱图，饼图等等 官网链接：

1、原生JS与jQuery操作DOM对比 ： https://www.cnblogs.com/QianBoy/p/7868379.html 2、比较jQuery与JavaScript的不同功能实现 ： http://www.cnblogs.com/QianBoy/p/7868291.html 3、原生JS与jQuery事件绑定对比： 　　原生js ： onclick绑定的事件具有可覆盖性 解除绑定方法： btn1.onclick = null ； //去掉绑定的事件 　　　　　　　addEventListener 具有 叠加性 　　　　　　　　btn2.removeEventListener('click', showMsg, false); //去除绑定 　　　　　　　（ attachEvent，这个是兼容ie的，等效于addEventListener，区别 请搜索 ） 　　　　　　　js中触发标签绑定的事件函数（非标签事件触发） ： .click () 参考： https://blog.csdn.net/zsytechnology/article/details/78128054 　　jQuery ： .click() 解除绑定： unbind .click()与on的区别 参考： https://www.cnblogs.com/sqh17/p/7746418.html 　　　

1、元素获取 /*******************原生js**************************/ var ele = document.getElementById('idName'); var eleArr = document.getElementsByClassName('className'); var eleArr = document.getElementsByTagName('div'); var ele = document.querySelector('#idName');//('.className')//('tagName'); //取第一个满足条件的元素 var eleArr = document.querySelectorAll('.className');//('tagName'); /*******************jQuery**************************/ var ele = $('#idName'); var ele = $('.className:eq(0)'); //取第一个元素 var eleArr = $('tagName'); 2、class选择器操作 /*******************原生js**************************/ //className 属性

最近开发中发现用attr无法设置checkbox的选中事件，在网上找了下说要用prop,所以总结下两者的区别。 1、操作的对象不同 　　attr:操作的是HTML文档节点属性 　　prop:操作的是js对象属性 2、应用版本不同 　　attr() 是 jQuery 1.0版本就有的函数， prop() 是 jQuery 1.6版本新增的函数。 　　在1.6之前，只能使用 attr() 函数；1.6及以后版本，你可以根据实际需要选择对应的函数。 3、用于设置的属性值类型不同 　　由于 attr() 函数操作的是文档节点的属性，因此设置的属性值只能是 字符串类型，如果不是字符串类型，也会调用其 toString() 方法，将其转为字符串类型。 　　prop() 函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的 任意类型。 4、其他 　　使用 attr() 获取这些属性的返回值为String类型，如果被选中(或禁用)就返回 checked 、 selected 或 disabled ，否则(即元素节点没有该属性)返回 undefined 。 　　并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。 　　因为jQuery认为：attribute的 checked 、 selected 、

最近开发中发现用attr无法设置checkbox的选中事件，在网上找了下说要用prop,所以总结下两者的区别。 1、操作的对象不同 　　attr:操作的是HTML文档节点属性 　　prop:操作的是js对象属性 2、应用版本不同 　　attr() 是 jQuery 1.0版本就有的函数， prop() 是 jQuery 1.6版本新增的函数。 　　在1.6之前，只能使用 attr() 函数；1.6及以后版本，你可以根据实际需要选择对应的函数。 3、用于设置的属性值类型不同 　　由于 attr() 函数操作的是文档节点的属性，因此设置的属性值只能是 字符串类型，如果不是字符串类型，也会调用其 toString() 方法，将其转为字符串类型。 　　prop() 函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的 任意类型。 4、其他 　　使用 attr() 获取这些属性的返回值为String类型，如果被选中(或禁用)就返回 checked 、 selected 或 disabled ，否则(即元素节点没有该属性)返回 undefined 。 　　并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。 　　因为jQuery认为：attribute的 checked 、 selected 、