jQuery是什么
說(shuō)白了jQuery是一個(gè)js庫(kù)
當(dāng)然了除了這個(gè)庫(kù)之外，我們還有跟多的庫(kù)，比如：Prototype、YUI、Dojo、Ext JS、移動(dòng)端的zepto等
目的就簡(jiǎn)潔的，快速的開(kāi)發(fā)
學(xué)習(xí)jQuery本質(zhì)： 就是學(xué)習(xí)調(diào)用這些函數(shù)（方法）。
1.jQuery的優(yōu)點(diǎn)
- 輕量級(jí)。核心文件才幾十kb，不會(huì)影響頁(yè)面加載速度。
- 跨瀏覽器兼容，基本兼容了現(xiàn)在主流的瀏覽器。
- 鏈?zhǔn)骄幊?、隱式迭代。
- 對(duì)事件、樣式、動(dòng)畫(huà)支持，大大簡(jiǎn)化了DOM操作。
- 支持插件擴(kuò)展開(kāi)發(fā)。有著豐富的第三方的插件，例如：樹(shù)形菜單、日期控件、輪播圖等。
- 免費(fèi)、開(kāi)源。
2.jQuery如何使用呢？
- 首選你要去下載
- 在你的scrpit標(biāo)簽中（末尾）引入這個(gè)文件，當(dāng)然了你也可以在加載的時(shí)候在頁(yè)面頭部引入,比如你使用windows.load.....，不過(guò)在jquer中有更好的解決方案
- 最簡(jiǎn)單的使用
$('div').hide(),//隱藏盒子
特別要說(shuō)明的一點(diǎn)是：jQuery有一些兼容的小問(wèn)題，但.....你不用去管它
3.正式的開(kāi)始使用它
3.1入口函數(shù)
這個(gè)就是一個(gè)人入口函數(shù)，相當(dāng)于 DOMContentLoaded等待dom結(jié)構(gòu)加載完再去執(zhí)行js代碼
// 第一種: 簡(jiǎn)單易用。
$(function () {
... // 此處是頁(yè)面 DOM 加載完成的入口
}) ;
// 第二種: 繁瑣，但是也可以實(shí)現(xiàn)
$(document).ready(function(){
... // 此處是頁(yè)面DOM加載完成的入口
});
3.2 $是什么？
\(是jQuery的頂級(jí)對(duì)象，\) 與 jQuery是等價(jià)的，
3.3 jQuery對(duì)象與DOM對(duì)象
DOM與jQuery是可以互相轉(zhuǎn)換的，用元素的js獲取的就是DOM對(duì)象，$ 獲取的就是一個(gè)jquery對(duì)象
- jQuery 對(duì)象本質(zhì)是： 利用$對(duì)DOM 對(duì)象包裝后產(chǎn)生的對(duì)象（偽數(shù)組形式存儲(chǔ)）。
- 只有 jQuery 對(duì)象才能使用 jQuery 方法，DOM 對(duì)象則使用原生的 JavaScirpt 方法。
- 相互的轉(zhuǎn)換, 原生中的方法。
// 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.4 獲取元素（選擇器）
- 獲取很簡(jiǎn)單直接就是 $ 這個(gè)比較簡(jiǎn)單，也叫 基礎(chǔ)選擇器，當(dāng)然了，里面還有更多的操作功能
其實(shí)這個(gè)很簡(jiǎn)單，跟css里面的語(yǔ)法很簡(jiǎn)單的
- 層級(jí)選擇器
顧名思義 就是選擇具有層級(jí)關(guān)系的元素，主要就是兩個(gè)后代選擇器；
后代選擇器和子代選擇器。(親兒子選擇器和子子孫孫選擇器)
- 篩選選擇器
這里使用的時(shí)候，我們都是在站在父子兄的角度去分析的
3.5 設(shè)置樣式怎么搞？直接用封裝的函數(shù)
- 簡(jiǎn)單的樣式
$('div').css('屬性', '值')
- jQuery里面的排它思想
// 想要多選一的效果，排他思想：當(dāng)前元素設(shè)置樣式，其余的兄弟元素清除樣式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
- 隱式迭代
所謂的隱式迭代指的就是 自動(dòng)的遍歷dom元素
// 遍歷內(nèi)部 DOM 元素（偽數(shù)組形式存儲(chǔ)）的過(guò)程就叫做隱式迭代。
// 簡(jiǎn)單理解：給匹配到的所有元素進(jìn)行循環(huán)遍歷，執(zhí)行相應(yīng)的方法，而不用我們?cè)龠M(jìn)行循環(huán)，簡(jiǎn)化我們的操作，方便我們調(diào)用。
$('div').hide(); // 頁(yè)面中所有的div全部隱藏，不用循環(huán)操作
- 鏈?zhǔn)骄幊蹋?很重要!!!!)
$(this).css('color', 'red').sibling().css('color', '');
3.5 有沒(méi)有更好的樣式操作呢？
在juqery中。樣式的操作主要的就是有兩種css() 還有就是設(shè)置樣式
- css()，用來(lái)簡(jiǎn)單的處理樣式，主要有三種使用形式，當(dāng)然了也可以拿來(lái)操作；類
// 1.參數(shù)只寫(xiě)屬性名，則是返回屬性值
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)隔開(kāi)， 屬性可以不用加引號(hào)
$(this).css({ "color":"white","font-size":"20px"});
- 設(shè)置樣式,在實(shí)際的開(kāi)發(fā)中比較常用
//比如我現(xiàn)在有幾個(gè)樣式在css中
.current{
color:#ffff;
}
$("div").addClass("current");
// 2.刪除類
$("div").removeClass("current");
// 3.切換類
$("div").toggleClass("current");
- 特別需要說(shuō)明的是：
原生 JS 中 className 會(huì)覆蓋元素原先里面的類名，jQuery 里面類操作只是對(duì)指定類進(jìn)行操作，不影響原先的類名。哈哈哈jQuery確實(shí)是比較強(qiáng)大的
3.6 jquery里面動(dòng)畫(huà)特效呢？
首先我們來(lái)看一下這里的這個(gè)簡(jiǎn)單的表格
- 顯示隱藏：show() / hide() / toggle() ;
- 劃入畫(huà)出：slideDown() / slideUp() / slideToggle() ;
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定義動(dòng)畫(huà)：animate() ;
小心！動(dòng)畫(huà)或者效果一旦觸發(fā)就會(huì)執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫(huà)或者效果排隊(duì)執(zhí)行。我們可以是喲jQuery中的另一個(gè)方法，停止動(dòng)畫(huà)排隊(duì)stop()
- 效果-顯示隱藏
常見(jiàn)有三個(gè)方法：show() / hide() / toggle() ;
?語(yǔ)法規(guī)范如下:
代碼演示
<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>
- 效果-滑入滑出
常見(jiàn)有三個(gè)方法：slideDown() / slideUp() / slideToggle() ;
語(yǔ)法規(guī)范如下:
代碼示例：
<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>
- 效果-淡入淡出
常見(jiàn)有四個(gè)方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
示例代碼：
<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è)速度和透明度要必須寫(xiě)
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
- 效果-自定義動(dòng)畫(huà)（功能非常的強(qiáng)大）
通過(guò)參數(shù)的傳遞可以模擬以上所有動(dòng)畫(huà)，方法為：animate() ;
語(yǔ)法規(guī)范：
<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>
- 至關(guān)重要的一點(diǎn)，停止動(dòng)畫(huà)排隊(duì)stop
動(dòng)畫(huà)或者效果一旦觸發(fā)就會(huì)執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫(huà)或者效果排隊(duì)執(zhí)行。
?停止動(dòng)畫(huà)排隊(duì)的方法為：stop() ;
- stop() 方法用于停止動(dòng)畫(huà)或效果。
- stop() 寫(xiě)到動(dòng)畫(huà)或者效果的前面， 相當(dāng)于停止結(jié)束上一次的動(dòng)畫(huà)。
? 總結(jié): 每次使用動(dòng)畫(huà)之前，先調(diào)用 stop() ,在調(diào)用動(dòng)畫(huà)。
- 事件的切換
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）
- 如果只寫(xiě)一個(gè)函數(shù)，則鼠標(biāo)經(jīng)過(guò)和離開(kāi)都會(huì)觸發(fā)它
代碼實(shí)例：
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul><li><a href="">私信</a></li><li><a href="">評(píng)論</a></li><li><a href="">@我</a></li></ul>
</li>
<li>
<a href="#">微博</a>
<ul><li><a href="">私信</a></li><li><a href="">評(píng)論</a></li><li><a href="">@我</a></li></ul>
</li>
</ul>
<script>
$(function() {
// 鼠標(biāo)經(jīng)過(guò)
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 當(dāng)前元素 this不要加引號(hào)
// // show() 顯示元素 hide() 隱藏元素
// $(this).children("ul").slideDown(200);
// });
// // 鼠標(biāo)離開(kāi)
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切換 hover 就是鼠標(biāo)經(jīng)過(guò)和離開(kāi)的復(fù)合寫(xiě)法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切換 hover 如果只寫(xiě)一個(gè)函數(shù)，那么鼠標(biāo)經(jīng)過(guò)和鼠標(biāo)離開(kāi)都會(huì)觸發(fā)這個(gè)函數(shù)
$(".nav>li").hover(function() {
// stop 方法必須寫(xiě)到動(dòng)畫(huà)的前面
$(this).children("ul").stop().slideToggle();
});
})
</script>
</body>
總結(jié)一下：jQuery 的基礎(chǔ)使用：
|
