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

HmyBmny 發布于2019-08-23 18:20 / 785人閱讀

摘要：前端最基礎的就是。前面我們已經基本掌握常規的語法語義，以及基本的使用方法。等價于當載入就緒執行一個函數回調。返回一組匹配的元素。據提供的原始標記字符串，動態創建由對象包裝的元素。同時設置一系列的屬性事件等。

前端最基礎的就是 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

初級階段文章目錄

前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）

前端培訓-初級階段（13） - 正則表達式

前端培訓-初級階段（13） - 類、模塊、繼承

前端培訓-初級階段（13） - ECMAScript （內置對象、函數）

前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）

前端培訓-初級階段（13、18）

前端培訓-初級階段（9 -12）

前端培訓-初級階段（5 - 8）

前端培訓-初級階段（1 - 4）

中級階段文章目錄

前端培訓-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）

前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）

前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）

資料

前端培訓目錄、前端培訓規劃、前端培訓計劃

GPU云服務器云服務器云計算的基本概念中級前端工程師基本概念云計算與大數據的概念

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105055.html

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

摘要：前端最基礎的就是。前面我們已經基本掌握常規的語法語義，以及基本的使用方法。等價于當載入就緒執行一個函數回調。返回一組匹配的元素。據提供的原始標記字符串，動態創建由對象包裝的元素。同時設置一系列的屬性事件等。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提...

church 2019-08-02 15:23 評論0 收藏0
前端培訓-中級階段（11、12）- 跨域請求原理以及實現（2019-08-22期）

摘要：上節我們講了同源策略，這節我們講講如何跨域。當這些從的腳本執行出錯，因為違背了同源策略為了保證用戶信息不被泄露，錯誤信息不會顯示出來，取而代之只會返回一個。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每...

binaryTree 2019-08-26 10:21 評論0 收藏0
前端培訓-中級階段（6）- jQuery的事件綁定鏈式操作及原理（2019-07-25期）

摘要：前端最基礎的就是。幫助從舊的事件方法轉換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數。用于過濾器的觸發事件的選擇器元素的后代。事件觸發模擬觸發原生使用觸發。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS）...

Airy 2019-08-02 15:25 評論0 收藏0
前端培訓-中級階段（6）- jQuery的事件綁定鏈式操作及原理（2019-07-25期）

摘要：前端最基礎的就是。幫助從舊的事件方法轉換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數。用于過濾器的觸發事件的選擇器元素的后代。事件觸發模擬觸發原生使用觸發。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS）...

sutaking 2019-08-23 18:26 評論0 收藏0