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)
            }
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值