jQuery 02 事件

最新推荐文章于 2024-04-04 00:19:46 发布

今天我牙疼

最新推荐文章于 2024-04-04 00:19:46 发布

阅读量144

点赞数

分类专栏： jQuery 文章标签： javascript

本文链接：https://blog.csdn.net/qq_40924514/article/details/109346844

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是事件

事件是指页面对不同访问者的响应叫做事件
事件处理 程序是指事件响应时调用的方法

jQuery事件语法

$("p").click(function(){ //响应的代码 });

jQuery常见的事件

//click()：单击选中元素触发事件
//dblclick()：双击选中元素触发事件

<script>
	$(document).ready(function(){
		$("p").click(function(){
			$(this).hide();
		});
	});
</script>
</head>
<body>

<p>点击消失</p>
<p>点击消失</p>

//mouseenter():鼠标移入触发事件
//mouseleave():鼠标离开触发事件
//mousedowm():鼠标按下触发事件
//mouseup(): 鼠标松开触发事件
<script>
	$(document).ready(function(){
		$("#p1").mouseenter(function(){
			alert('移入事件')
		});
	});
</script>
</head>
<body>

<p id="p1">移入事件弹窗</p>

//hover：移入+移出
<script>
	$(document).ready(function(){
		$("#p1").hover(
			function(){
				alert("鼠标移入");
			},
			function(){
				alert("鼠标离开");
			}
		);
	});
</script>
</head>
<body>

<p id="p1">hover事件</p>

//focus(): 获得焦点
//blu(): 失去焦点
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

今天我牙疼

关注

0
点赞
踩
0

收藏

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

什么是事件事件是指页面对不同访问者的响应叫做事件事件处理程序是指事件响应时调用的方法jQuery事件语法$("p").click(function(){ //响应的代码 });jQuery常见的事件//click()：单击选中元素触发事件//dblclick()：双击选中元素触发事件<script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); });
复制链接

扫一扫

专栏目录