编程知识 cdmana.com

Summary of jQuery's first day case list

JQuery The first day case summary

Case study ( Drop down menu case )
 In this case, I have learned slideDown() Pull up and slideUp() Pull down method , Also added move in for elements (mouseenter)

 And get the child elements under the current element ul, And add effects to him 
<script>
	$(function () {
   
   
		// Get all a Elements 
		// by a Element binding mouse in and out of the event 
		// Pull up and drop down the event handling menu 

		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>
Content highlights
 One 、 Get warp Under the label li Tag element 
 Two 、 To get to li Tag element add mouse into (mouseenter) event 
 3、 ... and 、 Let the present li The transparency of its brother elements has changed 0.3:("opacity","0.3"), Except for the present li In itself ("opacity","1")
 Four 、 Mouse out event (mouseleave): Get the whole thing div Elements ,div Current all li Elements ( Use find("li")) obtain , Then move the mouse out and put div All of the following li Transparency goes back to 1
<script>
	$(function () {
   
   
		let $wrap=$(".wrap li");
		// Mouse migration 
		$wrap.mouseenter(function () {
   
   
			$(this).css("opacity","1").siblings().css("opacity","0.3");
		});
		let $ss=$(".wrap");
		// Mouse removal 
		$ss.mouseleave(function () {
   
   
			$(this).find("li").css("opacity","1");
		})
	})
</script>
Taobao boutique Exhibition
 One 、 Get elements , Sinister li And on the right li Inside a label , Then get the picture to be displayed li Elements 
 Two 、 Do the left side first : When the mouse moves in : Use a variable to receive the current element's index() Method to get the index 
 3、 ... and 、 And then the picture li Element usage eq Method to get the element of the specified index 
 Four 、 When the mouse moves in, give it a fade in effect (fadeIn())
 5、 ... and 、 When the mouse moves to the left other lii The label is , Direct fade out effect (fadeOut()), Show the relative picture li
 6、 ... and 、 The right is the same as the left , It's just that his index starts with the tenth picture , therefore index()+9, The subscript corresponds to show 
<script>
	let $left=$("#left li");
	let $right=$("#right li");
	let $center=$("#center li");

	/*
	// There is a problem getting the index value 
		$("#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  Fade in 
		$center.eq(index).fadeIn().siblings().fadeOut();
	})
</script>
Accordion case
 One 、 After getting the element , Add a click to him click event 
 Two 、 The next current element div Use slideToggle() Method can make the matching elements with “ slide ” The way to hide or show 
 3、 ... and 、 Finally, the child elements of the father's neighboring brother of the current element are obtained div Let him hide 
<script>
	$(function () {
   
   
		$(".groupTitle").click(function () {
   
   
			$(this).next().slideToggle();
			$(this).parent().siblings().find("div").slideUp();
		});
	})
</script>

summary : Just practice today jQuery The basic syntax and selectors of , Some animations

版权声明
本文为[osc_id7cvef1]所创,转载请带上原文链接,感谢

Scroll to Top