元素的事件绑定
*如果是先创建元素,再为这个子元素绑定事件, 后面再创建的子元素,没有事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: green;
}
p{
width: 100px;
height: 30px;
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>
有一种绑定事件的方式:同delegate() 父元素点击,为子元素添加点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: green;
}
p{
width: 100px;
height: 30px;
background-color: red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//点击按钮为div绑定事件
//此时on和delegate的作用是一样的,但是参数的顺序是不一样
$("#btn").click(function () {
$("<p>这是一个p</p>").appendTo($("#dv"));
//和delegate是一样,都是在为子元素绑定事件
$("#dv").on("click","p",function () {
alert("p被点击了");
});
});
});
</script>
</head>
<body>
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="绑定事件" id="btn2"/>
<div id="dv"></div>
</body>
</html>
不同绑定事件的区别
* 对象.事件名字(事件处理函数);--->普通的写法
* 对象.bind(参数1,参数2);---->参数1:事件的名字,参数2:事件处理函数
* 前两种方式只能为存在的元素绑定事件,后添加的元素没有事件
*
* 下面的两种方式,可以为存在的元素绑定事件,后添加的元素也有事件
* 对象.delegate("选择器","事件名字",事件处理函数);
* 父级元素调用方法,代理子级元素绑定事件
* 对象.on("事件名字","选择器",事件处理函数);
* 父级元素调用方法,代理子级元素绑定事件
*
* 因为delegate方法中是调用的on的方法
* 所以,以后直接用on就可以了
解除绑定的方法
//用什么方式绑定事件,最好用对应的方式解绑事件
//bind括号中写什么事件的名字就会把这个事件解绑,会把这个元素的这个点击的多个事件都会解绑
//对象.click()这种方式添加的事件也可以使用unbind解绑
//括号中没有任何参数,此时该元素的所有的事件全部解绑
//同时解绑多个事件---每个事件的名字中间用空格即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: green;
}
p{
width: 100px;
height: 30px;
background-color: red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//第一个按钮为div绑定事件
$("#btn").click(function () {
// //div的点击事件
$("#dv").bind("click",function () {
console.log("div被点了");
}).bind("click",function () {
console.log("div点第二个点击");
});
//鼠标进入
$("#dv").bind("mouseenter",function () {
$(this).css("backgroundColor","blue");
});
//鼠标离开
$("#dv").bind("mouseleave",function () {
$(this).css("backgroundColor","yellow");
});
// $("#dv").click(function () {
// console.log("哈哈");
// });
});
//第二个按钮为div解绑事件
$("#btn2").click(function () {
//解绑的是点击事件,所有的点击事件全部移除
//$("#dv").unbind("click");
//括号中没有任何参数,此时该元素的所有的事件全部解绑
//$("#dv").unbind();
//同时解绑多个事件
//$("#dv").unbind("mouseenter mouseleave");
});
});
</script>
</head>
<body>
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv"></div>
</body>
</html>
通过delegate()绑定事件的解绑方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: green;
}
p{
width: 100px;
height: 30px;
background-color: red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//delegate绑定事件对应的方式的解绑方式
//点击第一个按钮,div有自己的点击事件,有鼠标进入和鼠标离开事件
//同时为p绑定点击事件
$("#btn").click(function () {
//为div绑定事件
$("#dv").click(function () {
console.log("div被点了");
}).mouseenter(function () {
console.log("鼠标进来了");
}).mouseleave(function () {
console.log("鼠标离开了");
});
//在div中创建一个p,同时绑定点击事件
$("<p>这是一个p</p>").appendTo($("#dv"));
//为p绑定事件
$("#dv").delegate("p","click",function () {
console.log("啊~p被点了");
});
$("#dv").delegate("p","mouseenter",function () {
console.log("p的鼠标进入");
});
});
//第二个按钮解绑事件
$("#btn2").click(function () {
//p的点击事件没有了,移除了p的所有的事件
//$("#dv").undelegate();
//移除的是p的点击事件
$("#dv").undelegate("p","click");
//可以移除多个事件,但是每个事件之间用空格隔开
$("#dv").undelegate("p","click mouseenter");
});
});
</script>
</head>
<body>
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv">
</div>
</body>
</html>
案例:为表格动态添加一行
*JavaScript代码都很简单,尤其加了jQuery之后,HTML和CSS不熟看起来困难。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="checkDemo.css">
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
/*添加框的显示与隐藏*/
$('#j_btnAddData').click(function () {
$('#j_formAdd').show();
$('#j_mask').show();
});
function closeKuang() {
$('#j_formAdd').hide();
$('#j_mask').hide();
}
$('#j_hideFormAdd').click(function () {
closeKuang();
});
/*添加行操作的实现*/
$('#j_btnAdd').click(function () {
var j_txtLesson=$('#j_txtLesson');
var j_txtBelSch=$('#j_txtBelSch');
$('<tr><td>'+j_txtLesson.val()+'</td><td>'+j_txtBelSch.val()+'</td><td><a href="#">GET</a></td></tr>').appendTo($('#j_tb'));
closeKuang();
j_txtLesson.val("");
j_txtBelSch.val("这就是命");
});
/*点击get移除一个*/
$('#j_tb').on('click','.get',function () {
$(this).parent().parent().remove();
});
});
</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>前端移动开发</td>
<td><a href="javascript:;" 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>
事件冒泡现象,以及事件冒泡的阻止方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1 {
width: 300px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$("#dv1").click(function () {
//为什么是undefined
//对象.id----->DOM中的
console.log($(this).attr("id"));
});
$("#dv2").click(function () {
console.log($(this).attr("id"));
});
$("#dv3").click(function () {
console.log($(this).attr("id"));
return false;
});
});
// document.getElementById("btn").onclick=function (e) {
// e.stopPropagation();
// window.event.cancelBubble=true;
// };
</script>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3">
</div>
</div>
</div>
</body>
</html>
时间的触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//文本框添加获取焦点的事件
$("#txt").focus(function () {
console.log("我的获取焦点的事件触发了");
//设置当前元素的下一个兄弟元素中显示一个提示信息
$(this).next("span").text("文本框获取焦点了");
});
//按钮的点及事件
$("#btn").click(function () {
//调用文本框的获取焦点的事件---第一种方式让别的元素的事件触发
//对象.事件名字();
//$("#txt").focus();
//第二种触发事件的方式
//$("#txt").trigger("focus");//触发的意思
//这种方式可以触发该事件,但是,不能触发浏览器的默认的行为(就是文本无法获得焦点)
$("#txt").triggerHandler("focus");
});
});
</script>
</head>
<body>
<input type="button" value="我也要触发文本框的获取焦点的事件" id="btn"/>
<input type="text" value="" id="txt" /><span id="sp"></span>
</body>
</html>
事件的参数对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//事件参数对象
$("#dv").mousedown(function (e) {
console.log(arguments.length); 1
console.log(e);
//获取的是鼠标的按键的值
console.log(e.button); 0
});
});
</script>
</head>
<body>
<div id="dv"></div>
</body>
</html>
键盘状态的获取
*注:先按下键盘在按鼠标,不然事件触发过早
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$(document).mousedown(function (e) {
//判断用户按下鼠标的时候,有没有按下alt键
//console.log(e.altKey);
if(e.altKey){
//用户按下了alt键的同时也按下鼠标了
console.log("按下了alt键,鼠标也按下了");
}else if(e.shiftKey){
//用户按下了shift键,同时按下鼠标
console.log("按下了shift键,鼠标也按下了");
}else if(e.ctrlKey){
//用户按下了ctrl键,同时按下鼠标
console.log("按下了ctrl键,鼠标也按下了");
}else{
console.log("用户按下了鼠标");
}
});
});
</script>
</head>
<body>
<div id="dv"></div>
</body>
</html>
案例:点击键盘修改背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 800px;
height: 600px;
background-color: gray;
background-color: ;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//用户在页面按键,可以改变div的背景颜色
$(document).keydown(function (e) {
switch (e.keyCode){
case 65:$("#dv").css("backgroundColor","red");break;
case 66:$("#dv").css("backgroundColor","green");break;
case 67:$("#dv").css("backgroundColor","blue");break;
case 68:$("#dv").css("backgroundColor","orange");break;
case 69:$("#dv").css("backgroundColor","yellow");break;
case 70:$("#dv").css("backgroundColor","deeppink");break;
case 71:$("#dv").css("backgroundColor","hotpink");break;
case 72:$("#dv").css("backgroundColor","oranged");break;
case 73:$("#dv").css("backgroundColor","black");break;
case 74:$("#dv").css("backgroundColor","white");break;
case 75:$("#dv").css("backgroundColor","yellowgreen");break;
}
});
});
</script>
</head>
<body>
<div id="dv"></div>
</body>
</html>
链式编程的原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js">
</script>
<script>
// $(function () {
// //为按钮注册点击事件
// $("#btn").click(function () {
// //$(this).val("哈哈").val("嘎嘎");
// //console.log( );
//
// //对象.方法();调用,如果返回来的还是对象,那么可以继续的调用方法
// });
// });
function Person(age) {
this.age=age;
this.sayHi=function (txt) {
if(txt){
console.log("您好啊:"+txt);
return this;
}else{
console.log("您好啊");
}
};
this.eat=function () {
console.log("中午就吃了一个馒头和咸菜");
return this;
};
}
//对象
var per=new Person(10);
per.sayHi("嘎嘎").eat();
//per.sayHi().eat().sayHi().eat().eat().sayHi();
//console.log();
//方法();----获取这个值,如果.方法(值)--->当前的对象
//val();---返回的是value属性的值, val("fdds");---当前的对象
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>
案例:评分
<!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.1.js"></script>
<script>
$(function () {
//获取所有的li标签
$(".comment>li").mouseenter(function () {//进入
//当前的li是实心的五角星,前面的li也都是实现的五角星,鼠标后面的li是空心的五角星
$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
}).click(function () {//点击
//做一个记录
//点哪个li就为这个li添加一个自定义属性,作为标识,但是其他的li中的这个自定义属性要删除
$(this).attr("index","1").siblings("li").removeAttr("index");
}).mouseleave(function () {//离开
//鼠标离开的时候,获取那个带有index自定义属性的li,然后,改变这个li中的五角星,同时前面的五角星也都是实心的,同时后面的五角星都是空心
//先干掉所有的li中的实心的五角星
$(".comment>li").text("☆");
$(".comment>li[index=1]").text("★").prevAll("li").text("★");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
each()的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
li{
width: 100px;
height: 100px;
background-color: green;
margin-right: 10px;
float: left;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//隐式迭代---内部帮助我们循环遍历做操作
//每个元素做不同的操作的时候
//each方法,帮助我们遍历jQuery的对象
$(function () {
//获取所有的li,针对每个li的透明进行设置
$("#uu>li").each(function (index,ele) {
//参数1:索引,参数2:对象
//console.log(arguments[0]+"===="+arguments[1]);
//每个li的透明度不一样
var opacity=(index+1)/10;
$(ele).css("opacity",opacity);
});
});
//each方法就是用来遍历jQuery对象的,但是,里面的每个对象最开始都是DOM对象,如果想要使用jQuery的方法,需要把DOM对象转jQuery对象
</script>
</head>
<body>
<ul id="uu">
<li>1</li>
<li>2</li>
</ul>
</body>
</html>
自定义$与jQuery的$冲突问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
//一个html文件引入了多个的js文件库,每个js库中的顶级对象可能都是$
//1.js $.eat();
//2.js $.sayHi();
</script>
<script src="jquery-1.12.1.js"></script>
<script>
// var $=10;//普通的变量,10
// console.log($);
// //页面加载
// $(function () { $ is not a function
// $("#btn").click(function () {
// console.log("小苏好猥琐哦");
// });
// });
// /var $=10;//普通的变量,10
//console.log($); 打印出10
////页面加载
//jQuery(function () { 只能通过这种方式进行调用
// jQuery("#btn").click(function () {
// console.log("小苏好猥琐哦");
// });
//});
var fdsfdsf = $.noConflict();//把$的权利给了xy了,$就可以作为其他的用法出现在代码中
var $ = 10;//普通的变量,10
console.log($);
//页面加载
fdsfdsf(function () {
fdsfdsf("#btn").click(function () {
console.log("小苏好猥琐哦");
});
});
</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
</body>
</html>
包装集:把很多的DOM的对象进行包装或者是封装---->jQuery对象
//jQuery对象---->DOM对象--->jQuery对象[0]--->获取到这个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
// $(function () {
// $("p")[0].innerText="哈哈";
// });
//包装集 ----->length属性
//jQuery中如何判断这个元素是否存在,就是通过包装集的length属性来测试的
//是通过这个对象.length属性不等于0的方式来判断
// $(function () {
// if($("#btn").length!=0){
// console.log("存在");
// }else{
// console.log("不存在");
// }
// });
</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html>
案例:点击按钮只创建一个p标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
if($("#p1").length==0){
//点击按钮,只创建一个p标签,在div中
$("<p id='p1'>这是一个p</p>").appendTo($("#dv"));
}
});
});
</script>
</head>
<body>
<input type="button" value="创建一个p" id="btn"/>
<div id="dv"></div>
</body>
</html>
几个属性介绍
//innerWidth()/innerHeight() 方法返回元素的宽度/高度(包括内边距)。
//outerWidth()/outerHeight() 方法返回元素的宽度/高度(包括内边距和边框)。
//outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度(包括内边距、边框和外边距)。
插件的使用:别人写好的拿来改改。。。
事件参数对象
//e.target这个属性得到的是触发该事件的目标对象,此时是一个DOM对象 //e.currentTarget这个属性得到的是触发该事件的当前的对象 //e.delegateTarget这个属性得到的是代理的这个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: yellow;
}
p{
width: 100px;
height: 30px;
background-color: pink;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//e.target这个属性得到的是触发该事件的目标对象,此时是一个DOM对象
//e.currentTarget这个属性得到的是触发该事件的当前的对象
//e.delegateTarget这个属性得到的是代理的这个对象
// $(function () {
// //事件参数对象
// $("#dv").click(function (e) {
// //console.log("哈哈");
// //得到是触发该事件的目标对象
// console.log("div被点了");
// //console.log($(e.target).attr("id"));
// });
//
// $("p").click(function (e) {
// console.log("p被点击了");
// //return false;
// });
// });
$(function () {
console.log(window);
$("#dv").click(function (e) {
console.log("div被点了");
//console.log($(e.currentTarget).attr("id"));
//console.log(e);
console.log(e.screenX+"===="+e.screenY);
});
$("p").click(function (e) {
console.log("p被点了");
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv">
<p id="p1">这是一个p</p>
</div>
</body>
</html>
jQuery UI的使用
前提:下载了jQuery UI,并将jquery-ui-1.12.1.custom这个文件夹复制到项目中,里边有一个index.html文件有各种特效
//1.引入 jQuery UI 的css文件
//2 引入jquery的js文件
//3 引入jQuery UI 的js文件
//4 查找和复制UI 中的某个功能的所有的代码(html,css,js)
//5 测试和使用
比如:我想做一个tab特效,打开index.html文件找到对应的特效,F12→点击要查看开发工具最左边的框框箭头→复制查看的内容标题(有很多方式如类样式...源码中一般通过注释分开了,所以可以通过这种方式来找HTML源码,只要找到就可以了)如:tab→查看网页源代码→ctrl+f,将标题内容复制进去进行查找。将HTML和部分JavaScript复制到HTML文件中。ok
*注:js代码一般要在$(function(){});之中