前端培訓-中級階段（5）- jQuery的概念與基本使用（2019-07-11期）

原創

2019-06-27 09:35

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。

前面我們已經基本掌握常規的語法語義，以及基本的使用方法。接下來我們講深入進去了解其中內在的原理。
也瞭解 DOM、BOM，但是因爲規範是一在變的，有沒有什麼類庫可以方便操作這些呢？進入我們今天的主題jQuery

jQuery

這東西出來很久了，一般來說都用過。提供一個速查地址

jQuery 簡介

jQuery 設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。
jQuery 是一個跨瀏覽器（兼容所有常見瀏覽器，包括IE6）的工具庫。
提供了元素選取、元素操作、CSS操作、事件處理、動畫、AJAX等功能。

jQuery 的特點

鏈式操作（很優秀）
高效、靈活的選擇器（id、class、tag、僞元素、attr、層級）
插件機制
兼容主瀏覽器，提供了統一的功能接口

jQuery 插件機制

jQuery.fn.extend(object) 對應 $('div'). 的操作。

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

jQuery.extend(object) 對應 $. 的操作。

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

jQuery.extend([deep], target, object1, [objectN])
用一個或多個其他對象來擴展一個對象，返回被擴展的對象。
如果不指定target，則給jQuery命名空間本身進行擴展。這有助於插件作者爲jQuery增加新方法。 如果第一個參數設置爲true，則jQuery返回一個深層次的副本，遞歸地複製找到的任何對象。否則的話，副本會與原對象共享結構。 未定義的屬性將不會被複制，然而從對象的原型繼承的屬性將會被複制。

jQuery 選擇器

基本
#id 、 element 、 .class 、 * 、 selector1,selector2,selectorN
層級
ancestor descendant 、 parent > child 、 prev + next 、prev ~ siblings
基本篩選器
:first、:not(selector)、:even、:odd、:eq(index)、:gt(index)、:lang1.9+、:last、:lt(index)、:header、:animated、:focus、:root1.9+、:target1.9+
內容
:contains(text)、:empty、:has(selector)、:parent
可見性
:hidden、:visible
屬性
[attribute]、[attribute=value]、[attribute!=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]、[attrSel1][attrSel2][attrSelN]
子元素
:first-child、:first-of-type1.9+、:last-child、:last-of-type1.9+、:nth-child、:nth-last-child()1.9+、:nth-last-of-type()1.9+、:nth-of-type()1.9+、:only-child、:only-of-type1.9+、
表單
:input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file
表單對象屬性
:enabled、:disabled、:checked、:selected
混淆選擇器
$.escapeSelector(selector)3.0+
這個方法通常被用在類選擇器或者ID選擇器中包含一些CSS特殊字符的時候，這個方法基本上與CSS中CSS.escape()方法類似，唯一的區別是jquery中的這個方法支持所有瀏覽器。

jQuery()

核心函數，我認爲這是很優秀的一個點。小小的$函數，包含了我們想要的大多數功能。

jQuery(Function)

等價於$.ready(Function)
當DOM載入就緒執行一個函數回調。可以避免當頁面DOM還沒有加載就操作了DOM。（會報錯）
簡單地說，這個方法純粹是對向window.load事件註冊事件的替代方法。不同的是可以綁定多次（addEventListener也可以綁定多次）。ready如果頁面加載完成之後，還會繼續調用（load不會）

jQuery(element)

將原生DOM轉換爲jQuery封裝的DOM。
也可以傳入一個elementArray，來批量轉換一組原生DOM

jQuery([selector,[context]])

傳入一個選擇器，並且可以限制範圍。返回一組匹配的元素。

jQuery(html,[ownerDocument])

據提供的原始 HTML 標記字符串，動態創建由 jQuery 對象包裝的 DOM 元素。同時設置一系列的屬性、事件等。
也可以用來處理XML

`$.fn.attr()`、`$.fn.prop()`、`$.fn.data()`

`$.fn.attr()`

設置或返回被選元素的屬性值。比如href,src,id,class
對應attribute

`$.fn.prop()`

設置或返回被選元素的狀態值。可以理解爲原始值、狀態。比如checked、disabled
對應properties

`$.fn.data()`

早期是直接綁定在DOM對象上的。
目前如果瀏覽器支持HTML5，會在DOM元素上data-*讀取和存儲。

data-* 也可以DOM方法dataset來讀取或修改。

`$.fn.get()`、`$.fn.eq`、`[]`

$.fn.get()等價於[]
get獲取到的是真是的DOM
eq獲得到的還是jQuery包裹的DOM對象。相應的，還有其他方法可以獲取。

`html()`、`text()`、`val()`

html()對應innerHTML
text()對應innerText
val()對應value

微信公衆號：前端linong

初級階段文章目錄

中級階段文章目錄

資料

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

前端培訓-中級階段（5）- jQuery的概念與基本使用（2019-07-11期）