jquery事件

一、jQuery概述 jQuery的概念 jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“ 写更少的代码，做更多的事情。” j就是JavaScript；Query查询；意思就是查询js,把js中的DOM操作了封装，我们可以快速的查询使用里面的功能。 jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。 学习jQuery的本质就是学习调用这些函数（方法）。 jQuery的优点 轻量级，核心文件才几十kb，不会影响页面的加载速度 跨浏览器兼容 链式编程、隐式迭代 对事件、样式、动画支持，大大简化了DOM操作 支持插件扩展开发，有丰富的第三方插件，如：树形菜单、日期控件、轮播图等 免费、开源 二、jQuery的基本使用 jQuery的下载 去官方网址下载 官方网址：https://jquery.com 点击download，如下图： 点进去之后会发现里面分了几种版本，如下图： 第一个production jQuery是我们生产环节的jQuery，是压缩过的。 第二个是development jQuery是开发中使用的jQuery，没有被压缩过。 这里我用的是第一个因为比较小，全选，之后复制在新建的jquery.min.js文件中。 这就完成了我们的jQuery的下载过程。 如何引入jQuery

jQuery插件的开发包括两种： 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。 1、类级别的插件开发 类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展： 1.1 添加一个新的全局函数 添加一个全局函数，我们只需如下定义： JavaScript Code 复制内容到剪贴板 jQuery.foo = function() { alert( 'This is a test. This is only a test.'); }; 1.2 增加多个全局函数 添加多个全局函数，可采用如下定义： JavaScript Code 复制内容到剪贴板 jQuery.foo = function() { alert( 'This is a test. This is only a test.'); }; jQuery.bar = function(param) { alert( 'This function takes a parameter,

了解JQuery 什么是JQuery jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQueryJavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 为什么使用JQuery 因为jq是轻量级别的框架，大小不大30kb 它有强大的选择器，出色的DOM操作封装 有可靠的事件处理机制 完善的ajax 出色的浏览器兼容性 支持链式操作，隐式迭代 行为层(功能)和结构层(页面元素) 的分离，还支持丰富的插件 JQuery基础 $ $ 声明该变量是jq变量 同时$也是JQuery的简写 jq中 顶级/对象 是 $ 或者jQuery关键字 注意： jQuery中的 $ 和 jQuery关键字 本身同为一个对象 变量 js变量 var a = 10; jq变量 var $a = 10; 变量转化 dom的变量 和 jq的变量之间 转换 转换为jq变量 var oDiv = document.getElementsByClassName(“box”)[0]; var $b = $(oDiv); 转换为DOM变量 var $c = $b[0]; 入口函数 js中的入口函数 window.onload

在Jquery里面，我们知道入口函数有两种写法: $(function(){}) 和$(document).ready(function(){}) 作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。 重点内容 1.执行时间 1 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 2 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同 1 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 2 $(document).ready()可以同时编写多个，并且都可以得到执行 3.简化写法 1 window.onload没有简化写法 2 $(document).ready(function(){})可以简写成$(function(){}); 由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 —load(

我是如何去了解jquery的(四),切换事件hover&toggle 作者：田想兵 博客地址: http://www.cnblogs.com/tianxiangbing 我用两篇文章的时间讲述了 如何利用jquery去查询找到dom节点 ，现在又要用两篇文章的时间来说明jquery的事件驱动，在 上一篇 里已经明确说明了这一点，包括js里最常用到的点击click事件的使用，诸如其他事件，都是和click类似的处理。如表单事件submit，写时$("form").submit(/*fuc*/);又如键盘事件keydown，$("div").keydown(/*fuc*/);还有鼠标的mouveover(鼠标移入对象时触发)，所以，这节就没有必要再次去说明这些常用事件了，这节我们要讲的是事件的切换hover|toggle。 本文案例及源码请 点击 这里 。 先来看API里对于hover(over/*function*/,out/*function*/)的说明： 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 它的人类语言说法就是，当鼠标移入一个对象时，它会触发一个方法，移出时又会触发另一个方法，说白了，就是onmouseover和onmouseout的结合体,也就是一个节点上同时绑定了这两个事件。

第1章： jQuery简介 为了 简化 JavaScript 的开发 ，一些 JavsScript 库诞生了。 JavaScript库封装了很多预定义的对象和实用函数，简化HTML与JavaScript之间的操作，能帮助使用者建立有高难度交互的页面， 并且 兼容各大浏览器 。 当前流行的 JavaScript 库有 jQuery是继prototype之后又一个优秀的JavaScript框架。如今， jQuery已经成为最流行的JavaScript库。 在世界前10000个访问最多的网站中，有超过55%在使用jQuery。 jQuery，顾名思义，也就是JavaScript和查询（query），其宗旨是“WRITELESS,DO MORE”，极大地简化了JavaScript开发人员遍历HTML文档，操作Dom，处理时间，执行动画和开发Ajax，具体来说，优势如下 jQuery是免费、开源的 轻量级(压缩后只有几十k) 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax使用 出色的多浏览器兼容性 隐式迭代：对集合对象做相同操作时不需要逐个进行遍历，jQuery自动进行遍历 文档说明很全 可扩展插件 第2章：jQuery快速入门 jQuery库实际上就是一个js文件，只需要在网页中直接引入这个文件就可以了。 将jQuery的库文件加入 在开发测试时,

委托事件原理 事件发展历程：从简单事件，到bind，到委托事件 //简单事件，给自己注册的事件 $("div").click(function () { alert("哈哈"); }); //bind方式 $("p").bind({ click: function () { alert("呵呵") }, mouseenter: function () { alert("哈哈") } }); delegate:代理，委托 1. 给父元素注册委托事件，最终还是有子元素来执行 2. 动态创建的也能有事件 :缺点：只能注册委托事件 // 要给div注册一个委托事件,但是最终不是由执行，而是有p执行 // 第一个参数：selector:事件最终由谁来执行。 // 第二个参数：事件的类型 // 第三个参数：函数，要做什么 $("#box").delegate("p", "click", function () { //alert("呵呵"); console.log(this); }); 来源： https://www.cnblogs.com/jane-panyiyun/p/12246159.html

语法： $(selector).bind(eventType[, eventData], handler(eventObject)); 参数解释: eventType(String): 一个包含一个或多个DOM事件类型的字符串， 比如"click"或"submit"或自定义事件的名称。 eventData(Ojbect): 可选，它包含的数据键值对映射将被传递给时间处理程序 handler(function): 每当时间触发时执行的函数 作用：为每一个匹配元素的特定时间(如click)绑定一个时间处理器函数。 示例代码： .bind()的一个基本用法，绑定一个或者多个DOM事件 当每个p标签被点击的时候，显示其文本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bind Demo</title> <style type="text/css"> p{ background-color: yellow; font-weight: bold; cursor: pointer; padding: 5px; } p.over{ background-color: #ccc; } span{ color: red; } </style> <script type="text/javascript"

jQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫

上周，我整理了 《jQuery设计思想》 。 那篇文章是一篇入门教程，从设计思想的角度，讲解 "怎么使用jQuery" 。今天的文章则是更进一步，讲解 "如何用好jQuery" 。 我主要参考了Addy Osmani的PPT 《提高jQuery性能的诀窍》 （jQuery Proven Performance Tips And Tricks）。他是jQuery开发团队的成员，具有一定的权威性，提出的结论都有测试数据支持，非常有价值。 ============================================== jQuery最佳实践 阮一峰 整理 1. 使用最新版本的jQuery jQuery的版本更新很快，你应该总是使用最新的版本。因为新版本会改进性能，还有很多新功能。 下面就来看看，不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句： 　　$('.elem') 　　$('.elem', context) 　　context.find('.elem') 我们用1.4.2、1.4.4、1.6.2三个版本的jQuery 测试 ，看看浏览器在1秒内能够执行多少次。结果如下： 可以看到，1.6.2版本的运行次数，远远超过两个老版本。尤其是第一条语句，性能有数倍的提高。 其他语句的测试，比如 .attr("value") 和 .val()