实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
*{padding:0px;margin:0px;list-style:none;}
#dvs{
width:100px;
height: 100px;
border: solid 1px blue;
}
.lis{
width: 50px;
height: 50px;
border: solid 1px green;
background:red;
}
.divs{
width: 100px;
height: 100px;
background: blue;
}
.dvs{
width:300px;
height:120px;
background: purple;
margin:10px;
}
.ls{
width:130px;
height:30px;
background: blue;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
});
//$(function(){}),相当于$(document).ready(function())的简写
$(function(){
$('.divs').click(function(){
alert(1234);
})
})
</script>
<body>
<body>
<div id='dvs'>
<li class='lis'></li>
</div>
<div class='divs'></div>
<button id='buts'>解绑定</button>
<button id='bts'>绑定</button>
<li class='ls'></li>
<div class='dvs'></div>
</body>
<script type="text/javascript">
//绑定单击事件：$('节点').click(function())
//
// $('.lis').click(function(){
// //点击绑定事件
// alert('你点我干啥');
// })
//绑定鼠标移入事件
//$('节点').mouseover(function(){})
// $('#dvs').mouseover(function(){
// var lis = $('.lis').clone(true);
// $('#dvs').append(lis);
// })
//事件绑定
//ready()文档加载后激活函数，当文档加载成功后，才会执行函数
// $(document).ready(function(){
// $('.divs').click(function(){
// alert(1234);
// })
// })
//bind()方法绑定
//bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
//规定向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。
//$('元素节点').bind('绑定的方法','值:可省略',function())
// $('#bts').click(function(){
// $('.dvs').bind('click',function(){
// alert(123456);
// })
// })
//unbind()解除绑定
//unbind() 方法移除被选(被绑定)元素的事件处理程序。
//$('节点').unbind(事件,function(执行函数，可省略))
// $('#buts').click(function(){
// $('.dvs').unbind('click');
// })
//非动态方式,使用非动态方式获取的，其克隆所产生的节点效果不会被关联
//
// $('.dvs').on('click',function(){
// alert(123456);
// })
//动态方式
//说那个动态方式获取的，改方式被克隆或其他操作时，所产生的新节点会被功能关联
$(document).on('click','.dvs',function(){
alert('1234567');
})
//
$('.ls').click(function(){
var ds = $('<div class="dvs"></div>');
$('body').append(ds);
})
//
$('.dvs').click(function(){
alert('你点击了我???');
})
//trigger 事件触发
//trigger 用于触发部分的事件
$('.dvs').trigger('click');
//hover 事件切换,用于事件切换
$('.dvs').mouseover(function(){
alert('你摸了我');
})
$('.dvs').mouseout(function(){
alert('摸完我你离开了')
})
//hover用于事件切换，合并了鼠标移入和鼠标移除事件
//$('节点').hover(function(),function())
//前面一个是鼠标移入事件，后面的函数是鼠标移除事件
$('.dvs').hover(function(){
alert('你摸了我');
},function(){
alert('摸完我你离开了');
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
