jQuery常用知識點

jQuery簡介

JavaScript庫的概念

JavaScript開發的過程中，處理瀏覽器的兼容很複雜而且很耗時，於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的代碼進行封裝。

把一些常用到的方法寫到一個單獨的js文件，使用的時候直接去引用這js文件就可以了。（animate.js、common.js）

常見的JavaScript 庫 - jQuery、Prototype、MooTools。其中jQuery是最常用的一個

jQuery其實就是一個js文件，裏面封裝了一大堆的方法方便我們的開發，其實就是一個加強版的common.js，因此我們學習jQuery，其實就是學習jQuery這個js文件中封裝的一大堆方法。

jQuery的優點好處

jQuery設計的宗旨是’Write Less，Do
More’，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的操作，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結爲：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器。
極大地簡化了 JavaScript 編程。

jQuery的版本

jQuery版本有很多，分爲1.x 2.x 3.x

1.x版本：能夠兼容IE678瀏覽器
2.x版本：不兼容IE678瀏覽器
1.x和2.x版本jquery都不再更新版本了，現在只更新3.x版本。
3.x版本：不兼容IE678，更加的精簡（在國內不流行，因爲國內使用jQuery的主要目的就是兼容IE678）
國內多數網站還在使用1.x的版本

jQuery官網(http:// jquery.com)

體驗jQuery

使用JavaScript開發過程中，有許多不便之處

-查找元素的方法太少，麻煩。
-遍歷僞數組很麻煩，通常要嵌套一大堆的for循環。
-有兼容性問題。
-想要實現簡單的動畫效果，也很麻煩
-代碼冗餘。

$(document).ready(function () {
    $('#btn1').click(function () {
      	// 隱式迭代：偷偷的遍歷，在jQuery中，不需要手動寫for循環了，會自動進行遍歷。
        $('div').show(200);
    });

    $('#btn2').click(function () {
        $('div').text('我是內容');
    });
});

優點總結：

-查找元素的方法多種多樣，非常靈活
-擁有隱式迭代特性，因此不再需要手寫for循環了。
-完全沒有兼容性問題。
-實現動畫非常簡單，而且功能更加的強大。
-代碼簡單、粗暴。

jQuery中頂級對象

jQuery中的頂級對象是$或jQuery

獲取jQuery對象
入口函數
高級功能

注意：jQuery中的$和JQuery關鍵字本身爲同一對象；

jQuery中頁面加載事件

使用jQuery的三個步驟：

引入jQuery文件
入口函數
功能實現

關於jQuery的入口函數：

// 第一種寫法
$(document).ready(function() {
	
});
// 第二種寫法
$(function() {
	
});

jQuery入口函數與window.onload的對比

JavaScript的入口函數要等到頁面中所有資源（包括圖片、文件）加載完成纔開始執行。
jQuery的入口函數只會等待文檔樹加載完成就開始執行，並不會等待圖片、文件的加載。

jQuery對象和DOM對象

jQuery對象和DOM對象的區別

DOM對象

用原生JavaScript獲取的DOM對象
	通過document.getElementById()  反饋的是元素(DOM對象)
通過document.getElementsByTagName()獲取到的是什麼？
	僞數組(集合)，集合中的每一個對象是DOM對象

jQuery對象

jQuery對象用$()的方式獲取的對象
jQuery對象又可以叫做包裝集(包裝的DOM對象的集合)

區別

jQuery對象不能使用DOM對象的成員，DOM對象不能使用jQuery對象的成員

// DOM對象
var box = document.getElementById('box');
// 錯誤
box.text('hello');
// 正確
box.innerText = 'hello';

// jQuery對象，jQuery對象加前綴$，用以區分DOM對象
var $box = $('#box');
// 錯誤
$box.innerText = 'hello';
// 正確
$box.text('hello');

jQuery對象和DOM對象的相互轉換

jQuery對象轉換成DOM對象：   
	jQuery對象.get(索引值); 
	jQuery對象[索引值] 
    	jQuery對象是包裝集(集合)，從集合中取數據可以使用索引的方式
DOM對象轉換成jQuery對象：   
	$(DOM對象) 只有這一種方法;

案例

// 僅僅演示對象之間的轉換，代碼不推薦這麼寫
jQuery(document).ready(function () {
  // 獲取元素；
  var inpArr = document.getElementsByTagName('input');
  // 獲取第一個按鈕，然後綁定事件；
  $(inpArr[0]).click(function () {
    // 設置body的背景色
    $('body')[0].style.background = '#fff';
  });
  // 獲取第二個按鈕，然後綁定事件；
  $(inpArr[1]).click(function () {
    // 設置body的背景色
    $('body').get(0).style.background = '#000';
  });
});

選擇器

jQuery選擇器是jQuery爲我們提供的一組方法，讓我們更加方便的獲取到頁面中的元素。注意：jQuery選擇器返回的是jQuery對象。

jQuery選擇器有很多，基本兼容了CSS1到CSS3所有的選擇器，並且jQuery還添加了很多更加複雜的選擇器。（查看jQuery文檔）

jQuery選擇器雖然很多，但是選擇器之間可以相互替代，就是說獲取一個元素，你會有很多種方法獲取到。所以我們平時真正能用到的只是少數的最常用的選擇器。

jQuery基本選擇器

名稱	用法	描述
ID選擇器	$(’#id’);	獲取指定ID的元素
類選擇器	$(’.class’);	獲取同一類class的元素
標籤選擇器	$(‘div’);	獲取同一類標籤的所有元素
並集選擇器	$(‘div,p,li’);	使用逗號分隔，只要符合條件之一就可。
交集選擇器	$(‘div.redClass’);	獲取class爲redClass的div元素

總結：跟css的選擇器用法一模一樣。

jQuery層級選擇器

名稱	用法	描述
子代選擇器	$(‘ul > li’);	使用-號，獲取兒子層級的元素，注意，並不會獲取孫子層級的元素
後代選擇器	$(‘ul li’);	使用空格，代表後代選擇器，獲取ul下的所有li元素，包括孫子等

跟CSS的選擇器一模一樣。

jQuery過濾選擇器

這類選擇器都帶冒號:

名稱	用法	描述
:eq（index）	$(‘li:eq(2)’).css(‘color’, ‘red’);	獲取到的li元素中，選擇索引號爲2的元素，索引號index從0開始。
:odd	$(‘li:odd’).css(‘color’, ‘red’);	獲取到的li元素中，選擇索引號爲奇數的元素
:even	$(‘li:even’).css(‘color’, ‘red’);	獲取到的li元素中，選擇索引號爲偶數的元素

jQuery篩選選擇器(方法)

篩選選擇器的功能與過濾選擇器有點類似，但是用法不一樣，篩選選擇器主要是方法。

名稱	用法	描述
children(selector)	$(‘ul’).children(‘li’)	相當於$(‘ul-li’)，子類選擇器
find(selector)	$(‘ul’).find(‘li’);	相當於$(‘ul li’),後代選擇器
siblings(selector)	$(’#first’).siblings(‘li’);	查找兄弟節點，不包括自己本身。
parent()	$(’#first’).parent();	查找父親
eq(index)	$(‘li’).eq(2);	相當於$(‘li:eq(2)’),index從0開始
next()	$(‘li’).next()	找下一個兄弟
prev()	$(‘li’).prev()	找上一次兄弟

jQuery操作樣式

CSS操作

功能：設置或者修改樣式，操作的是style屬性。
操作單個樣式

// name：需要設置的樣式名稱
// value：對應的樣式值
$obj.css(name, value);
// 使用案例
$('#one').css('background','gray');// 將背景色修改爲灰色

設置多個樣式

// 參數是一個對象，對象中包含了需要設置的樣式名和樣式值
$obj.css(obj);
// 使用案例
$('#one').css({
    'background':'gray',
    'width':'400px',
    'height':'200px'
});

獲取樣式

// name:需要獲取的樣式名稱
$obj.css(name);
// 案例
$('div').css('background-color');

注意：獲取樣式操作只會返回第一個元素對應的樣式值。

隱式迭代：

設置操作的時候，如果是多個元素，那麼給所有的元素設置相同的值
獲取操作的時候，如果是多個元素，那麼只會返回第一個元素的值。

class操作

添加樣式類

// name：需要添加的樣式類名，注意參數不要帶點.
$obj.addClass(name);
// 例子,給所有的div添加one的樣式。
$('div').addClass('one');

移除樣式類

// name:需要移除的樣式類名
$obj.removeClass('name');
// 例子，移除div中one的樣式類名
$('div').removeClass('one');

判斷是否有某個樣式類

// name:用於判斷的樣式類名，返回值爲true false
$obj.hasClass(name)
// 例子，判斷第一個div是否有one的樣式類
$('div').hasClass('one');

切換樣式類

// name:需要切換的樣式類名，如果有，移除該樣式，如果沒有，添加該樣式。
$obj.toggleClass(name);
// 例子
$('div').toggleClass('one');

jQuery動畫

jQuery提供了三組基本動畫，這些動畫都是標準的、有規律的效果，jQuery還提供了自定義動畫的功能。
演示動畫效果 [08-演示jQuery動畫（animate）.html]

三組基本動畫

顯示(show)與隱藏(hide)是一組動畫：
滑入(slideUp)與滑出(slideDown)與切換(slideToggle)，效果與捲簾門類似
淡入(fadeIn)與淡出(fadeOut)與切換(fadeToggle)

$obj.show([speed], [callback]);
// speed(可選)：動畫的執行時間
	 // 1.如果不傳，就沒有動畫效果。如果是slide和fade系列，會默認爲normal
	 // 2.毫秒值(比如1000),動畫在1000毫秒執行完成(推薦)
     // 3.固定字符串，slow(200)、normal(400)、fast(600)，如果傳其他字符串，則默認爲normal。
// callback(可選):執行完動畫後執行的回調函數

slideDown()/slideUp()/slideToggle();同理
fadeIn()/fadeOut();fadeToggle();同理

自定義動畫

animate: 自定義動畫

$(selector).animate({params},[speed],[easing],[callback]);
// {params}：要執行動畫的CSS屬性，帶數字（必選）
// speed：執行動畫時長（可選）
// easing:執行效果，默認爲swing（緩動）  可以是linear（勻速）
// callback：動畫執行完後立即執行的回調函數（可選）

動畫隊列與停止動畫

在同一個元素上執行多個動畫，那麼對於這個動畫來說，後面的動畫會被放到動畫隊列中，等前面的動畫執行完成了纔會執行（聯想：火車進站）。

// stop方法：停止動畫效果
stop(clearQueue, jumpToEnd);
// 第一個參數：是否清除隊列
// 第二個參數：是否跳轉到最終效果

jQuery節點操作

創建節點

// $(htmlStr)
// htmlStr：html格式的字符串
$('<span-這是一個span元素</span-');

添加節點

append  appendTo	在被選元素的結尾插入內容
prepend prependTo	在被選元素的開頭插入內容
before				在被選元素之後插入內容
after				在被選元素之前插入內容

清空節點與刪除節點

empty：清空指定節點的所有元素，自身保留(清理門戶)

$('div').empty(); // 清空div的所有內容（推薦使用，會清除子元素上綁定的內容，源碼）
$('div').html('');// 使用html方法來清空元素，不推薦使用，會造成內存泄漏，綁定的事件不會被清除。

remove：相比於empty，自身也刪除（自殺）

$('div').remove();

克隆節點

作用：複製匹配的元素

// 複製$(selector)所匹配到的元素（深度複製）
// cloneNode(true)
// 返回值爲複製的新元素，和原來的元素沒有任何關係了。即修改新元素，不會影響到原來的元素。
$(selector).clone();

jQuery操作屬性

attr操作

設置單個屬性

// 第一個參數：需要設置的屬性名
// 第二個參數：對應的屬性值
$obj.attr(name, value);
// 用法舉例
$('img').attr('title','哎喲，不錯哦');
$('img').attr('alt','哎喲，不錯哦');

設置多個屬性

// 參數是一個對象，包含了需要設置的屬性名和屬性值
$obj.attr(obj)
// 用法舉例
$('img').attr({
    title:'哎喲，不錯哦',
    alt:'哎喲，不錯哦',
    style:'opacity:.5'
});

獲取屬性

// 傳需要獲取的屬性名稱，返回對應的屬性值
$obj.attr(name)
// 用法舉例
var oTitle = $('img').attr('title');
alert(oTitle);

移除屬性

// 參數：需要移除的屬性名，
$obj.removeAttr(name);
// 用法舉例
$('img').removeAttr('title');

prop操作

在jQuery1.6之後，對於checked、selected、disabled這類boolean類型的屬性來說，不能用attr方法，只能用prop方法。

// 設置屬性
$(':checked').prop('checked',true);
// 獲取屬性
$(':checked').prop('checked');// 返回true或者false

val()/text/()html()

$obj.val()		獲取或者設置表單元素的value屬性的值
$obj.html() 	對應innerHTML
$obj.text()		對應innerText/textContent，處理了瀏覽器的兼容性

jQuery尺寸和位置操作

width方法與height方法

設置或者獲取高度，不包括內邊距、邊框和外邊距

// 帶參數表示設置高度
$('img').height(200);
// 不帶參數獲取高度
$('img').height();

獲取網頁的可視區寬高

// 獲取可視區寬度
$(window).width();
// 獲取可視區高度
$(window).height();

innerWidth/innerHeight/outerWidth/outerHeight

innerWidth()/innerHeight()	方法返回元素的寬度/高度（包括內邊距）。
outerWidth()/outerHeight()  方法返回元素的寬度/高度（包括內邊距和邊框）。
outerWidth(true)/outerHeight(true)  方法返回元素的寬度/高度（包括內邊距、邊框和外邊距）。

scrollTop與scrollLeft

設置或者獲取垂直滾動條的位置

// 獲取頁面被捲曲的高度
$(window).scrollTop();
// 獲取頁面被捲曲的寬度
$(window).scrollLeft();

offset方法與position方法

offset方法獲取元素距離document的位置，position方法獲取的是元素距離有定位的父元素(offsetParent)的位置。

// 獲取元素距離document的位置,返回值爲對象：{left:100, top:100}
$(selector).offset();
// 獲取相對於其最近的有定位的父元素的位置。
$(selector).position();

jQuery事件機制

JavaScript中已經學習過了事件，jQuery對JavaScript事件進行了封裝，增加並擴展了事件處理機制。jQuery不僅提供了更加優雅的事件處理語法，而且極大的增強了事件的處理能力。

jQuery事件發展歷程(瞭解)

簡單事件綁定–bind事件綁定–delegate事件綁定–on事件綁定(推薦)

簡單事件註冊

click(handler)			單擊事件
mouseenter(handler)		鼠標進入事件
mouseleave(handler)		鼠標離開事件

缺點：不能同時註冊多個事件

bind方式註冊事件

// 第一個參數：事件類型
// 第二個參數：事件處理程序
$('p').bind('click mouseenter', function(){
    // 事件響應方法
});

缺點：不支持動態事件綁定

delegate註冊委託事件

// 第一個參數：selector，要綁定事件的元素
// 第二個參數：事件類型
// 第三個參數：事件處理函數
$('.parentBox').delegate('p', 'click', function(){
    // 爲 .parentBox下面的所有的p標籤綁定事件
});

缺點：只能註冊委託事件，因此註冊時間需要記得方法太多了

on註冊事件

on註冊事件(重點)

jQuery1.7之後，jQuery用on統一了所有事件的處理方法。
最現代的方式，兼容zepto(移動端類似jQuery的一個庫)，強烈建議使用。

on註冊簡單事件

// 表示給$(selector)綁定事件，並且由自己觸發，不支持動態綁定。
$(selector).on( 'click', function() {});

on註冊事件委託

// 表示給$(selector)綁定代理事件，當必須是它的內部元素span才能觸發這個事件，支持動態綁定
$(selector).on( 'click','span', function() {});

事件委託原理

// 事件委託的原理
var ul = document.querySelector('#ul');
ul.onclick = function (e) {
  // console.log(e.target.t·agName);
  if (e.target.tagName.toLowerCase() === 'li') {
    console.log(e.target);
  }
}

on註冊事件的語法：

// 第一個參數：events，綁定事件的名稱可以是由空格分隔的多個事件（標準事件或者自定義事件）
// 第二個參數：selector, 執行事件的後代元素（可選），如果沒有後代元素，那麼事件將有自己執行。
// 第三個參數：data，傳遞給處理函數的數據，事件觸發的時候通過event.data來使用（不常使用）
// 第四個參數：handler，事件處理函數
$(selector).on(events[,selector][,data],handler);

通過源碼查看 bind click delegate on 註冊事件的區別

事件解綁

unbind方式（不用）

$(selector).unbind(); // 解綁所有的事件
$(selector).unbind('click'); // 解綁指定的事件

undelegate方式（不用）

$( selector ).undelegate(); // 解綁所有的delegate事件
$( selector).undelegate( 'click' ); // 解綁所有的click事件

off方式（推薦）

// 解綁匹配元素的所有事件
$(selector).off();
// 解綁匹配元素的所有click事件
$(selector).off('click');

觸發事件

$(selector).click(); // 觸發 click事件
$(selector).trigger('click');

jQuery事件對象

jQuery事件對象其實就是js事件對象的一個封裝，處理了兼容性。

// screenX和screenY	對應屏幕最左上角的值
// clientX和clientY	距離頁面左上角的位置（忽視滾動條）
// pageX和pageY	距離頁面最頂部的左上角的位置（會計算滾動條的距離）

// event.keyCode	按下的鍵盤代碼
// event.data	存儲綁定事件時傳遞的附加數據

// event.stopPropagation()	阻止事件冒泡行爲
// event.preventDefault()	阻止瀏覽器默認行爲
// return false:既能阻止事件冒泡，又能阻止瀏覽器默認行爲。

jQuery補充知識點

鏈式編程

通常情況下，只有設置操作才能把鏈式編程延續下去。因爲獲取操作的時候，會返回獲取到的相應的值，無法返回 jQuery對象。

end(); // 篩選選擇器會改變jQuery對象的DOM對象，想要回復到上一次的狀態，並且返回匹配元素之前的狀態。

each方法

jQuery的隱式迭代會對所有的DOM對象設置相同的值，但是如果我們需要給每一個對象設置不同的值的時候，就需要自己進行迭代了。

作用：遍歷jQuery對象集合，爲每個匹配的元素執行一個函數

// 參數一表示當前元素在所有匹配元素中的索引號
// 參數二表示當前元素（DOM對象）
$(selector).each(function(index,element){});

多庫共存

jQuery使用 $作爲標示符，但是如果與其他框架中的$ 衝突時，jQuery可以釋放$符的控制權.

var jq = $.noConflict();// 釋放$的控制權,並且把$的能力給了c

插件

常用插件

彈出層插件 layer
- layer插件
放大鏡插件
- jQuery.zoom
輪播圖插件
- http://sorgalla.com/jcarousel/
- https://github.com/OwlCarousel2/OwlCarousel2
圖片懶加載插件
- jQuery.lazyload
jQueryUI
- 常用的2-3個功能演示
查看jQuery插件的源碼

jQuery插件開發

給jQuery增加方法的兩種方式

$.method = fn		靜態方法
$.fn.method = fn	實例方法

增加一個靜態方法，實現兩個數的和，插件

(function ($) {
  $.add = function (a, b) {
    return a + b;
  }
}(jQuery))

$.add(5, 6);

tab欄插件 [21-tab欄插件.html]

(function ($) {
  // {tabMenu: '#aa'}
  $.tab = function (options) {
    // 默認參數
    var defaults = {
      tabMenu: '#tab',
      activeClass: 'active',
      tabMain: '#tab-main',
      tabMainSub: '.main',
      selectedClass: 'selected'
    }
    // 把options中的屬性，把對應屬性的值賦給defaults對應的屬性
    // defaults.tabMenu = options.tabMenu || defaults.tabMenu;
    // for(var key in options) {
    //   defaults[key] = options[key];
    // }
    $.extend(defaults, options);

    $(defaults.tabMenu).on('click', 'li', function () {
      $(this)
        .addClass(defaults.activeClass)
        .siblings()
        .removeClass(defaults.activeClass);

      //
      var index = $(this).index();
      //
      $(defaults.tabMain + ' ' + defaults.tabMainSub)
        .eq(index)
        .addClass(defaults.selectedClass)
        .siblings()
        .removeClass(defaults.selectedClass);
    })
  }
}(window.jQuery))

表格插件 [22-表格插件.html]

(function($) {
  // 內部的變量，外部無法訪問，防止變量名衝突
  var a = 0;
  // 給$增加了一個實例方法
  $.fn.table = function (header, data) {
    var array = [];
    array.push('<table>');
    array.push('<tr>');

    // 生成表頭
    $.each(header, function () {
      array.push('<th>' + this + '</th>');
    })
    array.push('</tr>');


    // 生成數據行
    $.each(data, function (index) {
      // this是當前遍歷到的數組中的每一個對象
      // 拼數據行
      array.push('<tr>');
      array.push('<td>' + (index + 1) + '</td>');

      // 遍歷對象，拼表格
      for (var key in this) {
        array.push('<td>' + this[key] + '</td>');
      }

      array.push('</tr>');
    })
    array.push('</table>');

    this.append(array.join(''));
  }

}(window.jQuery))