1. js的內(nèi)置樣式###

僅作為了解：<button onclick="alert('大家早上好')">按鈕</button>

2. 全選/全不選/反選###

input.checked=!input.checked

HTML代碼：

<button>全選</button>
<button>全不選</button>
<button>反選</button>
<br>
<ul>
    <li><span>你好</span><input type="checkbox"></li>
    <li><span>你好</span><input type="checkbox"></li>
    <li><span>你好</span><input type="checkbox"></li>
    <li><span>你好</span><input type="checkbox"></li>
    <li><span>你好</span><input type="checkbox"></li>
</ul>

JS代碼：

<script>
    //選取事件元素
    var btns = document.getElementsByTagName('button');
    console.log(btns);
    //選取目標(biāo)元素
    var input = document.getElementsByTagName('input');

    //代碼抽離—功能相似，代碼相同的部分抽取出來，不同的部分當(dāng)作變量用參數(shù)的形式傳進(jìn)去
    function checkFn(btn){
        btns[btn].onclick= function () {
            for(let i=0;i<input.length;i++){
                input[i].checked= btn==0?true:btn==1?false:!input[i].checked;
            }
        }
    }
    for (let i=0; i<btns.length; i++){
        checkFn(i);
    }
</script>

3. 九宮格###

一些關(guān)鍵點：

• position:absolute
• count：總列數(shù)
• 當(dāng)前行數(shù)（row)=當(dāng)前i除以總列數(shù)
• 當(dāng)前列數(shù)（col）=當(dāng)前i對總列數(shù)取余
• 再利用row和col分別計算每一個塊所在的位置。

CSS代碼：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /*width: 1200px;*/
            margin: 0 auto;
            /*border: 1px solid #000;*/
            position: relative;
            top:20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .box div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;;
            text-align: center;
            line-height:100px;
            /*position: absolute;*/
            float: left;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 5px;
        }
        button{
            margin: 10px auto;
            text-align: center;
        }
    </style>

HTML代碼：

<button>點擊輸入列數(shù)</button>
<div class="box">
    <div><span>第1個</span></div>
    <div><span>第2個</span></div>
    <div><span>第3個</span></div>
    <div><span>第4個</span></div>
    <div><span>第5個</span></div>
    <div><span>第6個</span></div>
    <div><span>第7個</span></div>
    <div><span>第8個</span></div>
    <div><span>第9個</span></div>
    <div><span>第10個</span></div>
    <div><span>第11個</span></div>
    <div><span>第12個</span></div>
</div>

JS代碼：

<script>
    var box = document.getElementsByTagName('div');
    document.getElementsByTagName('button')[0].onclick=function(){
        let count = prompt("請輸入數(shù)字");
        //當(dāng)前行
        let row=0;
        //當(dāng)前列
        let col=0;

        //對每一個塊進(jìn)行處理
        for(let i=1; i<=box.length; i++){
            box[i].style.position="absolute";

            //當(dāng)前塊的索引除以總列數(shù)得出當(dāng)前塊所在行
            row = parseInt((i-1)/count);

            //當(dāng)前塊的索引對總列數(shù)求余得出當(dāng)前塊所在列
            col = (i-1)%count;

            //利用得出的行和列對塊的位置進(jìn)行定位
            box[i].style.top=row*110+"px";
            box[i].style.left=col*110+"px";
        }
    }
</script>

4. 排他思想###

我們的主旨是：干掉所有人，包括自己，最后再讓自己復(fù)活

HTML代碼：

<button>第一個</button>
<button>第二個</button>
<button>第三個</button>
<button>第四個</button>
<button>第五個</button>

JS代碼：

        //獲取事件元素
    var btns = document.getElementsByTagName('button');
    //對每個按鈕添加事件
    for(let i=0;i<btns.length;i++){
        btns[i].onclick= function () {
            //排他思想：干掉所有人，包括自己
            for(let i=0;i<btns.length;i++)btns[i].style.backgroundColor="#FFF";
            //然后再復(fù)活自己
            this.style.backgroundColor="green";
        }
    }

5.JS中IE瀏覽器兼容###

通過類名稱獲取標(biāo)簽，有兼容性問題：IE6/7/8不支持
document.getElementsByClassName("class");

所以需要自己定義一個利用Class來獲取標(biāo)簽的工具函數(shù)

        //定義一個利用class屬性獲取標(biāo)簽的函數(shù)—自己封裝工具類，目的：兼容低版本瀏覽器
    function getElementsByClass_name(className){
        //檢測當(dāng)前環(huán)境是否可以直接使用class來獲取標(biāo)簽，如果能，直接返回該方法
//        if(document.getElementsByClassName)return document.getElementsByClassName(className);
        //如果不能，let do it.

        //定義一個存儲符合條件標(biāo)簽的數(shù)組
        var arr = [];
        //獲取頁面上所有的標(biāo)簽
        var doms = document.getElementsByTagName('*');

        //對頁面上所有的標(biāo)簽進(jìn)行遍歷
        for(var i = 0; i<doms.length; i++){
            //獲取每一個標(biāo)簽的class屬性，并將每一個標(biāo)簽的class屬性存到數(shù)組中
            var domClassArr = doms[i].className.split(" ");

            //便利每個標(biāo)簽的class屬性，是否是所要查找的標(biāo)簽，如果是，則存到數(shù)組arr中
            for(var j = 0; j<domClassArr.length; j++){
                if(domClassArr[j]==className)arr.push(doms[i]);
            }
        }
        return arr;
    }

6. 字符串的切割###

var strArr = str.split("分割條件"); //分割條件一定是字符串中已有的內(nèi)容，返回值為數(shù)組

7.非字符串類型轉(zhuǎn)換成字符串類型###

布爾類型轉(zhuǎn)換為字符串類型

var flag = false;
var rst = flag.toString();
console.log(typeof rst);

數(shù)值類型轉(zhuǎn)換為字符串類型

var num = 123;
var rst = num.toString();
console.log(typeof rst);
var result = num.toString(進(jìn)制);//轉(zhuǎn)換成指定進(jìn)制的字符串

補(bǔ)充："+"運算符

也可以用來連接字符

var str1 = "HELLO";
var str2 = "WORLD";
var rst = str1 + str2;
console.log(rst);
當(dāng)數(shù)字類型和字符串類型相加的時候，數(shù)字類型會轉(zhuǎn)換為字符串類型

數(shù)字類型轉(zhuǎn)換成字符串類型最快的方式：
var num = 90;
var str = num+"";
console.log(typeof str);

8.字符串轉(zhuǎn)成數(shù)值類型###

8.1 parseInt();只能轉(zhuǎn)換出整數(shù)類型，當(dāng)遇到0~9的整數(shù)就轉(zhuǎn)換，如果是其他的那么就停止轉(zhuǎn)換，并且返回當(dāng)前轉(zhuǎn)換完的數(shù)字

var str = "123";
var num = parseInt(str);
console.log(typeof num);

8.2 parseFlota();只有遇到第一個小數(shù)點的時候會繼續(xù)轉(zhuǎn)換，再有遇到其他不是0~9的數(shù)字就會退出轉(zhuǎn)換，并返回當(dāng)前轉(zhuǎn)換完的數(shù)字

var str = "123.45abc";
var num = parseFloat(str);
console.log(num);

9.對象###

定義：具有特定功能的功能組
屬性和方法

• 變量：相對屬性，更加自由，在作用域內(nèi)任意位置都可以使用
• 屬性：隸屬于對象（就是變量），想要使用，必須由對象.屬性
• 方法：隸屬于對象（就是函數(shù)）

自定義屬性：

var arr=[12,345];
arr.length;
//自定義屬性
arr.selfProp=123;
console.log(arr.selfprop);