jQuery动画/ jQuery循环/ 元素绝对位置/ 鼠标移入移出/ input框事件

最新推荐文章于 2022-11-28 15:15:21 发布
最新推荐文章于 2022-11-28 15:15:21 发布
阅读量942 收藏 1
点赞数
分类专栏： CSS 文章标签： jQuery动画/ jQuery循环/ 元素绝对位置/ 鼠标移入移出/
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43152725/article/details/86483269
版权

jQuery动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery动画</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: gold;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			/*
			参数：
			1、什么属性做动画，属性设置{param1: value1, param2: value2}
			2、动画执行的时间，单位毫秒
			3、动画曲线：
				swing（默认值）开始和结束慢，中间快
				linear匀速
				可省略不写
			4、回调函数，动画完成之后要做的事情，可无限嵌套
			*/
			$('#div1').animate({
				width: 200,
				height: 200},
				1000,
				function(){
					// alert('动画完了！');
					$(this).animate(
						{marginLeft: 500},
						1000,
						function(){
							$(this).animate(
								{marginTop: 500},
								1000
							)
						}
					)
				}
			);
		})
	</script>
</head>
<body>
	<div id="div1" class="box"></div>
</body>
</html>

jQuery循环

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery循环</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// //给全部的li设置内容和样式
			// $('.list li').html('111');
			// $('.list li').css({background:'gold'});

			//第一个参数index是索引值
			$('.list li').each(function(index) {
				// alert(index);//弹出索引值
				
				//$(this)是每一个li
				$(this).html(index);
			});
		})
	</script>
</head>
<body>
	<ul class="list">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>

元素绝对位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素绝对位置</title>
	<style type="text/css">
		.con{
			width: 600px;
			height: 600px;
			margin: 50px auto 0;
		}
		.box{
			width: 100px;
			height: 100px;
			background-color: gold;
			margin-bottom: 10px;
		}
		.pos{
			margin-left: 500px;
		}
		.pop{
			width: 100px;
			height: 100px;
			background-color: red;
			position: fixed;
			left:0;
			top: 0;
			display: none;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $pos = $('.pos');
			//offset()是获取相对于页面左上角的绝对位置，即使外面再包一层con居中层，也不影响效果
			var pos = $pos.offset();
			// console.log(pos);
			// alert(pos.left + "," + pos.top);
			var w = $pos.outerWidth();
			var h = $pos.outerHeight();
			// alert(w);

			$('.pop').css({left:pos.left + w,top:pos.top});

			$pos.mouseover(function() {
				$('.pop').show();
			});
			$pos.mouseout(function() {
				$('.pop').hide();
			});
		})
	</script>
</head>
<body>
	<div class="con">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box pos"></div>
		<div class="box"></div>
	</div>

	<div class="pop">提示信息！</div>
</body>
</html>

鼠标移入移出

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标移入移出</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: gold;
			margin: 100px auto 0;
		}
		.son{
			width: 100px;
			height: 100px;
			background-color: green;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			/*进入子元素也触发*/
			/*$('#div1').mouseover(function() {
				$(this).animate({marginTop: 50});//.stop()
			});
			$('#div1').mouseout(function() {
				$(this).animate({marginTop: 100});//.stop()
			});*/

			/*进入子元素不触发*/
			/*$('#div1').mouseenter(function() {
				$(this).stop().animate({marginTop: 50});//
			});
			$('#div1').mouseleave(function() {
				$(this).stop().animate({marginTop: 100});//
			});*/

			/*通过hover（mouseenter+mouseleave）实现简写*/
			$('#div1').hover(function() {
				$(this).stop().animate({marginTop: 50});
			}, function() {
				$(this).stop().animate({marginTop: 100});
			});
		})
	</script>
</head>
<body>
	<div id="div1" class="box">
		<div class="son"></div>
	</div>
</body>
</html>

input框事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>input框事件</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）
			// $('#txt01').focus();

			// //文本框获取焦点的时候（有光标闪烁的时候）
			// $('#txt01').focus(function() {
			// 	alert('focus');
			// });

			// //失去焦点的时候（光标离开的时候）
			// $('#txt01').blur(function() {
			// 	alert('blur');
			// });

			// //输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在
			// $('#txt01').change(function() {
			// 	alert('change');
			// });

			//松开键盘按键就触发
			$('#txt01').keyup(function() {
				alert('keyup');
			});
		})
	</script>
</head>
<body>
	<input type="text" id="txt01">
</body>
</html>
YRyr.*
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现鼠标的移入移出效果
04-13 1064
利用jQuery的hover方法实现鼠标的移入移出效果，代码如下所示： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script src="https://apps.bdimg.com/libs/jquery/2....
jquery 鼠标移入、元素上移动、移出（悬浮详情）
PrimaryColor
09-22 803
<!--悬浮详情--> <div class="suspension_div" style='z-index:98;display:none;padding:10px;position: absolute;left:1px;top:1px;background:white;border:1px solid #888;'> <div>详情</div> </div> /*移入移出*/ $('body').on('mo.
jQuery实现鼠标的移入移出
刘浩宇的博客
07-04 5371
.classre-box td.apply-class-hover .ye-tit { background: #de763a !important; } .classre-box td.apply-class-hover .classbutton { border: 3px solid #de763a; color: #de763a; } // 报名班型鼠标移入移出事件 $('.classre-box td').hover( function () {
通过jquery实现鼠标移入移出效果、jQuery中的动画隐藏、显示效果实现
Java开发，人工智能，边缘计算，致力于掌握前沿技术
07-08 6106
通过jquery实现鼠标移入移出效果 鼠标移入用mouseover方法 鼠标移出用mouseout方法 但是，jquery给我们提供了一个复合事件替换mouseover和mouseout 如下所示： <!-- jquery引入到这个jsp里面 --> <script type="text/javascript" src="js/jquery-1.12.4.js">&lt...
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
12-09
代码如下:<input value=”请输入用户名” type=”text”> <input value=”请输入密码” type=”text”> <input value=”提交” type=”submit”> [removed] $(function(){ //输入框中文字颜色控制 $(“input:not(:last)”).css(“color”,”#999″); }); //用户名框鼠标焦点移进，文字消失 $(“input:first”).click(function () { var check1 = $(this).val(); if (check1 == this.defaultV
使用jquery中的鼠标移入移出会作用到子元素身上的问题
qq_44161722的博客
11-28 551
今天在使用jquery给元素添加鼠标移入移出事件时，发现当鼠标移动到该元素的子元素上时，也会触发一次改事件，查找了一下解决方法，特此记录。参考：https://blog.csdn.net/qq_44782585/article/details/109486300。还可以加入stop事件。
元素绝对位置和鼠标移入移出和 input框事件
热门推荐
peichaohang的博客
01-14 1万+
元素绝对位置 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;元素绝对位置&amp;lt;/title&a
jQuery中的事件与动画
yananye的博客
02-24 669
jQuery中的事件 在jQuery中事件总共分为两大类；基础事件和复合事件。jQuery中的简单事件，与javaScript中的事件几乎一样，都含有鼠标事件，键盘事件，裁件事件等，只是其对应的方法名称有略微不同，复合事件则是截取组合了用户操作，并且以多个函数作为响应而自定义的处理程序。 基础事件 在javaScript中，常用的基础事件有鼠标事件，键盘事件，window事件，表单事件。事件绑定和处理函数的语法格式如下。 事件名="函数名()"; 或者 DOM对象.事件名=函数； 在事件绑定处理函数后，
jQuery
weixin_45756606的博客
06-29 516
​ JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。​ 常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。​ jQuery总体概况如下 :jQu
JQuery学习笔记
kianagrow的博客
05-15 1166
jQuery是一个快速、简洁的JavaScript框架，封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery实现鼠标划过事件动画
07-10
jquery代码，利用jquery的mouseenter等实现鼠标经过划过事件
JavaWeb入门-JQuery
AyinMars的博客
11-02 449
JQuery jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是**“write Less，Do More”**，即倡导写更少的代码，做更多的事情。 它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接
关于jQuery
m0_61073208的博客
08-23 481
1、jQuery简介 1.1 JavaScript库： JavaScript库，是一个封装好的特定的集合（方法和函数）。 1.2 jQuery 的概念： jQuery 是一个快速、简洁的 JavaScript 库，即倡导写更少的代码，做更多的事情。 jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。 学习jQuery 就是学习调用这些函数（方法），jQuery 出现的目的是加快前端开发速度，可以非常方便的调用和使用它，从而提高开发效率。
jQuery常用功能，局部刷新，移入移出动画
xiaobai_IT_learn的博客
09-12 474
1.jquery想局部刷新，先$(".movie-form").html("");然后拼接代码 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象（用于框架） opener.location.reload()刷新父窗口对象（用于单开窗口） top.location.reload()刷新最顶端对象（用于多开窗口） ...
图片滑入页面html,jquery鼠标移入图片左滑动效果
weixin_30569443的博客
06-03 709
在PC端网页应用中，鼠标操作是最为常见和频繁的操作，在用户移动鼠标浏览页面的时候，一些交互特效的提醒会增强用户体验度，也可让用户感觉页面在和他“交流”，从而增加用户在页面的逗留时间，以及增加深层次访问的可能性。实现思路：1、给#tm鼠标加移入事件，鼠标移到#tm, .tu向左移动离左边只有10px 。快速来回滑动有一个动画(1000毫秒)还没结束再来回切换会有 动画叠加问题 解决方法 .s...
【CSS】input回车抖动效果、div 3d盒子鼠标移入转动效果（vue3）
随便写写
11-11 495
效果 - 代码 <script setup> import { ref } from 'vue' const input = ref('') // 是否抖动 const dong = ref(false) // 回车触发 const carriageReturn = () => { dong.value = true setTimeout(() => (dong.value = false), 800) } </script> <template&g.
jQuery mouseover与mouseenter,mouseout与mouseleave的区别
weixin_30657999的博客
09-09 358
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。 mouseout与mouseleave不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 转载于:https://www...
jQuery 绑定3种鼠标事件 click(鼠标点击)，mouseover(鼠标移入)，mouseout(鼠标移开)
旭东怪的博客
09-01 6127
1 click() 说明：鼠标点击时触发click事件。 语法： $(selector).click(function1); 实例： 文本框绑定click事件。 $(function(){ $("input[type=text]").each(function(){ $(this).click(function(){ alert("text click"); }); }); }); 2 mouseover() 说明：当
jquery鼠标移入移出事件
最新发布
04-17
jQuery的鼠标移入移出事件可以使用.hover()函数来绑定。它有两个回调函数，第一个函数会在鼠标移入目标元素时执行，第二个函数则在鼠标移出元素后执行。例如，将一个元素的背景颜色在鼠标移到上面时改变，移开时恢复...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值