JQuery事件与动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p:first-of-type{
width: 100px;
height:100px ;
background-color: #000000;
color: white;
/*display:none ;*/
}
</style>
<script language="JavaScript" src="JS/jquery-1.10.2.js"></script>
<script type="text/javascript">
//帮助文档【】里面的可选，可不选；
$(function(){
//事件绑定快捷方式；
/*$("button:first").click(function(){
alert(1);
});*/
//使用on绑定事件；
//使用on进行单事件绑定；
/*$("button").on("click",function(){
//this取到当前调用事件函数的对象
console.log($(this).html());
})*/
//②使用on同时为多个事件，绑定同一函数
/* $("button").on("mouseover click",function(){
console.log($(this).html());
})*/
//调用函数时，传入自定义函数；
/*$("button").on("click",{"name":"aaa"},function(event){
console.log(event);
//使用event.data.属性名 找到传入的参数；
console.log(event.data.name);
});*/
//使用on进行多事件函数绑定
/* $("button").on({
click:function(){
console.log("click");
},
mouseover:function(){
console.log("mouseOver");
}
});*/
//⑤使用on进行事件委派；
/*将原本需要绑定到某元素上的事件，改为绑定在父元素乃至根节点上，然后委派给当前元素
* 生效；
* eg:$("p").click(function(){});
* ↓
* $(document).on("click","p",function(){});
作用：
默认的绑定方式，只能绑定到页面初始时已有的p元素，当页面新增加p元素时，无法绑定到新元素上
使用事件委派方式，当页面新增元素时，可以为所有新元素绑定事件；
*/
/*$(document).on("click","button",function(){
alert(1);
});*/
/* $("button").on("click",function(){
var p=$("<p>678</p>");
$("p").after(p);
});
/*$("p").click(function(){
alert(1);
});*/
/* $(document).on("click","p",function(){
alert(1);
});*/
// $(document).off("click","p");
/*off()取消绑定事件
* 1. $("p").off():取消所有事件；
* 2. $("p").off("click mouseover"):取消多个事件；
* 3.$(document).off("click","p"):取消事件委派；
*/
/*使用.one()绑定事件，只能执行一次
* .trigger("event"):自动触发某元素的事件；
*/
/* $("button").one("click",function(){
alert(1);
}); */
/* $("p").click(function(event,arg1,arg2){
alert("触发了p的click事件"+arg1+arg2);
});
$("button").click(function(){
$("p").trigger("click",["haha","hehe"])
});*/
/*************动画***********/
/*.show()
* ① 不传参：让隐藏的元素直接显示，不进行动画；
* ② 传入时间：多少毫秒之内完成动画；
* ③ 传入（时间，函数）：完成动画之后，执行回调函数；
*
* .show()动画执行效果：修改元素的宽度、高度、opacity属性
* .hide()让显示元素隐藏，与show相反；
* .slideDown() ：让隐藏元素显示，效果从上往下，增加高度；
* .slideUp():让显示元素隐藏，效果从下往上，减小高度；
* .slideToggle():让显示的隐藏，让隐藏的显示；
* .fadeOut():让显示元素隐藏，淡出；
* .fadeIn():让隐藏元素娴熟，淡入；
* .fadeToggle():让显示的隐藏，让隐藏的显示,淡入淡出；
* .fadeTo(时间，透明度，函数):同fadeToggle，但是多了透明度参数，可以指定最终显示
* 的透明度；
*
* .animate({最终样式属性的键值对}，动画时间，动画效果("linear"
* "swing"),回调函数)：自定义动画
*/
/*$("p").show(5000,function(){
alert("aaaa");
})*/
/*$("p").slideDown(5000,function(){
alert("aaaa");
})*/
/*$("p").fadeToggle(5000,function(){
alert("aaaa");
})*/
/*$("p").fadeTo(5000,0.3,function(){
alert("aaaa");
})*/
$("p").animate({
width:"6px",
opacity:"0.2"
},5000,function(){
})
});
</script>
</head>
<body>
<button>点击我触发事件</button>
<button>我明明是新建的哎</button>
<p>1123</p>
</body>
</html>
