一、JQuery瞭解

1 .原生JS的問題

我們會發現原生的JS編程很麻煩,尤其在兼容性的問題

選擇元素,權限兼容的只有getElementById和getElementsByTagName;其他方法都有兼容問題
樣式操作也有兼容問題,還得我們自己封裝，封裝getStyle（）
動畫也麻煩,也得自己封裝，封裝animation（）
HTML節點操作也挺麻煩的

JS裏面麻煩的都是和DOM編程有關的,有兼容問題,還的我們自己封裝.

jQuery是原生JS封裝的,簡化了JS的DOM編程，完美的解決了原生js在DOM操作上的難題

2. JQuery

口號:

​ 寫更少的代碼，做更多的事情

官方自我介紹:

​ jQuery是一個快速、小型的、特性很多的JS庫，它把很多事兒都變得簡單。jQuery是免費的、開源的。

版本線：

​ 1.x版本

​ 2.x版本

​ 3.x版本

jQuery分壓縮版和未壓縮版

二、 $() 選擇器

$ 就是jQuery的核心，query就是選擇的意思

**語法**
$(‘選擇器’)，jQuery(‘選擇器’)

$可以用jQuery代替，$和jQuery是同一個函數

選中某個或某類元素

<style type="text/css">
	p {
		float:left;
		width: 60px;
		height: 60px;
		background-color: #ccc;
		margin-left: 10px;
		margin-top: 10px;
	}
</style>
<p></p>
<p></p>
<p></p>
<p></p>
<script src="jQuery.js"></script>
<script>
	console.log($)
	$('p').css('background-color','red');
</script>

1. $() 選擇出來的是一個類數組

哪怕選擇的是一個單獨的元素,返回的也是一個類數組

console.log($('#box'));
// [div#box]

既然是類數組，就不能直接跟原生js的語法

$('#box').style.backgroundColor = 'red';

上面寫法是錯的，$()選出的是jQuery對象，

如果想使用元素方法，可以加[0]，將jQuery對象轉成元素對象

$('#box')[0].style.backgroundColor = 'red';

2. 使用方法（引號問題）

$(‘選擇器’)裏面的引號不能丟，在jQuery中只有是以下幾個不用加引號，其他全部需要

不需要加引號的選擇

$(this)
$(document)
$(window)

3. 選擇器問題

jQuery支持的CSS2.1所有選擇器,也支持部分CSS3的選擇器

$('div')
$('.box')
$('.box li')
$('*')

4. 文檔加載

// 文檔加載完畢後執行
$(document).ready(function(){
})
// 簡寫方案
$(function(){
	console.log($('div'))
})

三. 篩選器

這個是jQuery 的發明 和js沒有關係

寫在引號裏面,:當成篩選的功能符

以下都是序號，篩選器,

1. 選擇所有的p標籤

$('p');
$('p').css('background-color','red');

2. 選擇第一個p標籤

$('p:first');
$('p:first').css('background-color','red');

3. 最後一個p標籤

$('p:last');
$('p:last').css('background-color','red');

4. 任意一個p標籤

: eq(num)； num是要篩選出來第幾個p的下標，從0開始

$('p:eq(2)');
$('p:eq(2)').css('background-color','red');

5. 選中某一個範圍的p標籤

:lt(num)； 選中下標小於num的所有標籤

$('p:lt(2)');
$('p:lt(2)').css('background-color','red');

:gt(num); 選中下標大於num的所有標籤

$('p:gt(2)');
$('p:gt(2)').css('background-color','red');

等於就是:eq()

6. 獲取奇偶數

:odd 獲取下標為奇數的標籤

$('p:odd');
$('p:odd').css('background-color','red');

:even 獲取下標為偶數的標籤

$('p:even');
$('p:even').css('background-color','red');

注意哦
下標是從0開始的，也就是説下標為偶數的標籤其實是我們看起來的奇數標籤

7. 特別的過濾器的方法

7.1 eq可以單獨的提煉為方法，可以連續打點調用

$('p').eq(2);
$('p').eq(2).css('background-color','red');

提煉出來的好處是，可以使用變量

var num = 2;
$('p').eq(num).css('background-color','red');
// 不提煉出來的方法，只用用字符串拼接了
$('p:gt('+ num +')').css('background-color','red');

還可以組合使用

$('p:even').eq(2).css('background-color','red');

7.2 first() last() 篩選第一個最後一個元素的方法

$('div').first().css('background-color','red')

$('div').last().css('background-color','red')

7.3 not() 排除那些元素

$('div').not('.ta').css('background-color','red')

7.4 hasClass() 判斷是否具有某個類名

$('div').click(function(){
	console.log($(this).hasClass('ta'))
})

8. is()

判斷是不是返回true,或false

判斷點擊的這個p標籤是不是有這個類叫做t

$('p').click(function(){
	alert($(this).is('.t'))
})

還可以判斷是不是奇數的,is()裏面可以寫篩選器

$('p').click(function(){
	alert($(this).is(':odd'))
})

四. 序與迭代

1. 序號 eq()

按照選擇器選中的元素,然後在通過序號挑選

<div class="box1">
	<p></p>
	<p></p>
	<p></p>
</div>
<div class="box2">
	<p></p>
	<p></p>
	<p></p>
</div>
<script>
	$('.box2 p').eq(1);
	$('p').eq(1);
	//按照需要的規則,上面兩種寫法選中並不是同一個p標籤
</script>

也就是説 $()函數將返回一個對象隊列,用eq來精確選擇這個序號的某個元素.

2. index() 方法

返回這個元素在親兄弟中的排名,無視選擇器怎麼選.

<div class="box1">
	<p></p>
	<p></p>
	<p></p>
</div>
<div class="box2">
	<p></p>
	<p></p>
	<p></p>
</div>
<script>
	$('p').click(function(){
		alert($(this).index());
	})
</script>

$(this).index()是一個很常見的寫法,表示觸發這個事件的元素,在親兄弟中的排名.

利用index()方法寫對應

// 事件綁定在box1裏面的p
$('.box1 p').click(function(){
	// 改變的是box2裏面的對應的p
	$('.box2 p').eq($(this).index()).css("background-color","red");
})

3. each() 方法 迭代

表示遍歷節點,也叫作迭代符合條件的節點

$('p').each(function(i){
	// i 為遍歷的下標 0,1,2...
	$(this).css('width',50*i)
})

4. size() 方法 和 length 屬性

size() 方法和 length 屬性是一樣的的, 獲取jQuery對象中元素的個數.

這兩個數字永遠相同

$('p').length;
$('p').size();

5. get() 方法

get()方法和eq()方法基本一致,都仰賴$()的序列,eq()返回的是jQuery對象.

而get()方法返回原生的JS元素,類似於直接jQuery元素加[0]

$('p').get(0).innerHTML = '';
$('p')[0].innerHTML = '';

五. CSS 方法

CSS方法可以讀取樣式，可以設置樣式

1. 讀取樣式值

讀取樣式，可以讀取計算後的樣式，寫一個參數，為獲取值的屬性

參數為屬性字符串，必須加引號

讀取的值有單位

$('p:first').css('background-color');

2. 設置一個屬性值

如果只設置一個屬性值，需要穿兩個參數，

第一個參數為需要設置值的屬性

第二個參數為需要設置的值，如果為數值，不需要加單位，

$('p:first').css('background-color'，'blue');
$('p:first').css('width',200);

3. 同時設置多個屬性值

如果想要同時設置多個屬性值，可以寫成JSON

$('p:lt(3)').css({
	'width': 100,
	'height': 100,
	'background-color': 'blue'
});

當然你也可以寫多條單獨設置樣式

4. 設置的屬性可以多樣

設置的屬性不僅可以為改變後的值，還可以設置+= 的值，就是在原有的基礎上加多少像素

$('p:eq(3)').css('width','+=20px');
$('p:eq(3)').css('width','+=20');

以上兩種寫法一樣

5. 設置獲取自定義屬性attr()

5.1 獲取自定義屬性

$('div').attr('data-title');

5.2 設置自定義屬性

$('div').attr('data-title','wuwei');

6. 關於class類名

6.1 添加類名 addClass()

$('div').addClass('title')

6.2 刪除類名 removeClass()

$('div').removeClass('title')

6.3 切換類名 triggerClass()

$('div').click(function(){
	$('div').toggleClass('title')
})

7. 關於節點值

7.1 html()

就是innerHTML

$('div').html();  // 獲取值
$('div').html('<h2>this is h2</h2>'); // 設置值

7.2 text()

就是innerText

$('div').text();  // 獲取值
$('div').text('<h2>this is h2</h2>'); // 設置值

六. 節點關係

1. children()

選中所有的子元素

表示選取親兒子,不選擇後代,選擇所有的子元素

$('#box').children()

選擇所有子元素中的div元素

$('#box').children('div')

還可以添加篩選器

$('#box').children('div:odd')

2. find()

查詢所有的後代選擇器

返回後代所有元素的列表

$('#box').find('p')

注意,和children()方法不一樣,find()方法裏面,必須寫參數,表示後代的誰,

find就是尋找的意思,就是你找後代裏的誰

3. parent()

找父元素,任何一個元素只有一個父元素,

$('p').parent()

4. parents()

找所有的祖先元素,可以傳參數,找哪一個祖先

$('p').parents('div')

5. sibling()

找所有的親兄弟元素節點

$('p').sibling()

可以加選擇器

$('p').sibling('div')

6. prev() next() prevAll() nextAll()

前一個兄弟,後一個兄弟,前所有的兄弟,後所有的兄弟元素節點

7. offsetParent()

查找定位父級

$('p').offsetParent('div')

七. 節點操作

1. append()

在父元素後面添加子節點

父節點.append(子節點)

$('#box').append('<p>好的</p>')

1.2 $()可以將一個普通的節點字符串轉成jQuery對象

var $p = $('<p>this is p</p>');
// 不能這麼寫 ,下面的寫法是選擇文檔中的p標籤了
$('p')

1.3 創建節點

$('<p></p>')

$()不僅僅能選擇節點也能創建節點

2. appendTo()

將一個jQuery元素添加到另外一個元素中

和append()方法是相反的,被動形式,追加於

$('<p>好的</p>').append($('#box'))

3. prepend()

在父元素最前面添加節點元素

$('#box').prepend('<p>好的</p>')

4. prependTo()

prepend()被動形式插入到父元素節點最前面

$('<p>好的</p>').prepend($('#box'))

5. after()

在選中的元素後面插入一個兄弟元素節點

所有p標籤後面插入一個h3兄弟元素

$('p').after('<h3>我是h3標籤</h3>')

6. before()

在前面插入一個兄弟元素節點

$('p').before('<h3>我是h3標籤</h3>')

7.insertBefore()

不同於原生的方法,在兄弟節點前插入新的節點

$('<p>好的</p>').insertBefore($('p')[2])

8. wrap()

給選中的元素外邊添加一個包裹元素

$('div').wrap('<p></p>')

9. wrapAll()

將所有的選中的元素外套一個元素

$('div').wrapAll('<p></p>')

10. replaceWith()

將選中的元素替換掉,元素節點替換

$('div').replaceWith('<p></p>')

11. empty()

清空元素裏面的內容

$('div').empty()

12. remove()

刪除節點,刪除頁面上所有的p標籤

$('div').remove()

13. clone

節點克隆

參數為布爾值

$('div').clone();
$('div').clone(true);
// true表示要克隆div元素身上的事件

八. 事件監聽

1. 通過事件名綁定事件

在jQuery裏面,就連點擊事件都變成回調函數了,

事件名一律不加on

$('.box1').click(function(){
	// 這裏就是點擊box1要做的事情
})

例子:

// 鼠標進入
$('p').mouseenter(function(){
	$(this).css('background-color','blue');
})
// 鼠標離開
$('p').mouseleave(function(){
	$(this).css('background-color','red');
})

2. 通過on綁定事件

$('.box1').on('click',function(){
	// 這裏就是點擊box1要做的事情
})

3. 解除事件綁定off

$('.box1').off('click')

4. 只綁定一次事件one()

$('.box1').one('click',function(){
	// 這裏就是點擊box1要做的事情
})

5. 移入移出事件

$('.box1').hover(function(){
	// 鼠標移入觸發
	console.log(1);
},function(){
	// 鼠標移出觸發
	console.log(2);
})

6. 事件對象事件源

e.target 獲取的是元素的DOM元素

$(document).click(function(e){
	console.log(e.target);   // 原生DOM元素
})

九. animate 方法

動畫方法 animate

1. animate 方法的使用

第一個參數：終點JSON

第二個參數： 動畫運行的時間，毫秒

 $('p:eq(3)').animate({'margin-top': 300},2000);

2. 動畫運行完的回調函數

第三個參數為動畫運行完後的參數

背景顏色是不能在動畫裏漸變的,只有在回調裏完成,如果想讓顏色慢慢漸變需要使用css3技術.

$('p:eq(3)').animate({'margin-top': 300},2000，function(){
	// alert('運行完成')；
	$(this).css('background-color','red')；
});

jQuery動畫默認不是勻速的 ，是easeInOut

3. 動畫排隊

3.1. 同一個元素的不同動畫會排隊

 $('p:eq(3)').animate({'top': 300},2000);
 $('p:eq(3)').animate({'left': 300},2000);

jQuery的動畫和我們封裝的不一樣，不是斜着走的，而是先向下運動，結束後在向右移動

因為jQuery默認有一個處理機制，叫做 動畫排隊

動畫排隊：

當一個元素接收到了兩個animate命令後，後面的animate會排隊

所以上面的動畫，先豎着跑在橫着跑，總動畫時長為4000毫秒

如果想斜着跑就寫在一個animate裏面

 $('p:eq(3)').animate({'top': 300,'left': 300},2000);

我們自己封裝的動畫方法不如它的原因就在這裏，沒有動畫排隊

3.2. 不同的元素動畫不會排隊 是同時的

這裏的p選擇的是多個元素，不排隊同時運行動畫

 $('p').animate({'top': 300},2000);

十. 動畫相關的方法

1. 內置的show(),hide(),toggle()方法

show()顯示,hide()隱藏,toggle()切換

使用方法:

show([time[,callback]])

參數都是可選的

1.1 沒有參數的時候

$('div').show();  // 讓div元素顯示
$('div').hide();  // 讓div元素隱藏,添加display:none
$('div').toggle();// 切換顯示狀態,自行帶有判斷,如果顯示,則隱藏,如果隱藏則顯示

1.2 如果有數值參數,將變為動畫,第一個參數為運動速度或時間

速度單詞,fast normal, slow ,參數為字符串

如果傳入的為時間,則單位為毫秒數

讓元素在顯示與影藏之間動畫運動1s,還有透明度變換,

$('div').show(1000);  // 從左上角徐徐展開
$('div').hide(1000);  // 徐徐縮小到左上角,運動完成添加display:none
$('div').toggle(1000);// 切換顯示狀態,自行帶有判斷,如果顯示,則隱藏,如果隱藏則顯示

1.3 第二個參數為運動完成後的回調

$('input:eq(0)').click(function(){
	$('div').show(1000,function(){
		$(this).css('background','red');  // 動畫運行完執行的回調函數
	});
})

2. slideDown(),slideUp(),slideToggle()

滑動,捲簾運動,這個動畫改變的就只有元素的高度

使用方法:

slideDown([time[,fn]])

參數都是可選的

2.1 不加參數的情況

slideDown()方法的動畫機理

一個display:none;的元素,瞬間顯示,瞬間高度變為0,然後jQuery自己捕捉原有的height作為動畫的重點.

最好不要用行內元素做動畫

等價於:

$(‘div’).show(); // 瞬間顯示

var oldHeight = $(‘div’).css(‘height’); // 記住原有高度

$(‘div’).css(‘height’:0); // 將高度設置為0

$(‘div’).animate({‘height’:oldHeight},1000); // 執行高度從0到原有高度的動畫

$('div').slideDown();  // 下滑展開
$('div').slideUp();    // 上滑收回
$('div').slideToggle();// 滑動切換

$('input:eq(0)').click(function(){
	$('div').slideDown();
})
$('input:eq(1)').click(function(){
	$('div').slideUp();
})
$('input:eq(2)').click(function(){
	$('div').slideToggle();
})

2.2 第一個參數為運動速度或時間

速度單詞,fast normal, slow ,參數為字符串

如果傳入的為時間,則單位為毫秒數

$('div').slideDown(1000);

2.3 第二個參數為回調函數

$('div').slideDown(function(){
	$(this).css('background','red')
});

2.4 結合上面兩種方法自動執行

$('div').show(1000,function(){
	$(this).slideUp(1000,function(){
		$(this).slideDown(1000,function(){
			$(this).hide(1000)
		})
	})
})

3. fadeIn(),fadeOut(),fadeTo(),fadeToggle();

淡入淡出的一系列方法

如果元素有opacity屬性,一定要理解,你所設置的opacity值為,淡入的終點值,如果你設置為0,那麼元素將永遠淡入不了;

fadeIn() 動畫機理:

一個display:none的元素,瞬間可見,然後透明度瞬間變為opacity:0,然後自己的opacity開始變換,如果自己沒有設置opacity,就變為1

3.1 不加參數執行淡入淡出

$('div').fadeIn();      // 淡入
$('div').fadeOut();     // 淡出 
$('div').fadeTo();      // 淡入到哪個數字,不傳參數沒效果,最好是時間和最終的opacity值一樣設置.
			// 這個比較特殊,如果起點至比較大,就是淡出,起點值小,就是淡入
						

$('div').fadeToggle();  // 淡入淡出切換

3.2 第一個參數為速度或時間

$('div').fadeIn(1000);      // 淡入過程1000完成
$('div').fadeOut(1000);     // 淡出 
$('div').fadeTo(1000);      // 第一參數為過渡時間,第二個但是才是淡入到哪個數字
$('div').fadeToggle(100);  // 淡入淡出切換

3.3 第二個參數是回調函數

$('div').fadeIn(1000,function(){
});

比較特殊的是fadeTo()

fadeTo() 方法第二個參數是,透明度變換的終點值,第三個參數才是回調函數

$('div').fadeTo(1000,0.6,function(){
});

4. stop() 停止動畫

關於動畫停止一共有四種,不同的參數情況不同

stop();
stop(true);
stop(true,true);
stop(false,true);

4.1 stop()沒有參數的情況

stop ()停止動畫如果沒有參數,則表示停止當前的animate動畫,但是不清除動畫隊列,立即執行後面的animate動畫

$('div').stop();

4.2 stop(true)

停止當前animate動畫,並且清除動畫隊列,盒子此時留在停止動畫時的位置

$('div').stop(true);

4.3 stop(true,true)

停止當前animate動畫,盒子瞬間停當前animate動畫的終點位置,並且清除動畫隊列,

可以理解為瞬間執行完當前動畫,並且清除動畫隊列

$('div').stop(true,true);

4.4 stop(false,true)

瞬間完成當前的animate動畫,但是不會清除動畫隊列,並且執行後面的動畫,

$('div').stop(false,true);

有人可能會有疑問,為什麼沒有stop(true,false);

其實stop(true),就是stop(true,false);後面的false可以省略,

現在就明白了,stop()就是stop(false,false);

總結會發現,

第一個參數為是否清除動畫隊列,true,清除動畫隊列,false不清除動畫隊列

第二個參數為,停止當前animate動畫,停止後動畫的位置,true為,瞬間結束動畫,動畫停止後位置為當前動畫的終點,false,停止動畫值,元素停留在停止動畫的位置

動畫案例:

<style type="text/css">
	div {
		position:absolute;
		top:100px;
		left:100px;
		width: 100px;
		height: 100px;
		background-color: skyblue;
	}
</style>
<input type="button" value="stop()">
<input type="button" value="stop(true)">
<input type="button" value="stop(true,true)">
<input type="button" value="stop(false,true)">
<div></div>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
	// 添加四個動畫
	$('div').animate({'left':800},2000);
	$('div').animate({'top':300},2000);
	$('div').animate({'left':100},2000);
	$('div').animate({'top':100},2000);
	$('input:eq(0)').click(function(){
		$('div').stop();
	})
	$('input:eq(1)').click(function(){
		$('div').stop(true);
	})
	$('input:eq(2)').click(function(){
		$('div').stop(true,true);
	})
	$('input:eq(3)').click(function(){
		$('div').stop(false,true);
	})
</script>

4.5 stop()可以用來防止動畫積累

每次點擊都會在動畫隊列裏添加一個動畫,動畫會排隊

<script type="text/javascript">
	$('input:eq(0)').click(function(){
		$('div').animate({'left':100},1000);
	})
	$('input:eq(1)').click(function(){
	   $('div').animate({'left':900},1000);
	})
</script>

就像定時器,設表先關

用動畫先關閉前面的動畫

可以連續打點的調用,先清除動畫隊列,再行新的動畫

$('input:eq(0)').click(function(){
	$('div').stop().animate({'left':100},1000);
})
$('input:eq(1)').click(function(){
	$('div').stop().animate({'left':900},1000);
})

5. finish()

瞬間完成所有動畫隊列

$('input:eq(4)').click(function(){
	$('div').finish();
})

6. deley()

延遲,可以使用連續打點,必須放在運動語句之前

$('div').delay(1000).animate({'left':500},1000);
$('div').delay(1000).slideUp();

注意hide()不加參數,就不是動畫,是瞬間完成的,加參數哪怕數字1也是動畫

$('div').delay(1000).hide(3000);

7. is(“:animted”)

判斷一個元素是否在運動中,可以防止動畫積累

$('div:eq(3)').animate({'width':900},8000);
$('div').click(function(){
	alert($(this).is(':animated'))
});