jquery事件练习

最新推荐文章于 2022-04-07 14:54:26 发布
最新推荐文章于 2022-04-07 14:54:26 发布
阅读量619 收藏
点赞数
文章标签： jquery function button javascript input div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuluo727282752/article/details/7400310
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" language="JavaScript" src="../include/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" language="JavaScript">
			
			$(document).ready(function(){
				
				$("#btn0").click(function(){
					
					$("#toggl").toggle("slow");
					

				});
				
				$("#btn1").click(function(){
					
					$("#toggl").slideToggle("slow");
					
				});
				
				
				$("#btn2").click(function(){
					
					$("#toggl").fadeIn("slow");
					
				});

				$("#btn3").click(function(){
					
					$("#toggl").fadeOut("slow");
					
				});
				
				$("#btn4").hover(function(){
					
					$("#toggl").fadeOut("slow");
					
				},function(){
					
					$("#toggl").fadeIn("slow");
				});

				$("#btn5").toggle(function(){
					
					//使用toggle
					$("#toggl").toggle("slow");
					
				},function(){
					//滑动效果
					$("#toggl").slideToggle("slow");
					
				},function(){
					//淡出
					$("#toggl").fadeOut("slow");
									
				},function(){
					//淡入
					$("#toggl").fadeIn("slow");
					
				});
				

			});
			
			
		</script>
		
		
	</head>
	<body>
		
		<div id="toggl" style="width:100px; height:80px; background-color:#95b3d7"></div>
		
		<input type="button" id="btn0" value="显示/隐藏div">
		
		<input type="button" id="btn1" value="div滑动效果">
		
		<input type="button" id="btn2" value="div淡入">
		<input type="button" id="btn3" value="div淡出">
		
		<input type="button" id="btn4" value="使用hover事件执行淡入淡出">
		
		<input type="button" id="btn5" value="toggle效果集合">
		
	</body>
</html>


Sword_A
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
JQuery使用练习
09-26
本练习旨在帮助你熟悉并掌握jQuery的基本用法，包括选择器、事件、文档处理、函数以及属性的运用。 首先，让我们详细探讨jQuery的选择器。jQuery的选择器基于CSS选择器，允许你高效地选取DOM元素。例如，`$("#id")`...
JQuery 事件相关内容练习1
汉南最後の読書人
11-10 846
1.$(document).ready()和window.onload方法的比较 $()和window.onload区别 /* window.onload=function(){ alert($("img").width()); } */ /* $(function(){ alert($("img").width()); }); */ /*
JQuery 事件相关内容练习2
汉南最後の読書人
11-10 406
1.事件冒泡行为 toggle事件 span{ width:200px; margin:10px; background:#666; cursor:pointer; color:#FFF; display:block; } p{ width:200px; background:#0FF; c
jquery事件学习练习（CRUD and 滚动公告）
学徒ZSX
01-16 655
learn_jQueryDemo2--查看删除修改-CRUD #table_crud { border: 1px solid #abcdef; border-collapse: collapse; width: 700px; } tr {height: 40px;} th {border: 1px solid #abcdef;} td {border: 1
js-day06-jQuery事件和DOM操作-练习题
01-19 211
jQuery事件绑定 js中绑定事件,三种方式: 方式1: 直接在元素上,增加onXxx事件属性. 　　<button onclick="alert(1);">点我</button>方式2:获取元素对象,再设置onXxx事件属性. 　　<button id="btn">点我</button&...
32-jQuery事件委托练习
yangyalun的博客
10-24 151
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;32-jQuery事件委托练习&lt;/title&gt; &lt;style&gt; *{
JQuery综合练习.docx
06-11
在给定的文档中，我们看到了一个关于jQuery的综合练习，主要涵盖了两个核心知识点：全选与反选复选框的操作以及下拉框选项的移动功能。以下是这两个知识点的详细说明： 1. **全选与反选复选框操作**： 这个练习...
JQuery综合练习2.docx
06-11
在本篇关于jQuery的综合练习中...这些练习展示了jQuery在网页交互和元素操作方面的强大功能，包括事件处理、DOM操作、样式修改以及数据获取等。理解并掌握这些基础，将有助于开发者更高效地编写和维护JavaScript代码。
前端jquery练习网页
10-12
这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品，虽然存在一些bug，但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中，`js` 文件夹可能包含你编写的所有 JavaScript 代码，这些代码...
北大青鸟accp7.0 使用jQuery快速高效制作网页交互特效课件+上级+课后作业答案
05-26
北大青鸟accp7.0 使用jQuery快速高效制作网页交互特效课件+上级+课后作业答案
jQuery bind事件练习及tab标签切换的实现
前端岚枫
08-31 2326
1.bind事件    jQuery部分代码： $(document).ready(function(){     $("input[type=button]").bind({         click:function(){$("p").slideToggle();},         mouseover:function(){$("body").css("background-
jQuery中的事件委托练习（一）
徐磊
11-24 558
1.事件委托的基本结构 $(function(){ // 事件委托： // 请别人帮忙做事，然后将做完的结果反馈给我们 $("button").click(function(){ $("ul").append("&lt;li&gt;我是新增的li&lt;/li&gt;"); }); // 在jq中，直接遍历，给所有li添加点击事件 /*$(...
jQuery-事件委托案例练习
柒青衿的博客
01-08 673
这是一个按钮控制文字大小的案例，使用了事件委托机制。 jQuery Button and Animate *{ margin:0; padding:0; } .maindiv{ font-family: "Microsoft YaHei", "微软雅黑"; width:600px; margin:0 auto; color: #
JQuery事件+事例
泠泠似水
02-26 1280
1.鼠标事件jQuery鼠标事件之click与dblclick事件用交互操作中，最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dblclick方法用于监听用户双击操作。这两个方法的用法是类似的，下面以click()事件为例使用上非常简单：方法一：$ele.click()绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少
jQuery初识 - jQuery案例练习
码小余の博客
06-17 1771
jQuery事件委托 什么是事件委托 ​ 请别人帮忙做事情，然后将做完的结果反馈给我们 在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有找到的元素添加事件。 jQuery移入移出事件 mouseover/mouseout事件，子元素被移入移出也会触发父元素的事件 mouseenter/mouserleave事件，子元素被移入移出不会触发父元素的事件（推荐使用） 电影排行榜案例 <!-- * @Author: 码小余
jquery 学习笔记及小练习
qq_45309319的博客
04-07 676
jQuery 1.简介 JQuery是js函数库 本质就是js库 jQuery总共有三个版本 1版本兼容性最好 2 版本3版本轻量化 jquery 核心函数 <!-- 1. 作为一般函数调用: $(param) 1). 参数为函数 : 当DOM加载完成后，执行此回调函数 2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象 3). 参数为DOM对象: 将dom对象封装成jQuery对象 4). 参数为html标签字符串 (用得少): 创建标签对象并
JQuery事件编程
龙城飞马将的博客
07-28 635
作者：西岭老湿 事件编程 1 .页面载入事件 05.PHP： header('Content-type:image/png'); sleep(3); $img = imagecreatetruecolor(100,100); imagepng($img); 05-1.html &amp;lt;body&amp;gt; &amp;lt;img src=&quot;05.php&quot; alt=&quot;&quot;&a
(11)JQuery - 练习题
魚
12-10 248
练习 1. 给网页中所有的 &lt; p &gt; 元素添加 onclick 事件 2. 使第一个tab特定的表格隔行变色 3. 对多选框进行操作, 输出选中的多选框的个数 初始代码 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; &lt...
jquery案例练习
最新发布
06-20
以下是一些常见的jQuery案例练习： 1. **选择器练习**：使用`$("#id")`或`$(".class")`选择HTML元素，如获取或修改特定ID或类名的元素内容。 ```javascript // 获取id为"example"的元素 var element = $("#example...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值