js的事件与动画

事件
a.加载DOM两种方式
原生态js编写加载函数 2种形式
//第一种   1个  多个加载函数时，前者无效，后者覆盖前者
window.onload = function(){
alert("第一个加载函数");
}
window.onload = function(){
alert("第二个加载函数");
}
//第二种  多个  多个加载函数时，从前者开始到后者
window.addEventListener('load',function(){
alert("第一个加载函数")
});
window.addEventListener('load',function(){
alert("第二个加载函数")
});
 
jQuery的加载函数  2种  一个页面可以出现多次
 
$(document).ready(function(){
alert("第一个加载函数");
});
$(document).ready(function(){
alert("第二个加载函数");
});
//简写(常用)
$(function(){
alert("加载函数");
});
 
1 window.onload方式
执行时间：整个网页中所有内容（包括图片）加载完成后，才会执行

编写个数：一个

2 jQuery方式
执行时间：网页结构绘制完成后，执行

编写个数：多个

3 两个都有的情况下执行顺序
jQuery3.0:indow.onload比jQuery先执行

jQuery1.0和2.0:jQuery比window.onload先执行

案例：测试两种方式的区别（个数+顺序）
 
//JS加载函数 两种
            window.onload = function() {
                alert("111")
            }
            window.addEventListener('load', function() {
                alert("222")
            })
            //jQuery加载函数 两种
            $(document).ready(function() {
                alert(111)
            })
            //简写
            $(function() {
                alert(222)
            })
            // 2.js的加载函数和jQuery的加载函数出现在一个页面，先后顺序
            // 版本有关  jQuery3.0版本以上   js快
            window.onload = function(){
                alert("js")
            }
            $(function(){
                alert('jQuery')
            });
 
b.绑定事件两种方式
元素.on("事件名",function(){})
元素.事件名(function(){})
案例：演示事件（鼠标悬停和点击）的两种方式
 
//直接调用click点击事件
            $("#btn1").click(function(){
                alert("11")
            })
            //通过标签对象调用on这个方法来绑定一个指定事件
            $("#btn1").on('click',function(){
                alert("22")
            })
            //调用bind方法
            $("#btn1").bind('click',function(){
                alert("33")
            })
 
c.合成事件/事件切换
1  hover():鼠标悬停合成事件
鼠标以上去第一个函数

鼠标移出第二个函数

案例：升级案例2鼠标悬停显示和隐藏
 
$(function(){
            $("#btn2").hover(function(){
                $("#oDiv").show()//标签显示
            },function(){
                $("#oDiv").hide()//标签隐藏
            })
        })
2  toggle():鼠标点击合成事件
案例：升级案例2鼠标点击显示和隐藏
 
$(function(){
            $("#btn3").click(function(){
                $("#oDiv2").toggle(3000)
            })
        })
d.事件传播（事件冒泡）
传播：小--中--大

组织传播：事件后面加上 return false

案例：给body div span(在div中)分别添加点击事件，测试事件传播
 
// 事件传播：在多个标签中设置点击事件，只允许当前点击的标签有效
            // 其它则无效----解决  阻止事件传
            $(function() {
                $("p").click(function() {
                    alert(1)
                    return false //阻止事件传播
                })
                $("#oDiv3").click(function() {
                    alert(2)
                })
                $("body").click(function() {
                    alert(3)
                })
            })
 
e.事件坐标
offsetX:当前元素左上角
clientX:网页左上角
pageX:网页左上角
案例：pageX实现 鼠标悬浮，获取鼠标坐标
 
$(function() {
                // 事件坐标  pageX  pageY   都是通过event事件对象调用
                $("body").click(function() {
                    console.log(event.pageX + "   " + event.pageY) //鼠标点击位置
                    console.log(event.offsetX + "   " + event.offsetY) //偏移量
                    console.log(event.clientX + "   " + event.clientY) //可视区 没有滚动条时和pageX一样
                })
            })
 
f.移除事件
元素.unbind("事件名")

案例：按钮点击一次，不能再次点击
<script>
            $(function() {
                $("#btn4").click(function() {
                    $(this).off() //解绑
                })
            })
            var index = 1;
            $("#btn5").click(function() {
                // 点击（奇数次可以，偶数次不行）
                // index为奇数的时候可以   为偶数的时候不行
                if (index % 2 == 1) {
                    console.log(index);
                }
                index++;
            });
 
            $("#btn6").one('click', function() {
                alert("只有一次机会")
            })
        </script>
 
动画效果
a.基本
显示:show(Time)

隐藏:hide(Time)

切换:toggle(Time)

案例：点击按钮，控制div显示和隐藏（基本动画）
function test1() {
                $("div").first().show(3000)
            }
 
            function test2() {
                $("div").first().hide(3000)
            }
            function test3() {
                $("div").first().toggle(3000)
            }
 
b.滑动
slideUp(Time):动画收缩（向上滑动）--隐藏

slideDown(Time):动画展开（向下滑动）--显示

slideToggle(Time):动画切换

案例：点击按钮，控制div显示和隐藏（滑动）
function test4() {
                $("div").eq(1).slideUp(3000)
            }
 
            function test5() {
                $("div").eq(1).slideDown(3000)
            }
 
            function test6() {
                $("div").eq(1).slideToggle(3000)
            }
c.淡入淡出（透明度）
fadeIn(Time):淡入（透明度减少）

fadeOut(Time):淡出（透明度增大）

fadeToggle(Time):切换

案例：点击按钮：控制控制div显示和隐藏（透明度）
function test7() {
                $("div").eq(2).fadeIn(4000);
            }
 
            function test8() {
                $("div").eq(2).fadeOut(4000);
            }
 
            function test9() {
                $("div").eq(2).fadeToggle(4000);
            }
d.自定义动画
1元素.animate({属性：属性值},Time)
2缩放
width

heigh

3移动
top

left

4移动（本元素），距离
top="+="

left="-="

function test10() {
                $("div").last().animate({
                    width: "+=500px",
                    height: "+=500px",
                    opacity: "0.1" //透明度
                }, 1000)
            }
function test10() {
                $("div").last().animate({
                    width: "+=500px",
                    height: "+=500px",
                    opacity: "0.1" //透明度
                }, 1000)
            }