jQuery
一、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'))
});
浙公網安備 33010602011771號