jQuery事件

最新推荐文章于 2024-03-20 08:53:45 发布

执~漠

最新推荐文章于 2024-03-20 08:53:45 发布

阅读量153

点赞数 1

分类专栏： jQuery js html 文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_44116816/article/details/105681926

版权

js 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：陈锦通
撰写时间：2020年4月22日

页面载入事件$(document).ready() 方法
这个方法纯粹是对向window.load事件注册的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而百分之99.99的JavaScript函数都需要在那一刻执行。

注意：可以在同一个页面中无限次地使用$(document).ready()事件。

例如：$(document).ready(function () {
   // 在这里写你的代码...
});
简写：$(function () {
   // 在这里写你的代码...
})

jq鼠标事件
2.1 click() 鼠标单击事件等于js onclick
例如：$(".div1").click(function () {alert("这是一个click单击事件");})；
2.2 dblclick() 鼠标双击事件等于js ondblclick
例如：$(".div1").dblclick(function(){alert("这是一个dblclick双击事件");});
2.3.mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件
例如：$(".div1").mousedown(function(){alert("这是一个mousedown鼠标指针移动到元素上方，并按下鼠标按键触发事件");})
2.4 mouseup() 当在元素上放松鼠标按钮时，会发生 mouseup 事件。
例如：$(".div1").mouseup(function(){alert("这是一个mouseup鼠标指针在元素上放松鼠标按钮时触发事件");});
2.5 mouseenter() 当鼠标指针穿过元素时，会发生mouseenter事件。该事件大多数时候会与mouseleave 事件一起使用。
例如：$(".div1").mouseenter(function () {alert("这是一个mouseup鼠标指针在元素上放松鼠标按钮时触发事件");});
2.6 mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用
例如：$(".div1").mouseleave(function () {console.log("mouseenter 鼠标移出事件");})
2.7 mouseover() 当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用
例如：$(".div1").mouseover(function () {console.log("mouseover 移入事件");})
2.8 mouseout() 当鼠标指针从元素上移开时，发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用
例如：$(".div1").mouseout(function () {console.log("mouseout 鼠标移出事件");})
2.9 mousemove() 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标
例如：$(".div1").mousemove(function () {console.log("mousemove 鼠标移动事件");})
2.10 hover([over,]out)事件是一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测
参数说明： over:鼠标移到元素上要触发的函数out:鼠标移出元素要触发的函数

例如：$(".div1").hover(function () {
        $(this).addClass("bgPink");
    }, function () {
        $(this).removeClass("bgPink");
    });

jQuery中的表单事件
3.1 focus() 事件是当元素获得焦点时，触发focus事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数
3.2 blur() 事件是当元素失去焦点时触发 blur 事件。这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

例如：$(".wowp input").focus(function () {
		console.log("获取焦点了");
	})
	$(".wowp input").blur(function () {
		console.log("失去焦点了");
	})

3.3 focusin() 事件当元素获得焦点时，触发 focusin 事件。focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
3.4 focusout() 事件当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况

例如：$(".wowp").focusin(function () {$(this).addClass("bgPink");});
    	  $(".wowp").focusout(function () {$(this).removeClass("bgPink");});

3.5 change()事件
元素，和元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作
3.5.1 对input元素的作用是监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
3.5.2对select元素的作用是对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
3.5.3对textarea元素的作用是多行文本输入框，当有改变时，失去焦点后触发change事件

代码：
<html>
	<style>
		.bgPink{
			width:300px;
			height:300px;
			background-color: #987654;
		}
</style>
<body>
	<div class="wowp">
        <input type="text" class="form-control" />
    </div>
	<select name="" id="rop">
		<option value="0">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
	</select>
	<textarea name="" id="rty" cols="30" rows="10"></textarea>
	<div class="div2">78878</div>
	<script>
	$(".wowp input").change(function(){
		$(".div2").addClass("bgPink");
	})
	$("#rop").change(function(){
		$(".div2").addClass("bgPink");
	})
	$("#rty").change(function(){
		$(".div2").addClass("bgPink");
	})
	</script>
	</body>
</html>

3.6 select()事件是当textarea或文本类型的input元素中的文本被选择时，会发生 select 事件。
例如：$(".wowp input").select(function () {console.log(231);});
3.7 submit()事件是提交表单是一个最常见的业务需求。注意：form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为，jQuery中可以直接在函数中最后结尾return false即可
例如: $("form").submit( function () {return false; } ); //阻止表单提交