JQuery中的事件

最新推荐文章于 2023-01-07 11:07:03 发布
最新推荐文章于 2023-01-07 11:07:03 发布
阅读量156 收藏
点赞数
分类专栏： JQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34416191/article/details/52416360
版权

1、ready()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01_ready()方法.html</title>
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
   var startTime = new Date().getTime();
   $(document).ready(function(){
		test1();
  })
	
  function test1(){
      var endTime2  = new Date().getTime(); 
	  var a = endTime2 - startTime;
	  $("<div>jQuery的ready() : "+a+" ms</div>").appendTo("body");
  }

  function test2(){
       var endTime1  = new Date().getTime();
	   var b = endTime1 - startTime;
	   $("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("body");
  }
</script>
</head>
<body οnlοad="test2();">
	<img src="demo.jpg" style="width:200px;height:200px;"/>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>

2、事件绑定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>02_事件绑定.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
  	   <div id="panel">
			<input type="button" id="start" value="绑定事件">
			<input type="button" id="stop" value="解绑事件">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
  </body>
  <script language="JavaScript">
    //当鼠标单次点击h5标题时,显示答案;当鼠标双次点击h5标题时,隐藏答案
//	$("h5").click(function(){
//		if($("div[class=content]").is(":hidden")){
//			$("div[class=content]").show();
//		}else{
//			$("div[class=content]").hide();
//		}
//	})
	
//	//动态效果
//	$("#start").click(function(){
//		/*
//		 * 动态绑定点击事件:绑定单个事件
//		 * 	bind(type,data,fn)
//		 * 		* type:指定要绑定的事件名称
//		 * 		* data:(可选)作为event.data属性值传递给事件对象的额外数据对象
//		 * 		* fn:回调函数,function(){}
//		 */
//		$("h5").bind("click",function(){
//			if($("div[class=content]").is(":hidden")){
//				$("div[class=content]").show();
//			}else{
//				$("div[class=content]").hide();
//			}
//		});
//		
//	});
//	$("#stop").click(function(){
//		/*
//		 * 动态解绑定点击事件
//		 * 	unbind(type,fn)
//		 * 		* type:(可选)指定要解绑的事件名称
//		 * 		* fn:(可选)回调函数
//		 */
//		$("h5").unbind();
//	});
	
//	$("h5").mouseover(function(){
//		$("div[class=content]").show();
//	}).mouseout(function(){
//		$("div[class=content]").hide();
//	});
	
	//动态效果
	$("#start").click(function(){
		/*
		 * 绑定事件:绑定多个事件
		 * 	* 事件名称之间,用空格隔开
		 */
		$("h5").bind("mouseover mouseout",function(){
			if($("div[class=content]").is(":hidden")){
				$("div[class=content]").show();
			}else{
				$("div[class=content]").hide();
			}
		});
	});
	$("#stop").click(function(){
		/*
		 * unbind(type)
		 * 	* 默认为空时:解绑定所有事件
		 * 	* 指定单个事件:解绑指定的单个事件
		 * 	* 指定多个事件:解绑指定的多个事件
		 */
		$("h5").unbind("mouseover mouseout");
		
	});
	
  </script>
</html>

3、解除绑定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>03_解除绑定.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
  	   <input type="button" value="移除事件">
	   <div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
  </body>
  <script language="JavaScript">
    $(function(){
	    function event(){
		    var $content = $(this).next("div.content");
		    if($content.is(":visible")){
				$content.hide();
			}else{
				$content.show();
			}
		}
		$("#panel h5.head").bind("click",event)
		$("input").click(function(){
			$("#panel h5.head").unbind("click",event);
		})
	})
  </script>
</html>

4、hover（）方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>hover方法</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
  	   <div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
  </body>
  <script language="JavaScript">
    $(function(){
		$("h5").hover(function(){
			$("div[class=content]").show();
		},function(){
			$("div[class=content]").hide();
		});
	});
  </script>
</html>

5、toggle()方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>toggle方法</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
  	   <div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
		</div>
  </body>
  <script language="JavaScript">
	$(function(){
		$("h5").toggle(function(){
			$("h5").css("background","red");
		},function(){
			$("h5").css("background","blue");
		},function(){
			$("h5").css("background","yellow");
		},function(){
			$("h5").css("background","green");
		})
	})
  </script>
</html>




须佐能乎！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中事件与动画的总结分享
10-22
下面小编就为大家带来一篇jQuery中事件与动画的总结分享。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery常见事件
奶香刘沙包的博客
12-29 2726
JQuery几种常用事件 1.事件ready(fn) 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。通俗的来讲就是当页面加载完时就会执行此函数事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。 $(document).ready(function(){ // 在这里写你的代码... }); 使用 $(document).ready() 的简写(最常用)，同时内部的 jQ
jQuery事件
weixin_64037609的博客
09-20 1079
jQuery事件
jQuery事件对象
原地起飞
12-14 1202
一、jQuery 事件对象 jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。 语法： 演示代码 ： <body> <div></div> <script> $(function() { $(document).on("click", function() { consol...
jQuery中事件冒泡，默认行为，事件命名空间
热门推荐
CSDNzhaojiale的博客
06-18 1万+
事件 绑定事件 在jQuery中绑定事件有两种方式，一种是直接“点事件名”的方式，另一种是通过on函数 “点事件名”方式绑定: $("button").click(function () { console.log("hello 1"); }); “on函数绑定” $("button").on("click", function () { console.log("hello 2"); }); 既然有两种绑定方式，自然存在差异 对于差异性从两个方面分
JQuery中事件是否发生的判断
HuangQinJian
10-24 3146
$(document).ready(function () {     $("html").click(function (e) {         if (e.target == $("#id/.class")[0]) {             //函数体         }     }); }); target 属性规定哪个 DOM 元素触发了该事件。 $
jQuery中的常用事件
weixin_52841956的博客
02-21 2608
这里介绍一些jQuery常用的事件 jQuery事件是对JavaScript事件的封装，常用事件如：鼠标事件，键盘事件，表单事件，绑定事件，复合事件等等 1.鼠标事件 方法如下 click() :单击事件、触发或将函数绑定到指定元素的click事件 mouseover(): 触发或将函数绑定到指定元素的mouseover事件 mouseout() ：触发或将函数绑定到指定元素的mouseout的事件 代码示例： $(function () { $("input").clic
jQuery事件处理
shao_xuan_的博客
12-18 1758
jQuery事件处理前言事件绑定Query事件处理函数的好处反绑定事件事件触发器trigger触发事件triggerHandler触发事件快捷事件 Event Helpershover：模仿鼠标悬停jQuery中事件对象JQuery中事件对象操作 前言 jQuery在JavaScript基本的事件处理机制的基础上，对其进行了增强和扩展。jQuery不但提供了十分优雅的事件处理语法，而且也对事件处理机制本身作了很大的增强。 如在页面加载事件中，JavaScript使用window.onload()方法，它在页
jQuery 键盘事件
柯晓楠
11-28 6124
概念 个人理解： 在浏览器中，当用户操作键盘是，会触发键盘事件，触发的键盘事件主要有3种：keydown、keypress、keyup。 keypress() 事件函数 说明： 当键盘或按钮被按下时，发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。 如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。 ke
jquery事件委托
m0_54829066的博客
01-07 1829
jQuery 事件委托就是将事件监听器绑定到包含这些元素的父元素上，而不是将事件绑定到每个元素上。这样做的好处是，如果有新的子元素加入到父元素中，它们也能够触发绑定在父元素上的事件。这样，无论何时有新的按钮加入到文档中，它们都能够触发绑定在 body 元素上的点击事件。
jquery滚动事件
qq_45889379的博客
05-27 2362
1、获取和设置元素的尺寸 width()、height()    获取元素width和height innerWidth()、innerHeight()  包括padding的width和height outerWidth()、outerHeight()  包括padding和border的width和height outerWidth(true)、outerHeight(true)  包括padding和border以及margin的width和heigh
浅谈jQuery中的事件
10-24
本文给大家分享的是个人关于jQuery中事件的理解，主要向大家介绍了jQuery中事件的绑定，合成、以及事件冒泡、阻止事件等内容，希望大家能够喜欢。
jQuery中change事件用法实例
10-25
主要介绍了jQuery中change事件用法,以实例形式分析了在匹配元素焦点变化时触发事件使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery中事件的冒泡和默认行为
01-20
方式二：在事件回调函数的形参列表中添加event，然后在回调函数中调用event.stopPropagation();. 事件的默认行为 什么是事件的默认行为？ 就是像a标签那样，没有绑定事件，但只要点击了就会自动跳转的行为 像提交...
led-Opt.Bak
05-21
毕设&课设&项目&实训- 【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
【图像加密解密】基于matlab菲涅尔域双随机相位编码图像加密解密【含Matlab源码 4548期】.mp4
05-21
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
人工智能项目+OpenCV+实例分割+Cpp实现+模型部署+qt界面+完全可用版+C++
05-21
【内容概要】 本C++项目，集成OpenCV库与实例分割模型，实现了对图像中不同对象的精确分割。项目采用先进的实例分割算法，并以C++为核心开发语言，搭配Qt框架构建用户友好型图形界面。完成模型训练后，实现了模型的高效部署，用户可直接通过QT界面上传图片，以及选择模型地址，就可获取分割后的结果。 【适用人群】 适合C++开发者、CV工程师、机器学习研究者及对AI技术有浓厚兴趣的学生群体。 【使用场景】 广泛适用于工业检测、医学影像分析、农林业病虫害识别、智能监控系统及AR增强现实等领域。无论是学术研究中的数据预处理，还是企业级产品中的图像分析功能开发，该项目都能提供坚实的技术支撑。 【目标】 项目旨在通过实战演练，帮助开发者掌握从理论到实践的全过程：包括模型选择与优化、C++接口的OpenCV操作、Qt界面设计与交互逻辑实现，直至模型的高效部署与应用。最终目标是打造一个即拿即用的实例分割工具，促进AI技术在多领域的落地应用，同时提升开发者在复杂项目。
netty-resolver-4.1.22.Final.jar
05-21
javaEE javaweb常用jar包 ， 亲测可用，下载后导入到java工程中使用。
node-v4.8.6-headers.tar.xz
最新发布
05-21
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
jquery中有哪些基础事件
06-02
在jQuery中，常用的基础事件包括： 1. click：鼠标单击事件。 2. dblclick：鼠标双击事件。 3. mouseover：鼠标移入事件。 4. mouseout：鼠标移出事件。 5. mousedown：鼠标按下事件。 6. mouseup：鼠标松开事件。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值