《JavaEE》第九周day2学习笔记-jQuery高级特性

一、效果

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")
})