一、效果
jQuery提供了丰富的方法来展示元素效果:显示/隐藏、滑动显示/隐藏、淡入淡出、自定义动画方法。
(一)显示/隐藏
show([speed,[easing],[fn]]):显示隐藏的元素
hide([speed,[easing],[fn]]):隐藏显示的元素
(二)滑动显示/隐藏
slideDown([speed],[easing],[fn]):显示(向下滑动)隐藏的元素
slideUp([speed,[easing],[fn]]):隐藏(向上滑动)显示的元素
slideToggle([speed],[easing],[fn]):通过向上/向下滑动的方式切换显示/隐藏元素
(三)淡入淡出
fadeIn([speed],[easing],[fn]):淡入元素
fadeOut([speed],[easing],[fn]):淡出元素
fadeTo([[speed],opacity,[easing],[fn]]):将元素的透明度渐变至指定值opacity
fadeToggle([speed,[easing],[fn]]):通过“开关”实现淡入淡出元素
(四)动画方法
animate(params,[speed],[easing],[fn])1.8+:用于创建自定义动画的函数,其中params通过{}装载目标样式的属性(类似CSS)。
注意,如果需要变化背景颜色,应添加jquery.color插件。
delay(duration,[queueName])1.4+:设置一个延时来推迟执行队列中之后的项目。
二、遍历
(一)for循环
for (var i = 0; i < liArr.length; i++) {
alert(i+":"+liArr[i].innerHTML);
}
注意,返回值为JavaScript对象!
(二)each(callback)
liArr.each(function (index,element) {//可通过return true/false实现break/continue的效果
alert(this.innerHTML);
alert(index+":"+element.innerHTML);
});
(三)$.each(object, [callback])
$.each(liArr,function () {
alert(this.innerHTML);
});
(四)for…of(jQuery3.0+)
for(li of liArr){
alert(li.innerHTML);
}
三、事件绑定
标准绑定方式:jQuery对象.事件方法(回调函数)
on/off绑定方式:jQuery对象.on(“事件名称”,回调函数)、jQuery对象.on(“事件名称”)
toggle事件切换(1.9+已移除,):
$(function () {
$("#btn").toggle(function () {
$("#myDiv").css("backgroundColor","red");
},
function () {
$("#myDiv").css("backgroundColor","green");
});
})
四、增强插件
jQuery可以通过$.fn.extend(object) 方式扩展原有方法。
$.fn.extend({
check:function(){
this.prop("checked",true);
},
uncheck:function () {
this.prop("checked",false);
}
});
Tip:小贴士
1.表情选择
$(".word").append($(this).html())
2.复选框全选
$("input:checkbox:not(:first)").prop("checked",this.checked);
3.列表移动
$("#rightName").append($("#leftName option:selected"))
4.隔行换色
$("tr:odd").css("background","pink");
$("tr:even").css("background","yellow");
5.广告显示
$("img").animate({
width:'100%'
},function () {
setTimeout(function(){
$("img").animate({
width:'0%'
});
}, 3000);
});
6.抽奖
var number = 0;
interval = setInterval(function () {
if (number==7)number=0;
$("#img1ID").prop("src",imgs[number]);
number++;
},100);
7.下拉菜单
$(".wrap>ul>li>a").mouseover(function () {
$(this).parent().children("ul").show()
})
$(".wrap>ul>li>a").mouseleave(function () {
$(this).parent().children("ul").hide()
})
8.淘宝广告
$(".left li,.right li").mouseover(function () {
$(".center>li").hide()
$($(".center>li")[$(this).index(".left li,.right li")]).show()
})
9.手风琴
$(".menuGroup").click(function () {
$("div").hide()
$(this).children("div").show()
})
10.高亮显示
$(".wrap").mouseleave(function () {
$("img").css("opacity","1")
})
$("img").mouseover(function () {
$("img").css("opacity","0.5")
$(this).css("opacity","1")
})