jQuery

最新推荐文章于 2024-11-05 15:26:40 发布

m0_56381561

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量57

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_56381561/article/details/126314388

版权

jQuery事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常见的DOM事件有很多:

事件的语法

页面中指定一个点击事件：

$("p").click(); 
$("p").click(function(){   // 事件触发后执行的代码!!   });

常用事件

click() -- 单击事件
$("p").click( function(){ $(this).hide(); });
dblclick() -- 双击事件
$("p").dblclick(function(){ $(this).hide(); });
mouseenter() -- 鼠标指针穿过元素
$("#p1").mouseenter(function(){ alert('鼠标移到了 id="p1" 的元素上!'); });
mouseleave() -- 鼠标指针离开元素
$("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); });
hover() -- 光标悬停事件
$("#p1").hover(
function(){ alert("你进入了 p1!"); }, //当鼠标移动到元素上时触发
function(){ alert("拜拜! 现在你离开了 p1!"); //当鼠标移出这个元素时触发
});
可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){ $("p").hide(); });
$("#show").click(function(){ $("p").show(); });

事件练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>示例</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(function(){
				// 鼠标指针穿过元素会触发
				$("button").mouseenter(function(){
					alert("您经过了button");
				})
				// 鼠标指针离开元素会触发
				$("div").mouseover(function(){
					alert("您离开了div..");
				})
			})
		</script>
	</head>
	<body>
		<button ondblclick="alert(1);">点我</button>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
	</body>
</html>

class选择器练习

需求:点击按钮,隐藏指定class的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>示例</title> 
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>