文章目录
1.元素绑定多个事件
三种方式:
- 一个一个绑定
- 链式编程
- bind()方法
demo:鼠标进入到按钮中背景颜色为红色,离开后颜色为默认,点击按钮,弹出对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素绑定多个事件</title>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
//鼠标进入到按钮中背景颜色为红色,离开后颜色为默认,点击按钮,弹出对话框
//鼠标进入
// $("#btn").mouseover(function () {
// $(this).css("backgroundColor","red");
// });
// //鼠标离开
// $("#btn").mouseout(function () {
// $(this).css("backgroundColor","");
// });
// $("#btn").click(function () {
// alert("弹框");
// });
//链式编程
// $("#btn").mouseover(function () {
// $(this).css("backgroundColor","red");
// }).mouseout(function () {
// $(this).css("backgroundColor","");
// }).click(function () {
// alert("弹框");
// });
//bind()方法可以为元素同时绑定多个事件
$("#btn").bind({"click":function () {
alert("弹框");
},"mouseover":function () {
$(this).css("backgroundColor","red");
},"mouseout":function () {
$(this).css("backgroundColor","");
}});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>
2.bind()的另一种写法及操作
$(function () {
//为按钮注册鼠标进入和离开的事件
var i = 0;
$("#btn").bind("mouseover mouseout",function () {
i++;
console.log(i);
});
});
3.on绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
background-color: green;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
//通过on为按钮绑定点击的事件,创建一个p标签加入到div中,通过on的方式为div中的p绑定点击事件
$(function () {
$("#btn").on("click",function () {
//创建p添加到div中
$("#dv").append($("<p>这是一个p</p>"));
//为div中的p标签绑定事件
/*
* on方法: 两个参数:1事件的名字,2事件处理函数
* on方法:三个参数: 1,事件的名字, 2.要绑定事件的元素--p,3事件处理函数
* on是父级元素调用,目的:为子级元素去绑定事件
*
* */
// $("#dv").on("click","p",function () {
// alert("我被点了");
// });
$("p").click(function () {
alert("hello");
});
});
});
</script>
<script>
/*
*
* 绑定事件:
* bind:
* 绑定多个事件
* 参数:{"事件的类型":事件处理函数,....}
* delegate
* 参数:父级元素.delegate("子级元素","事件类型",事件处理函数)
* on
* 参数:父级元素.on("事件类型","子级元素",事件处理函数);
*
*
* */
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>
4.demo动态添加表格
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="checkDemo.css"/>
<script src="../../jquery-1.12.2.js"></script>
<script>
$(function () {
//点击按钮,显示遮挡层和对话框
//添加数据
$("#j_btnAddData").click(function () {
$("#j_mask").css("display","block");
$("#j_formAdd").css("display","block");
});
//关闭
$("#j_hideFormAdd").click(function () {
$("#j_mask").css("display","none");
$("#j_formAdd").css("display","none");
});
//真正的添加数据
$("#j_btnAdd").click(function () {
//获取课程 j_txtLesson
var lesson=$("#j_txtLesson").val();
//获取学院 j_txtBelSch
var belSch=$("#j_txtBelSch").val();
//创建行--拼接字符串,添加到tbody中
$("<tr><td>"+lesson+"</td><td>"+belSch+"</td><td><a href='javascrip:;' class='get'>GET</a></td></tr>").appendTo($("#j_tb"));
//隐藏遮挡层和对话框
$("#j_mask").css("display","none");
$("#j_formAdd").css("display","none");
$("#j_txtLesson").val("");//清空课程的文本框
});
//获取tbody中应用.get类样式的元素,绑定点击事件
//如果元素是动态添加的,那么非常推荐用on的方式为动态添加的元素绑定事件
$("#j_tb").on("click",".get",function () {
$(this).parent().parent().remove();//删除tr
});
});
</script>
</head>
<body>
<!--初始化表格-->
<div class="wrap">
<div>
<input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
</div>
<table>
<thead>
<tr>
<th>课程名称</th>
<th>所属学院</th>
<th>已学会</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>JavaScript</td>
<td>XXX学院</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
<tr>
<td>css</td>
<td>YYY-学院</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
<tr>
<td>html</td>
<td>ZZZ-学院</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
<tr>
<td>jQuery</td>
<td>XXX-学院</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
</tbody>
</table>
</div>
<!--动态添加模态框-->
<div id="j_mask" class="mask"></div>
<div id="j_formAdd" class="form-add">
<div class="form-add-title">
<span>添加数据</span>
<div id="j_hideFormAdd">x</div>
</div>
<div class="form-item">
<label class="lb" for="j_txtLesson">课程名称:</label>
<input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
</div>
<div class="form-item">
<label class="lb" for="j_txtBelSch">所属学院:</label>
<input class="txt" type="text" id="j_txtBelSch" value="">
</div>
<div class="form-submit">
<input type="button" value="添加" id="j_btnAdd">
</div>
</div>
</body>
</html>
5.解绑事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 100px;
background-color: green;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<!--<script>
// 方法一:
$(function () {
//第一个按钮通过on的方式绑定点击事件
$("#btn1").on("click", function () {
alert("我被点了");
});
//第二个按钮把第一个按钮的点击事件解绑
$("#btn2").on("click", function () {
//off()参数:要解绑的事件的名字
$("#btn1").off("click");//解绑事件
});
});
</script>-->
<!--<script>
// 方法二
$(function () {
// 第一个按钮bind绑定事件
$("#btn1").bind("click",function () {
alert("我又被点了");
});
//第二个按钮unbind解绑事件
$("#btn2").bind("click",function () {
$("#btn1").unbind("click");//解绑事件的方法
});
});
</script>-->
<script>
// 方法三
$(function () {
//点击第一个按钮为div中p绑定点击事件
$("#btn1").click(function () {
$("#dv").delegate("p","click",function () {
alert("我被点了");
});
});
//点击第二个按钮为div中p解除绑定事件
$("#btn2").click(function () {
$("#dv").undelegate("p","click");//解绑
});
});
</script>
</head>
<body>
<input type="button" value="绑定事件" id="btn1"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv">
<p>这是div中的一个p标签</p>
</div>
</body>
</html>
6.事件解绑的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
background-color: green;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
//为div和p都绑定点击事件
// $("#dv>p").click(function () {
// alert("p被点了");
// });
$("#dv").delegate("p","click",function () {
alert("p被点了");
});
$("#dv").click(function () {
alert("div被点了");
});
$("#btn1").click(function () {
// $("#dv").off("click");
//下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
//$("#dv").off("click","**");
$("#dv").off();//移除父级元素和子级元素的所有的事件
});
//如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑
//但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑
});
/*建议bind和unbind使用,on和off使用*/
</script>
</head>
<body>
<input type="button" value="绑定事件" id="btn1"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv">
<p>这是div中的一个p标签</p>
</div>
</body>
</html>
7.事件触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
$("#btn1").click(function () {
$(this).css("backgroundColor","red");
});
//点击第二个按钮调用第一个按钮的点击事件---触发第一个按钮的点击事件
$("#btn2").click(function () {
//触发事件--3三种方式
//$("#btn1").click();
//trigget()方法中需要写上触发事件的名字
//$("#btn1").trigger("click");//触发事件
$("#btn1").triggerHandler("click");//触发事件
});
});
</script>
</head>
<body>
<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="第二个按钮" id="btn2"/>
</body>
</html>
8.浏览器的默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
$("#btn").click(function () {
//触发文本框的获取焦点的事件
//$("#txt").focus();
//$("#txt").trigger("focus");
$("#txt").triggerHandler("focus");
$("#sp").text("文本框获取到焦点了");
//第一种触发事件的方式和第二种触发事件的方式是相同的,都会触发浏览器默认的事件(光标在文本框中闪烁)
//第三种触发事件的方式不会触发浏览器的默认事件
});
});
</script>
</head>
<body>
<input type="button" value="触发事件" id="btn"/>
<input type="text" value="" id="txt"/>
<span id="sp"></span>
</body>
</html>
9.事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
background-color: green;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
//为div中的按钮绑定事件,获取事件对象中内容
$("#dv").on("click","input",function (event) {
//获取函数在调用的时候,有几个参数
//console.log(arguments[0]);
console.log(event);
//event.delegateTarget----->div--->谁代替元素绑定的事件--div
//event.currentTarget----->input--->真正是谁绑定的事件
//event.target---->input----触发的事件
});
});
</script>
</head>
<body>
<div id="dv">
<input type="button" value="按钮" id="btn"/>
</div>
</body>
</html>
10.获取键盘按下的值(keydown事件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
background-color: pink;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
$(document).keydown(function (e) {
var keyCode=e.keyCode;//键盘按下后的键对应的键值
console.log(keyCode);
});
});
</script>
</head>
<body>
<div id="dv"></div>
</body>
</html>
11.事件冒泡
事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv1{
width: 300px;
height: 250px;
background-color: red;
}
#dv2{
width: 250px;
height: 200px;
background-color: green;
}
#dv3{
width: 200px;
height: 150px;
background-color: blue;
}
</style>
<script src="../jquery-1.12.2.js">
</script>
<script>
//事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发
//元素A中有一个元素B,A和B都有点击事件,B点击事件触发,A点击事件自动触发
//取消事件冒泡
//jQuery中 return false
$(function () {
$("#dv1").click(function () {
alert("dv1被点了"+$(this).attr("id"));
});
$("#dv2").click(function () {
alert("dv2被点了"+$(this).attr("id"));
//$("body").css("backgroundColor","black");
});
$("#dv3").click(function () {
alert("dv3被点了"+$(this).attr("id"));
// return false;//取消事件冒泡
});
});
</script>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
</body>
</html>
12.取消浏览器的默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
$("#ak").click(function () {
alert("超链接被点了");
//取消超链接的默认的点击事件
return false;
});
});
</script>
</head>
<body>
<a href="http://www.itcast.cn" id="ak">传智播客</a>
</body>
</html>
13.链式编程原理
前一个方法返回了当前对象,所以实现了链式编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function Student(name) {
this.name=name;
this.sayHi=function (name) {
if(name){
console.log("俺是"+name);
return this;
}else{
console.log("我的名字叫"+this.name);
}
// console.log("我的名字叫"+this.name);
// return this;//把当前对象返回
};
this.eat=function () {
console.log("我就是喜欢吃大蒜+榴莲+臭豆腐");
};
}
var stu=new Student("小明");
stu.sayHi().eat();
//var stu=new Student("小黑");
//.html()
//stu.sayHi().eat();
// stu.sayHi();
// stu.eat();
</script>
</head>
<body>
</body>
</html>
14.评分demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: yellow;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
$(function () {
$(".comment>li").mouseover(function () {
$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
}).mouseout(function () {
$(".comment").find("li").text("☆");
$(".comment>li[index=1]").text("★").prevAll("li").text("★");
}).click(function () {
//注意这里添加了一个index属性值为1到当前点击的元素上,上面鼠标移除事件的第二行才会生效
$(this).attr("index","1").siblings("li").removeAttr("index");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
15.each遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li{
width: 100px;
height: 100px;
background-color: green;
list-style-type: none;
float: left;
margin-left: 10px;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
//页面加载后,让每个li的透明度发生改变
//不同的元素不同的设置方式--each方法
$("#uu>li").each(function (index,element) {
//第一个参数是索引,第二个参数是对象
//console.log(arguments[0]+"====="+arguments[1]);
$(element).css("opacity",(index+1)/10);
});
});
</script>
</head>
<body>
<ul id="uu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
16.$变成了变量
当$
变成了变量不能使用$
作为jQuery的对象了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.2.js"></script>
<script>
//让jquery对$对象进行释放控制权
//方法一:
// var xy=$.noConflict();
// //从此以后xy就是曾经的$---一毛一样的
// var $=100;//$原本是对象--->变量
// xy(function () {
// xy("#btn").click(function () {
// alert("哈哈,我又变帅了");
// });
// });
// 方法二
var $=100;//$原本是对象--->变量
jQuery(function () {
jQuery("#btn").click(function () {
alert("哈哈,我又变帅了");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>