JS面試準備二

時間  2019-11-11
標籤 面試 準備 欄目 JavaScript 简体版
原文   原文鏈接

1.經常使用的字符串方法

1. indexOf：查找字符串某一項的初始位置
2. slice：截取字符串（包含起始位置，不包含結束位置）css

不會根據參數大小，交換參數位置
若是出現-1按倒數第一個數，若是出現-2按倒數第二個數。

3. substring：截取字符串（包含起始位置，不包含結束位置）html

會根據參數大小，交換參數位置
若是出現負數，則按0處理。

4. substr：截取字符串node

5. split：數組

做用: 經過一個指定的字符串 把原字符串分割成一個數組。
語法: array string.split([separator] [, limit])
參數:separator是指分割符。limit指定最多分割的數量，能夠理解爲數組長度，默認爲所有。
返回值:返回一個數組。
注意:當沒有分割符的時候(沒有傳入參數)，整個字符串將做爲一個總體保存到數組中。 用分割符分割的時候，分割符會在被刪除了在傳入數組。
<script>
        var str="我愛,你,們";
        console.log(str.split(","));//["我愛","你","們"]
        console.log(str.split(",",2));//["我愛","你"]
        console.log(str.split());//["我愛,你,們"]
        console.log(str.split("mmm"));//["我愛,你,們"]
        console.log(str.split(""));//["我", "愛", "," , "你", "," ,"們"]
</script>

6.charAt：返回對應位置的字符app

2.經常使用的數組方法

1. join： 將數組經過指定字符拼接成字符串。函數

separator可選，若是省略的話，默認爲一個逗號。若是 seprator 是一個空字符串，那麼數組中的全部元素將被直接鏈接。

2. push： 往數組的末尾添加一個或者多個元素。返回值：新數組的length。會修改原數組。
3. unshift： 往數組的末尾添加一個或者多個元素。返回值：新數組的length。會修改原數組。
4. pop： 做用: 刪除數組最後 一個 元素。返回值： 被刪除的那一個元素。注意：會修改原數組。
5. shift： 做用: 刪除數組 第一個 元素。返回值： 被刪除的那一個元素。注意：會修改原數組。
6. slice： 做用:截取數組中一部分，並返回這個新的數組.返回值: 截取後的新的數組。注意：不會修改原數組。
7. splice spa

array array.splice(start, deleteCount[, item1[, item2[, ...]]])
- start    起始位置
- deleteCount    刪除長度
- item    添加的內容
返回值： 由被刪除的元素組成的一個數組
注意：修改了原數組的內容。
<script>
    var att="Liangzhifang".split("");
    console.log(att.splice(2,4,["a"]));//["a","n","g","z"]
    console.log(att);//["L","i",["a"],"h","i","f","a","n","g"]
</script>

4.sort

做用： 對數組的元素進行排序。
語法： array arr.sort([compareFunction]);
參數: compareFunction可選。用來指定按某種順序進行排列的函數。若是省略，元素按照轉換爲的字符串的諸個字符的Unicode位點進行排序。
返回值: 排序後的數組.code

<script>
    //當什麼都不傳入的時候，sort（）默認由小到大排列。
    var attr=[9,5,4,3,2];
    console.log(attr.sort());//[2, 3, 4, 5, 9]
    //傳入function的時候，sort（）內的function返回值大於0，由小到大排列。
    var attrO=[9,5,4,3,2];
    console.log(attrO.sort(function () {
        return 1;
    }));//[2, 3, 4, 5, 9]
    //傳入function的時候，sort（）內的function返回值小於或者等於0，數組序列不變。
    var attrT=[9,5,4,3,2];
    console.log(attrT.sort(function () {
        return -1;
    }));// [9, 5, 4, 3, 2]
    //因爲sort內部是隨機抽取兩個值，咱們在利用function函數的返回值，大於0的時候，交換位置。小於或者等於0的時候不變，來排序。
    //如下是由小到大排序
    var attrTh=[9,5,4,3,2];
    console.log(attrTh.sort(function (a,b) {
        return a-b;
    }));// [2, 3, 4, 5, 9]
    //如下是由大到小排序
    var attrF=[9,5,4,3,2];
    console.log(attrF.sort(function (a,b) {
        return b-a;// [9, 5, 4, 3, 2]
    }));

</script>

3.DOM

1.children 和 childNodeshtm

children 獲取節點的一級的元素子節點，返回的是集合 HTMLCollection    
childNodes 獲取節點的子節點，可能獲取到 元素節點，文本節點，註釋節點，返回的是集合 NodeList
<body>
<div id="wrap">
    <div id="content">
        <div id="inner"></div>
    </div>
    <p>p</p>
    一句話
</div>
<script>
    var wrap = document.getElementById("wrap");
    console.log( wrap.childNodes ); 
    console.log( wrap.children );
</script>
</body>

圖片描述

2.
node.previousElementSibling 上一個元素兄弟節點
node.nextElementSibling 下一個元素兄弟節點blog

<body>
<!--、
    兄弟關係
        node.previousElementSibling 上一個元素兄弟節點
        node.nextElementSibling 下一個元素兄弟節點
-->
<ul id="list">
    <li>1</li>
    <li id="item">2</li>
    <li>3</li>
    <li>4</li>
</ul>
一句話
<link rel="stylesheet" type="text/css" href=""/>
<script>
    var list = document.getElementById("list");
    var item = document.getElementById("item");
    console.log( item.previousElementSibling );
    console.log( item.previousElementSibling.previousElementSibling );
    
    console.log( item.nextElementSibling );
    console.log( item.nextElementSibling.nextElementSibling );
    console.log( item.nextElementSibling.nextElementSibling.nextElementSibling );
</script>

圖片描述

3.firstElementChild和lastElementChild

<body>
<div id="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<script>
    var wrap = document.getElementById("wrap");
    console.log( wrap.firstElementChild );//<div>1</div>
    console.log( wrap.lastElementChild );//<div>4</div>
</script>
</body>

4.setAttribute和removeAttribute

<body>
    <img id="img" _src="./2.jpg" src="1.jpg"/>
    <script>
        var img = document.getElementById("img");
        document.onclick = function(){
            img.setAttribute( "src", img.getAttribute("_src") );//點擊頁面後，將圖片1換成圖片2
        };
        img.setAttribute( "s", img.getAttribute("_src") );//在行間設置自定義屬性 s="./2.jpg".
        console.log(img.getAttribute("s"));
        setTimeout(function(){
            img.removeAttribute( "s" );//頁面打開是後，刪除行間設置的自定義屬性。
        },1000)
    </script>
</body>

5.getBoundingClientRect()

script>
    var box = document.getElementById("box");
    console.log( box.getBoundingClientRect() );
    console.log( box.getBoundingClientRect().left );//盒子 左邊 距離 可視區 左邊 的距離  301
    console.log( box.getBoundingClientRect().right);//盒子 右邊 距離 可視區 左邊 的距離  481
    console.log( box.getBoundingClientRect().top);//盒子 頂部 距離 可視區 頂部 的距離 ,這個頁面的滾動會發生變化   501
    console.log( box.getBoundingClientRect().bottom);//盒子 底部 距離 可視區 頂部 的距離,這個頁面的滾動會發生變化   731
    console.log( box.getBoundingClientRect().width);//盒子 可視 寬度（就是不包括margin） 180
    console.log( box.getBoundingClientRect().height);//盒子 可視 高度（就是不包括margin）230
</script>

6.createElemen

建立元素:
    innerHTML
        問題:原先元素的事件會被清除.
    document.createElement("div");
        爲建立的元素添加屬性,樣式,事件
<script>
    var d = document.createElement("div");//建立一個div元素,此方法的返回值是你建立的元素
    d.id = "box";
    d.className = "title";
    d._index = 1; // 經過 js 方式 添加的自定義屬性
    console.log( d._index );
//------------------------------------------
    d.onclick = function(){
        alert(1);
    }
    console.log( d.onclick );
//------------------------------------------
    d.setAttribute("_src","abc");
    console.log( d );
    
</script>

圖片描述

7.appendChild

parentNode.appendChild(childNode)

    往一個節點裏邊添加一個子節點，注意是添加在最後
    parentNode:父節點（須要把節點放入哪一個容器的內部）
    childNode:子節點（須要放的節點）
    childNode 會被放進 parentNode 內部 的 尾部
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    #wrap{
        border: 1px solid #000;
    }
    #son{
        background-color: red;
    }
    .white{
        color: #fff;
    }
</style>
</head>
<body>
<div id="wrap">
    <div>大頭兒子</div>
</div>
<script>
    var wrap = document.getElementById("wrap");
    var div = document.createElement("div");
    div.innerHTML = "老王之子";
    div.id = "son";
    div.className = "white";
    div.onclick = function(){
        alert( "綠了" );
    }
    console.log( div );
    wrap.appendChild( div );    
</script>
</body>
</html>

圖片描述

8.insertBefore

parentNode.insertBefore(childNode1,childNode2)
        往一個節點的 指定子節點前邊插入一個節點
    childNode1插入到childNode2前邊；
    若是第二個參數沒有，會報錯
    若是第二個參數是null,至關於appendChild

9.removeChild

parentNode.removeChild(childNodes)
    從一個節點中刪除指定的子節點。
        注意：返回值是你刪除的節點

10.replaceChild

parentNode.replaceChild(node,childNode)
    node用來替換的節點
    childNodes被替換的子節點
        兩個參數都必須寫。

11.cloneNode

node.cloneNode(boolean)
    克隆一個節點,返回值是 克隆 的新節點
        boolean:是否進行深度克隆
            true：克隆元素和元素包含的子孫節點
            flase：克隆元素但不包含元素的子孫節點
    注意：
        克隆的時候會把節點的id也克隆下來，因此要注意單獨設置節點的id
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    #wrap{
        border: 10px solid #000;
    }
    .box{
        width:100px;
        height:60px;
        background-color: red;
    }
</style>
</head>
<body>
<div id="wrap">
    <div id="bigHead" class="box">
        大頭兒子
        <!--註釋-->
        <div>半碗粉
            <div>辣椒油</div>    
        </div>
    </div>
</div>
<script>
    var wrap = document.getElementById("wrap");
    var bigHead = document.getElementById("bigHead");
    bigHead.onclick = function(){
        console.log( 1 );
    }
    
    var num = 0;
    document.onclick = function(){
//        var clone = document.createElement("div");
//        clone.innerHTML = bigHead.innerHTML;
//------------------------------------------
//        var clone = bigHead.cloneNode();
        var clone = bigHead.cloneNode(true);
        clone.onclick = bigHead.onclick;
        clone.id = "box"+num++;
        console.log( clone.onclick );
        console.log( clone );
        wrap.appendChild( clone );
    }
    
</script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程