《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")
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值