本文是針對剛學(xué)編程的小白,都是一些基礎(chǔ)知識,如果想了解更多深層一點的東西,歡迎移步本人博客 !!

博客地址 點擊跳轉(zhuǎn)

------------------ 數(shù)組-------------------

數(shù)組的聲明

<script>
    // 數(shù)組的聲明方式
    var arr = [1,2,5,5];   // 數(shù)組名[索引值];  索引號的順序從0開始
    var arr = new Array(1,4,6);
    var testArr = ["劉備","關(guān)羽","張飛","諸葛亮"];
    console.log(testArr[3]);
    //  數(shù)組的長度  數(shù)組.length
    console.log(testArr.length);
    //  遍歷數(shù)組 這種方式會讓系統(tǒng)每次都去檢測一次數(shù)組的長度
    for(var i = 0; i < testArr.length; i++){
        console.log(testArr[i]);
    }
   // 而這種方式則不會 相比較而言 是這種遍歷方式好點
    for(var i = 0, len = testArr.length; i < len; i++){
        console.log(testArr[i]);
    }
</script>

創(chuàng)建數(shù)組

var numArray = new Array();

數(shù)組元素的添加

    //1.創(chuàng)建數(shù)組
    var numArray = new Array();
    var arr = [];  // 這種比較常用
    //2.添加元素 push();
    var a = numArray.push(1);
    alert(numArray)
    var b =  numArray.push(2);
    console.log(numArray);
    console.log(a);
    console.log(b);
    //push():會在數(shù)組的結(jié)尾處添加一個元素，改變原來的數(shù)組,返回值是數(shù)組的長度
    //2.第二種添加元素 unshift():
    var aa = numArray.unshift(0);
    console.log(numArray);
    console.log(aa);
    //unshift()：會在數(shù)組的開始添加一個元素，會改變數(shù)組，返回值是數(shù)組的長度

數(shù)組元素的刪除

    var numArray = [1,2,3,3,4,4,5];
    //1.刪除元素  pop(); 和push() 對應(yīng)
    var a =   numArray.pop();
    console.log(a);
    console.log(numArray);
    //從數(shù)組的最后刪除元素，返回刪除的元素
    //2.從開頭刪除元素 shift():和unshift():對應(yīng)
    var aa =  numArray.shift();
    console.log(aa);
    console.log(numArray);
    //shift會改變數(shù)組，返回被刪除的元素

數(shù)組元素的連接

    var array1 = [1,2,3,3,5,4];
    var array2 = [2,3,3,,35,5];
    // concat(array2): 數(shù)組里面的元素用concat()來連接
    var allArray = array1.concat(array2);
    console.log(allArray);
    console.log(array1);
    console.log(array2);

數(shù)組的轉(zhuǎn)化方法

    var array =[1,3,5,7,9];
    //1.數(shù)組轉(zhuǎn)化字符 join(); 傳入連接符
    //如果join方法中傳入什么就會把數(shù)組用什么連接起來
    var arrStr = array.join('-');
    console.log(arrStr);

    //2.字符串轉(zhuǎn)化數(shù)組  split();
    //split會把字符轉(zhuǎn)化成數(shù)組，但是這個字符必須是有規(guī)律的
    var newArray =  arrStr.split('-');
    console.log(newArray);

數(shù)組的排序

    var numArray  = [1,3,20,5,30,6,36,21];
    //數(shù)組排序
    //numArray.sort();
    //console.log(numArray);
    //sort以及排序，但是是通過ascii轉(zhuǎn)化后排序的，不能達到我們要的效果

    //使用函數(shù)與參數(shù)
    numArray.sort(function(a,b){
        // 可以理解為1為true , -1為false
        // 返回true則從小到大排序 , 返回false則從大到小排序
        return a>b?1:-1;
    });
    console.log(numArray);
    //函數(shù)參數(shù)必須寫，會把數(shù)組中的元素進行傳遞，不可以直接寫1 或者-1
    //返回值不一定是1 或者-1，可以是任何數(shù)字

------------------ 字符串---------------------

字符的轉(zhuǎn)化

    var a = 10;
    //1.第一種  直接使用引號
    var newString = a +'';
    console.log(typeof newString);
    console.log(newString);

    //2.第二種  使用String();方法
    var newString1 = String(a);
    console.log(typeof newString1);
    console.log(newString1);

獲取某一個位置的字符

    var charString = 'my name is tack 我的名字是';
    console.log(charString.length);
    //空格也占用位置

    //獲取元素
    var sym =  charString.charAt(0);
    console.log(sym);
    // charAt();  返回指定位置的字符.

    var codeSym = charString.charCodeAt(20);
    //charCodeAt：把獲取的值轉(zhuǎn)化成unicode編碼后顯示
    console.log(codeSym);
    //漢字轉(zhuǎn)換成Unicode編碼后都是大于127，一般漢字占位2個字節(jié)，其余占用1個

獲取字符串占用的字節(jié)數(shù)

    var myString = 'my name 我的名字 abc';
    console.log(myString.length);
    var totalLength = 0;
    for(var i = 0;i < myString.length;i ++){
        //獲取對應(yīng)的字符的unicode編碼
        var charNum = myString.charCodeAt(i);
        if (charNum > 127){
            totalLength +=2;
        }
        else {
            totalLength +=1;
        }
    }
    console.log(totalLength);

獲取某個字符的位置

    var charString = 'my is abc dcf a';
    //獲取某一個字符的位置
    var poiont = charString.indexOf('n');
    console.log(poiont);
    //indexOf:會獲取傳入的字符的位置，位置從左到右邊
    //如果獲取到第一個元素后，就會返回第一個獲取元素的位置,如果沒有對應(yīng)的元素就會返回-1；

    var newPoint = charString.lastIndexOf('a');
    console.log(newPoint);
    //lastIndexOf：從后往前找對應(yīng)的元素
    //如果找到就會把對應(yīng)的位置返回，但是注意位置排序還是從左到右

字符大小寫轉(zhuǎn)化

    var lowString = 'abc cddfff';
    //轉(zhuǎn)化成大寫 toUpperCase();
    var newLowString = lowString.toUpperCase();
    console.log(newLowString);
    //大小寫方法不會改變原來的字符，返回值是對應(yīng)轉(zhuǎn)化后的結(jié)果
    
    //轉(zhuǎn)化成小寫 toLowerCase();
    var newString2 = newLowString.toLowerCase();
    console.log(newString2);

字符截取

    var charString = 'my name is abc cdf';
    //字符截取 slice();
    var sliString = charString.slice(1);
    console.log(sliString);
    //slice:如果傳入一個參數(shù)，表示從這個參數(shù)的位置開始截取直到字符結(jié)束
    //如果傳入兩個參數(shù)，表示從第一個參數(shù)位置開始截取到第二個參數(shù)位置結(jié)束
    //但是不包括第二個參數(shù)的位置
    var newSliString = charString.slice(1,4);
    console.log(newSliString);


    var subS = charString.substr(1);
    console.log(subS);
    //substr:如果傳入一個參數(shù)，和slice是一樣
    var newSubS = charString.substr(1,4);
    console.log(newSubS);
    //如果傳入兩個參數(shù)，會從第一個參數(shù)開始，截取第二個參數(shù)長度對應(yīng)的字符

    var newSubString1 = charString.substring(4,2);
    console.log(newSubString1);

保留兩位小數(shù)

    var num = 3.141591653;
    var numString = String(num);
    //1.0截取字符
    //1.1獲取小數(shù)點的位置
    var index = numString.indexOf('.');//1
    var newString =  numString.slice(0,index+3);
    console.log(newString);
    console.log(Number(newString));
    //2.通過方法直接設(shè)置
    var newNum =  num.toFixed(2);//傳入?yún)?shù)表示保留幾位小數(shù)
    console.log(newNum);

------------------ 定時器--------------------

補充一點定時器的知識

定時器

• 在定時器中使用的this表示的是winodow，如果要是使用按鈕我們需要在外面記錄對應(yīng)的this,形式是 var that ; that = this
• 定時器：每隔一段時間執(zhí)行一個操作,操作一般是一個事件指令
• 定時器的分類：一次定時，多次定時
• 一次定時器：執(zhí)行一次后就不執(zhí)行
• 多次定時器：會執(zhí)行多次，一直執(zhí)行

一次定時器

setTimeout(function () {
        alert('我是一次定時器');

    },1000);

• 一次定時器中傳入兩個參數(shù)，第一個參數(shù)表示執(zhí)行的操作，第二個表示間隔的時間
• 時間是毫秒，1秒= 1000毫秒

多次定時器

    setInterval(function(){
        alert('我是多次定時器')
    },1000);

• 多次定時器中傳入兩個參數(shù)，第一個參數(shù)表示執(zhí)行的操作，第二個表示間隔的時間
• 多次定時器會執(zhí)行多次操作
• 定時器在使用完成后，不會自動清空，我們需要手動清空
  clearTimeout(timeOut)
clearInterval(timeInter);

------------------ 節(jié)點 --------------------

Js的組成

// ECMAscript
// Dom
// Bom
//可以把一個界面看做一個dom,每一元素都看做一個節(jié)點
//會把文本對象看做節(jié)點

父子節(jié)點

<div class="box">
    ![](images/taobao.png)
    <span id="x">x</span>
</div>
<style>
        .box{
            border: 1px solid #d9d9d9;
            margin: 100px auto;
            position: relative;
            width: 107px;
        }
        #x{
            float: left;
            display: block;
            border: 1px solid #d9d9d9;
            width: 14px;
            height: 14px;
            line-height: 14px;
            color: #d6d6d6;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: -15px;
        }
</style>
<script>
        window.onload = function(){
            var x = document.getElementById("x");
            x.onclick = function(){
                // parentNode 父子節(jié)點 必須是親的
                this.parentNode.style.display = "none";
            }
        }
</script>

兄弟節(jié)點

<script>
        /*
        nextSibling (下一個兄弟,包含文本節(jié)點)  只有IE 6/7/8認識 別的瀏覽器不兼容
        nextElementSibling (不包含文本節(jié)點)  其他瀏覽器兼容的
        previousSibling  (上一個兄弟)
        previousElementSibling  其他瀏覽器兼容的
        firstChild   只有IE 6/7/8認識 別的瀏覽器不兼容
        firstElementChild      其他瀏覽器兼容的
        lastChild    只有IE 6/7/8認識 別的瀏覽器不兼容
        lastElementChild  其他瀏覽器兼容的
        */
        window.onload = function(){
            var one = document.getElementById("one");
            // one.nextSibling.style.backgroundColor = "red";   只有IE6/7/8認識
            // 這是一種兼容寫法 one.nextElementSibling 一定要寫在前面
            var div = one.nextElementSibling || one.nextSibling;
            div.style.backgroundColor = "red";
        }
</script>

<ul>
    <li>123214124</li>
    <li>123214124</li>
    <li id="one">123214124</li>
    <li>123214124</li>
    <li>123214124</li>
</ul>

孩子節(jié)點

<ul id="ul">
    <li>123</li>
    <li>212</li>
    <li>331</li>
</ul>
<script>
    // childNodes 嫡出(正式推出的)
    var ul = document.getElementById("ul");
    // 選擇全部的孩子 火狐 谷歌等高版本瀏覽器會把換行和空格也當(dāng)作一個節(jié)點
    var children = ul.childNodes;  
    // 所以輸出 7  但是IE6/7/8 不會把換行當(dāng)作節(jié)點 輸出三個節(jié)點 
    //  alert(children.length);   
    for(var i = 0; i < children.length; i++){
        // 利用nodeType == 1時 才是元素節(jié)點 來獲取元素節(jié)點
        if(children[i].nodeType == 1){ 
            children[i].style.backgroundColor = "red";
        }
    }
    //  children 庶出 但是很重要 選取全部的孩子(只有元素節(jié)點) 沒有兼容性的問題
    var ul = document.getElementById("ul");
    var children = ul.children;
    alert(children.length); //  IE 6/7/8 包含注釋節(jié)點 這個要避免開
</script>

節(jié)點操作

<!--
    DOM的節(jié)點操作 新建節(jié)點 插入節(jié)點 刪除節(jié)點 克隆節(jié)點 等等

    創(chuàng)建節(jié)點: document.createElement(" ");

    插入節(jié)點: appendChild(創(chuàng)建的節(jié)點); 添加孩子 放到盒子的最后面
             insertBefore(插入的節(jié)點,參照的節(jié)點); 寫滿兩個參數(shù) 放到盒子的前面

    移除節(jié)點: removeChild(); 移除孩子

    克隆節(jié)點: cloneNode();   復(fù)制節(jié)點 見誰復(fù)制誰
             括號里面可以跟參數(shù) 如果里面是true 深層復(fù)制 除了復(fù)制盒子 還復(fù)制子節(jié)點
             如果為false 淺層復(fù)制 只復(fù)制本節(jié)點 不復(fù)制子節(jié)點
-->
<div id="demo">
    <div id="two"></div>
    <div id="xiongda"></div>
</div>
<script>
    var demo = document.getElementById("demo");
    var childrens = demo.children;
    // 創(chuàng)建節(jié)點
    var firstDiv = document.createElement("div");
    // 插入節(jié)點
    demo.appendChild(firstDiv);
    // 創(chuàng)建節(jié)點
    var test = document.createElement("div");
    demo.insertBefore(test,null);
    // 如果沒有參照節(jié)點 就寫null 那么默認會把新生成的盒子放在最后面

    // 移除節(jié)點
    var da = document.getElementById("xiongda");
    demo.removeChild(da);  // 移除xiongda的節(jié)點

    // 克隆節(jié)點
    var last = childrens[0].cloneNode();
    demo.appendChild(last);
    // 給他的爸爸添加孩子 就是我的兄弟
    demo.parentNode.appendChild(demo.cloneNode(true));
</script>