jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery事件：

jQuery中的事件和javascript中的事件基本相似，不同的是jQuery中的事件处理函数写在事件后面的括号中，如：

	<script>
        $('input').click(function() {
            alert('hello word');
        });
    </script>

jQuery中常见事件：

jQuery中常见效果：

jQuery中常见的效果有：hide()/show()/toggle():隐藏/显示/切换hide()和show()、slideDown()/slideUp()/slideToggle():滑出/滑入/slideDown和slideUp切换，更多如下表：

效果函数	描述	案例
toggle()和slideToggle()	两种方法都有对元素显示和隐藏的作用，toggle控制元素hide和show，slideToggle控制元素slideDown和slideUp，里面传入毫秒数则控制效果的时间	$(‘input’).click(function() {$(“div”).slideToggle();});
show()和hide()	控制元素的显示和隐藏，从左上角开始显示或隐藏，里面传入毫秒数则控制效果的时间	$(‘input’).click(function() {$(“div”).hide(1000);});
slideDown()和slideUp()	控制元素向下 显示或向上隐藏，从元素的上边发生变化，里面传入毫秒数则控制效果的时间	$(‘input’).click(function() {$(“div”).slideUp(1000);});
animate(styleObj,speed,easing,fn)	自定义动画，可以出入四个参数，第一个参数是控制元素属性的对象，第二个参数是控制速度的，可省略；第三个是控制运动轨迹的，可省略；第四个参数是一个回调函数，当animate执行完后，回调函数会被调用	$(‘input’).click(function() {$(“div”).animate({height: ‘300px’,width: ‘300px’}, function() {$(“div”).css(‘backgroundColor’, ‘green’);});});
clearQueue()	当有多组动画时，停止当前运动后的动画，即这次动画运动完后，下一动画被停止	$(‘input’).click(function() {$(“div”).animate({width: ‘500px’}, 2000);$(“div”).animate({height: ‘500p’}, 2000);});$(‘button’).click(function() {$(“div”).clearQueue();});
dequeue()	当前动画没有运动完，直接进入下一动画	$(‘input’).click(function() {$(“div”).animate({width: ‘500px’}, 2000);$(“div”).animate({height: ‘500p’}, 2000);});$(‘button’).click(function() {$(“div”).dequeue();});
fadeIn()和fadeOut()	渐变的控制元素的显示和隐藏，可以传入毫秒数控制效果时间	$(‘input’).click(function() {$(“div”).fadeIn()});
fadeTo(speed,opacity,fn)	控制元素的透明度，第一个参数传入毫秒数，表示渐变过程的时间；第二参数表示透明值，第三个参数是回调函数	$(‘button’).click(function() {$(“div”).fadeTo(null, 0.1);});
stop()	暂停当前运动的动画或效果	$(‘button’).click(function() {$(“div”).stop();});

隐式迭代：

隐式迭代：jQuery中遍历内部 DOM 元素（伪数组形式存储）的过程。简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

	 $('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

链式编程：

jQuery中允许我们在一条语句中写多个 jQuery 方法在相同的元素上，链式编程可以节省代码量，看起来更优雅美观，如：

	$(this).css('color', 'red').sibling().css('color', 'white'); 

jQuery 样式操作：

jQuery中常用的样式操作有两种：css() 和 设置类样式。

使用CSS操作样式：

jQuery 可以使用 css 方法来修改简单元素样式，css() 多用于样式少时操作，多了则不太方便，常用以下三种形式 :

	// 1.参数只写属性名，则是返回属性值
    var strSize = $('p').css('fontSize');
    
    // 2.  参数是属性名+属性值，中间用逗号分隔，是设置一组样式，属性必须加引号
    $('div').css('color', 'red');
    
    // 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号连接
    $('p').css({ "color":"white","font-size":"20px"});

通过设置类名设置样式：

jQuery提供了可以删除添加及删除添加互相转换的方法来操作某个类名，提醒：操作某个类时，其他类不会发生改变(原生javascript中的className会覆盖所有类名)，类名前面不需要加点;设置类样式方法比较适合样式多时操作，可以弥补css()的不足,如：

	// 1.添加类
    $("div").addClass("hide");
    
    // 2.删除类
    $("div").removeClass("show");
    
    // 3.切换类
    $("div").toggleClass("showHide");

动画队列：

动画一旦触发必将执行完，才可以进入下一动画，这样会发生在连续触发动画时，动画会产生不友好的体验，可以使用jQuery提供的stop()方法来停止当前动画，这样就解决了不友好的体验，如：

	<script>
        $('button').click(function() {
            $('div').stop().slideToggle(2000);
        });
    </script>

hover事件切换:

jQuery提供了一个新事件 hover() ; 类似 css 中的伪类 :hover ，hover(fn1,fn2)里面传入两个函数做为参数，第一个参数表示鼠标移入某个元素时触发的函数，第二个参数表示鼠标移出某个元素时触发的函数；如果只传入一个函数作为参数，则移出和移入都执行这个函数，如：

	<script>
        $('div').hover(function() {
            $('li').hide();
        }, function() {
            $('li').show();
        });
    </script>

jQuery中不同元素绑定相同事件：

jQuery中on支持给不同元素绑定相同的处理事件,其元素之间仅用逗号隔开即可，如：

$('.btn2,input,a').on('click', function() {
    $box.toggleClass('fade');
});

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海