1 jQuery 的下載
? jQuery的官網(wǎng)地址： https://jquery.com/，官網(wǎng)即可下載最新版本。
各個(gè)版本的下載：https://code.jquery.com/
2 jQuery 對(duì)象和 DOM 對(duì)象轉(zhuǎn)換
javascript
// 1.DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象，方法只有一種
var box = document.getElementById('box'); // 獲取DOM對(duì)象
var jQueryObject = $(box); // 把DOM對(duì)象轉(zhuǎn)換為 jQuery 對(duì)象
// 2.jQuery 對(duì)象轉(zhuǎn)換為 DOM 對(duì)象有兩種方法：
// 2.1 jQuery對(duì)象[索引值]
var domObject1 = $('div')[0]
// 2.2 jQuery對(duì)象.get(索引值)
var domObject2 = $('div').get(0)
3 基礎(chǔ)選擇器
$("選擇器") // 里面選擇器直接寫 CSS 選擇器即可，但是要加引號(hào)
基礎(chǔ)選擇器.png
4 層級(jí)選擇器
?層級(jí)選擇器最常用的兩個(gè)分別為：后代選擇器和子代選擇器。
層級(jí)選擇器.png
5 篩選選擇器
篩選選擇器.png
6 設(shè)置樣式
$('div').css('屬性', '值')
7 鏈?zhǔn)骄幊?/h3>
// 鏈?zhǔn)骄幊淌菫榱斯?jié)省代碼量，看起來(lái)更優(yōu)雅。
$(this).css('color', 'red').sibling().css('color', '');
8 樣式操作
// 1.參數(shù)只寫屬性名，則是返回屬性值
var strColor = $(this).css('color');
// 2. 參數(shù)是屬性名，屬性值，逗號(hào)分隔，是設(shè)置一組樣式，屬性必須加引號(hào)，值如果是數(shù)字可以不用跟單位和引號(hào)
$(this).css(''color'', ''red'');
// 3. 參數(shù)可以是對(duì)象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號(hào)隔開， 屬性可以不用加引號(hào)
$(this).css({ "color":"white","font-size":"20px"});
// 4.添加類
$("div").addClass("current");
// 5.刪除類
$("div").removeClass("current");
// 6.切換類
$("div").toggleClass("current");
8 動(dòng)畫效果
- 顯示隱藏：show() / hide() / toggle() ;
- 劃入畫出：slideDown() / slideUp() / slideToggle() ;
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定義動(dòng)畫：animate() ;
8.1顯示隱藏動(dòng)畫
- [圖片上傳中...(show.png-e0b3dd-1587977025855-0)]
常見有三個(gè)方法：show() / hide() / toggle() ;
?語(yǔ)法規(guī)范如下:
![]()
show.png
![]()
hide.png
![]()
toggle.png
代碼演示
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").show(1000, function() {
alert(1);
});
})
$("button").eq(1).click(function() {
$("div").hide(1000, function() {
alert(1);
});
})
$("button").eq(2).click(function() {
$("div").toggle(1000);
})
// 一般情況下，我們都不加參數(shù)直接顯示隱藏就可以了
});
</script>
</body>
8.1滑入滑出
// 鏈?zhǔn)骄幊淌菫榱斯?jié)省代碼量，看起來(lái)更優(yōu)雅。
$(this).css('color', 'red').sibling().css('color', '');
// 1.參數(shù)只寫屬性名，則是返回屬性值
var strColor = $(this).css('color');
// 2. 參數(shù)是屬性名，屬性值，逗號(hào)分隔，是設(shè)置一組樣式，屬性必須加引號(hào)，值如果是數(shù)字可以不用跟單位和引號(hào)
$(this).css(''color'', ''red'');
// 3. 參數(shù)可以是對(duì)象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號(hào)隔開， 屬性可以不用加引號(hào)
$(this).css({ "color":"white","font-size":"20px"});
// 4.添加類
$("div").addClass("current");
// 5.刪除類
$("div").removeClass("current");
// 6.切換類
$("div").toggleClass("current");
常見有三個(gè)方法：show() / hide() / toggle() ;
?語(yǔ)法規(guī)范如下:
show.png
hide.png
toggle.png
代碼演示
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").show(1000, function() {
alert(1);
});
})
$("button").eq(1).click(function() {
$("div").hide(1000, function() {
alert(1);
});
})
$("button").eq(2).click(function() {
$("div").toggle(1000);
})
// 一般情況下，我們都不加參數(shù)直接顯示隱藏就可以了
});
</script>
</body>
常見有三個(gè)方法：slideDown() / slideUp() / slideToggle() ;
語(yǔ)法規(guī)范如下:
slideDown.png
slideUp.png
slideToggle.png
代碼演示
<body>
<button>下拉滑動(dòng)</button>
<button>上拉滑動(dòng)</button>
<button>切換滑動(dòng)</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 下滑動(dòng) slideDown()
$("div").slideDown();
})
$("button").eq(1).click(function() {
// 上滑動(dòng) slideUp()
$("div").slideUp(500);
})
$("button").eq(2).click(function() {
// 滑動(dòng)切換 slideToggle()
$("div").slideToggle(500);
});
});
</script>
</body>
8.3 淡入淡出
常見有四個(gè)方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
語(yǔ)法規(guī)范如下:
fadeIn.png
fadeOut.png
fadeToggle.png
fadeTo.png
代碼演示
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切換</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
// 淡入淡出切換 fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
// 修改透明度 fadeTo() 這個(gè)速度和透明度要必須寫
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
8.4 自定義動(dòng)畫
?自定義動(dòng)畫非常強(qiáng)大，通過(guò)參數(shù)的傳遞可以模擬以上所有動(dòng)畫，方法為：animate() ;
語(yǔ)法規(guī)范如下:
animate.png
代碼演示
<body>
<button>動(dòng)起來(lái)</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
8.5 停止動(dòng)畫排隊(duì)
- ?動(dòng)畫或者效果一旦觸發(fā)就會(huì)執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫或者效果排隊(duì)執(zhí)行。
- ?停止動(dòng)畫排隊(duì)的方法為：stop() ;
- stop() 方法用于停止動(dòng)畫或效果。
- stop() 寫到動(dòng)畫或者效果的前面， 相當(dāng)于停止結(jié)束上一次的動(dòng)畫。
? 總結(jié): 每次使用動(dòng)畫之前，先調(diào)用 stop() ,在調(diào)用動(dòng)畫。
8.6. 事件切換
?jQuery中為我們添加了一個(gè)新事件 hover() ; 功能類似 css 中的偽類 :hover 。介紹如下
語(yǔ)法
hover(over,out) // 其中over和out為兩個(gè)函數(shù)
- over:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)（相當(dāng)于mouseenter）
- out:鼠標(biāo)移出元素要觸發(fā)的函數(shù)（相當(dāng)于mouseleave）
- 如果只寫一個(gè)函數(shù)，則鼠標(biāo)經(jīng)過(guò)和離開都會(huì)觸發(fā)它
代碼演示
// 1. 事件切換 hover 就是鼠標(biāo)經(jīng)過(guò)和離開的復(fù)合寫法
$(".nav>li").hover(function() {
$(this).children("ul").slideDown(200);
}, function() {
$(this).children("ul").slideUp(200);
});
// 2. 事件切換 hover 如果只寫一個(gè)函數(shù)，那么鼠標(biāo)經(jīng)過(guò)和鼠標(biāo)離開都會(huì)觸發(fā)這個(gè)函數(shù)
$(".nav>li").hover(function() {
// stop 方法必須寫到動(dòng)畫的前面
$(this).children("ul").stop().slideToggle();
});
