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的基礎語法和選擇器，一些影片效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/210119.html
標籤：其他
上一篇：奇怪的視圖問題