一、加载Dom两种方式
1.1.1 window.onload方式：
执行时间;整个网页中所有内容（包括图片）加载完毕后，才会执行能边写
数个：1个
1.1.2 jQuery方式：
执行方式:网页结构绘制完成后执行
能编写个数：多个
1.1.3 版本区别：
jQuery3.0:window.onload比jQuery先执行
jQuery1.x和2.x:jQuery比window.onload先执行
1.2 元素事件名
* $("#aa").or("ciclk",function(){
alert("嘿嘿");
}) */
/* $("#aa").bind("mouseover",function(){
alert("哈哈");
}) */
// --元素.事件名
/* $("#aa").click(function(){
alert("干哈");
})
1.3 合成事件/事件切换
--hover()悬停控制元素[div]的显示和隐藏
$("#aa").hide();//隐藏
$("a").hover(function(){//鼠标移上
$("#aa").show();//显示
},function(){//鼠标移下
$("#aa").hide();//隐藏
})
--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
$("#aa").hide();//隐藏
$("a").toggle(function(){//鼠标移上
$("#aa").show();//显示
},function(){//鼠标移下
$("#aa").hide();//隐藏
})
$("#aa").toggle(1000);
1.4 事件的传播(事件冒泡) 小p->中div->大body
$("p").click(function(){
console.info("p被打了");
})
$("div").click(function(){
console.info("div被打了");
return false;//阻止了传播
})
$("body").click(function(){
console.info("body被打了");
})
1.6 事件的移除
--按钮只能点击一次[2]
$("#btn").on("click",function(){
console.info(44944);
})
//将点击事件进行移除
$("#btn").off("click");//unbind()
// 一次
$("#btn").one("click",function(){
console.info(44944);
//将按钮禁用
$("#btn").attr("disabled",true);
})
//--按钮点击偶数次可行 奇数次不行
var i =1;
$("#btn").click(function(){
if(i%2==0){
console.info(211015,i);
}
i++;
})
二、动画
//2.1 基本动画 [回调函数]
hide: 隐藏
toggle：切换
代码如下：
$("#aa").hide();//默认隐藏
$("#xx").on("click",function(){
$("#aa").show(1000，function(){
//回调函数
alert("来了，老弟");
});//1s显示
})
$("#yy").click(function(){
$("#aa").hide(2000);//隐藏
})
$("#zz").click(function(){
$("#aa").toggle(2000);//切换
})
//2.2 滑动动画
$("#aa").hide(); //默认隐藏
$("#xx").on("click", function() {
$("#aa").slideDown(1000); //1s显示
})
$("#yy").click(function() {
$("#aa").slideUp(2000); //隐藏
})
$("#zz").click(function() {
$("#aa").slideToggle(2000); //切换
}) */
// 2.3 淡入淡出(透明度)
/* $("#aa").hide(); //默认隐藏
$("#xx").on("click", function() {
$("#aa").fadeIn(1000); //1s显示
})
$("#yy").click(function() {
$("#aa").fadeOut(2000); //隐藏
})
$("#zz").click(function() {
$("#aa").fadeToggle(2000); //切换
}) */
// 2.4 自定义动画
--缩放
/* $("#hmj").click(function(){
$("#aa").animate({
width:100,
heigth:400,
},1000);
})
--移动[2]
$("#hmj").click(function(){
$("#aa").animate({
left:"+=100",
top:"+=100",
},1000);
})
旋转
$("#hmj").click(function(){
$("#aa").addClass("lll");
})
