第一部分： 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<script src="jquery-2.2.3.min.js"></script>
<script src="Selector.js"></script>
</head>
<body>
<P>P1</P>
<P id="pid">P2</P>
<P class="pclass">P3</P>
<button>click me</button>
</body>
</html>选择器js文件：
$(document).ready(function(){
$("button").click(function(){
// 此时,修改的是所有的P标签元素
$("p").text("p元素被修改了");
// 此时,修改id是pid的元素内容
// 注意：使用id的需要加“#”来标示
$("#pid").text("id是pid的元素被修改了");
// 此时,修改类名为pclass的元素内容
$(".pclass").text("类名是pclass的元素被修改了");
}) ;
});第二部分：简单事件
<body>
<!--添加一个按钮-->
<button>按钮</button>
</body>js文件中：
$(document).ready(function(){
// 单次点击事件
// $("button").click(function(){
// $(this).hide();
// })
// 双击事件
//$("button").dblclick(function(){
// $(this).hide();
//})
// 当鼠标移动到按钮上
//$("button").mouseenter(function(){
// $(this).hide();
//})
// 当鼠标移开
$("button").mouseleave(function(){
$(this).hide();
})
});第三部分：事件的响应、冒泡与阻止冒泡
主要表现在网页内容的打印上：
<body>
<div id="div" style="width: 300px;height: 300px;background-color: aqua">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
</body>JS文件：
$(document).ready(function(){
$("body").on("click",bodyHandler);
$("div").on("click",divHandler1);
$("div").on("click",divHandler2);
});
function bodyHandler(event){
console(event);
}
function divHandler1(event){
console(event);
// 阻止了父级的事件的冒泡,使事件不在往下一级运行
//event.stopPropagation();
event.stopImmediatePropagation(); // 如果这里使用了这个,那么下面的将不在执行,而且body的也不再执行
}
function divHandler2(event){
console(event);
vent.stopPropagation();
// 阻止了之后所有事件的冒泡
//event.stopImmediatePropagation();
}
// 这么写的作用,是为了当程序以为打印而出错的时候,可以快速检查程序
function conlog(event){
console.log(event);
}
第四部分：事件的绑定与解绑：
在html5文件中创建一个按钮：
<button id="clickMeButton">click me</button>
然后在js文件中对其进行操作：
$(document).ready(function(){
//$("#clickMeButton").click(function(){
// alert("hello")
//});
// 在官方文档上有说明,在1.7版本以后,可以使用on/off来代替bind/unbind来进行事件的绑定和解绑,而且推荐如此使用
$("#clickMeButton").on("click",clickHandler1);
$("#clickMeButton").on("click",clickHandler2);
// 这样会解除所有的绑定事件,如果想要解除某个已知的事件,就像上面一样,将事件名传进来
$("#clickMeButton").off("click");
});
function clickHandler1(e){
console.log("clickHandler1");
}
function clickHandler2(e){
console.log("clickHandler2");
}
第五部分：自定义事件
同上，先创建一个按钮，然后在js文件中：
$(document).ready(function(){
// 自定义事件
$("#clickMeBtn").click(function(){
var e = jQuery.Event("MyEvent");
$("#clickMeBtn").trigger(e);
});
$("#clickMeBtn").on("MyEvent",function(event){
console.log(event);
});
});
// 可以发现,这样写的时候,每次都要写$("#clickMeBtn"),会显得很麻烦,这时候可以定义一个对象将其替换:
// var clickMeBtn = $("#clickMeBtn");
时间： 2024-11-19 05:19:06