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