A.我今天學(xué)了什么
1.jQ事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#btn{
width: 120px;
height: 35px;
font-size: 18px;
}
.box{
width: 500px;
height: 500px;
background: burlywood;
}
.box2{
width: 200px;
height: 200px;
background: cornflowerblue;
}
#txt{
width: 240px;
height: 30px;
margin-top: 30px;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
var btn = $('#btn');
var box = $('.box');
var txt = $('#txt');
//JQ事件
//1.單擊事件 click()
//原生JS中同一個(gè)對(duì)象綁定相同的事件的時(shí)候，后面的事件會(huì)覆蓋前面的事件；
/*btn[0].onclick=function(){
alert('s')
}
btn[0].onclick=function(){
alert('d')
}*/
//jq中，同一個(gè)對(duì)象綁定相同的事件，不會(huì)被覆蓋，而是多個(gè)事件融合在一起
/*btn.click(function(){
alert('a')
})
btn.click(function(){
alert('s')
})*/
//事件綁定數(shù)據(jù),不是局部變量
/*btn.click(foo = 'avc',function(){
alert(foo)
})
box.click(function(){
alert(foo)
})*/
//hover()事件：相當(dāng)于同時(shí)整合了enter+leave事件
/*box.mouseenter(function(){
console.log('我進(jìn)來了')
})
box.mouseleave(function(){
console.log('我出來了')
})*/
/*box.hover(function(){
console.log('我進(jìn)來了')
},function(){
console.log('我出來啦')
})*/
/*$(document).keydown(function(e){
console.log(e.keyCode);
})*/
//窗口大小改變事件：
/*$(window).resize(function(){
console.log('s')
})*/
//頁面滾動(dòng)事件
/*$(window).scroll(function(){
console.log('s')
})*/
//文本選中事件
/*txt.select(function(){
console.log('小米')
})*/
})
</script>
</head>
<body>
<button id="btn">button</button>
<div class="box">
<div class="box2">
</div>
</div>
<input id="txt" type="text" />
</body>
</html>
2.jQ事件的綁定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
button{
width: 150px;
height: 40px;
font-size: 20px;
}
ul{
width: 500px;
border: 1px solid #AAAAAA;
padding: 10px;
list-style: none;
}
.ds{
width: 500px;
height: 300px;
background-color: #DEB887;
}
</style>
</head>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
//事件的綁定：
//簡(jiǎn)單寫法：
/*$('#btn').click(function(){
alert('s')
})*/
//通過on方法，把他們綁定在了一起，就相當(dāng)于把click和function綁定在了一起
//通過on方法聲明綁定的數(shù)據(jù)和直接click的區(qū)別
//直接click相當(dāng)于聲明了變量
//on則是把數(shù)據(jù)綁定在了click事件里面
/*$('#btn').on('click',{foo:'a'},function(e){
console.log(e.data.foo)
})*/
//平時(shí)開發(fā)者，倡導(dǎo)多用事件的綁定，少用click，事件的綁定可以加快運(yùn)行速度，減少資源損耗
//指向元素的事件綁定(用法)
/*$(document).on('click','li',function(){
console.log('s')
});*/
//事件的解綁
/*$('#btn').click(function(){
alert('s')
})
$('#btn').click(null)*/
/*$('#btn').on('click',function(){
alert('s')
})
$('#btn').off('click')*/
//事件綁定的命名空間
//a.on('click.自定義名稱'，function(){});
/*$('#btn').on('click.sdfgasdgfsdgsdfgfg',function(){
alert('s')
});
$('#btn').on('click.qwertwertdsgvsdr',function(){
alert('d')
});
$('#btn').off('click.sdfgasdgfsdgsdfgfg')*/
//on事件是在JQ1.7以后的坂本才出現(xiàn)的新東西
//在1.7以前，咱們是用bind來進(jìn)行事件的綁定
//bind和on效果完全一致，只不過因?yàn)樗惴ǖ膯栴}，on更加效率，所以徹底替代了bind
//on一次可以綁定多個(gè)事件，多個(gè)事件要在同一個(gè)引號(hào)里面，并且用空格隔開
/*$('#btn').on('click mouseenter',function(){
alert('s')
});*/
//事件的委托
//在jq里面事件的委托，就是將事件綁定在上一級(jí)元 素上面，通過上一級(jí)元素來監(jiān)聽事件的觸發(fā)；
//事件的綁定
/*$('.box li').on('click',function(){
$('.box2').append($(this).clone())
})*/
/*$('.box').on('click','li',function(){
console.log($(this).html())
})*/
//一次性事件
/*$('button').one('click',function(){
alert('s')
});*/
})
</script>
<body>
<button id="btn">button</button>
<div>
<ul class="box">
<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>
</div>
<div>
<ul class="box2"></ul>
</div>
<div class="ds"></div>
<input id="txt" type="text" style="width: 300px;height: 30px;margin-top: 50px;" />
<a >跳轉(zhuǎn)到百度</a>
</body>
</html>
