A.我今天学了什么
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中同一个对象绑定相同的事件的时候，后面的事件会覆盖前面的事件；
/*btn[0].onclick=function(){
alert('s')
}
btn[0].onclick=function(){
alert('d')
}*/
//jq中，同一个对象绑定相同的事件，不会被覆盖，而是多个事件融合在一起
/*btn.click(function(){
alert('a')
})
btn.click(function(){
alert('s')
})*/
//事件绑定数据,不是局部变量
/*btn.click(foo = 'avc',function(){
alert(foo)
})
box.click(function(){
alert(foo)
})*/
//hover()事件：相当于同时整合了enter+leave事件
/*box.mouseenter(function(){
console.log('我进来了')
})
box.mouseleave(function(){
console.log('我出来了')
})*/
/*box.hover(function(){
console.log('我进来了')
},function(){
console.log('我出来啦')
})*/
/*$(document).keydown(function(e){
console.log(e.keyCode);
})*/
//窗口大小改变事件：
/*$(window).resize(function(){
console.log('s')
})*/
//页面滚动事件
/*$(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(){
//事件的绑定：
//简单写法：
/*$('#btn').click(function(){
alert('s')
})*/
//通过on方法，把他们绑定在了一起，就相当于把click和function绑定在了一起
//通过on方法声明绑定的数据和直接click的区别
//直接click相当于声明了变量
//on则是把数据绑定在了click事件里面
/*$('#btn').on('click',{foo:'a'},function(e){
console.log(e.data.foo)
})*/
//平时开发者，倡导多用事件的绑定，少用click，事件的绑定可以加快运行速度，减少资源损耗
//指向元素的事件绑定(用法)
/*$(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以后的坂本才出现的新东西
//在1.7以前，咱们是用bind来进行事件的绑定
//bind和on效果完全一致，只不过因为算法的问题，on更加效率，所以彻底替代了bind
//on一次可以绑定多个事件，多个事件要在同一个引号里面，并且用空格隔开
/*$('#btn').on('click mouseenter',function(){
alert('s')
});*/
//事件的委托
//在jq里面事件的委托，就是将事件绑定在上一级元 素上面，通过上一级元素来监听事件的触发；
//事件的绑定
/*$('.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 href="https://www.baidu.com/">跳转到百度</a>
</body>
</html>
网友评论