從零開始學習jQuery (三) 管理jQuery包裝集

来源:http://www.cnblogs.com/wzhiq896/archive/2016/10/19/5967492.html
-Advertisement-
Play Games

本系列文章導航 從零開始學習jQuery (三) 管理jQuery包裝集 一.摘要 在使用jQuery選擇器獲取到jQuery包裝集後, 我們需要對其進行操作. 本章首先講解如何動態的創建元素, 接著學習如何管理jQuery包裝集, 比如添加,刪除,切片等. 二.前言 本系列的2,3篇上面列舉了太多 ...


本系列文章導航

從零開始學習jQuery (三) 管理jQuery包裝集

 

一.摘要

在使用jQuery選擇器獲取到jQuery包裝集後, 我們需要對其進行操作. 本章首先講解如何動態的創建元素, 接著學習如何管理jQuery包裝集, 比如添加,刪除,切片等.

 

二.前言

本系列的2,3篇上面列舉了太多的API相信大家看著眼暈. 不過這些基礎還必須要講, 基礎要扎實.其實對於這些列表大家可以跳過, 等以後用到時再回頭看或者查詢官方的API說明.

本章內容很少, 主要講解動態創建元素和操作jQuery包裝集的各個函數.

 

三.動態創建元素

1.錯誤的編程方法

我們經常使用javascript動態的創建元素, 有很多程式員通過直接更改某一個容器的HTML內容.比如:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>動態創建對象</title>
</head>
<body>
<div id="testDiv">測試圖層</div>
<script type="text/javascript">
    document.getElementById("testDiv").innerHTML = "<div style=\"border:solid 1px #FF0000\">動態創建的div</div>";
</script>
</body>
</html>


上面的示例中我通過修改testDiv的內容,在頁面上動態的添加了一個div元素. 但是請牢記,這是錯誤的做法!

錯誤的原因:

(1) 在頁面載入時改變了頁面的結構. 在IE6中如果網路變慢或者頁面內容太大就會出現"終止操作"的錯誤. 也就是說"永遠不要在頁面載入時改變頁面的Dom模型".

(2) 使用修改HTML內容添加元素,  不符合Dom標準. 在實際工作中也碰到過使用這種方法修改內容後, 某些瀏覽器中並不能立刻顯示添加的元素, 因為不同瀏覽器的顯示引擎是不同的. 但是如果我們使用Dom的CreateElement創建對象, 在所有的瀏覽器中幾乎都可以. 但是在jQuery中如果傳入的而是一個完整的HTML字元串, 內部也是使用innerHTML. 所以也不是完全否定innerHTML函數的使用.

所以從現在開始請摒棄這種舊知識, 使用下麵介紹的正確方法編程.

2.創建新的元素

下麵介紹兩種正確的創建元素的方式.

(1)使用HTML DOM創建元素

什麼是 DOM？

通過 JavaScript，您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。

要改變頁面的某個東西，JavaScript 就需要對 HTML 文檔中所有元素進行訪問的入口。這個入口，連同對 HTML 元素進行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。

在 1998 年，W3C 發佈了第一級的 DOM 規範。這個規範允許訪問和操作 HTML 頁面中的每一個單獨的元素。

所有的瀏覽器都執行了這個標準，因此，DOM 的相容性問題也幾乎難覓蹤影了。

DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔。

DOM 被分為不同的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：
Core DOM
定義了一套標準的針對任何結構化文檔的對象
XML DOM
定義了一套標準的針對 XML 文檔的對象
HTML DOM
定義了一套標準的針對 HTML 文檔的對象。

關於使用HTML DOM創建元素本文不做詳細介紹, 下麵舉一個簡單的例子:

    //使用Dom標準創建元素
    var select = document.createElement("select");
    select.options[0] = new Option("載入項1", "value1");
    select.options[1] = new Option("載入項2", "value2");
    select.size = "2";
    var object = testDiv.appendChild(select);

 

通過使用 document.createElement 方法我們可以創建Dom元素, 然後通過appendChild方法為添加到指定對象上.

(2) 使用jQuery函數創建元素

在jQuery中創建對象更加簡單, 比如創建一個Div元素:

$("<div style=\"border:solid 1px #FF0000\">動態創建的div</div>")


我們主要使用jQuery核心類庫中的一個方法:

jQuery( html, ownerDocument ) 
Returns: jQuery

根據HTML原始字元串動態創建Dom元素.

其中html參數是一個HTML字元串,  在jQuery1.3.2中對此函數做了改進:

當HTML字元串是沒有屬性的元素是, 內部使用document.createElement創建元素, 比如:

//jQuery內部使用document.createElement創建元素:
$("<div/>").css("border","solid 1px #FF0000").html("動態創建的div").appendTo(testDiv);


否則使用innerHTML方法創建元素:

//jQuery內部使用innerHTML創建元素:
$("<div style=\"border:solid 1px #FF0000\">動態創建的div</div>").appendTo(testDiv);

3.將元素添加到對象上

我們可以使用上面兩種方式創建一個而元素, 但是上面已經提到一定不要在頁面載入時就改變頁面的DOM結構, 比如添加一個元素. 正確的做法是在頁面載入完畢後添加或刪除元素.

傳統上, 使用window.onload完成上述目的:

//DOM載入完畢後添加元素
//傳統方法
window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">動態創建的div</div>"; }


雖然能夠在DOM完整載入後, 在添加新的元素, 但是不幸的是瀏覽器執行window.onload函數不僅僅是在構建完DOM樹之後, 也是在所有圖像和其他外部資源完整的載入並且在瀏覽器視窗顯示完畢之後. 所以如果某個圖片或者其他資源載入很長時間, 訪問者就會看到一個不完整的頁面, 甚至在圖片載入之前就執行了需要依賴動態添加的元素的腳本而導致腳本錯誤.

解決辦法就是等DOM被解析後, 在圖像和外部資源載入之前執行我們的函數.在jQuery中讓這一實現變得可行:

//jQuery 使用動態創建的$(document).ready(function)方法
$(document).ready(
        function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用動態創建的$(document).ready(function)方法</div>"; }
);


或者使用簡便語法:

//jQuery 使用$(function)方法
$(
        function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; }
);


使用$()將我們的函數包裝起來即可. 而且可以在一個頁面綁定多個函數, 如果使用傳統的window.onload則只能調用一個函數.

所以請大家將修改DOM的函數使用此方法調用. 另外還要註意document.createElement和innerHTML的區別. 如果可以請儘量使用document.createElement和$("<div/>")的形式創建對象.

 

四.管理jQuery包裝集元素

既然學會了動態創建元素, 接下來就會想要把這些元素放入我們的jQuery包裝集中.

我們可以在jQuery包裝集上調用下麵這些函數, 用來改變我們的原始jQuery包裝集, 並且大部分返回的都是過濾後的jQuery包裝集.

jQuery提供了一系列的函數用來管理包裝集:

1.過濾 Filtering

名稱 說明 舉例
eq( index ) 獲取第N個元素 獲取匹配的第二個元素: 
$("p").eq(1)
filter( expr )

篩選出與指定表達式匹配的元素集合。

 保留帶有select類的元素: 
$("p").filter(".selected")
filter( fn )

篩選出與指定函數返回值匹配的元素集合

這個函數內部將對每個對象計算一次 (正如 '$.each'). 如果調用的函數返回false則這個元素被刪除，否則就會保留。

 保留子元素中不含有ol的元素: 

$("div").filter(function(index) { 
  return $("ol", this).size() == 0;
});
is( expr ) 

註意: 這個函數返回的不是jQuery包裝集而是Boolean值

用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。

如果沒有元素符合，或者表達式無效，都返回'false'. 'filter' 內部實際也是在調用這個函數，所以，filter()函數原有的規則在這裡也適用。

 由於input元素的父元素是一個表單元素，所以返回true: 
$("input[type='checkbox']").parent().is("form")
map( callback )

將一組元素轉換成其他數組（不論是否是元素數組）

你可以用這個函數來建立一個列表，不論是值、屬性還是CSS樣式，或者其他特別形式。這都可以用'$.map()'來方便的建立

 把form中的每個input元素的值建立一個列表: 

$("p").append( $("input").map(function(){ 
  return $(this).val(); 
}).get().join(", ") );
not( expr ) 刪除與指定表達式匹配的元素 從p元素中刪除帶有 select 的ID的元素: 
$("p").not( $("#selected")[0] )

slice( start, end )

 選取一個匹配的子集 選擇第一個p元素: 
$("p").slice(0, 1);

2.查找 Finding

名稱 說明 舉例
add( expr )

把與表達式匹配的元素添加到jQuery對象中。這個函數可以用於連接分別與兩個表達式匹配的元素結果集。

 動態生成一個元素並添加至匹配的元素中: 
$("p").add("<span>Again</span>")
children( [expr] )

取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。

可以通過可選的表達式來過濾所匹配的子元素。註意：parents()將查找所有祖輩元素，而children()只考慮子元素而不考慮所有後代元素。

 查找DIV中的每個子元素: 
$("div").children()
closest( [expr] ) 取得與表達式匹配的最新的父元素

為事件源最近的父類li對象更換樣式:

$(document).bind("click", function (e) { 
  $(e.target).closest("li").toggleClass("hilight"); 
});
contents( ) 查找匹配元素內部所有的子節點（包括文本節點）。如果元素是一個iframe，則查找文檔內容 查找所有文本節點並加粗: 
$("p").contents().not("[nodeType=1]").wrap("<b/>");
find( expr )

搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

所有搜索都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器語法來寫。

 從所有的段落開始，進一步搜索下麵的span元素。與$("p span")相同: 
$("p").find("span")
next( [expr] )

取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。

這個函數只返回後面那個緊鄰的同輩元素，而不是後面所有的同輩元素（可以使用nextAll）。可以用一個可選的表達式進行篩選。

 找到每個段落的後面緊鄰的同輩元素: 
$("p").next()
nextAll( [expr] )

查找當前元素之後所有的同輩元素。

可以用表達式過濾

 給第一個div之後的所有元素加個類: 
$("div:first").nextAll().addClass("after");
offsetParent( ) 返回第一個有定位的父類(比如(relative或absolute)).   
parent( [expr] )

取得一個包含著所有匹配元素的唯一父元素的元素集合。

你可以使用可選的表達式來篩選。

 查找每個段落的父元素: 
$("p").parent()
parents( [expr] ) 取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通過一個可選的表達式進行篩選。 找到每個span元素的所有祖先元素: 
$("span").parents()
prev( [expr] )

取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。

可以用一個可選的表達式進行篩選。只有緊鄰的同輩元素會被匹配到，而不是前面所有的同輩元素。

 找到每個段落緊鄰的前一個同輩元素: 
$("p").prev()
prevAll( [expr] )

查找當前元素之前所有的同輩元素

可以用表達式過濾。

 給最後一個之前的所有div加上一個類: 
$("div:last").prevAll().addClass("before");
siblings( [expr] ) 取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選。 找到每個div的所有同輩元素: 
$("div").siblings()

3.串聯 Chaining

名稱 說明 舉例
andSelf( )

加入先前所選的加入當前元素中

對於篩選或查找後的元素，要加入先前所選元素時將會很有用。

 選取所有div以及內部的p，並加上border類: 
$("div").find("p").andSelf().addClass("border");
end( ) 回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變為前一次的狀態。 

如果之前沒有破壞性操作，則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。這包括在 Traversing 中任何返回一個jQuery對象的函數--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。		 選取所有的p元素，查找並選取span子元素，然後再回過來選取p元素: 

$("p").find("span").end()

 

 

五.常用函數舉例

[待續]

 

六.總結

本篇文章內容較少, 主要講解如何動態創建元素以及管理jQuery包裝集, 介面文檔列舉了太多,  實例部分還沒來得及寫. 因為要睡覺明天還要上班, 所以請各位見諒, 等以後有空的時候補上!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 子數涵數·C語言——指針
    一、什麼是指針？ 指針在百度的解釋：是編程語言中的一個對象，利用地址，它的值直接指向（points to）存在電腦存儲器中另一個地方的值。 也就是說，指針是用於指向某一記憶體單元。 簡而化之，指針便是地址。 二、聲明指針 1.方法：數據類型 *名稱 初始化 2.例如： 3.註意：指針聲明完一定要初始化 ...
  • JAVA Collections工具類sort()排序方法
    JAVA Collections工具類sort()排序方法，對Comparable介面 Comparator介面簡述 ...
  • JAVA WEB 作用域之間的區別
    JAVA WEB 作用域 1、page屬性範圍（pageContext） a、在一個頁面設置的屬性，跳轉到其他頁面就無法訪問了（包括重定向和）。 示例:pageScopeDemo01.jsp <%@ page import="java.util.*" language="java" contentT ...
  • Spring中的事務
    Spring配置文件中關於事務配置總是由三個組成部分，分別是DataSource、TransactionManager和代理機制這三部分，無論哪種配置方式，一般變化的只是代理機制這部分。 DataSource、 TransactionManager這兩部分只是會根據數據訪問方式有所變化，比如使用Hi ...
  • Java --socket編程
    首先讓我們看看最簡單的socket client與server實例： Client Server 以上一個Client和一個Server，最簡單的例子，但是體現socket編程。 如果需要Server服務端一直監聽埠，那麼只需要迴圈就可以（server.accept()會阻塞等待請求），至於需要高 ...
  • 從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式
    本系列文章導航 從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式 一.摘要 本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區分值得大家學習. 二.前言 通過前面幾章我們已經能夠完全控制jQuery包裝集了, 無論是通過選擇器選取對 ...
  • JQuery的開發與使用心得
    關於jQuery的 入門使用jQuery可以很容易或具有挑戰性的，這取決於你如何使用JavaScript，HTML，CSS進行開發和編程。 要知道一件重要的事情是，jQuery是只是一個JavaScript庫。jQuery的所有功能特性都是通過JavaScript訪問，所以要對javascript足 ...
  • angular源碼閱讀的起點，setupModuleLoader方法
    angular源碼其實結構非常清晰，劃分的有條有理的，大概就是這樣子： 其實閱讀angular源碼重要的是angular的整個架構思路，至於服務過濾器和指令可以先拋開。 setupModuleLoader方法寫的有點複雜，尤其是直接三層閉包，如果逆著看，容易糊塗，還是順著思路走比較容易。 首先是，我 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類