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联系笔者 删除。
笔者:苦海