JQuery第一天案列总结

JQuery第一天案例总结

案例 (下拉菜单案例)
这个案例的话主要是学了slideDown()上拉和slideUp()下拉方法,还有为元素添加了移入(mouseenter)

还有就是获取到当前元素下面的子元素ul,并给他添加效果
<script>
	$(function () {
		//获取所有a元素
		//为a元素绑定鼠标移入移出的事件
		//在事件处理菜单的上拉和下拉

		let $a=$("ul>li>a");
		let $ul=$("ul>li>a>ul");
		$a.mouseenter(function () {
			// $(this).next("ul").slideDown();
			// $(this).parent().children().slideDown();
			// $(this).parent().find("ul").slideDown();
			$(this).parent().children().eq(1).slideDown();
			console.log(this)

		})
		$a.mouseenter(function () {
			$(this).next("ul").slideUp();
			console.log(this)
		})
	})
</script>
内容突出显示
一、获取到warp标签下面的li标签元素
二、给获取到的li标签元素添加鼠标移入(mouseenter)事件
三、先让当前li的兄弟元素透明度全变0.3:("opacity","0.3"),除了当前li本身("opacity","1")
四、鼠标移出事件(mouseleave):获取到整个div元素,div当前的所有li元素(使用find("li"))获取,然后鼠标移出后把div下面的所有li透明度变回1
<script>
	$(function () {
		let $wrap=$(".wrap li");
		//鼠标移入
		$wrap.mouseenter(function () {
			$(this).css("opacity","1").siblings().css("opacity","0.3");
		});
		let $ss=$(".wrap");
		//鼠标移出
		$ss.mouseleave(function () {
			$(this).find("li").css("opacity","1");
		})
	})
</script>
淘宝精品展示
一、获取元素,左边的li和右边的li里面的a标签,再获取到要显示的图片li元素
二、先做左边的:鼠标移入时:使用变量接收当前元素的index()方法得到的索引
三、然后图片的li元素使用eq方法获取指定索引的元素
四、鼠标移入时给它一个淡入效果(fadeIn())
五、当鼠标移到左边其他的lii标签是,直接淡出效果(fadeOut()),显示相对于的图片li
六、右边的做法跟左边一样,只不过他的索引是从第十个图片开始,所以index()+9,下标相对应显示
<script>
	let $left=$("#left li");
	let $right=$("#right li");
	let $center=$("#center li");

	/*
	//获取索引值有问题
		$("#left>li,#right>li").mouseenter(function () {
		console.log($(this).index())
	})*/
	$left.mouseenter(function () {
		let index=$(this).index();
		$center.eq(index).fadeIn().siblings().fadeOut();
	})

	$right.mouseenter(function () {
		let index=$(this).index()+9;
		//fadeIn 淡入
		$center.eq(index).fadeIn().siblings().fadeOut();
	})
</script>
手风琴案列
一、获取到元素后,给他添加单击click事件
二、元素当前的下一个div使用slideToggle()方法可以使匹配的元素以“滑动”的方式隐藏或显示
三、最后获取到当前元素的父亲的相邻兄弟的子元素div让他隐藏即可
<script>
	$(function () {
		$(".groupTitle").click(function () {
			$(this).next().slideToggle();
			$(this).parent().siblings().find("div").slideUp();
		});
	})
</script>

总结:今天只要练了jQuery的基础语法和选择器,一些动画效果

匿名

发表评论

匿名网友