jQuery选择器和事件

发布时间：2020-07-13 06:39:22 作者：yeleven
来源：网络阅读：294

一、jQuery选择器

<!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选择器和事件

相关阅读