jQuery选择器和事件

一、jQuery选择器

创新互联公司长期为千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为察雅企业提供专业的成都做网站、成都网站制作，察雅网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.10.1.min.js"></script>
		<script src="Selector.js"></script>
	</head>
	<body>
		<p>p1</p>
		<p class="pclass">p2</p>
		<button>Click me</button>
	</body>
</html>

$(document).ready(function(){
	$("button").click(function(){
		$(".pclass").text("p元素被修改了");
	})
});

二、jQuery事件

1.jQuery事件：

常用事件方法

绑定事件

解除绑定事件

事件的目标

事件的冒泡

自定义事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.10.1.min.js"></script>
		<script src="EventMethod.js"></script>
	</head>
	<body>
		<button>Click me</button>
	</body>
</html>

$(document).ready(function(){
//	$("button").click(function(){
//	$("button").dblclick(function(){
//	$("button").mouseenter(function(){
	$("button").mouseleave(function(){
		$(this).hide();
	});
});

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.10.1.min.js"></script>
		<script src="bindEvent.js"></script>
	</head>
	<body>
		<button id="clickMeBtn">Click me</button>
	</body>
</html>

$(document).ready(function(){
//	$("#clickMeBtn").click(function(){
//		alert("hello");
//	});
//	$("#clickMeBtn").bind("click",clickHandler1);
//	$("#clickMeBtn").bind("click",clickHandler2);
//	$("#clickMeBtn").unbind("click",clickHandler1);
	
	$("#clickMeBtn").on("click",clickHandler1);
	$("#clickMeBtn").on("click",clickHandler2);
	$("#clickMeBtn").off("click",clickHandler1);
});

function clickHandler1(e){
	console.log("clickHandler1");
}

function clickHandler2(e){
	console.log("clickHandler2");
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.10.1.min.js"></script>
		<script src="EventTarget.js"></script>
	</head>
	<body>
		<div >
			<li>A</li>
			<li>B</li>
			<li>C</li>
			<li>D</li>
		</div>
	</body>
</html>

$(document).ready(function(){
	$("body").bind("click",bodyHandler);
	$("div").bind("click",divHandler1);
	$("div").bind("click",divHandler2);
});

function bodyHandler(event){
	console.log(event);
}

function divHandler1(event){
	console.log(event);
//	event.stopPropagation();
	event.stopImmediatePropagation();
}

function divHandler2(event){
	console.log(event);
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.10.1.min.js"></script>
		<script src="CustomEvent.js"></script>
	</head>
	<body>
		<button id="ClickMeBtn">Click Me</button>
	</body>
</html>


var ClickMeBtn;
$(document).ready(function(){
	ClickMeBtn = $("#ClickMeBtn");
	ClickMeBtn.click(function(){
		var e = jQuery.Event("MyEvent");
		ClickMeBtn.trigger(e);
	});
	
	ClickMeBtn.bind("MyEvent",function(event){
		console.log(event);
	});
});

网页名称：jQuery选择器和事件
当前地址：https://www.cdcxhl.com/article38/ijejsp.html

成都网站建设公司_创新互联，为您提供关键词优化、网站改版、服务器托管、品牌网站制作、网站营销、网站收录

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容