jQuery

基礎概念

概念

JavaScript 原生DOM有些許不便：API不好記、設定事件不方便、呼叫繁瑣。

jQuery是第三方的javaScript框架。jQuery本質是一個js檔案，內部已經寫好了大量的函式用於進行快捷的DOM操作。jQuery旨在“Write Less，Do More”，它具有獨特的鏈式語法和短小清晰的多功能介面，具有高效靈活的CSS選擇器，並且可對CSS選擇器進行擴充套件，擁有便捷的外掛擴充套件機制和豐富的外掛。

目前國內用的比較多的是3.5.1版本，以及能夠支援IE8的1.11.1版本(從jQuery2.x開始，就不再支援IE8)。

引入

通過<script src="jQuery檔案地址"> </script>

<script src="jQuery檔案地址"> </script>
<script>
    //jQuery程式碼
</script>

使用流程

1. 引入jQuery
2. 利用jQuery選擇器找到需要操作的HTML標籤
3. 通過jQuery提供的函式完成DOM操作

注意點

如果頁面使用了jQuery，那麼用jQuery操作的HTML標籤就不能再使用原生的DOM API。比如innerHTML、appendChild、parentElement等。如果要用，那麼必須先完成jQuery標籤和原生DOM標籤的轉換。

獲取jQuery標籤及原生DOM標籤的切換

通過jQuery獲取頁面上的標籤

$("css選擇器");
//例子：
var $box = $('#box');//獲取id為box的HTML標籤

通過CSS選擇器去尋找匹配到的HTML標籤，會根據返回的個數自動判斷是返回一個元素或一個數組。

更多選擇器可查閱jQuery參考手冊 - 選擇器。

jQuery標籤和DOM標籤切換

• jQuery轉原生DOM

  var 原生dom標籤變數名 = jQuery標籤變數名.get(0);
  //例子：
  var $box  = $('#box');
  //把jquery 轉為原生 DOM 標籤
   var box = $box.get(0);
  console.log($box)
  console.log(box);
   
  

• 原生DOM轉jQuery

  var jQuery標籤變數名 = $(原生DOM標籤變數名);
  //例子：
  var box = document.querySelector('#box');
  var $box = $(box);
  console.log($box);
  

基本操作

內容獲取/修改

• html()：用於獲取或設定某個標籤的內部HTML程式碼，類似於原生中的innerHTML。

• text()：獲取或設定標籤的內部文字，類似於原生的innerText。

• val()：獲取或設定表單元素的內容，類似於原生的value。

  //獲取
  jQuery標籤變數名.html();
  jQuery標籤變數名.text();
  jQuery標籤變數名.val();
  //設定
  jQuery標籤變數名.html("新內容");
  jQuery標籤變數名.text("新內容");
  jQuery標籤變數名.val("新內容");
  

• 例子：

  <div>
  <p>這是div中的 p標籤</p>    
  </div>
  <input value="123">
  

  //獲取
  var divText = $('div').text();
  var divHTML = $('div').html();
  var inputValue= $('input').val();
  //設定
  $('div').text('新內容');
  $('div').html("<a href='#'>百度一下</a>");
  $('input').val("456");
  

屬性獲取/修改

• attr()：獲取或設定HTML標籤的某個屬性。

• prop()：獲取或設定HTML標籤的某個屬性，跟attr()相比，prop()適用於標籤的內建屬性，而attr()更適用於使用者自定義屬性。

• removeProp()：刪除某個指定的屬性。

• removeAttr()：刪除某個指定的屬性(推薦使用)。

• addClass()：給某個標籤追加一個class。

• removeClass()：刪除某個標籤的指定class。

  jQuery標籤變數名.attr("屬性名");
  jQuery標籤變數名.attr("屬性名", "屬性值");
  jQuery標籤變數名.prop("屬性名");
  jQuery標籤變數名.prop("屬性名", "屬性值");
  jQuery標籤變數名.removeProp("屬性名");
  jQuery標籤變數名.removeAttr("屬性名");
  jQuery標籤變數名.addclass("class名");
  jQuery標籤變數名.removeclass("class名");
  

• 例子：

  <div class="item">
  <p>這是div中的 p標籤</p>    
  </div>
  <input value="123">
  

  //獲取
  var value1 = $('input').attr('value')
  var value2 = $('input').prop('value')
  //設定
  $('div').addClass('box');
  $('div').removeClass('item');
  

新增/刪除

新增

• append()：在某個標籤之後插入一個新標籤，新標籤會作為最後一個子標籤，類似於原生DOM的appendChild。

• before()：在某個標籤之前插入一個新標籤，新標籤會作為上一個兄弟標籤。

• after()：在某個標籤之後插入一個新標籤，新標籤會作為下一個兄弟標籤。

  jQuery標籤變數名.append("新標籤的HTML程式碼");
  jQuery標籤變數名.before("新標籤的HTML程式碼");
  jQuery標籤變數名.after("新標籤的HTML程式碼");
  

刪除

• remove()：刪除找到的所有標籤。

  jQuery標籤變數名.remove();
  

  • 如果找到多個標籤，則它們都會被刪除。

獲取子/兄弟/父標籤

獲取子標籤

• children()：獲取某個標籤的所有直接子標籤。
• find('css選擇器')：根據CSS選擇器獲取獲取某個標籤滿足條件的所有後代標籤。

獲取兄弟標籤

• prev()：獲取某個標籤的上一兄弟標籤。
• next()：獲取某個標籤的下一兄弟標籤。

獲取父標籤

• parent()：獲取某個標籤的直接父標籤。
• parents('css選擇器')：獲取某個標籤的某個祖先標籤，具體是通過CSS選擇器來指代。

jQuery標籤變數名.parent();
jQuery標籤變數名.parents(CSS選擇器);
jQuery標籤變數名.prev();
jQuery標籤變數名.next();
jQuery標籤變數名.children();
jQuery標籤變數名.find(CSS選擇器);

遍歷

• first()：獲取遍歷標籤中的第一個。

• last()：獲取遍歷標籤中的最後一個。

• each()：對jQuery標籤的快捷遍歷。

• eq(i)：獲取找到標籤中指定下標的標籤，即第i個jQuery標籤。

  $jQuery待遍歷標籤變數名.first();
  $jQuery待遍歷標籤變數名.last();
  $jQuery待遍歷標籤變數名.each(function(index){});
  $jQuery待遍歷標籤變數名.eq(i);
  

修改CSS

css()

//語法： 
//設定
jQuery標籤變數名.css('CSS屬性名', 'CSS屬性值');
//批量設定css
jQuery標籤變數名.css({
    'CSS屬性名1': 'CSS屬性值1',
    'CSS屬性名2': 'CSS屬性值2',
    'CSS屬性名3': 'CSS屬性值3',
});
//獲取 
jQuery標籤變數名.css('CSS屬性名');

動畫

內建動畫

淡入/淡出

• fadeIn()：淡入
• fadeOut()：淡出

下拉/上滑

• slideDown()：下拉
• slideUp()：上滑

jQuery標籤變數名.slideDown(動畫毫秒時間);
jQuery標籤變數名.slideUp(動畫毫秒時間);
jQuery標籤變數名.fadeIn(動畫毫秒時間);
jQuery標籤變數名.fadeOut(動畫毫秒時間);

• 如果對同一個標籤設定了多個動畫，按照動畫程式碼的書寫順序依次執行

自定義動畫

animate()：使用者自定義動畫

jQuery標籤變數名.animate({
    "css屬性名1": "css屬性值1",
    "css屬性名2": "css屬性值2",
    "css屬性名n": "css屬性值n"
}, 動畫持續毫秒時間);

• animate基本上只支援跟位置和尺寸相關的動畫，其他的基本都不支援。
• 如果要顏色的動畫，可以使用css3，用JavaScript來切換class達到控制動畫的目的。

動畫結束後執行js程式碼

jQuery的每個動畫函式都可以支援額外的引數，該引數必須是一個函式，用於表示在動畫結束後要執行的程式碼。

jQuery標籤變數名.動畫函式名(其他引數, function(){
    //動畫結束後要執行的程式碼
});

事件

on()

on()預設使用事件委託。

$父標籤標籤變數名.on('事件名', '要執行事件的標籤CSS選擇器', function(e){
    //觸發事件時要執行的程式碼
});

例子：

<div id='box'><div>

$('body').on('click', '#box', function(e){
    //當id為box的標籤發生點選事件要執行的程式碼
});

• this仍為DOM原生元素，如果轉為jQuery元素需使用$(this)。

其它快捷事件方法

不推薦使用，這些快捷事件方法不適用於用js程式碼新增的標籤，而on()則適用當前及未來的元素，故建議使用on()。

• click
• hover
• dblclick

更多快捷事件方法參見jQuery 參考手冊 - 事件。

其他API

• show()：等同於css('display','block')，顯示某個標籤。

• hide()：等同於css('display','none')，隱藏某個標籤。

  jQuery標籤變數名.show();
  jQuery標籤變數名.hide();
  

鏈式呼叫

概念

如果需要對同一個標籤執行多句的jQuery程式碼，則需要不斷的獲取jQuery標籤，造成程式碼量過多的問題。採用鏈式呼叫可將對同一個標籤的多句程式碼整合成一句，達到程式碼整齊並減少一定的程式碼量的效果。

語法

jQuery標籤變數名.函式名1().函式名2().函式名3()....函式名n();

例子： 
$('div').css('width','300px').animate({"margin-left":"300px"},1000).text('123');
$('div').css('width','300px'); 

• 以上的每個函式都是接著前一個函式的執行結果繼續執行。