jQuery03

一、加载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");
                            })