一、jQuery的簡(jiǎn)介：
- jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架。John Resig是jQuery的第一創(chuàng)始人。
- jQuery的核心特性：
具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。
二、JQuery常用方法：
1、選擇器:
1. 標(biāo)簽選擇器
$("tagName"); // 引號(hào)里面是標(biāo)簽名，例：div
2. 類（class）選擇器
$(".className"); // 引號(hào)里面是類名。
3. id 選擇器
$("#idName"); // 引號(hào)里面是id名。
4. 通配符
$("*"); // 引號(hào)里面是*，表示所有元素。
5. 交集選擇器
$("#idName.className"); // 引號(hào)里是標(biāo)簽名 /類名 /id名等中間用 . 連接。
6. 后代選擇器
$("#idName .className"); // 兩個(gè)元素有空格，引號(hào)里是標(biāo)簽名/類名/id名等。
2、元素CSS屬性獲取
// 獲取
$("#div1").css("width")
// 設(shè)置
$("#div1").css("width", 200)
$("#div1").css("width", "200px")
$("#div1").css({"width": 200})
整個(gè)頁(yè)面加載完成
document.onload = 函數(shù)
// 只是加載DOM結(jié)構(gòu)
$(document).ready(函數(shù))
$(函數(shù)) 【重點(diǎn)】
// 所有資源都加載完畢
$(window).ready(函數(shù))
3、序與迭代
eq()方法
$("p").eq(0)
index()方法
$(this).index()
each() 方法
$(".box2 p").each(function(i) {
// i 就是遍歷的下標(biāo)
// this 代表的是當(dāng)前的dom元素對(duì)象
if (i > 0 && i < 3) {
$(this).css({"color": "red"})
}
})
length屬性
$("p").length
is() 方法
$("p").is(":animated") 當(dāng)前元素是否在執(zhí)行動(dòng)畫
get()方法 // jQuery 對(duì)象 --> js元素對(duì)象\DOM對(duì)象
// 得到j(luò)s元素對(duì)象
var a = $("p").get(0)
a.xxx = "1024";
var b = $("p").get(0)
console.log(b.xxx);
// 1024 只有1個(gè)p，原生對(duì)象只有1個(gè)
4、動(dòng)畫相關(guān)方法
1. animate
$("p").animate(JS對(duì)象, 動(dòng)畫時(shí)間, 回調(diào)函數(shù)/動(dòng)畫類型)
2.內(nèi)置方法:
show()展示、hide()隱藏、toggle()如果元素可見(jiàn),則隱藏這些元素,如果元素隱藏,則顯示這些元素。
3.其他方法：
slideDown() // 以滑動(dòng)方式顯示隱藏的 <p> 元素：
$(".btn").click(function(){
$("p").slideDown();
});
slideUp() // 以滑動(dòng)方式顯示顯示的 <p> 元素：
slideToggle() // 通過(guò)使用滑動(dòng)效果，在顯示和隱藏狀態(tài)之間切換 <p> 元素：
fadeIn() // 使用淡入效果來(lái)顯示一個(gè)隱藏的 <p> 元素：
$(".btn").click(function(){
$("p").fadeIn();
});
fadeOut() // 使用淡出效果來(lái)隱藏一個(gè) <p> 元素。
fadeTo() // 將被選元素的不透明度逐漸地改變?yōu)橹付ǖ闹怠?語(yǔ)法:
$(selector).fadeTo(speed,opacity,callback)
fadeToggle() // 用于切換所有匹配的元素,并帶有淡入/淡出的過(guò)渡動(dòng)畫效果。
stop() // 停止當(dāng)前正在運(yùn)行的動(dòng)畫。
finish() // 完成當(dāng)前正在運(yùn)行的動(dòng)畫。
delay() // 對(duì)不同的 <div> 元素設(shè)置延遲：
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});
is(":animated") // 判斷元素是否處于動(dòng)畫狀態(tài)。
5、 JQuery中的插件
- 滾輪事件
<script>
var y = 0;
// mousewheel 鼠標(biāo)滾輪事件
$(document).mousewheel(function(e) {
// e 是事件對(duì)象，只要發(fā)生這個(gè)事件，系統(tǒng)會(huì)自動(dòng)傳遞過(guò)來(lái)
// 如果物體正在運(yùn)動(dòng)，截流
if ($("#big").is(":animated")) {
return ;
}
// e.deltaY: 正： 往上滾， 負(fù)： 往下滾
// console.log(e.deltaY);
if (e.deltaY > 0) {
y--;
} else {
y++;
}
// 判斷
if (y < 0) {
y = 0;
}
if (y > 4) {
y = 4;
}
// 更新頁(yè)面
// 獲取頁(yè)面高度
var h = $("body").innerHeight();
$("#big").animate({"top": -y*h}, 1000);
})
</script>
- 輪播圖
<script>
// 【練習(xí)】 用 jQuery 實(shí)現(xiàn)改變圖片位置
// 輪播圖思路：
// 1. 改變 m_unit 的 left 值，實(shí)現(xiàn)移動(dòng)效果
// 獲取圖片的寬度
var w = $("#m_unit ul li").innerWidth();
// 點(diǎn)擊右邊的按鈕
$("#rightBtn").click(function() {
move();
});
setInterval(move, 1000);
// 保存輪播圖的下標(biāo)
var i = 0;
// 切換圖片
function move() {
// 函數(shù)截流
// 判斷圖片是否正在動(dòng)，如果是返回true，否則返回false
if ($("#m_unit").is(":animated")) {
// 立刻終止函數(shù)
return ;
}
// 指向下一張輪播圖
i++;
// -w 說(shuō)明往左邊移動(dòng) 1張圖片的寬度
// i-1 ==> i
$("#m_unit").animate({"left": -i*w}, 500, function() {
// 0, 1, 2, 3, 4, 5
// 第5張【動(dòng)畫結(jié)束】之后，改變指向下標(biāo) i,
if (i >= 5) {
i = 0; // 變成0
$("#m_unit").css({"left": 0}); // 圖片瞬間切換到第0張
}
// 移除所有l(wèi)i的 current樣式
$(".circles ol li").removeClass("current");
// eq(i) 代表匹配下標(biāo)為 i 的jQuery對(duì)象
$(".circles ol li").eq(i).addClass("current");
});
}
</script>
3.百葉窗
/*
思路：
1. 給 li 綁定 mouseover (或者 mouseenter)
2. 改變 li 的 left 值
前面的
后面的
mouseout 事件，具有 事件冒泡的特性
切換 li， 相當(dāng)于 移出了某個(gè)li ===> 會(huì)傳播給外層的 div
1. 阻止li的 mouseout
2. 添加不會(huì)冒泡的事件 mouseenter mouseleave
*/
$("li").mouseleave(function() {
$("li").stop(true);
$(".no0").animate({"left": 0});
$(".no1").animate({"left": 120});
$(".no2").animate({"left": 240});
$(".no3").animate({"left": 360});
$(".no4").animate({"left": 480});
})
// 1. 給所有的li都添加 鼠標(biāo)移入的事件（mouseenter不會(huì)冒泡的）
$("li").mouseenter(function() {
$("li").stop(true);
// 2. 找出變化值
// （1） 當(dāng)前是哪個(gè)li， li 的下標(biāo) i
// （2） <= i 的就是 往左邊偏
// 0,60,120,180,240
// > i 的就是 往右邊偏
// 0,560,620,680,740
var i = $(this).index();
var left = [0,60,120,180,240]; // 左邊偏的值
var right = [ 0,560,620,680,740]; // 右邊偏的值
// 遍歷所有的li
$("li").each(function(j) { // j 是遍歷的下標(biāo)
if (j <= i) { // j <= i 的就是 往左邊偏 的元素
$(this).animate({"left": left[j]});
} else { // j > i 的就是 往右邊偏 的元素
$(this).animate({"left": right[j]});
}
});
})
