jQuery事件
jQuery 是为事件处理特别设计的
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件"触发"（或"激发"）经常会被使用。
实例s:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
术语由事件"触发"（或"激发"）经常会被使用。实例: "按钮事件在你按下按键时触发"。
常见 DOM 事件:
jQuery 事件方法语法
在jQuery中，大多数DOM事件都有一个等效的jQuery方法。
页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。你可以 通过一个事件函数实现：
$("p").click(function(){
// action goes here!!
});
常用的jQuery事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到够。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击HTMl元素时执行。
在以下实例中，当点击事件在 <p> 元素中触发是隐藏所有当前页面的 <p> 元素:
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数:
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数:
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数:
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数:
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
mouseup()
当在元素上放松鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数:
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
focus()
当元素获得焦点时，发生 focus 事件。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数:
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
blur()
当元素失去焦点时发生 blur 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点:
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
相关推荐
03.jQuery语法 04.jQuery方法1 05.jQuery方法2 06.jQuery选择器(基础)至选择器(表单) 07.选择器(表单)至属性(CSS类) 08.属性(CSS类)至属性(值) 09.属性(值)至过滤(filter) 10.过滤(filter)至查找(offsetParent) 11....
对于jQuery 1.7，手册包含了所有可用的方法、事件、选择器等详细信息，帮助开发者快速理解和应用。例如，手册中详述了`$(selector).function()`的基本语法，其中`selector`用于选取DOM元素，`function`是jQuery提供...
### jQuery源码分析—构造jQuery对象 #### 一、源码结构概览 根据所提供的文件内容，本节将深入分析如何构建jQuery对象及其核心构造逻辑。首先，让我们从整体上理解jQuery构造函数的设计思路。 ##### 总体结构 ...
jQuery是一个快速简洁的...v2.0.2正式版更新列表(2013-03-10)： 1. 修复了大量的bug 2. 改进了部分功能 3. 加入了新的事件API .on() 和 .off() 4. jQuery 2.0 不再支持IE 6/7/8。 不知道能不能用哦，大家下载试试吧。
四、jQuery事件处理 jQuery简化了事件处理，如`jQuery_03_使用jQuery实现全选功能.mp4`中的示例，全选功能可以通过`.click()`绑定点击事件，然后利用`.prop()`方法改变`checked`属性实现。jQuery还支持多种事件，如`...
jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料，学习资料 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素....
根据给定的文件信息，我们可以总结出一系列与Java、Ajax、jQuery相关的IT知识点，这些知识点主要围绕DOM操作、事件处理、动画效果、类数组操作、小案例实践以及jQuery与Ajax的结合等方面展开。 ### DOM操作 DOM...
3. **事件处理**：jQuery简化了事件绑定，如`.click(function(){...})`用于添加点击事件监听器，`.on("event", function(){...})`可以绑定多种事件。 4. **动画效果**：jQuery的`.fadeIn()`, `.slideUp()`, `....
---2.列表、表格、媒体元素 ---3....---4.css3入门使用 ---5.css3美化 ---6....---7....---8....---第03章条件选择结构 ...5.jQuery制作网页特效 ...---5.初识jQuery(转换) ...---7.jQuery的事件与动画 ---8.jQuery操作D
总的来说，"js-day03.rar"的学习资料涵盖了jQuery的基础和进阶使用，包括选择器、事件处理、函数运用以及动画效果的实现。通过学习这些内容，开发者能够高效地使用jQuery提高网页的交互性和用户体验。在实际项目中，...
jQuery zTree v2.6.03 - **功能**：一个强大的树控件插件，用于展示具有层级关系的数据。 - **应用场景**：常用于网站后台管理系统的菜单导航、组织结构展示等。 #### 2. jQuery EasyUI - **简介**：EasyUI是一个...
4. **事件处理**：jQuery简化了事件处理，`$(selector).click(function() {...})`定义了点击事件的处理函数，`$(selector).on("event", function() {...})`则是通用的事件绑定方法，可以处理多种事件。 5. **动画...
在前台页面03.aspx中，我们使用jquery来捕获class为caname的元素的点击事件。当用户点击这些元素时，我们将其转换为文本输入框，以便用户可以编辑和修改信息。在编辑完成后，我们使用ajax异步请求来更新数据库。 在...
3. `jquery-1.2.6.js`：这是jQuery库的一个版本，为分页插件提供了基础的DOM操作和事件处理功能。 4. `jquery.page.js`：这是分页插件的核心代码，实现了分页逻辑和交互功能。 接下来，我们将详细讲解jQuery分页...
《W3Cschool 离线手册 (2017.03.11版) 完整CHM版》是前端开发者的重要参考资料，它包含了丰富的Web技术知识，旨在为开发者提供无需网络连接即可查阅的便捷学习平台。该手册以CHM（Microsoft Compiled HTML Help）...
JavaScript知识点思维导图jQuery版本全集 排序算法动画演示 ECMAScript3.0规范英文版.pdfECMAScript5.1规范中文版.pdf HTML5 Canvas 2D API规范1.0中文版.pdf IE、Firefox、Opera和Safari的JavaScript兼容性......
8. **浏览器兼容性**：学习如何处理不同浏览器之间的差异，以及使用polyfill或库如jQuery来确保代码的跨浏览器兼容性。 通过深入学习这些内容，开发者可以熟练掌握JavaScript，从而创建功能丰富、交互性强的Web应用...
在这个压缩包文件"ch03.code.rar_JavaScript/JQuery_Java_"中，我们关注的是三种重要的技术：JavaScript、jQuery和Java。这些技术在现代Web开发中扮演着核心角色，特别是在创建交互式用户界面和管理应用程序流程方面...
jQuery是由John Resig于2006年推出的一个JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery的核心理念是“Write Less, Do More”，即用更少的代码实现更多的功能。 二、...