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.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的基础语法和选择器，一些动画效果