jQuery事件

一、鼠标悬停与移开事件
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
    评论
10-25 1万+
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值