jQuery事件

最新推荐文章于 2023-01-07 11:07:03 发布

扰乱浮尘

最新推荐文章于 2023-01-07 11:07:03 发布

阅读量77

点赞数

分类专栏： js+html 文章标签：前端

本文链接：https://blog.csdn.net/q_2540638774/article/details/103383295

版权

js+html 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

一、鼠标悬停与移开事件
mouseover：鼠标悬停事件
mouseout：鼠标移开事件
css样式：

<style type="text/css">
			li{
				list-style: none;
				float: left;
				margin: 10px;
			}
			
			.show{
				background-color: aqua;
			}
		</style>

js代码：

<script type="text/javascript">
			$(function(){
				$("li").mouseover(function(){
					$(this).addClass("show");//鼠标悬停添加一个class属性样式
				});
				$("li").mouseout(function(){
					$(this).removeClass();//鼠标移除，删除class属性样式
				});
			});
		</script>

<body>
		<ul>
			<li>首页</li>
			<li>电子商城</li>
			<li>商品促销</li>
			<li>易购团</li>
		</ul>
	</body>

二、输入框按键事件及焦点事件
1、输入框按键事件
keydown():按下
keyup():抬起
js代码：

<script type="text/javascript">
	//按键按下，抬起事件
			$(function(){
				$("[type=password]").keydown(function(){
					$("span").append("keydown");
				}).keyup(function(){
					$("span").append("keyup");
				}).keypress(function(){
					$("span").append("keypress");
				});
				
				$(document).keydown(function(event){
					if(event.keyCode == "13"){
						alert("确定要提交吗？");
					}
				});//当按下enter键时，弹框提示
		</script>

HTML代码：

<body>
		用户名：
		<input type="text" name="userName" /><br/>
		密码：
		<input type="password" name="pwd" /><br/>
		<input type="button" value="提交" />
		<span></span>
	</body>

2、焦点事件
focus()：获取焦点
blur()：失去焦点
js代码：

<script type="text/javascript">
				$("[type=password]").focus(function(){
					$(this).css("background-color","#00FFFF");
				});
				$("[type=password]").blur(function(){
					$(this).css("background-color","white");
				});
			});
		</script>

html代码：

<body>
	密码：
	<input type="password" name="pwd" /><br/>
</body>

三、点击事件
on()：设置click点击事件
js代码：

<script type="text/javascript">
			$(function() {
				$("[type=button]").on("click", function() {
					$("p").css("background-color", "aqua");
				});
			});
		</script>

html代码：

<body>
	<p>mncidosncsiodndcvods</p>
	<input type="button" value="点击" />
</body>

四、列表悬停下拉事件
hover()：第一个function(){}鼠标悬停，第二个function(){}鼠标移开

css样式：

<style type="text/css">
			li{
				list-style: none;
				float: left;
				margin: 10px;
			}
			
			.count{
				list-style: none;
				float: none;
				display: none;
				margin-left: -30px;
			}
		</style>

js代码：

<script type="text/javascript">
		$(function(){
			$("#dian").hover(
				function(){
					$(".count").css("display", "block");
				},
				function(){
					$(".count").css("display", "none");
				});
		});
		</script>

HTML代码：

<body>
		<ul>
			<li>首页</li>
			<li id="dian">
				电子商城
				<ul>
					<li class="count">标题1</li>
					<li class="count">标题2</li>
					<li class="count">标题3</li>
				</ul>
			</li>
			<li>商品促销</li>
			<li>易购团</li>
		</ul>
	</body>

扰乱浮尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件

一、鼠标悬停与移开事件mouseover：鼠标悬停事件mouseout：鼠标移开事件css样式：<style type="text/css"> li{ list-style: none; float: left; margin: 10px; } .show{ background-color: aqua; } ...
复制链接

扫一扫

专栏目录