web前端基础—jquery事件操作和动画

目录

1. jQuery节点插入

1.1 内部插入节点方法

 1.2 外部插入节点方法

2. jQuery绑定事件

3. jQuery动画效果

---

1. jQuery节点插入

在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除

了这个方法之余呢，jQuery 提供了其他几个方法来插入节点。

1.1 内部插入节点方法

方法名	描述
append(content)	向指定元素内部后面插入节点 content
append(function (index, html) {})	使用匿名函数向指定元素内部后面插入节点
appendTo(content)	将指定元素移入到指定元素 content 内部后面
prepend(content)	向指定元素 content 内部的前面插入节点
prepend(function (index, html) {})	使用匿名函数向指定元素内部的前面插入节点
prependTo(content)	将指定元素移入到指定元素 content 内部前面

$('div').append(function (index, html) { //使用匿名函数，同上

return '<span>节点</span>';

});

 1.2 外部插入节点方法

方法名	描述
after(content)	向指定元素的外部后面插入节点 content
after(function (index, html) {})	使用匿名函数向指定元素的外部后面插入节点
before(content)	向指定元素的外部前面插入节点 content
before(function (index, html) {})	使用匿名函数向指定元素的外部前面插入节点
insertAfter(content)	将指定节点移到指定元素 content 外部的后面
insertBefore(content)	将指定节点移到指定元素 content 外部的前面

2. jQuery绑定事件

常用的事件有：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error。那么，还有更多的事件可以参考手册中的事件部分。

jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type, [data], fn)，

type 表示一个或多个类型的事件名字符串；[data]是可选的，作为 event.data 属性值传递一个.

额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn 表示绑定到指

定元素的处理函数。

//使用点击事件

$('input').bind('click', function () { //点击按钮后执行匿名函数

alert('点击！');

});

//普通处理函数

$('input').bind('click', fn); //执行普通函数式无须圆括号

function fn() {

alert('点击！');

}

//使用 unbind 删除绑定的事件

$('input').unbind(); //删除所有当前元素的事件

//使用 unbind 参数删除指定类型事件

$('input').unbind('click'); //删除当前元素的 click 事件

//使用 unbind 参数删除指定处理函数的事件

function fn1() {

alert('点击 1');

}

function fn2() {

alert('点击 2');

}

$('input').bind('click', fn1);

$('input').bind('click', fn2);

$('input').unbind('click', fn1); //只删除 fn1 处理函数的事件

3. jQuery动画效果

jQuery 中显示方法为：.show()，隐藏方法为：.hide()。在无参数的时候，只是硬性的显

示内容和隐藏内容。

$('.show').click(function () { //显示

$('#box').show();

});

$('.hide').click(function () { //隐藏

$('#box').hide();

});

注意：.hide()方法其实就是在行内设置 CSS 代码：display:none; 而.show()方法要根据原

来元素是区块还是内联来决定，如果是区块，则设置 CSS 代码：display:block; 如果是内联，则设置 CSS 代码：display:inline;在.show()和.hide()方法可以传递一个参数，这个参数以毫秒(1000 毫秒等于 1 秒钟)来控制速度。并且里面富含了匀速变大变小，以及透明度变换。

$('.show').click(function () {

$('#box').show(1000); //显示用了 1 秒

});

$('.hide').click(function () {

$('#box').hide(1000); //隐藏用了 1 秒

});

 

除了直接使用毫秒来控制速度外，jQuery 还提供了三种预设速度参数字符串：slow、

normal 和 fast，分别对应 600 毫秒、400 毫秒和 200 毫秒。

$('.show').click(function () {

$('#box').show('fast'); //200 毫秒

});

$('.hide').click(function () {

$('#box').hide('slow'); //600 毫秒

});

注意：不管是传递毫秒数还是传递预设字符串，如果不小心传递错误或者传递空字符串。

那么它将采用默认值：400 毫秒。

$('.show').click(function () {

$('#box').show(''); //默认 400 毫秒

});

//使用.show()和.hide()的回调函数，可以实现列队动画效果。

$('.show').click(function () {

$('#box').show('slow', function () {

alert('动画持续完毕后，执行我！');

});

});

 

 

3.1 滑动、卷动

jQuery 提供了一组改变元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顾名

思义，向上收缩(卷动)和向下展开(滑动)。

$('.down').click(function () {

$('#box').slideDown();

});

$('.up').click(function () {

$('#box').slideUp();

});

$('.toggle').click(function () {

$('#box').slideToggle();

});

 

 

 3.2 淡入、淡出

jQuery 提供了一组专门用于透明度变化的方法：.fadeIn()和.fadeOut()，分别表示淡入、

淡出，当然还有一个自动切换的方法：.fadeToggle()。

$('.in').click(function () {

$('#box').fadeIn('slow');

});

$('.out').click(function () {

$('#box').fadeOut('slow');

});

$('.toggle').click(function () {

$('#box').fadeToggle();

});

 

3.3 自定义动画

jQuery 提供了几种简单常用的固定动画方面我们使用。但有些时候，这些简单动画无法

满足我们更加复杂的需求。这个时候，jQuery 提供了一个.animate()方法来创建我们的自定

义动画，满足更多复杂多变的要求。

$('.animate').click(function () {

$('#box').animate({

'width' : '300px',

'height' : '200px',

'fontSize' : '50px',

'opacity' : 0.5

});

});

 

 

注意：一个 CSS 变化就是一个动画效果，上面的例子中，已经有四个 CSS 变化，已经

实现了多重动画同步运动的效果。

必传的参数只有一个，就是一个键值对 CSS 变化样式的对象。还有两个可选参数分别

为速度和回调函数。

$('.animate').click(function () {

$('#box').animate({

'width' : '300px',

'height' : '200px'

}, 1000, function () {

alert('动画执行完毕执行我！');

});

});

到目前位置，我们都是创建的固定位置不动的动画。如果想要实现运动状态的位移动画，

那就必须使用自定义动画，并且结合 CSS 的绝对定位功能。

$('.animate').click(function () {

$('#box').animate({

'top' : '300px', //先必须设置 CSS 绝对定位

'left' : '200px'

});

});

自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位

置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。

$('.animate').click(function () {

$('#box').animate({

'left' : '+=100px',

});

});

所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值，非常用插件，否则正常情况下是不能只用动画效果的。