一、jQuery事件注册：
二、jQuery事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: bisque;
}
.current{
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>TFBOYS</li>
<li>TFBOYS</li>
<li>TFBOYS</li>
<li>TFBOYS</li>
<li>TFBOYS</li>
</ul>
<ol>
<!-- <li>添福宝</li>
<li>添福宝</li>
<li>添福宝</li> -->
</ol>
<script>
$(function(){
// 1.单个事件注册
// $('div').click(function(){
// $(this).css('background', 'orange')
// });
// $('div').mouseenter(function(){
// $(this).css('background', 'yellow')
// })
// 2.事件处理 on
// $('div').on({
// mouseenter:function(){
// $(this).css('background', 'yellow')
// },
// click:function(){
// $(this).css('background', 'orange')
// },
// mouseleave:function(){
// $(this).css('background', 'red')
// }
// });
$('div').on('mouseenter mouseleave' , function(){
// alert(11);
$(this).toggleClass('current')
});
// (2) on 可以实现事件委托（委派）
// $('ul li').click(function(){
// })
$('ul').on('click' , 'li' , function(){
alert('四叶草')
});
// click 是绑定在ul身上的，但是触发的对象是ul 里面的小li
// (3) on 可以给未来动态创建的元素绑定事件
// 原来的写法：
// $('ol li').click(function(){
// alert(11);
// });
$('ol').on('click' , 'li' , function(){
alert(11);
})
var li = $('<li>我是后来创建的小li </li>');
$('ol').append(li);
})
</script>
</body>
</html>
anli
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微博留言效果</title>
<script src="./jQuery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
margin: 100px auto;
width: 600px;
/* height: 200px; */
padding: 10px;
border: 1px solid #000;
}
textarea{
width: 400px;
height: 150px;
outline: none;
resize: none;
}
ul{
list-style: none;
width: 400px;
padding-left: 70px;
}
ul li{
line-height: 20px;
border-bottom: 1px dashed #ccc;
display: none;
}
input{
float: right;
}
ul li a{
float: right;
}
</style>
<script>
$(function(){
// 1.点击发布按钮 动态创建一个小li ，放入文本框的内容和删除按钮，并且添加到 ul 中
$('.btn').on('click' ,function(){
var li = $('<li></li>');
li.html($('.txt').val() + '<a href = "javascript:;">删除</a>');
$('ul').prepend(li);
li.slideDown();
$('.txt').val('');
});
// 2.点击删除按钮，可以删除当前的微博留言
$('ul').on('click' , 'a' ,function(){
// alert(11)
$(this).parent().slideUp(function(){
$(this).remove();
});
})
})
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" id="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: blueviolet;
}
ul{
list-style: none;
}
</style>
<script>
$(function(){
$('div').on({
click:function(){
console.log('我点击了');
} ,
mouseover:function(){
console.log('我鼠标经过了');
}
});
$('ul').on('click' , 'li' , function(){
alert('四叶草');
})
// 1.事件解绑 off
// $('div').off(); //这个是解除了div身上的所有的事件
// $('div').off('click'); //这个是解除了div身上的 click 事件
$('div').off('mouseover'); //这个是解除了div身上的 mouseover 事件
$('ul').off('click' , 'li');
// 2. one() 但是只能触发事件一次
$('p').one('click' , function(){
alert('王俊凯');
});
});
</script>
</head>
<body>
<div></div>
<ul>
<li>TFBOYS</li>
<li>TFBOYS</li>
<li>TFBOYS</li>
</ul>
<p>TFBOYS</p>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<script>
$(function(){
$('div').on('click' , function(){
alert(11);
});
//自动触发事件
// 1.元素.事件（）会触发元素的默认行为
// $('div').click();
// 2.元素.trigger（'事件'）会触发元素的默认行为
// $('div').trigger('click');
// 3.元素.triggerHandler（'事件'） 就是不会触发元素的默认行为
// $('div').triggerHandler('click');
$('input').on('focus' , function(){
$(this).val('TFBOYS');
});
$('input').triggerHandler('focus');
// $('input').trigger('focus');
});
</script>
</head>
<body>
<div></div>
<input type="text">
</body>
</html> 
三、jQuery事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: chocolate;
}
</style>
<script>
$(function(){
$(document).on('click' , function(){
console.log('点击了document');
})
$('div').on('click' , function(event){
// console.log(event);
console.log('点击了div');
event.stopPropagation(); //阻止冒泡
})
})
</script>
<body>
<div></div>
</body>
</html>
四、jQuery 其他方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery.min.js"></script>
<script>
$(function(){
//情况1
var targetObj = {}
var obj = {
id:1,
name:'andy'
}
// 语法：$.extend(target ,obj);
$.extend(targetObj ,obj);
console.log(targetObj);
// 情况2
var targetObj = {
id:0,
name:'sandy'
}
var obj = {
id:1,
name:'andy'
}
$.extend(targetObj ,obj);
console.log(targetObj); //会覆盖targetObj 里面原来的数据
// 情况3 如果数据比较复杂
var targetObj = {
id:0,
name:'sandy',
msg:{
sex:'男'
}
}
var obj = {
id:1,
name:'andy',
msg:{
age:18
}
}
// $.extend(targetObj ,obj);
// console.log(targetObj); //会覆盖targetObj 里面原来的数据
// // 1.浅拷贝把原来对象里卖弄的复杂数据类型地址拷贝给目标对象
// targetObj.msg.age = 20;
// console.log(targetObj);
// console.log(obj);
// 2.深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起
$.extend(true,targetObj ,obj);
console.log(targetObj); //会覆盖targetObj 里面原来的数据
// 1.浅拷贝把原来对象里卖弄的复杂数据类型地址拷贝给目标对象
targetObj.msg.age = 20;
console.log(targetObj);
console.log(obj);
})
</script>
</head>
<body>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jQuery.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<script>
$(function(){
function $(ele){
return document.querySelector(ele)
}
console.log($('div'));
// 1.如果是 $ 符号冲突，就使用 jQuery
jQuery.each();
// 2.让 jQuery释放 $ 控制权，让用户自己决定
var suibian = jQuery.noConflict();
console.log(suibian('span'));
suibian.each();
})
</script>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TFBOYS</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<style type="text/css">
#gallery-wrapper {
position: relative;
max-width: 75%;
width: 75%;
margin:50px auto;
}
img.thumb {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
border-radius: 5px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
padding: 10px;
}
.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
margin-top: -5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>
</head>
<body>
<section id="gallery-wrapper">
<article class="white-panel">
<img src="images/1.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img src="images/2.jpg" class="thumb">
<h1><a href="#">Title 2</a></h1>
<p>Description 2</p>
</article>
<article class="white-panel">
<img src="images/3.jpg" class="thumb">
<h1><a href="#">Title 31</a></h1>
<p>Description 3</p>
</article>
<article class="white-panel">
<img src="images/4.jpg" class="thumb">
<h1><a href="#">Title 4</a></h1>
<p>Description 4</p>
</article>
<article class="white-panel">
<img src="images/5.jpg" class="thumb">
<h1><a href="#">Title 5</a></h1>
<p>Description 5</p>
</article>
<article class="white-panel">
<img src="images/6.jpg" class="thumb">
<h1><a href="#">Title 6</a></h1>
<p>Description 6</p>
</article>
<article class="white-panel">
<img src="images/7.jpg" class="thumb">
<h1><a href="#">Title 7</a></h1>
<p>Description 7</p>
</article>
<article class="white-panel">
<img src="images/8.jpg" class="thumb">
<h1><a href="#">Title 8</a></h1>
<p>Description 8</p>
</article>
<article class="white-panel">
<img src="images/9.jpg" class="thumb">
<h1><a href="#">Title 9</a></h1>
<p>Description 9</p>
</article>
<article class="white-panel">
<img src="images/10.jpg" class="thumb">
<h1><a href="#">Title 10</a></h1>
<p>Description 10</p>
</article>
<article class="white-panel">
<img src="images/11.jpg" class="thumb">
<h1><a href="#">Title 11</a></h1>
<p>Description 11</p>
</article>
<article class="white-panel">
<img src="images/12.jpg" class="thumb">
<h1><a href="#">Title 12</a></h1>
<p>Description 12</p>
</article>
<article class="white-panel">
<img src="images/13.jpg" class="thumb">
<h1><a href="#">Title 13</a></h1>
<p>Description 13</p>
</article>
<article class="white-panel">
<img src="images/14.jpg" class="thumb">
<h1><a href="#">Title 14</a></h1>
<p>Description 14</p>
</article>
<article class="white-panel">
<img src="images/15.jpg" class="thumb">
<h1><a href="#">Title 15</a></h1>
<p>Description 15</p>
</article>
<article class="white-panel">
<img src="images/16.jpg" class="thumb">
<h1><a href="#">Title 16</a></h1>
<p>Description 16</p>
</article>
<article class="white-panel">
<img src="images/17.jpg" class="thumb">
<h1><a href="#">Title 17</a></h1>
<p>Description 17</p>
</article>
<article class="white-panel">
<img src="images/18.jpg" class="thumb">
<h1><a href="#">Title 18</a></h1&
最低0.47元/天 解锁文章
1654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
