jQuery 簡介:
一個非常優秀的js庫
8~9千行的代碼,重在封裝思想,使用方法會用就可以,現查現用.
zepto 從jQuery演變而來
jQuery 1.8 以前的版本是兼容 IE 6 的 之後爲了擺脫龐大的體積捨棄了 IE 6 的兼容代碼,所以遇到那啥單位的項目就用1.8版本以前的jQuery
jQuery使用示例:
$(function(){
$('div').css({width:'100px',height:'100px',color:'red',background:'black'});
})結果:
對比原生JS:
var aDiv = document.getElementsByTagName('div');
for(var i =0 ;i<aDiv.length;i++){
aDiv[i].style.width ='100px';
aDiv[i].style.height ='100px';
aDiv[i].style.color='red';
aDiv[i].style.background='black';
}
很多行代碼才能達到同樣的效果
zepto是針對移動端的js庫
jQuery學習注意點:
jQuery只是輔助工具,不能替代js,方法再全也有缺失.
jQuery需要分階段學習,jQuery很龐雜,應由淺入深.
jQuery應用方法很多,多到令人髮指,學習時,應該把常用方法運用熟練,對於一些不常用的方法,我們常常先了解其用途,現查先用API
Jquery的選擇器 標籤選擇器:$('div'),
clss選擇器: $('.demo'),
Id選擇器 : $('#mDiv')
父子選擇器(直接子標籤): $('#demo>p') //id爲demo下的直接p標籤
Jquery的 $('')中還可以放入其他類型
js原生dom 例如: var mDom = document.getElementById('demo');
$(mDom) //會生成jQuery對象
對比一下原生Dom的對象,和jQuery對象
Jquery: 原型上的可用方法相當豐富,這裏就不一一列舉了
$()除了可以填原生dom外,還可以填jQuery對象例如:
$($('.demo'))//依然返回該元素的jQuery對象
$() 中還可以添加null 與 undefined結果如下:返回的對象中沒有元素
$() 中還可以添加函數 例如 $(function(){console.log("456")})//作用是立即執行函數
$() 還有輸入兩個參數的用法:
$('p','#demo') 返回 id爲demo下的 p元素
$ 等同於 jquuery 也可以寫成 jquery('.demo');
也就是說 $ 是一個函數類似
function $ (){ 省略.....}
函數中針對各種參數的類型又進行了分類的處理
sizzle 是 jquery 模塊中 負責查找 元素的模塊,使用正則表達式
如果只是希望用 查找元素的方法,可以下載 sizzle .js 只包含jQuery中查找元素的方法
上面提到的用法都是比較常規的用法,下面進入難度模式:
1. $('ul>li:first');//ul下直接子元素的第一個 或者 最後一個:$('ul>li:last');
當然還有索引的方式: $('ul>li:eq(3)')
2. $('ul>li:even').css('color','red'); 偶數的 和 $('ul>li:odd').css('color','red'); 奇數的
filter ( ) 方法 對 $() 選到的對象進行篩選 例如 $('li').filter(',demo').css('color','red');
filter( ) 函數中還可以再添加函數 ,會對$('li') 選中的對象進行便利 並進行處理,返回true則當前項是符合條件的
$('li').filter(funcation(item){ //item 會被填充進索引
console.log(item)
return true;
}).css('color','red')效果如圖:全部都滿足,
非常好的方法可以定義對元素進行篩選
not( ) 方法 和 filter 正好相反
$('li').not(function(index){return false}).css('color','red'); //返回true 則被截取, 返回true 被保留 //這裏是全部保留has() 函數 :用法: li中含有p標籤的是匹配項: 如下
$('ul>li').has('p').css({listStyle : 'none',color : 'red'}) //這裏找到的是li標籤find( ) 函數 :用法 與has() 的不同點是 has 僅作爲判斷條件, find () 會返回找到的元素,
$('ul>li').find('p').css({listStyle : 'none',color : 'red'}) //這裏找到的對象是 p標籤
eq() 函數 : 不僅在 $('div:eq(2)') 中可以使用eq查找索引對應的項,還可以單獨的使用eq方法
$('ul>li:eq(1)').css({listStyle : 'none',color : 'red'})
$('ul>li').eq(4).css({color : 'green',listStyle : 'none'});
is( ) 函數 : 用法:判斷元素是否合條件
<div class="wrap">
<ul>
<li>123</li>
<li class="demo">456</li>
<li>789<p>呵呵噠</p></li>
<li>741</li>
<li>852</li>
</ul>
</div>
<script>
var res = $('ul>li:eq(1)').css({listStyle : 'none',color : 'red'}).is('.demo');
console.log(res);
</script>css() 函數 :兩種用法:
$('li').css('width','100px');一個屬性的寫法;
$('li').css({width : '100px',height : '100px',color : 'red'})//多個屬性htnl() 函數與 text() 函數,不傳參數就是獲取對象的 html 和 text
$('li').html('<span>123</span>');會識別內容中的html標籤$('li').text('<span>123</span>');不會識別內容中的html標籤結果如下:
結果二
鏈式調用
Jquery中 類似:
被稱之爲鏈式調用,能這樣運用方法的前提是每個方法的返回值都是 調用它的對象
但是需要特別注意的是上面的方法都是賦值操作,遇到取值操作時,就行不通了
例如 :
attr() 函數主要是依賴的是Element對象的getAttribute() 和setAttribute()
prop() 函數主要依賴於js中原生對象屬性獲取和設置
因爲 jQuery 認爲: attribute 的checked ,selected, disabled 就是表示該屬性初始狀態的值
property 的checked ,selected , disabled 才表示該屬性實時狀態的值(值爲true,或false)
原生設置屬性:
<div class="wrap">
<ul>
<li>123</li>
<li class="demo">456</li>
<li>789</li>
<li>741</li>
<li>852</li>
</ul>
</div>
<script>
var demo =document.getElementsByClassName('demo')[0];
demo.className ="test"
demo.sister ="litter baby"
demo.setAttribute('brother','HellowKity')
</script>結果:設置class名成功了,但是自定義屬性 sister 沒有添加成功
自定義屬性就可以使用 setAttribute來添加如上圖的 brother 屬性
看完了這些我們在轉過頭來看 attr和 prop
<div class="wrap">
<ul>
<li>123</li>
<li class="demo">456</li>
<li>789</li>
<li class="item">741</li>
<li>852</li>
</ul>
</div>
<script>
$('.demo').prop('sister','little boby')
console.log($('.demo').prop('sister'))
$('.demo').prop('class','test')
$('.item').attr('brother','HellowKity')
console.log($('.item').attr('brother'))
$('.item').attr('class','test');
</script>結果:可以發現prop設置自定義屬性是無效的,而attr設置屬性是有效的
結果如下:
發現 prop沒有成功設置屬性但是在獲取值得時候卻獲取到值了,一臉懵逼,
checkbox
再來看看 對於固有屬性例如 input type=checkbox 中如下:
<input class="check" type="checkbox" checked>
</div>
<script>
console.log('attr:'+ $('.check').attr('checked'));
console.log('prop:'+ $('.check').prop('checked'));
</script>顯示:
結果:
現在設置爲未選中狀態再執行一遍:
顯示:
結果:
發現無論是選中還是未選中attr返回的都是 checked
而且在 input 中去掉 checked 屬性 attr 返回的是 undefined
所以這裏 prop 針對的是 狀態 無論有沒有checked 他返回的是是否選中 true /false
而 attr 只會 在主動寫上checked時 返回 checked 沒有時返回 undefined
*注意 checked 這個屬性比較特殊 一旦加上不用再 checked ="" 因爲本生就是選中不用復值
select
<select name="language" id="language">
<option value="123">javascript</option>
<option value="456">Java</option>
<option value="789">C#</option>
</select>
<script>
console.log('attr:'+ $('option:last').attr('selected'));
console.log('prop:'+ $('option:last').prop('selected'));
</script>顯示:
結果:
現在給最後一個option 設置 selected
顯示:
結果:
input 的disabled
<input type="text" disabled>
<script>
console.log('attr:'+ $('input').attr('disabled'));
console.log('prop:'+ $('input').prop('disabled'));
</script>返回結果:
去掉後:
所以在獲取 selected disabled checked 時 用prop 返回 true/false 是比較好的
另外當移除 屬性時 就可以用到 removeAttr( ) 和 removeProp()
prev() 函數 獲取上一個兄弟節點
$("p").prev(".selected") //返回上一個select 類型的兄弟節點next() 函數 獲取下一個兄弟節點
$("p").next(".selected").css("background", "yellow"); //獲取下一個class名爲selected 的兄弟節點並設置樣式index() 在當前兄弟節點中的索引值
$("li").click(function(){
alert($(this).index());
});應用:輪播圖按鈕
顯示:
接着上面的輪播圖按鈕的例子再說一下
addClass() 添加 class名 removeClass() 移除class名
// addClass的使用示例
$("button").click(function(){
$("p:first").addClass("intro");
});
//removeClass 的使用示例 空參數代表刪除所有class
$("button").click(function(){
$("p:first").removeClass("intro");
});利用這兩種方法重寫輪播圖按鈕:
結果: 一樣,而且性能更好,不用去操作所有項,直接用 class選擇器選出來 修改對應項