jQuery选择器和事件-原创手记-慕课网

一、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 style="width: 300px;height: 300px;background-color: #009B86;">			<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);	});});