JavaScript高級程式設計(第三版)學習,第一次總結

来源:http://www.cnblogs.com/TwinklingZ/archive/2016/03/16/5285403.html
-Advertisement-
Play Games

註:toString方法會去調用每個值的toString方法,toLocaleString會去調用每個值的toLocaleString方法 由於IE7及更早版本會返回HTML中所有可能的特性,所以對上述函數加以改進,讓它返回指定特性。每個特性節點都有一個specified屬性,為true,要麼在HT


Array類型

var arr = [];
arr.length;     //返回數組元素個數
改變length可以動態改變數組大小

檢測數組

instanceof可以檢測某個對象是否是數組,限制:只能是一個網頁或一個全局作用域
Array.isArray(arr);          //最終確定某個值到底是不是數組,沒有限制

轉換方法

arr.toString();                   //返回由數組每個值的字元串形式拼接而成的以逗號分隔的字元串
arr.valueOf();                    //與toString方法一致
arr.toLocalString();          //一般情況與toString和valueOf值一致,重定義則不一定

註:toString方法會去調用每個值的toString方法,toLocaleString會去調用每個值的toLocaleString方法

arr.join("-");                    //以傳入的字元串當做分隔符,返回字元串,不傳值,以逗號分隔

棧方法

arr.push(arg1,arg2,arg3....);               //接收不限量的參數,按順序添加到數組末尾,返回修改後數組的長度
arr.pop();                                             //返回數組最後一項,並移出數組

隊列方法(需和棧方法組合)

arr.shift();                                             //移除數組第一項,並返回被移除項
arr.unshift(arg1,arg2,arg3....);               //在數組前端添加任意項,並返回改變後數組長度

重排序方法

arr.reverse();                                        //反轉數組
arr.sort();                                             //將數組每一項都轉成字元串形式,進行比較,升序排列
arr.sort(function(){});                              //接收一個函數作為參數,根據函數返回值排序,前一項排在後一項後面,返回1,排在前,返回-1

操作方法

arr.concat(arg1,arg2,arg3,.....);          //不限制傳入數量,可以是數組,可以是字元串,可以是數值
arr.slice(arg1,arg2);                              //接收兩個參數,要返回的起始項(可選)和結束位置(可選),不傳最後一個參數,返回從起始項到數組末尾,不傳參數,返回整個數組
arr.splice(arg1,arg2,arg3);                    //arg1刪除的第一項的位置,arg2刪除的項數,arg3,可以是任意數量的字元串,用於刪除後插入

位置方法

arr.indexOf(arg1,arg2);                         //arg1查找的項,arg2查找起點(可選),從頭查找,找到返回位置索引(以位置0開始),未找到返回-1
arr.lastIndexOf(arg1,arg2);                    //與indexOf相反的查找方向,參數數量,意義一致

迭代方法

arr.every(function(){});                            //對數組每一項運行參數函數,都返回true,才為true
arr.filter(function(){});                            //對數組每一項運行參數函數,返回函數返回true的數組成員
arr.forEach(function(){});                         //對數組每一項運行參數函數,沒有返回值,改變數組元素
arr.map(function(){});                              //對數組每一項運行參數函數,返回每次函數調用的結果組成的數組
arr.some(function(){});                              //對數組每一項運行參數函數,只要有一項返回true,返回true
function(item,index,array){}                    //參數函數,接收三個參數:數組項的值,該項在數組的位置,數組對象本身

歸併方法

arr.reduce(function(){},initValue);               //迭代數組所有項,構建一個返回值,從數組第一項開始
arr.reduceRight(function(){},initValue);          //迭代數組所有項,構建一個返回值,從數組最後一項開始
function(prev,cur,index,array){}                    //參數函數,四個參數:前一個值(由前一次函數結果來確定),當前值,項的索引,數組對象
initValue                                                       //可選

DOM

Node類型

nodetype屬性:節點類型,nodeName屬性:節點名稱,nodeValue屬性:節點值 每個節點都有childNodes屬性,保存NodeList對象,動態對象,有length屬性,可以使用item()方法和方括弧法訪問。
  • parentNode屬性,指向文檔樹父節點。
  • previousSibling屬性:同一列表前一個節點
  • nextSibling屬性:同一列表後一個節點
  • firstChild屬性:第一個子節點
  • lastChild屬性:最後一個子節點
  • ownerDocument屬性:指向整個文檔的文檔節點
  • hasChildNodes(node):在節點包含一個或多個子節點返回true
  • someNode.appendChild(newNode):在最後一個子節點之後加入節點
  • someNode.insertBefore(newNode,node):在參照節點之前插入節點,參照節點為null,結果與appendChild方法一致
  • someNode.replaceChild(newNode,node):替換節點
  • someNode.removeChild(node):移除節點
  • someNode.cloneNode(Boolean):複製,true深複製,複製這個節點及子樹,false淺複製,只複製本節點
  • normalize();處理文檔樹中的文本節點,合併用的

Document類型

js用以表示文檔,是整個文檔,不是部分,即document對象
  • document.documentElement屬性:指向<html>
  • document.body屬性:指向<body>
  • document.doctype:指向<!DOCTYPE>
  • document.title:指向<title>
  • document.URL:頁面完整URL
  • document.domain:功能變數名稱,可設置,同一域
  • document.referrer:保存著鏈接到當前頁的那個頁面的URL

查找元素

  • getElementById:接收一個參數,要取得的元素的ID,嚴格按照大小寫匹配,多個id相同,返回第一個元素
  • getElementByTagName:接受一個參數,要取得的元素標簽名,返回NodeList,在HTML文檔中返回HTMLCollection對象,動態集合,可以使用item()方法或方括弧法訪問元素。
  • HTMLCollection對象,還有一個方法,namedItem,可以使用這個方法通過元素的name特性取得集合中的項。
  • getElementsByName():HTMLCollection類型才有的方法。返回給定name特性的所有元素

特殊集合

都是HTMLCollection對象
  • document.anchors:所有帶有name特性的<a>
  • document.applets:所有<applets>
  • document.forms:所有<form>
  • document.images:所有<img>
  • document.links:所有帶href的<a>

Element類型

所有HTML元素都是HTMLElement類型,不然也是通過它的子類型表示。 特性:
  • id:在文檔中的唯一標識符
  • title:有關元素附加說明,一般通過工具提示條顯示出來
  • lang:元素內容語言代碼,很少使用
  • dir:語言方向,tlr(左向右),rlt(右向左),很少使用
  • className:與元素class對應,為元素指定的CSS類

取得特性

  • getAttribute():註意:傳遞的特性名與實際特性名相同,因此要得到class特性,要傳遞"class",而不是"className",也可以取得自定義特性,特性是不區分大小寫的註:通常通過對象屬性來訪問特性,只有取得自定義特性才使用getAttribute方法
  • setAttribute():接收兩個參數,要設置的特性名和值。已存在,替換,不存在,創建。設置的特性名會統一轉換為小寫。
  • removeAttribute():接收特性名。清楚特性值,並刪除特性。

attributes屬性

Element類型是唯一使用attributes屬性的唯一一個DOM節點類型 attributes屬性中包含一個NamedNodeMap,動態集合。元素每個特性都由一個Attr節點表示,每個節點保存在NamedNodeMap對象中,對象擁有的方法:
  • element.attributes.getNamedItem("id"):返回nodeName屬性等於id的節點,簡寫:element.attributes["id"]
  • element.attributes.removeNamedItem("id"):移除nodeName屬性等於name的節點
  • element.attributes.setNamedItem(node):很不常用的方法,為元素添加特性。
attributes的方法不夠方便,更多的會使用getAttribute,setAttribute,removeAttribute方法。序列化倒是有用:
function outputAttribute(element){
    var pairs = new Array(),
        attrName,
        attrValue,
        i,
        len;

    for(i=0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName += "=\"" + attrValue + "\"");
    }

    return pairs.join(" ");
}

由於IE7及更早版本會返回HTML中所有可能的特性,所以對上述函數加以改進,讓它返回指定特性。每個特性節點都有一個specified屬性,為true,要麼在HTML中指定了相應特性,要麼通過setAttribute設置。改進後代碼:

function outputAttribute(element){
    var pairs = new Array(),
        attrName,
        attrValue,
        i,
        len;

    for(i=0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        if(element.attributes[i].specified){
            pairs.push(attrName += "=\"" + attrValue + "\"");
        }       
    }

    return pairs.join(" ");
}

創建元素

  • document.createElement():接收一個參數,要創建的元素標簽名,在HTML中不區分大小寫,在XML區分,創建時也添加了ownerDocument屬性

元素子節點

元素的childNodes屬性包含了它的所有子節點。

Text類型

包含的是純文本內容,可以包含轉義後的HTML字元,通過nodeValue或data獲得文本內容 操作節點中文本的方法:
  • appendData(text):將text添加到節點末尾
  • deleteData(offset,count):從offset指定的位置開始刪除count個字元
  • insertData(offset,text):從offset指定位置開始插入text文本
  • replaceData(offset,count,text):從offset指定位置開始的count字元替換為text
  • splitText(offset):從offset開始將文本分成兩個節點
  • subStringData(offset,count):提取從offset開始到offset+count為止的字元串
  • length屬性,保存節點中的字元數,nodeValue.length,data.length也保存同樣的值

創建文本節點

  • document.createTextNode():接收一個參數,要插入節點中的文本,需要按照HTML或XML格式進行編碼,創建時也會加入ownerDocument屬性

規範化文本節點

  • normalize方法。在父元素上調用,會合併所有文本節點。

分割文本節點

  • splitText方法,將一個文本節點分為兩個

Comment類型

註釋在DOM中通過Comment類型表示,與Text繼承相同基類,擁有除splitText方法的所有字元串操作方法,與Text類似可通過nodeValue和data獲得註釋內容

CDATASection類型

針對XML文檔,表示CDATA區域

DocumentType類型

並不常用,僅有Firefox,Safari,Opera支持。 保存在document.doctype中

DocumentFragment類型

文檔片段。所有節點類型中,只有DocumentFragment沒有對應標記。可以作為倉庫使用。 使用document.createDocumentFragment()來創建文檔片段,繼承了Node的所有方法

Attr類型

元素特性在DOM中以Attr類型表示 屬性:name(特性名稱),value(特性值,與nodeValue值一樣),specified(布爾值,是否代碼中指定) 使用document.createAttribute()並傳入特性名稱可以創建新的特性節點   以上是為個人這一段時間以來學習JavaScript高級程式設計(第三版)的一些總結,還有很多的不足,歡迎大家共同探討!
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 有兩種方式使用 setter 和 getter 1. set/get 2. Object.defineProperty 當然,通常用 setter 和 getter 來實現私有變數 或者 當然,setter 和 getter 最牛逼的用處是用來實現目前流行的 “雙向綁定”,MVxx之類的庫。不支持 
  • 體驗效果:http://hovertree.com/texiao/jquery/33/ 寫個“更多內容的展開/收起”的js 代碼如下: 轉自:http://hovertree.com/h/bjaf/6sm1esjw.htm 更多特效:http://www.cnblogs.com/roucheng/p
  • 畫心 清空 ... 請自由點擊畫布 // <![CDATA[ $("body").append('<script type="text/javascript" src="http://files.cnblogs.com/files/lianmin/flower.js">'); console.log
  • js基礎練習題,一個按鈕控制兩組圖片的切換,做這題的時候我忽然想到了將num1、mun2……都存放在一個數組中,根據索引值匹配到對應相應組的圖片,這樣不管有多少組圖片都簡單的搞定切換,可惜js基礎都沒學全,不知道數組的數組的變數怎麼用,哎……先把問題放在這裡吧,繼續啃基礎知識! CSS: HTML:
  • h5 canvas 小球移動
  • 1. 構造樣式表:selector{ Property:value; Property:value; } Selector是需要更改樣式的元素,property為css屬性的名稱,value應用的哪種格式 2. /* 註釋 */ 3. 當規則發生衝突時,伺服器優先選擇特殊性強的;靠後出現的;帶有!i
  • 今天開始正式認真學習js,雖然在平常j2ee開發中也經常用到JS但並不精通,這次隨筆記下js與Java數據類型的不同之處 與java不同,js作為弱類型語言即使在浮點數與整數上也未作明確區分,Number值可以是var a = 5 or 5.5,以及其他進位如八進位 var a = 070.甚至是科
  • 1.標識符 標識符由一個字母開頭,其後可選擇行地加上一個或多個字母、數字或下劃線。標識符不能使用下麵這些保留字: abstract boolean break byte case catch char class const continue debugger default delete do d
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...