锋利的jQuery读书笔记-第4章 jQuery中的事件和动画

最新推荐文章于 2022-01-23 13:28:22 发布

kewen303

最新推荐文章于 2022-01-23 13:28:22 发布

阅读量352

点赞数

本文链接：https://blog.csdn.net/kewen1989/article/details/70949119

版权

一、jQuery中的事件：

1.window.onload() 与$(document).ready()之间的区别

（1）执行时机上的区别：

window.onload()是网页中所有元素完全加载完之后才执行的；

$(document).ready()在DOM就绪之后就可以被调用，此时所有网页内的元素对jQuery而言都是可以访问的，但并不一定所有的关联文件下载完毕。 --使用$(document).ready()可以极大地提高Web应用的响应速度。

（2）使用次数上的区别：

window.onload()如果编写多个这样的函数，只有后面的触发，前面的不触发。这是因为JavaScript的onload事件只能保存对一个函数的引用，按照加载顺序自动用后面一个覆盖前一个，因此无法多次执行；

$(document).ready()可以编写多个，浏览器会按照顺序加载执行。

2.$(document).ready()有两种简写方式：

（1）

$(function () {
    //alert("hello jQuery");
})

（2）

$().ready(
    function()
    {
        //alert("hello jQuery");
    }
)

3.事件绑定：bind(type, [data] , function)

jQuery的绑定事件有三个参数：

（1）事件类型：focus、load、unload、click等等

（2）可选参数，传入额外数据对象

（3）绑定对应的处理函数

写一个简单的例子,我们先写一个简单的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Learning </title>
</head>
<body>
        <script src ="./lib/jquery.js"> </script>
        <script src ="./JS/Chapter4.js"> </script>

        <h1>Hello Every One!</h1>

        <div id = "panel">
            <h5 class="head">什么是jQuery</h5>
            <div class = "content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由John Resig 创建于2006年1月的开源项目。
            </div>
        </div>
</body>
</html>

在定义一个对应的JQuery行为代码 Chapter4.js

$(function () {
    $(".content").hide();

    $("#panel h5.head").bind("click",function () {
        var content = $(this).next();
        if(content.is(":visible"))
        {
            content.hide();
        }
        else
        {
            content.show();
        }
    })
})

两者合并之后就可以看到一个点击隐藏/显示的jQuery事件效果

4.两个常用的行为事件函数：

(1)hover(fn1，fn2)：鼠标移入执行fn1，鼠标移除执行fn2

(2)toggole(fn1,fn2,...) 鼠标点击一次执行fn1，点击第二次执行fn2，以此类推直到从头再来。

//改用Toggle函数实现鼠标点击后显示/隐藏事件
function titleToggle()
{
    $("#panel h5.head").toggle(function()
    {
        $(this).next().show();
    },function()
    {
        $(this).next().hide();
    })
}

//使用Hover事件实现内容的显示/隐藏
function titleHover()
{
    $("#pane2 h5.head").hover(function () {
        $(this).next().show();
    },function ()
    {
        $(this).next().hide();
    })
}

（3）结合toggle或者hover使用addClass和removeClass 来实现样式的变化。

4.事件冒泡

事件冒泡是指父子元素同时绑定一个相同的响应事件，子元素触发响应事件时，父元素也会同时触发响应事件。

看个简单的示例：

        <h1>关于冒泡事件</h1>
        <div id = "bubbleDiv">
            <span> 事件冒泡示例 </span>
        </div>

function bubbleTest()
{
    $("span").click(function()
    {
        alert("我是span响应事件");
    })

    $("div").click(function()
    {
        alert("我是Div响应事件");
    })

    $("body").click(function()
    {
        alert("我是Body响应事件");
    })
}

此时点击span，三个alert事件都会触发。之所以叫冒泡，是因为事件会按照DOM的层次结构像水泡一样不断向上一直到最顶层。
这样一来就会带来一些预期之外的页面效果，在jQuery中针对冒泡事件有对应的处理方法：

首先引入一个概念：“事件对象”，在响应事件的时候给对应事件添加一个事件对象参数，该参数在事件结束时销毁。利用这个事件对象，我们可以进行针对一个行为进行处理。

停止事件冒泡： event.stopPropagation()；利用事件对象，在span的click事件最后执行停止事件冒泡操作，整个事件冒泡就会终止。

还有一个简化的写法，同时用于终止事件冒泡和默认行为的执行：

    $("span").click(function()
    {
        alert("我是span响应事件");
        return false;
    })

5.移除事件

$("xxxx").unbind(); // unbind([type],[data]);

第一个参数为需要删除的事件类型，如果不传参数则删除对应元素的全部绑定事件；

第二个参数为绑定时传入的特定函数，那么就只有此处再传入的这个函数会被删除（有点绕，意思就是bind的时候传了一个fn，unbind的时候又传了一遍，那么就是只删这个函数事件，其他事件不影响）

jQuery特别增加了只执行一次的绑定事件函数 one()，所有用法与bind相同，这是这个函数只执行第一次后就会失效。

6.模拟操作

以上说到的都是用户实际操作的场景，但是有时候我们需要直接模拟用户的操作，那么也可以直接用jQuery来实现

(1)点击事件： $("xxx").triger("click"); 实现模拟用户点击元素事件，简写方式: $("xxx").click();

(2)触发自定义事件

比如元素绑定了一个行为函数 $("#btn").bind("myClick",function(){xxxxxxxxx}); 模拟触发就可以使用 $("#btn").trigger("myClick");

(3)传递参数： trigger(type,[data]), 触发函数本身支持传递参数，用法与bind的传递参数相同

7.其他操作

1.绑定多个行为 bind("mouseover mouseout",function(){}); 这里只需要将多个行为用空格隔开即可。

2.添加命名空间：

$("div").bind("click.kewen",function(){xxxxxxxxxxxxx});

$("div").bind("mouseout.kewen",function(){xxxxxxxxxxxxx});

$("div").bind("xxxxxx.kewen",function(){xxxxxxxxxxxxx});

这个时候.kewen 这个命名空间就可以用来统一操作上述定义的所有行为，例如同时解除绑定。

当然还可以给同一个事件添加不同的命名空间，然后按照需要执行

function nameSpaceTest()
{
    $("#bubbleSpan").bind("click",(function()
    {
        alert("我是click响应事件");
        return false;
    }))

    $("#bubbleSpan").bind("click.plugin",(function()
    {
        alert("我是click.plugin响应事件");
        return false;
    }))

    $("#nameSpaceSpan").click(function()
    {
        $("#bubbleSpan").trigger("click!");
    })
}

二、jQuery中的动画

1.animate(）执行动画效果

鼠标的Hover事件，最佳实践是在animate触发之前加上stop(）事件，避免反复触发时，页面显示效果比较差。

$(function(){
	  $("#panel").hover(function() {
		  $(this).stop().animate({height : "150",width : "300"} , 200 );
	  },function() {
		  $(this).stop().animate({height : "22",width : "60" } , 300 );
	  });
});

这样可以主动触发终结上一次没有执行完的函数，显示效果更佳。

如果是组合动画的animate(）事件，就需要用stop(true)来清除动画队列

$(function(){
	 $("#panel").hover(function() {
				$(this).stop(true)
					.animate({height : "150" } , 200 )
					.animate({width : "300" } , 300 )
	},function() {
				$(this).stop(true)
					.animate({height : "22" } , 200 )
					.animate({width : "60" } , 300 )
	});
});

判断动画是否在执行中：

if(!$.(element).is(":animated"))
{
    // 如果某个元素没有处于动画状态中，则....
}









2.著名的toggle动画
$(function(){
    $("#panel h5.head").click(function(){
	     $(this).next().toggle();
	})
})
这个动画效果是我们最最常用的一种动画，点击某处 显示/隐藏 。



动画概括：
实际上动画只需要记清楚页面元素显示有3个重要属性： 高度(height) 宽度(width)和不透明度(opacity)
所有的动画行为只是在动态的修改某个元素的这三个属性：
hide() / show() - 同时修改高度、宽度和不透明度
fadeIn() / fadeOut() -只改变不透明度
slideUp() /slideDown() -只改变高度
fadeto() 只改变不透明度
toggle() 替换hide() 和 hide()
slideToggle() 替代slideUp()和slideDown()
fadeToggle() 替代fadeIn() 和 fadeOut()
animate()  自定义动画方法，上面的这些方法都是animate(）的扩展，内部都是由animate实现，自己还可以修改其他属性样式，例如left、scrollTop等等

kewen303

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
锋利的jQuery读书笔记-第4章 jQuery中的事件和动画

一、jQuery中的事件：1.window.onload() 与$(document).ready()之间的区别（1）执行时机上的区别：window.onload()是网页中所有元素完全加载完之后才执行的；$(document).ready()在DOM就绪之后就可以被调用，此时所有网页内的元素对jQuery而言都是可以访问的，但并不一定所有的关联文件下载完毕。 --使用$(doc
复制链接

扫一扫