jquery动画 jQuery事件

一丶jQuery动画

show,hide,toggle

/* jq对象.show(speed,回调函数) */
​
        $('div').show(1000,fn)   //显示
        function fn(){ 
            //回调函数
        }
​
​
/* jq对象.hide(speed,回调函数) */
​
        $('div').hide(1000,fn)  // 隐藏
        function fn(){
            //回调函数
        }
​
​
/* jq对象.toggle(speed,回调函数) */
​
        $('div').toggle(1000,fn)  // 自动切换,开关式显示隐藏动画
        function fn(){
            //回调函数
        }
​
/*
speed(时间)参数:数值1000毫秒/字母('slow'/慢600ms,  'normal'/正常400ms,  'fast'/快200ms),
回调函数:当执行完动画执行的函数
*/

示例代码:👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.4.1.js"></script>
    <style>
        .containr{
            position: relative;
            width: 120px;
            height: 40px;
            float: right;
            background-color: lemonchiffon;
        }
        .car{
            position: absolute;
            top: 0;
            right: 0;
            width: 120px;
            /*height: 40px;*/
            line-height: 40px;
            text-align: center;
        }
        .cd{
            position: absolute;
            top: 40px;
            right: 0;
            width: 300px;
            height: 150px;
            background-color: rosybrown;
            display: none;
        }
    </style>
</head>
<body>
<div class="containr">
    <div class="car">购物车</div>
    <div class="cd"></div>
</div>
</body>
<script>
    $(function () {
    /* 显示,隐藏,切换   show  hidden  toggle */
​
        // toggle
        $('.containr').hover(function () {
            //停止动画,保证动画效果不叠加
            $('.cd').stop()
            //自动切换
            $('.cd').toggle()
        })
​
        //状态表示位
        var flag=false
        // show hide
        $('.containr').hover(function () {
            if (flag){
                $('.cd').hide()
                flag=false
            }else {
                $('.cd').show()
                flag=true
            }
        })
        
    })
​
</script>
</html>

 

'滑'系列(sildeDown,sildeUp,sildeToggle)

/* jq对象.sildeDown(speed,回调函数) */
​
        $('div').sildeDown(1000,fn)   //下滑动
        function fn(){ 
            //回调函数
        }
​
​
/* jq对象.sildeUp(speed,回调函数) */
​
        $('div').sildeUp(1000,fn)  // 上滑动
        function fn(){
            //回调函数
        }
​
​
/* jq对象.sildeToggle(speed,回调函数) */
​
        $('div').sildeToggle(1000,fn)  // 自动切换,开关式滑入,滑出动画
        function fn(){
            //回调函数
        }
​
/*
speed(时间)参数:数值1000毫秒/字母('slow'/慢600ms,  'normal'/正常400ms,  'fast'/快200ms),
回调函数:当执行完动画执行的函数
*/

示例代码:👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.4.1.js"></script>
    <style>
        .containr{
            position: relative;
            width: 120px;
            height: 40px;
            float: right;
            background-color: lemonchiffon;
        }
        .car{
            position: absolute;
            top: 0;
            right: 0;
            width: 120px;
            /*height: 40px;*/
            line-height: 40px;
            text-align: center;
        }
        .cd{
            position: absolute;
            top: 40px;
            right: 0;
            width: 300px;
            height: 150px;
            background-color: rosybrown;
            display: none;
        }
    </style>
</head>
<body>
<div class="containr">
    <div class="car">购物车</div>
    <div class="cd"></div>
</div>
</body>
<script>
    $(function () {
​
        //   滑动系列: slideDown 下滑, slideUp  上滑 ,  ,top()清除动画叠加的动画效果
​
        $('.containr').hover(function () {
            // 关闭动画, 防止动画叠加
            $('.cd').stop()
            // 自动切换
            $('.cd').slideToggle(400,fn)
            // 回调函数
            function fn() {
​
            }
        })
        
        
        // slideDown 滑出 , slideUp  滑入
        //鼠标进入和移除,使用滑动动画
        $('.containr').mouseenter(function () {
            $('.cd').stop()
            $('.cd').slideDown(300)
        })
        $('.containr').mouseleave(function () {
            $('.cd').stop()
            $('.cd').slideUp(300)
        })
    })
​
</script>
</html>

 

'淡'系列(fadeIn,fadeOut,fadeToggle)

/* jq对象.fadeIn(speed,回调函数) */
​
        $('div').fadeIn(1000,fn)   //淡入
        function fn(){ 
            //回调函数
        }
​
​
/* jq对象.fadeOut(speed,回调函数) */
​
        $('div').fadeOut(1000,fn)  // 淡出
        function fn(){
            //回调函数
        }
​
​
/* jq对象.fadeToggle(speed,回调函数) */
​
        $('div').fadeToggle(1000,fn)  // 自动切换,开关式淡入淡出动画
        function fn(){
            //回调函数
        }
​
/*
speed(时间)参数:数值1000毫秒/字母('slow'/慢600ms,  'normal'/正常400ms,  'fast'/快200ms),
回调函数:当执行完动画执行的函数
*/

示例代码:👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.4.1.js"></script>
    <style>
        .containr{
            position: relative;
            width: 120px;
            height: 40px;
            float: right;
            background-color: lemonchiffon;
        }
        .car{
            position: absolute;
            top: 0;
            right: 0;
            width: 120px;
            /*height: 40px;*/
            line-height: 40px;
            text-align: center;
        }
        .cd{
            position: absolute;
            top: 40px;
            right: 0;
            width: 300px;
            height: 150px;
            background-color: rosybrown;
            display: none;
        }
    </style>
</head>
<body>
<div class="containr">
    <div class="car">购物车</div>
    <div class="cd"></div>
</div>
</body>
<script>
    $(function () {
​
     /*  淡入淡出系列  fadeIn fadeOut fadeToggle */
        //fadeToggle
        $('.containr').hover(function () {
            $('.cd').stop()
            // fn 是回调函数
            $('.cd').fadeToggle(1000,fn)
        })
        
        // 回调函数, 执行完动画执行此函数
        function fn() {
            $('.car').css('color','red')
        }
        
        
        // fadeOut 淡出 , fadeIn  淡入
        var flag=false
        $('.containr').hover(function () {
            if (flag){
                $('.cd').stop()
​
                $('.cd').fadeOut(100,fn1)
                flag=false
            }else {
                 $('.cd').stop()
                 $('.cd').fadeIn(100,fn2)
                flag=true
            }
        })
        function fn1() {
            $('.car').css('color','black')
        }
         function fn2() {
            $('.car').css('color','red')
        }
    })
​
</script>
</html>

 

自定义动画

// 语法:
    $(selector).animate({params}, speed, callback);
​
//参数解释
/*
作用：执行一组CSS属性的自定义动画。
​
    第一个参数表示：要执行动画的CSS属性（必选）
​
    第二个参数表示：执行动画时长（可选）
    
    第三个参数表示：动画执行完后，立即执行的回调函数（可选）
*/

示例代码:👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.4.1.js"></script>
    <style>
        /*div{*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    */
        /*}*/
​
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div></div>
</body>
<script>
    $(function () {
        //自定制动画效果1
        var json1={
            "width": 500,
            "height": 500,
            "left": 300,
            "top": 300,
            "border-radius": 100
        }
        // 自定制动画效果2
        var json2={
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };
        
        //触发动画
        $('div').animate(json1,3000,function () {
            $('div').animate(json2,3000,function () {
                alert('自定制动画完毕!!')
            })
        })
​
    })
</script>
</html>

 

停止动画

// 语法:
	$(selector).stop(true, false);

/*
第一个参数：
true：后续动画不执行。
false：后续动画会执行。

第二个参数：
true：立即执行完成当前动画。
false：立即停止当前动画。
*/

 

二丶jQuery的事件

事件类型:

/* 
bind()						向匹配元素附加一个或更多事件处理器
blur()	 					触发、或将函数绑定到指定元素的 blur 事件
change()					触发、或将函数绑定到指定元素的 change 事件
click()						触发、或将函数绑定到指定元素的 click 事件
dblclick()					触发、或将函数绑定到指定元素的 double click 事件
delegate()					向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()						移除所有通过 live() 函数添加的事件处理程序。
error()						触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()	  返回 event 对象上是否调用了 event.preventDefault()。
event.pageX					相对于文档左边缘的鼠标位置。
event.pageY					相对于文档上边缘的鼠标位置。
event.preventDefault()		 阻止事件的默认动作。
event.result				包含由被指定事件触发的事件处理器返回的最后一个值。
event.target				触发该事件的 DOM 元素。
event.timeStamp				该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type					描述事件的类型。
event.which					指示按了哪个键或按钮。
focus()						触发、或将函数绑定到指定元素的 focus 事件
keydown()					触发、或将函数绑定到指定元素的 key down 事件
keypress()					触发、或将函数绑定到指定元素的 key press 事件
keyup()						触发、或将函数绑定到指定元素的 key up 事件
live()						为当前或未来的匹配元素添加一个或多个事件处理器
load()						触发、或将函数绑定到指定元素的 load 事件
mousedown()					触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()				触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()				触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()					触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()					触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()					触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()					触发、或将函数绑定到指定元素的 mouse up 事件
one()						向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()						文档就绪事件（当 HTML 文档就绪可用时）
resize()					触发、或将函数绑定到指定元素的 resize 事件
scroll()					触发、或将函数绑定到指定元素的 scroll 事件
select()					触发、或将函数绑定到指定元素的 select 事件
submit()					触发、或将函数绑定到指定元素的 submit 事件
toggle()					绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()					所有匹配元素的指定事件
triggerHandler()			第一个被匹配元素的指定事件
unbind()					从匹配元素移除一个被添加的事件处理器
undelegate()				从匹配元素移除一个被添加的事件处理器，现在或将来
unload()					触发、或将函数绑定到指定元素的 unload 事件
*/

 

绑定bind()/解绑unbind()事件

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

　　 如果没有参数，则删除所有绑定的事件。

　　 如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

/* bind/unbind */

	$('选择器').bind(type,data,fn)  //绑定事件
	$('选择器').unbind(type) // 解绑事件

/* 参数说明
type (String) : 事件类型

data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象

fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
*/

示例代码:👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.4.1.js"></script>
</head>
<body>
<button>bind绑定事件</button>
</body>
<script>

    // bind(type,data,fn)
    // type: 事件类型
    // data: 传参
    // fn  : 匿名方法
    $('button').bind('click',{'a':'b'},function () {

        alert('bind')

    })
</script>
</html>

 

一次性事件

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同

//语法:
	one(type,data,fn)

/* 参数解释 
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
*/

示例代码:👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.4.1.js"></script>
</head>
<body>
<p>21312</p>
</body>
<script>
    $("p").one("click", function(){
        //只有第一次点击的时候才会触发，再次点击不会触发了
         alert( $(this).text() );
});
</script>
</html>

 

事件委托

委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

原理：利用冒泡的原理，把事件加到父级上，触发执行效果。

作用：

1.性能要好 ​ 2.针对新创建的元素，直接可以拥有事件

事件源 :

　　 跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的

使用情景：

　　 为DOM中的很多元素绑定相同事件； 　　 为DOM中尚不存在的元素绑定事件；

//语法:
	on(type,selector,data,fn);

/*参数解释:
events( String) : 一个或多个空格分隔的事件类型
selector( String) : 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素
data: 当一个事件被触发时，要传递给事件处理函数的event.data。
fn:回调函数
*/

示例代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery3.4.1.js"></script>
</head>
<body>

<!--on-->
<div>
    <button>事件委托</button>
</div>
</body>
<script>
    // 没有事件委托,只有第一个按钮执行弹框
    $('button').click(function () {
        alert('没有事件委托')
    })

    var btn=document.createElement('button')
    btn.innerText='123'
    $('body').append(btn)


    
    /*  事件委托  */
    $('body').on('click','button',function () {
        alert('事件委托')
    })
    var btn=document.createElement('button')
    btn.innerText='123'
    $('div').append(btn)
</script>
</html>

 

事件冒泡

先捕获再冒泡

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，

简易理解:
	事件冒泡就是触发子元素事件,父元素的事件也会执行

/* 解决事件冒泡 */
	方法1: event.stopPropagation()
	方法2: return false

 

示例代码:👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color:mediumaquamarine;
            margin: 0 auto;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="jquery3.4.1.js"></script>
</head>
<body>
<div class="father">
    <div class="son1">1</div>
</div>
</body>
<script>
    // 事件冒泡就是事件叠加,
    // 进入了子框,父框的事件也会被触发,造成用户体验极差
    $('.father').click(function () {
        alert('进入父div框')
    })
    $('.son1').click(function (event) {
        // 清除事件冒泡
        console.log(event)

        alert('进入子son1div框')
        //方式一: event.stopPropagation()
      	event.stopPropagation()
        //方式二: return false
        return false
    })
</script>
</html>

文档加载

//js


//jq
	/*jQuery 加载所有的视频,音频,所有得资源*/
    	$(window).ready()
		

    /*jQuery 加载文档树*/
    	$(document).ready()
		$().ready() //匿名

示例代码：👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="a">123</div>
</body>
<script src="jquery3.4.1.js"></script>
<script>
    /* 浏览器窗口加载: 加载所有的音频,视频,资源文件
    *   缺点: 耗时, 只能加载一次
    * */
    window.onload(function () {
        alert('浏览器当前窗口加载所有资源,音频视频.')
    })


   /*jQuery 加载所有的视频,音频,所有得资源*/
    $(window).ready(
        function () {
            alert('jq加载所有的资源')
        }
    )

    /*jQuery 加载文档树*/
    $(document).ready(
        function () {
            alert('jQ加载文档树上的资源')
        }
        
        
   /*在页面没有完全显示，即白屏的时侯就弹出提示对话框了。说明mytest在页面没有显示完成时就被调用*/
        document.onload = myTest()
        document.onload = function () {
                alert('13132112311')
            }
        function myTest() {
            alert('弹出一个弹框')
        }    
        
    )

</script>
</html>

 

posted on 2020-03-02 11:47  向往1  阅读(129)  评论(0)  编辑  收藏  举报

导航

……