为元素绑定多个相同事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 为按钮绑定多个相同事件
// $("#btn").click(function(){
// console.log("小苏好猥琐哦");
// }).click(function(){
// console.log("小苏好美哦");
// }).click(function(){
// console.log("天冷了,注意身体");
// });
// $("#btn").bind("click",function(){
// console.log("啊哈哈,我又变帅了");
// }).bind("click",function(){
// console.log("我轻轻的来,挥一挥手");
// });
// bind方法绑定多个相同事件的时候,如果使用的是键值对的方式,只能执行
// 最后一个
$("#btn").bind({"click":function(){
console.log("如果有一天我邪恶了");
},"click":function(){
console.log("请记住,我曾纯洁过");
}});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
</body>
</html>绑定事件的另一种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
border: 2px solid green;
}
p {
width: 150px;
height: 50px;
border: 1px solid red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// 点击按钮为div中的p标签绑定事件
$(function(){
$("#btn").click(function(){
// 为父级元素绑定事件,父级元素代替子级元素绑定事件
// 子级元素委托父级元素绑定事件
// 父级元素调用方法,为子级元素绑定事件
$("#dv").delegate("p","click",function(){
alert("被点了");
});
});
});
// 为元素绑定事件的三种方式
/**
* 对象.事件名字(事件处理函数);$("#btn").click(function(){})
* 对象.bind("事件名字",事件处理函数);----$("#btn").bind("click",function(){});
* 父级对象.delegate("子级元素","事件名字",事件处理函数);
* -->$("#dv").delegate("p","click",function(){});
*
*/
</script>
</head>
<body>
<input type="button" value="为div绑定事件" id="btn">
<div id="dv">
<p>这是p</p>
</div>
</body>
</html>复习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
/**
* 复习:
*
* 元素的创建
* 1.
* $("html代码及内容")
* 对象.html("html代码及内容");
*
* 元素的添加
* 子级元素.append(子级元素);
* 子级元素.appendTo(父级元素);
*
* 父级元素.prepend(子级元素);加到第一个子级元素的前面
* 子级元素.prependTo(父级元素):加到第一个子级元素的前面
* 父级元素.after(元素),当前父级元素后面的第一个兄弟元素的位置
* 父级元素.before(元素);当前父级元素前面的第一个兄弟元素的位置
*
* 如何移除父级元素中的子级元素
* 父级元素.html("");
* 父级元素.empty();清空
* 父级元素:remove();---->自杀,自己被删除
*
* val()方法的使用,可以设置表单的value属性值
* val()方法也可以设置下拉框某个option选中
*
* 自定义属性的操作
* attr("属性","值");
* removeAttr("属性");移除这个自定义属性
* attr("属性");获取该属性的值
*
* 元素选中操作
* prop()方法
* prop("checked");---->布尔类型
* prop("checked",布尔类型的值);
*
* 元素样式的操作
*
* 设置或者获取元素的宽和高
* .width()---->获取 .width(值);---->设置宽度
* .height();---->获取 .height(值);---->设置高度
*
* 获取或者是设置元素的left和top
* .offset()---->返回的是一个对象,该对象中两个属性,left和top
* 在offset()方法获取left或者是top的时候包括margin的值
* .offset({"left":"值","top":"值"});---->设置
* .scrollLeft() ----> 向左卷曲出去的距离
* .scrollTop() ----> 向上卷曲出去的距离
*
* 事件的绑定
* 元素.事件名字(事件处理函数);
* 元素.bind("事件名字",事件处理函数);
* 元素.bind({"事件名字":"事件处理函数"});
* 父元素.delegate("子元素的选择器","事件名字","事件处理函数");
* 最终事件是在子元素上
*/
</script>
</head>
<body>
</body>
</html>介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
/**
* 元素的事件绑定
* 事件绑定的区别
* 元素的绑定的方式中哪一个是重点
* 案例---->用到事件的绑定,体现出事件不同的绑定方式的区别
* 元素的事件解绑的不同的方式,注意问题,重点的解绑的方式
* 按键改变元素的背景颜色
* 事件的参数
* 事件的触发
* 链式编程的原理
* each方法的使用
* 包装集
* 多库共存
* 插件的使用
* 自己做插件
* UI的使用
*
* 扩展几个知识点----属性
* 例子
*
*/
</script>
</head>
<body>
</body>
</html>元素的事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 200px;
background-color: green;
}
p {
width: 100px;
height: 20px;
background-color: red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// 如果是先创建元素,再为这个子元素绑定事件(对象.事件名字(事件处理函数))
// 后面再创建的子元素,没有事件
// 点击按钮为div中添加一个子元素,并且子元素有点击的事件
$(function(){
// 第一个按钮
$("#btn").click(function(){
$("<p>这是一个p</p>").appendTo($("#dv"));
// 先创建,后绑定的事件是可以用的
// $("p").click(function(){
// alert("哈哈");
// });
// 同上
// $("p").bind("click",function(){
// alert("哈哈");
// });
$("#dv").delegate("p","click",function(){
alert("哈哈");
});
});
$("#btn2").click(function(){
// 后添加的
$("<p>这是一个p2</p>").appendTo($("#dv"));
});
});
</script>
</head>
<body>
<input type="button" value="绑定事件" id="btn">
<input type="button" value="绑定事件" id="btn2">
<div id="dv"></div>
</body>
</html>