Jquery基础9_事件

最新推荐文章于 2023-03-25 17:06:32 发布

橘九。

最新推荐文章于 2023-03-25 17:06:32 发布

阅读量107

点赞数

分类专栏： Jquery基础

本文链接：https://blog.csdn.net/qq_34400745/article/details/102800923

版权

Jquery基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

什么是事件？

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

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

实例：

在元素上移动鼠标。
选取单选按钮
点击元素

常见 DOM 事件

click()       // 鼠标单击
dblclick()  //当双击元素时，会发生 dblclick 事件。
change()      // 元素改变
mouseover()   // 鼠标进入（进入子元素也触发）
mouseout()    // 鼠标离开（离开子元素也触发）
mouseenter()  // 鼠标进入（进入子元素不触发）
mouseleave()  // 鼠标离开（离开子元素不触发）
hover()       // hover()方法用于模拟光标悬停事件。
ready()       // DOM加载完成
resize()      // 浏览器窗口的大小发生改变
scroll()      // 滚动条的位置发生变化
submit()      // 用户递交表单
focus()  //当元素获得焦点时，发生 focus 事件。
blur()   //当元素失去焦点时，发生 blur 事件。

jQuery 事件方法语法

举例点击事件触发：

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

举例：

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

$("p").click(function(){
 // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)
  $(this).hide();
});

jquery链式调用：

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写

$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();

hover()

hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

举例说明：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
	</head>
	<body>
		<div id="">
			<ul>
				<li>1111</li>
				<li>2222</li>
				<li>3333</li>
			</ul>
			
		</div>
						
		</form>
		<script type="text/javascript">			
		
			$("li").click(function(){
				
				$(this).siblings().css("color","red");
			})
		</script>
	
	</body>
</html>

橘九。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery基础9_事件

什么是事件？页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例：在元素上移动鼠标。选取单选按钮点击元素常见 DOM 事件click() // 鼠标单击dblclick() //当双击元素时，会发生 dblclick 事件。change() // 元素改变mouseover() // 鼠标进入（进入...
复制链接

扫一扫

专栏目录