js一些基礎知識2

72、按鈕控制選項卡，加左右按鈕實現
<style>
    #box div{
        width: 200px;
        height: 100px;
        border: 1px solid #000000;
        display:none;
    }
    #box .on{
        background: red;
    }
</style>
<script>
    window.onload = function(){
        var oBox = document.getElementById('box');
        var aBtn = oBox.getElementsByTagName('input');
        var aDiv = oBox.getElementsByTagName('div');
        var oPrev = document.getElementById('prev');
        var oNext = document.getElementById('next');

        var iNow = 0;
        for(var i = 0; i<aBtn.length;i++){
            aBtn[i].index = i;
            aBtn[i].onclick = function(){
                iNow = this.index;
                tab();
            };
        }

        function tab(){
            for(var i = 0; i< aBtn.length; i++){
                aBtn[i].className = '';
                aDiv[i].style.display = 'none';
            }
            aBtn[iNow].className = 'on';
            aDiv[iNow].style.display = 'block';
        }


        //前一個
        oPrev.onclick = function(){
            iNow--;
            if (iNow < 0){
                iNow = aBtn.length - 1;
            }
            tab();
        };
        //后一個
        oNext.onclick = function(){
            iNow++;
            if (iNow >= aBtn.length){
                iNow = 0;
            }
            tab();
        };
    };
</script>
</head>
<body>
<div id="box">
    <a href="javascript:;" id="prev">?</a>
    <input type="button" class="on" value="體育">
    <input type="button" value="娛樂">
    <input type="button" value="新聞">
    <input type="button" value="新聞2">
    <a href="javascript:;" id="next">→</a>
    <div style="display:block;">1111111111</div>
    <div>1122111111</div>
    <div>222222222222</div>
    <div>333333333333333333333333</div>
</div>

</body>
73、自動播放選項卡，定時運行按鈕選項卡中的next
<style>
    #box div{
        width: 200px;
        height: 100px;
        border: 1px solid #000000;
        display:none;
    }
    #box .on{
        background: red;
    }
</style>
<script>
    window.onload = function(){
        var oBox = document.getElementById('box');
        var aBtn = oBox.getElementsByTagName('input');
        var aDiv = oBox.getElementsByTagName('div');

        var iNow = 0;
        for(var i = 0; i<aBtn.length;i++){
            aBtn[i].index = i;
            aBtn[i].onclick = function(){
                iNow = this.index;
                tab();
            };
        }

        function tab(){
            for(var i = 0; i< aBtn.length; i++){
                aBtn[i].className = '';
                aDiv[i].style.display = 'none';
            }
            aBtn[iNow].className = 'on';
            aDiv[iNow].style.display = 'block';
        }
        //后一個
        function next(){
            iNow++;
            if (iNow >= aBtn.length){
                iNow = 0;
            }
            tab();
        };

        setInterval(next,2000)
    };
</script>
</head>
<body>
<div id="box">
    <input type="button" class="on" value="體育">
    <input type="button" value="娛樂">
    <input type="button" value="新聞">
    <input type="button" value="新聞2">
    <div style="display:block;">1111111111</div>
    <div>1122111111</div>
    <div>222222222222</div>
    <div>333333333333333333333333</div>
</div>

</body>
74、延時選項卡（京東）：onmouseover，setTimeout定時器里的this壞了-- _this=this;

<style>
    #box div{
        width: 200px;
        height: 100px;
        border: 1px solid #000000;
        display:none;
    }
    #box .on{
        background: red;
    }
</style>
<script>
    window.onload = function(){
        var oBox = document.getElementById('box');
        var aBtn = oBox.getElementsByTagName('input');
        var aDiv = oBox.getElementsByTagName('div');
        var timer;
        for(var i = 0; i<aBtn.length;i++){
            aBtn[i].index = i;
            aBtn[i].onmouseover = function(){
                var _this = this;
                timer = setTimeout(function(){
                    for(var i = 0; i< aBtn.length; i++){
                        aBtn[i].className = '';
                        aDiv[i].style.display = 'none';
                    }
                    _this.className = 'on';
                    aDiv[_this.index].style.display = 'block';

                },200);

            };
            aBtn[i].onmouseout = function(){
                clearTimeout(timer);
            };
        }
    };
</script>
</head>
<body>
<div id="box">
    <input type="button" class="on" value="體育">
    <input type="button" value="娛樂">
    <input type="button" value="新聞">
    <div style="display:block;">1111111111</div>
    <div>222222222222</div>
    <div>333333333333333333333333</div>
</div>

</body>

75、QQ頭像 事件連等 76、封閉空間： (function(){alert(1);})(); 用途：1）解決變量沖突 (小紅和你同時用 oBtn) 2）循環里面加定時器，定時器里的i也不能用了--封閉空間解決 77、arguments:實參數組 78、with(重復代碼){} 79、cssText:設置樣式，兼容性沒問題，沒什么必要使用

80、字符串：
取某一個 str.charAt()
#str.indexOf(小字符串);
<script>
    var str = 'abcdefdsfd';
    //alert(str.indexOf('e')); // 4
    //alert(str.indexOf('cde'));  //2
    //alert(str.indexOf('d')); //3
    //alert(str.indexOf('x'));  //-1
    alert(str.indexOf('D'));
</script>

#瀏覽器判斷 UA：navigator.userAgent
Chrome Firefox MSIE
擴展:IE11不再包含MSIE，判斷方法：(sUA.toLowerCase().indexOf("trident") > -1 && sUA.indexOf("rv") > -1);
<script>
    if (navigator.userAgent.indexOf('Chrome') != -1){
        alert('這里是chrome');
    }else if(navigator.userAgent.indexOf('Firefox') != -1){
        alert('這里是火狐');
    }else if(navigator.userAgent.indexOf('MSIE') != -1){
        alert('這里是ie');
    }
    //alert(typeof navigator.userAgent);

</script>

#str.lastIndexOf(小字符串);

#str.substring(開始位置，結束位置); //結束位置不包含想要的最后那個
str.substring(開始位置); //截取到最后
   <script>
    var str = 'width';
    //alert(str.substring(1,3));//id
    alert(str.substring(1)); //idth
   <script>

#str.split(切的方式); //切成了數組
split(''); //切碎
   <script>
        /*var str = 'welcome-to-beijing';
        alert(str.split('-')[1]);*/
        var str = 'welcome to beijing';
        //alert(str.split(' '));
        alert(str.split(''));
   <script>

str.toUpperCase(); //轉大寫
str.toLowerCase(); //轉小寫

#字符串比較：
1)英文單詞 字典序
2)數字(字符串) 字典序
3)數字，數字(字符串) 先轉為數字，再比較
4)漢字，沒規律， unicode編碼 0x4e00 到 0x9fa5
81、數組
var arr = [1,2,3];
var arr = new Array(1,2,3);
var arr = new Array(3); //表示長度是3，并不是只有一個元素是3
var arr = [3]; //表示只有一個元素是3

#函數：
arr.push(元素); //加到后面
arr.unshift(元素); //加到前面
arr.pop(); //刪除后面
arr.shift(); //刪除前面

#arr.splice(開始位置，刪除幾個[,元素1，元素2...]);// 萬能方法，靈活使用，
#可實現各操作
刪除：var arr = [2,3,8,9,10,22];
      arr.splice(2,1); //從第2個位置開始，刪除1個
增加：arr.splice(3,0,100); //2,3,8,100,9,10,22
      arr.splice(3,0,100,200); //2,3,8,100,200,9,10,22
替換：arr.splice(3,2,55,66); // 2,3,8,55,66,22

#模擬：
增加：push---arr.splice(arr.length,0,數1);
      unshift---arr.splice(0,0,數1，數2);
刪除：pop---arr.splice(arr.length-1,1);
      shift---arr.splice(0,1);

#arr.join(連接方式); //數組轉字符串
#arr.concat(數組1，數組2...); //數組連接
#arr.reverse(); //數組反轉
#arr.sort(); //排序 默認字典序

#排序數字時需要自己實現：
arr.sort(function(n1,n2){
return n1-n2;
});

數組長度： arr.length --還能賦值

#清空數組：
1) arr.length = 0;
2) arr = [];
3) arr.splice(0,arr1.length);
4)while(arr1.length){arr1.pop()}
82、JSON:
json是什么？
給變量打個包，存儲多個東西
json={name: value, name2: value2, name3: value3,......};

json 數組
下標 字符串 數字
length undefined 有length

for for in循環 普通for循環
有序 無序 有序

#83、 json添加一項：
json.x=xx;
json刪除一項：
delete json.x
#84、另一種循環：for in循環：循環json對象
<script>
    var json = {a:1,c:100,d:'100px',ff:[1,3,9,20]};

    //alert(json.ff);
    /*for(var i = 0;i < json.ff.length; i++){
        alert(json.ff[i]);
    }
    */
    for(var name in json){
        if (name == 'ff'){
            for(var i = 0;i < json[name].length; i++){
                alert(json[name][i]);
            }
        }   
     }

</script>

普通循環：for while
* 能用for循環盡量用for循環，實在沒辦法采用for in

#85、 json的寫法：
a). json={a:1};
b). json={"a":1}; √
c). json={'a':"張三"}; √
#86、題
json = {a:1,b:2};
json['a']++;
console.log(json); //{a:2,b:2}
#87、json中什么都可以存，比如，描述 小明 的特點及親戚
#88、用json的方法完善 setStyle:
function setStyle(){
var obj = arguments[0];
if (arguments.length == 3){...
else if(arguments.length == 2){...
#89、getByClass(完美版)
document.getElementsByClassName(類名); --兼容高級瀏覽器
oParent.getElementsByTagName('*');--獲取oParent下的所有標簽
完美版：
function getByClass(oParent,sClass){
if(oParent.getElementsByClassName){

return oParent.getElementsByClassName(sClass);
}else{

var aEle=oParent.getElementsByTagName('*');

// 用來裝滿足條件的元素

var arr=[];
for(var i=0; i<aEle.length; i++){
    var aClass=aEle[i].className.split(' ');
    if(findInArr(aClass, sClass)){
        arr.push(aEle[i]);
    }
  }
return arr;
}

90、select的使用

onchange --變化時的事件
oSle.value --獲取選中項的值
<option selected... --默認選中項設置屬性

當前選中的索引值：
oS.selectedIndex
獲取所有option:
aO = oS.getElementsByTagName('option');
oS.options;

選中項的文本：
a). aO[oS.selectedIndex].innerHTML
b). aO[oS.selectedIndex].text

動態添加一個option：
創建：new Option(文本, value);
添加：oS.options.add(option);
刪除：oS.options.remove(索引);
91、Math：
Math.random(); 隨機數

Math.abs(); 絕對值
Math.max(); 最大值
Math.min(); 最小子值
Math.pow(n,m); n的m次方
Math.sqrt(); 開平方

Math.ceil(); 向上取整
Math.floor(); 向下取整
Math.round(); 四舍五入

92、eval深入： eval(json)的時候出問題了 eval('('+json+')');

93、刪除數組中的偶數
<script>
    var arr = [1,2,2,3,1,1,1,1,8,8,9,100,23,45];
    for(var i = 0; i < arr.length; i++){
        if(arr[i] % 2 == 0){
            //偶數
            arr.splice(i,1);
            i--;
        }
    }
    alert(arr);
</script>
94、統計字符串中出現次數最多的字母
<script>
    var str = 'aabbcdefggggggggggggggggggggggggggssssssssssssssssssssss';
    var json = {};
    /*
        json = {};
        a   json['a'] = 1;
        a   json['a']++;  json['a']=2
        b   json['b'] =1;
        json -- {'a':1,'b':2,s:100}
     */
    for(var i = 0 ;i < str.length; i++){
        /*alert(str.charAt(i));*/
        if(json[str.charAt(i)]){
            json[str.charAt(i)]++;
        }else{
            json[str.charAt(i)] = 1;
        }
    }
    //console.log(json);
    var aaa = '';
    var iCount = 0;
    for(var name in json){
        //name a b ...  s
        //json[name]  2  2  1 1 ....21  22
        if (json[name] > iCount){
            aaa = name;
            iCount = json[name];
        }
    }
    document.write('出現最多次數的字母是：'+aaa+',出現了'+iCount+'次');

</script>
95、復選框聯動全選
<script>
    window.onload = function(){
        var oChkAll = document.getElementById('ckbAll');
        var oDiv2 = document.getElementById('div2');
        var aChk = oDiv2.getElementsByTagName('input');

        var iCount = 0; //當前選中了幾個
        //全選，點上面
        oChkAll.onclick = function(){
            if (oChkAll.checked == true){
                for(var i = 0;i < aChk.length;i++){
                    aChk[i].checked = true;
                }
                iCount = aChk.length;
            }else{
                for(var i = 0;i < aChk.length;i++){
                    aChk[i].checked = false;
                }
                iCount = 0;
            }
            document.title = iCount;
        };
        //下面
        for(var i = 0;i<aChk.length;i++){
            aChk[i].onclick = function(){
                if(this.checked == true){
                    iCount++;
                }
                else{
                    iCount--;
                }
                if (iCount >= aChk.length){
                    oChkAll.checked = true;
                }else{
                    oChkAll.checked = false;
                }
                document.title = iCount;
            };
        }
    };
</script>

<body>
<div id="div1">
    <input type="checkbox" name="" id="ckbAll">
</div>
<hr>
<div id="div2">
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
    <input type="checkbox" name="" id=""><br>
</div>
</body>
96、數組去重三種辦法：
1）用findInArray，把結果放到新數組
<script>
    function findInArray(arr,n){
        for(var i = 0; i < arr.length; i++){
            if (n == arr[i])
            {
                return true;
            }
        }
        return false;
    }

    var arr = [1,2,2,3,1,1,1,1,8,8,9,100,23,45];
    var arr2 = [];
    for(var i = 0; i < arr.length; i++){
        if (!findInArray(arr2,arr[i])){
            arr2.push(arr[i]);
        }
    }
    alert(arr2);
</script>

#2）和下一項比，如果重復就splice刪除，i--
<script>
    //去重方法2
    function findInArray(arr,n){
        for(var i = 0; i < arr.length; i++){
            if (n == arr[i])
            {
                return true;
            }
        }
        return false;
    }

    var arr = [1,2,2,3,1,1,1,1,8,8,9,100,23,45];
    for(var i = 0; i < arr.length; i++){
        if (findInArray(arr,arr[i])){
            console.log(i + '-----' + arr);
            arr.splice(i,1);
            i--;
        }
    }
    alert(arr);
</script>

3）利用json的name不重復的特性
<script>
    //去重方法3
    var arr = [1,2,2,3,1,1,1,1,8,8,9,100,23,45];
    var json = {}; //{'1':sss,'2':ssfd,'3':sss,'8':fdfd}

    for(var i = 0; i< arr.length; i++){
        if(!json[arr[i]]){
            json[arr[i]] = 'zns';
        }
    }
    //console.log(json);
    var arr2 =[];
    for(var name in json){
        //name 1  2 3 8..
        //json[name]  zns
        arr2.push(name);

    }
    alert(arr2);
</script>

97、自己實現排序 （選擇排序）

98、JS特性-預解析
JS特性-預解析：預先解析一些東西|--變量定義、函數定義 會預解析

先alert再var->-uncefined而不是報錯

預解析的作用范圍：會找本作用域之之內, --函數，script

題1：
var a = 12;
if (a%2){
  function show(){alert('奇數');}
}else{
  function show(){alert('偶數');}
}

show();

題2：
function show(){
  alert(a);
  return;
  var a = 123;
}
show();

#99、引用
和對象打交道的 ： oDate,oDiv,json,arr...
對象之間有才是引用的
指的是同一個東西（多人一個柜子）
基本類型不是引用

#100、字符編碼
str.charAt(1);
str.charCodeAt(索引); -> 字母對應的編碼
漢字在計算機中都有編碼，范圍是 0x4e00-0x9fa5
已知編碼，變成對應的字-- String.fromCharCode('0x4e00');
統一編碼：unicode包含 utf-8/16 和 gb2312
表示方法： \u
比如： 一 \u4e00

#101、in:
var json = {a:1,b:2};
alert(json.a); //是對的，說明 a 在json里面
全局的東西，默認都在window里

#102、異常
異常捕獲：try{} cache(e){}

#103、定義變量，但是沒有使用var，就變成全局的了
var a= b=c=d=1; //連等導致b c d 全局

#104、逗號表達式 逗號運算符，只看最右面，優先級最低 
題1：
if(1,0,true,undefined){alert(1);}
else{alert(2);}
題2：
for(var i =0,j=0,k=1;i<10,j<5,k<3;i++,j++,k++){}
alert(i+j+k);

#105、賦值表達式，值是賦值后的結果
106、嚴格模式 'use strict'
a、定義變量必須加 var
b、不允許在(if,for)等語句里定義函數了
c、干掉了 with

嚴格模式的作用范圍：
1、沖不出script標簽
2、可以作用到函數內部（寫到函數里）
3、放到整個js文件，開頭

建議：以后大家每個js文件的開頭，都要加上 'use strict'
預解析跟嚴格模式沒有關系，嚴格模式并沒有把預解析干掉
107、JS組成部分：
ECMA： ECMAScript，解釋器，解析語法、詞法
var, if(){} , while(){}
arr.push arr.reverse()....第一部分學的知識
兼容性：完全兼容 現在所學的是穩定版本4，

DOM
Document Object Model 文檔對象模型
就是跟頁面打交道
比如，獲取元素，設置樣式。。。。等和頁面有關的
兼容性： 一般還行吧。 大部分都兼容，少部分不太兼容，也可以去處理
document.getElementsByClassName();

BOM
Browser Object Model 瀏覽器對象模型
就是跟瀏覽器打交道
navigator.userAgent
alert();//在不同的瀏覽器下長得不一樣，但沒辦法改
兼容性：大部分都不兼容，不兼容的地方沒辦法處理
108、DOM
#1)子級：一級（一層） 父級.children
children不包含文本節點

#2)父級: obj.parentNode

#3）兄弟元素
下一個兄弟： var oNext=obj.nextElementSibling || obj.nextSibling;
obj.nextElementSibling || obj.nextSibling 不能換位置
上一個兄弟：var oPrev=obj.previousElementSibling || obj.previousSibling;
首節點： var firstLi=obj.firstElementChild || obj.firstChild; 或 父級.children[0]
尾節點： var lastLi=obj.lastElementChild || obj.lastChild; 或 父級.children[父級.children.length-1]

#109、創建元素： var obj=document.createElement('標簽名');

#110、添加元素：父級.appendChild(obj); //剪切
插入到父級的最后
父級.insertBefore(obj, 誰之前); //剪切

#111、刪除元素：
父級.removeChild(obj);
112、簡易留言板：添加留言，隱藏，刪除，每次往前面加
<style>
    div{
        width: 100%;
        height: 30px;
        background: red;
        margin: 5px;
        float:left;

    }
</style>
<script>
    window.onload = function(){
        var oBtn = document.getElementById('btn1');
        var oUL = document.getElementById('ul1');
        var oT = document.getElementById('txt1');

        oBtn.onclick = function(){
            //創建li，并加到ul里
            var oLI = document.createElement('li');
            oLI.innerHTML = oT.value + '<a href="javascript:;">刪除</a>';
            //oUL.appendChild(oLI);
            var oFirst = oUL.firstElementChild || oUL.firstChild;
            oUL.insertBefore(oLI,oFirst);
            //實現隱藏功能
            var oLink = oLI.children[0];
            oLink.onclick = function(){
                //this.parentNode.style.display = 'none';
                oUL.removeChild(oLI);
            };
            //清空文本框
            oT.value = '';
        };
    };
</script>
</head>
<body>
留言內容：<input type="text" id="txt1">
<input type="button" value="留言" id="btn1">
<ul id="ul1">

</ul>
</body>
114、BOM
window.open(地址, 方式);
方式：默認是新頁面打開
_blank：新頁面打開
_self：當前頁面打開
* 只要是用戶打開的(觸發事件)，都不攔截
window.open(); 有返回值->新頁面的window對象

115、window.close();
* 可以關閉自己open出來的頁面

116、類似于在線運行代碼：
var win=window.open(); 返回值 -> 新頁面的window對象
win.document.write(oT.value);

117、地址欄信息：
window.location：可以讀取，可以賦值
window.location.href：地址
window.location.search：數據
window.location.hash：錨
其他信息：
window.location.protocol：協議
window.location.host：地址
window.location.hostname：域名
window.location.port：端口號
window.location.pathname：路徑

118、歷史記錄：
window.history
window.history.forward(); 前進
window.history.back(); 后退
window.history.go(數字);
window.history.go(-1); 后退
windiw.history.go(1); 前進
119、右下角懸浮框
滾動條滾動縱向的距離：var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
滾動條滾動的橫向距離：var scrollLeft=document.documentElement.scrllLeft || document.body.scrllLeft;
幾個事件：
window.onload：當頁面加載完成
 window.onscroll：當滾動條滾動的時候
 window.onresize：當頁面縮放的時候
可視區寬度：document.documentElement.clientWidth;
可視區高度： document.documentElement.clientHeight;
物體寬度：obj.offsetWidth
物體高度：obj.offsetHeight
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.幾種基本數據類型?復雜數據類型?值類型和引用數據類型?堆棧數據結構? 基本數據類型：Undefined、Nul...
    極樂君閱讀 5,574評論 0贊 106
  • 獲取元素:document.getElementById 通過id獲取一個元素obj.getEle...
    蒲公英_前端開發者閱讀 640評論 0贊 4
  • 本文轉發自github, 原文地址 <a name='js'>JavaScript</a> 介紹js的基本數據類型...
    XDUZ閱讀 1,063評論 1贊 11
  • 上帝遇到大神，相互寒暄兩句。大神：哥們，最近做什么業務。上帝：每天一堆人找我，有懺悔的，有祈禱的，幫助他們找到精神...
    墨_若白閱讀 293評論 0贊 1
  • 你輕拍我的肩頭“同學，我喜歡你” 開玩笑開玩笑，只是玩游戲，你又躲起來 “待會吃飯給我夾菜好不好”“額，好” 我也...
    乞丐吧閱讀 268評論 0贊 1