js（二）對象

時間 2020-06-15

原文原文鏈接

簡介：javascript

在JavaScript中除了null和undefined之外其餘的數據類型都被定義成了對象，也能夠用建立對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基於對象實現的。css

<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用數字對象獲取可表示最大數
var bb=new String("hello JavaScript"); 
//建立字符串對象
var cc=new Date();
//建立日期對象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//數組對象
</script>

3.1 String對象

字符串對象建立

字符串建立(兩種方式)
① 變量 = 「字符串」
② 字串對象名稱 = new String (字符串)html

 
         var  
         str1= 
         "hello world" 
         ; 
        
         var  
         str1=  
         new  
         String( 
         "hello word" 
         );

字符串對象的屬性和函數

       x.length         －－－－獲取字符串的長度

 x.toLowerCase()        －－－－轉爲小寫
 x.toUpperCase()        －－－－轉爲大寫
 x.trim()               －－－－去除字符串兩邊空格       


－－－－字符串查詢方法

x.charAt(index)         －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index爲要獲取的字符索引

x.indexOf(findstr,index)－－－－查詢字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         －－－－match返回匹配字符串的數組，若是沒有匹配則返回null
x.search(regexp)        －－－－search返回匹配字符串的首字符位置索引

                        示例：
                        var str1="welcome to the world of JS!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 結果爲"world"
                        alert(str3);     // 結果爲15
                        

－－－－子字符串處理方法

x.substr(start, length) －－－－start表示開始位置，length表示截取長度
x.substring(start, end) －－－－end是結束位置

x.slice(start, end)     －－－－切片操做字符串
                        示例：
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //結果爲"cd"
                            
                            alert(str3); //結果爲"efgh"
                            
                            alert(str4); //結果爲"cdefg"
                            
                            alert(str5); //結果爲"fg"

x.replace(findstr,tostr) －－－－    字符串替換

x.split();                 －－－－分割字符串
                                 var str1="一,二,三,四,五,六,日"; 
                                var strArray=str1.split(",");
                                alert(strArray[1]);//結果爲"二"
                                
x.concat(addstr)         －－－－    拼接字符串

3.2 Array對象

3.2.1 數組建立

建立數組的三種方式：java

建立方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

建立方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

建立方式3:
var arrname = new Array(長度); 
            //  初始化數組對象:
                var cnweek=new Array(7);
                    cnweek[0]="星期日";
                    cnweek[1]="星期一";
                    ...
                    cnweek[6]="星期六";

建立二維數組：node

View Code

3.2.2 數組對象的屬性和方法

join方法：python

View Code

concat方法：數組

View Code

數組排序-reverse sort：瀏覽器

View Code

數組切片操做：app

View Code

刪除子數組：dom

View Code

數組的push和pop：

View Code

數組的shift和unshift：

View Code

總結js的數組特性：

View Code

3.3 Date對象

3.3.1 建立Date對象

//方法1：不指定參數
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：參數爲日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：參數爲毫秒數
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());

//方法4：參數爲年月日小時分鐘秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒並不直接顯示

Date對象的方法—獲取日期和時間

獲取日期和時間
getDate()                 獲取日
getDay ()                 獲取星期
getMonth ()               獲取月（0-11）
getFullYear ()            獲取完全年份
getYear ()                獲取年
getHours ()               獲取小時
getMinutes ()             獲取分鐘
getSeconds ()             獲取秒
getMilliseconds ()        獲取毫秒
getTime ()                返回累計毫秒數(從1970/1/1午夜)

實例練習：

View Code

Date對象的方法—設置日期和時間

View Code

Date對象的方法—日期和時間的轉換

View Code

3.4 Math對象

//該對象中的屬性方法 和數學有關.
   

abs(x)    返回數的絕對值。
exp(x)    返回 e 的指數。
floor(x)對數進行下舍入。
log(x)    返回數的天然對數（底爲e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入爲最接近的整數。
sin(x)    返回數的正弦。
sqrt(x)    返回數的平方根。
tan(x)    返回角的正切。

//方法練習:
        //alert(Math.random()); // 得到隨機數 0~1 不包括1.
        //alert(Math.round(1.5)); // 四捨五入
        //練習：獲取1-100的隨機整數，包括1和100
             //var num=Math.random();
             //num=num*10;
             //num=Math.round(num);
             //alert(num)
        //============max  min=========================
        /* alert(Math.max(1,2));// 2
        alert(Math.min(1,2));// 1 */
        //-------------pow--------------------------------
        alert(Math.pow(2,4));// pow 計算參數1 的參數2 次方.

3.5 Function 對象(重點)

3.5.1 函數的定義

 
         function  
         函數名 (參數){ <br>    函數體; 
        
         return  
         返回值; 
        
         }

功能說明：

可使用變量、常量或表達式做爲函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function 類能夠表示開發者定義的任何函數。

用 Function 類直接建立函數的語法以下：

 
         var  
         函數名 =  
         new  
         Function( 
         "參數1" 
         , 
         "參數n" 
         , 
         "function_body" 
         );

雖然因爲字符串的關係，第二種形式寫起來有些困難，但有助於理解函數只不過是一種引用類型，它們的行爲與用 Function 類明確建立的函數行爲是相同的。

示例：

View Code

注意：js的函數加載執行與python不一樣，它是總體加載完纔會執行，因此執行函數放在函數聲明上面或下面均可以：

View Code

3.5.2 Function 對象的屬性

如前所述，函數屬於引用類型，因此它們也有屬性和方法。
好比，ECMAScript 定義的屬性 length 聲明瞭函數指望的參數個數。

 
         alert(func1.length)

3.5.3 Function 的調用

View Code

3.5.4 函數的內置對象arguments

View Code

3.5.4 匿名函數

View Code

回到頂部

BOM對象

window對象

全部瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不須要建立對象,直接使用便可.

Window 對象方法

alert()            顯示帶有一段消息和一個確認按鈕的警告框。
confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt()           顯示可提示用戶輸入的對話框。

open()             打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close()            關閉瀏覽器窗口。

setInterval()      按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval()    取消由 setInterval() 設置的 timeout。
setTimeout()       在指定的毫秒數後調用函數或計算表達式。
clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
scrollTo()         把內容滾動到指定的座標。

方法使用

一、alert confirm prompt以及open函數

View Code

示例：

View Code

二、setInterval，clearInterval

setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。

 
         語法：<br>     setInterval(code,millisec) 
        
         其中，code爲要調用的函數或要執行的代碼串。millisec週期性執行或調用 code 之間的時間間隔，以毫秒計。

示例：

View Code

回到頂部

DOM對象

什麼是HTML DOM

HTML Document Object Model（文檔對象模型）
HTML DOM 定義了訪問和操做HTML文檔的標準方法
HTML DOM 把 HTML 文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹)

DOM樹

畫dom樹是爲了展現文檔中各個對象之間的關係，用於對象的導航。

DOM節點

節點類型

HTML 文檔中的每一個成分都是一個節點。

DOM 是這樣規定的：
   整個文檔是一個文檔節點
   每一個 HTML 標籤是一個元素節點
   包含在 HTML 元素中的文本是文本節點
   每個 HTML 屬性是一個屬性節點

其中，document與element節點是重點。

節點關係

節點樹中的節點彼此擁有層級關係。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱爲根（root）
每一個節點都有父節點、除了根（它沒有父節點）
一個節點可擁有任意數量的子
同胞是擁有相同父節點的節點

下面的圖片展現了節點樹的一部分，以及節點之間的關係：

訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,咱們可以以不一樣的方式來訪問 HTML 元素。

節點查找

直接查找節點

 
         document.getElementById(「idname」) 
        
         document.getElementsByTagName(「tagname」) 
        
         document.getElementsByName(「name」) 
        
         document.getElementsByClassName(「name」)

局部查找

注意：設計到尋找元素，注意<script>標籤的位置！

導航節點屬性

'''

parentElement           // 父節點標籤元素

children                // 全部子標籤

firstElementChild       // 第一個子標籤元素

lastElementChild        // 最後一個子標籤元素

nextElementtSibling     // 下一個兄弟標籤元素

previousElementSibling  // 上一個兄弟標籤元素

'''

注意，js中沒有辦法找到全部的兄弟標籤！

節點操做

建立節點：

 
         createElement(標籤名) ：建立一個指定名稱的元素。

例：var tag=document.createElement(「input")
tag.setAttribute('type','text');

添加節點：

 
         追加一個子節點（做爲最後的子節點） 
        
         somenode.appendChild(newnode) 
        
         把增長的節點放到某個節點的前邊 
        
         somenode.insertBefore(newnode,某個節點);

刪除節點：

 
         removeChild()：得到要刪除的元素，經過父元素調用刪除

替換節點：

 
         somenode.replaceChild(newnode, 某個節點);

節點屬性操做：

一、獲取文本節點的值：innerText innerHTML

二、attribute操做

     elementNode.setAttribute(name,value)    

     elementNode.getAttribute(屬性名)        <-------------->elementNode.屬性名(DHTML)

     elementNode.removeAttribute(「屬性名」);

三、value獲取當前選中的value值
       1.input
       2.select （selectedIndex）
       3.textarea
四、innerHTML 給節點添加html代碼：
       該方法不是w3c的標準，可是主流瀏覽器支持
       tag.innerHTML = 「<p>要顯示內容</p>」;

五、關於class的操做：

 
         elementNode.className 
        
         elementNode.classList.add 
        
         elementNode.classList.remove

六、改變css樣式：

 
         <p  
         id 
         = 
         "p2" 
         >Hello world!< 
         / 
         p> 
        
         document.getElementById( 
         "p2" 
         ).style.color 
         = 
         "blue" 
         ; 
        
         .style.fontSize 
         = 
         48px

DOM Event(事件)

事件類型

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素得到焦點。               練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。

onload         一張頁面或一幅圖像完成加載。

onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開

onselect       文本被選中。
onsubmit       確認按鈕被點擊。

綁定事件方式

方式1:

<div id="div" onclick="foo(this)">點我呀</div>

<script>
    function foo(self){           // 形參不能是this;
        console.log("點你大爺!");
        console.log(self);   
    }
</script>

方式2:

<p id="abc">試一試!</p>

<script>

    var ele=document.getElementById("abc");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>

事件介紹

一、onload：

onload 屬性開發中只給 body元素加.這個屬性的觸發標誌着頁面內容被加載完成.應用場景: 當有些事情咱們但願頁面加載完馬上執行,那麼可使用該事件屬性.

View Code

二、onsubmit：

當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.若是驗證失敗.在該方法中咱們應該阻止表單的提交.

View Code

三、事件傳播：

View Code

四、onselect：

View Code

五、onchange:

View Code

六、onkeydown:

Event 對象：Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件一般與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經建立好了,而且會在事件函數被調用時傳給事件函數.咱們得到僅僅須要接收一下便可.好比onkeydown,咱們想知道哪一個鍵被按下了，須要問下event對象的屬性，這裏就時KeyCode.

View Code

七、onmouseout與onmouseleave事件的區別：

View Code