jquery事件

一 jQuery是什么？ ［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 ［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! ［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 ［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。 ［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 二 什么是 jQuery 对象？ jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“#test”).html(); $("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 这段代码等同于用DOM实现代码： document.getElementById("

1 jQuery 事件方法 2 事件方法触发器或添加一个函数到被选元素的事件处理程序。 3 下面的表格列出了所有用于处理事件的 jQuery 方法。 4 bind ( ) 向元素添加事件处理程序 5 blur ( ) 添加 / 触发失去焦点事件 6 change ( ) 添加 / 触发 change 事件 7 click ( ) 添加 / 触发 click 事件 8 dblclick ( ) 添加 / 触发 double click 事件 9 delegate ( ) 向匹配元素的当前或未来的子元素添加处理程序 10 die ( ) 在版本 1.9 中被移除。移除所有通过 live ( ) 方法添加的事件处理程序 11 error ( ) 在版本 1.8 中被废弃。添加 / 触发 error 事件 12 event . currentTarget在事件冒泡阶段内的当前 DOM 元素 13 event . data包含当前执行的处理程序被绑定时传递到事件方法的可选数据 14 event . delegateTarget返回当前调用的 jQuery 事件处理程序所添加的元素 15 event . isDefaultPrevented ( ) 返回指定的 event 对象上是否调用了 event . preventDefault ( ) 16 event .

因为公司还有还有一些老项目使用的是前后端不分离的形式，不得不采用jQuery作为技术栈进行前端开发。考虑到函数排序很随性可能导致后期维护麻烦的情况，按照知乎小爝Live所推荐的方式做了一次改版，感觉还行，特来分享。 整体页面结构如下 ;(function (global, $, doc) { ‘use strict’; var Application = function () { this.a = 1, this.b = 2, this.eventsMap = { “click #btnOne”: “funcOne”, “click #btnTwo”: “funcTwo” } this.initEvent(); }; Application.prototype = { constructor: ‘Application’, funcOne: function () { console.log(‘You are clicked btn one!’); }, funcTwo: function () { console.log(‘You are clicked btn two!’); } }; global.Application = Application; $(function () { new Application() }); })(this, jQuery, jQuery

一、$(document).ready() 是个什么函数？为什么要用它？ ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。需要进一步了解的用户可以点击 answer链接查看详细讨论。 二、JavaScript window.onload 事件和 jQuery ready 函数有何不同？ 　这个问答是紧接着上一个的。JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。 　　另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用

目录 1. jQuery介绍 2. 下载jQuery 3. 基础语法 4. 文档就绪事件 5. jQuery选择器 6. 判断是否选择到了元素 7. jQuery样式操作 8. jQuery事件 9. 文档/窗口事件 10. 获取内容和属性 11. 改变内容和属性 12. jQuery效果 13. jQuery动画 14. jQuery获取表单数据 15. jQuery正则 16. AJAX jQuery:http://www.runoob.com/manual/jquery/ jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： - HTML 元素选取 - HTML 元素操作 - CSS 操作 - HTML 事件函数 - JavaScript 特效和动画 - HTML DOM 遍历和修改 - AJAX 异步加载 1. jQuery介绍 jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远 远超过其他库。 微软公司甚至把jQuery作为他们的官方库。 jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览 器，目前使用最多的是1.x系列的

jQuery鼠标事件之focusin事件 当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件 使用上非常简单： 方法一：$ele.focusin() 绑定$ele元素，不带任何参数一般是用来指定触发一个事件，一般用的比较少 <div id="test">点击触发<div> $("ele").focusin(function(){ alert('触发指定事件') }) $("#test").mouseup(function(){ $("ele").focusin() //指定触发事件 }); 方法二：$ele.focusin( handler ) 绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数 这样可以针对事件的反馈做很多操作了 <div id="test">点击触发<div> $("#test").focusin(function() { //this指向 div元素 }); 方法三：$ele.focusin( [eventData ], handler ) 使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题 <div id="test">点击触发<div> $("#test").focusin

https://github.com/cssmagic/blog/issues/59 @Aurelio De Rosa jQuery 的横空出世，至今已有十个年头了，而它的长盛不衰显然不是没有理由的。jQuery 提供了极为友好的接口，使得开发者们可以方便地进行 DOM 操作、发起 Ajax 请求、生成动画……不一而足。此外，与 DOM API 不同的是，jQuery 采用了 “混合模式”。这意味着你可以在任何一个 jQuery 集合身上调用 jQuery 方法，而不用关心它到底包含了几个元素（不管是零个、一个或多个，都没问题）。在未来的几周内，jQuery 就将抵达一个重要的里程碑——正式发布 3.0 版本。jQuery 3 修复了大量的 bug，增加了新的方法，同时移除了一些接口，并修改了少量接口的行为。在这篇文章中，我将为大家重点讲解 jQuery 3 所引入的那些最重要的变化。 新增特性 我们先来讨论 jQuery 3 中最重要的几个新增特性。 for...of 循环 在 jQuery 3 中，我们可以用 for...of 循环语句来迭代一个 jQuery 集合中的所有 DOM 元素。这种新的迭代方法是 ECMAScript 2015（即 ES6）规范中的一部分。这个方法可以对 “可迭代对象”（比如 Array、Map、Set 等）进行循环。 当使用这种新的迭代方法时

JQuery引入 下载地址： 官方网站（ 添加链接描述 ）下载JQuery 引入： <script type=“text/javascript” src="【本地JQuery地址】“> 选择器 基本选择器 对象 JQuery对象习惯性采用$开头，例如： $div = $(“div”); JQuery对象的格式是[OBject] JQuery对象转JS对象 jsObject = $jqueryObject[0]; jsObject = $jqueryObject.get[0]; JS对象转JQuery对象 $jqueryObject = $(jsObject); 事件 例子： < !DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > < / title > < script type = "text/javascript" src = "jquery-3.4.1.min.js" > < / script > < / head > < body > < input type = "button" value = "按钮" id = "button_id" > < script type = "text/javascript" > // 1 . 得到按钮对象

本地存储 本地存储分为cookie，以及新增的localStorage和sessionStorage 1、cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。 jquery 设置cookie $.cookie('mycookie','123',{expires:7,path:'/'}); jquery 获取cookie $.cookie('mycookie'); 2、localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。 //设置： localStorage.setItem("dat", "456"); localStorage.dat = '456'; //获取： localStorage.getItem("dat"); localStorage.dat //删除 localStorage.removeItem("dat"); 3、sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。 localStorage 和 sessionStorage 合称为Web Storage , Web

对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jQuery可以帮你达到目的！ 下载地址：http://jquery.com 下载完成后先加载到文档中，然后我们来看个简单的例子！ <script type="text/javascript" src="scripts/jquery-1.2.3.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("a").click(function() { alert("Hello world!"); }); }); </script> 上边的效果是点击文档中所有a标签时将弹出对话框，$("a") 是一个jQuery选择器，$本身表示一个jQuery类，所有$()是构造一个jQuery对象，click()是这个对象的方法，同理$(document)也是一个jQuery对象，ready(fn)是$(document)的方法，表示当document全部下载完毕时执行函数。 在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span id="p"><