本文共 3245 字，大约阅读时间需要 10 分钟。
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>提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海
转载地址：http://pone.baihongyu.com/