`

JQuery 学习笔记(随笔)04

 
阅读更多

第四章  jQuery 中的事件和动作

       javascript 能够利用事件和用户交互,jQuery 提供一种更为强大的事件处理机制。

以浏览器加载文档为例。在页面加载完毕后,浏览器通过javascript为DOM添加事件。在javascript 中通常用window.onload()方法,jquery使用$(document).ready(),注意两者的区别,在前面已经进行了详细的介绍。

事件绑定:

在文档转载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定bind()方法调用格式为:bind(type [,data],fn); bind 有3个参数,说明如下,第一个参数是事件类型,类型包括blur, focus,load,resize,scroll,unload,click等,第二个参数是可选参数作为event data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定处理函数。bind()方法也可以重复使用多次

合成事件:

(1)hover(enter,leave);用来模拟光标悬停事件,当光标移动到元素上时,就触发第一个函数(enter),当光标移出时会触发第二个函数(leave)

(1)toggle(fn1,fn2,fn3........)用来模拟鼠标连续单击事件,当第一次单击时,调用第一个函数,第一次单击时调用第二个函数,。。。。但是有时候不需要那么多函数。例如:$(标题).toggle(function(){ //内容显示},function(){//内容隐藏})

事件冒泡: 

例如外层div 和内层div 都有一个click 事件,当单击内层div的时候同时也触发了外层div的事件。这就是事件冒泡,为了解决这个问题,jquery 提出了事件对象的解决办法:

$("element").bind("click",function(event){

//event 事件对象  

})

当单击element 元素时候,事件对象就被创建,这个事件对象只在事件处理函数中有效,事件处理函数执行完毕,事件对象就被销毁。

   停止事件冒泡:在jQuery中提供了stopPropagation()方法来停止事件冒泡

$("span").bind("click",function (event){

var txt=$('#msg').html() +"<p>内层被单击</p>"

$("#msg").html(txt);

event.stopPropagation();  //停止事件冒泡

})

  阻止默认行为:网页中的元素有自己默认的行为,例如单击链接就跳转,form 的表单提交,jQuery提供了preventDefault()方法来阻止元素的默认行为。例如表单验证页面,要求用户输入用户名要够6位

<script type="text/javascript">

$(function(){

$("#sub").bind("click",function(event){

if(username=""){

$("#msg").html("<p>文本框内容部能为空</p>");//提示信息

event.preventDefault();//阻止默认行为

}

})

})

</script>

<form action="test.html">

用户名:<input type="text" id="username" />

<br>

<input type="submit" value="提交" id="sub"/>

</form>

<div id="msg"></div>

</form>

如果想同事对事件停止事件冒泡和默认行为,可以再事件处理函数中返回false.

事件捕获和事件冒泡对用方向相反,jquery不支持事件捕获

分享到:
评论

相关推荐

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...

    jQuery学习笔记(一)

    **jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    锋利的JQuery学习笔记.pdf

    锋利的JQuery学习笔记

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

    jQuery 语法学习笔记

    jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...

    jquery 学习笔记

    **jQuery学习笔记** jQuery,作为一个轻量级的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧,帮助初学者快速上手。 ## 一...

    韩顺平jquery学习笔记及练习

    《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源,由知名讲师韩顺平的课程实录整理而成,旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...

    JQuery学习笔记

    以下是对JQuery学习笔记的详细解析: 首先,JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异,导致开发跨浏览器的网页应用变得复杂。为了统一这些...

    jquery学习笔记.rar

    《jQuery学习笔记详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,因其简洁的语法和强大的功能,深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery,无论你是初学者还是有...

    javascript and jquery学习笔记与资料

    这里,我们有针对这两个主题的学习笔记和参考资料,包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先,`JavaScript培训.zip`可能包含的是对...

    JQuery学习笔记合集

    **jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级...

    JQuery学习笔记(日常积累)

    在深入探讨jQuery的知识点之前,首先需要理解jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。jQuery的核心特性是其选择器,它允许开发者通过CSS样式的语法轻松选取HTML...

    jQuery学习笔记 jQuery API

    **jQuery学习笔记 jQuery API** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本笔记旨在帮助开发者快速上手并深入理解jQuery的核心概念和API。 ### 1. jQuery...

    Jquery学习笔记分享

    **jQuery学习笔记分享** 在Web开发中,jQuery是一个非常重要的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章:...

    圣思源的jquery学习笔记

    《圣思源jQuery学习笔记详解》 jQuery,作为一款强大的JavaScript库,自2006年发布以来,因其简洁易用的API和丰富的插件生态,迅速成为了前端开发者的重要工具。圣思源张龙老师的jQuery学习笔记,深入浅出地剖析了...

    锋利的jQuery学习笔记

    《锋利的jQuery学习笔记》是一份深入探讨jQuery框架的学习资料,主要针对想要掌握JavaScript库jQuery的开发者。jQuery是一款高效、简洁的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理...

    jQuery学习笔记

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记,以HTML页面的形式呈现,方便阅读和...

    jquery学习笔记

    《jQuery学习笔记详解》 jQuery,作为一款广泛应用于Web开发的JavaScript库,以其简洁的API、强大的功能和广泛的社区支持,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...

    jQuery学习笔记精心整理

    ### jQuery学习笔记精心整理 #### 一、什么是jQuery 1. **定义**: - **第三方**:jQuery是由第三方组织或个人编写的函数库,并非浏览器内置或开发者自定义的函数,因此使用前需从官方网站([www.jquery.com]...

Global site tag (gtag.js) - Google Analytics