web前端【第九篇】JS的DOM對象三

阿新 • • 發佈：2018-02-20

內部 eat direct 詞法表達遍歷 -h bmi 常見

一、JS中for循環遍歷測試

for循環遍歷有兩種

第一種：是有條件的那種，例如 for(var i = 0;i<ele.length;i++){}

第二種：for （var i in li ）{}

現在我們來說一下測試一下第二種（數組和obj的）

//測試for循環
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var arr = [11,22,33,44,55];
    var obj = {‘username‘:‘zzz‘,‘agr‘:20};  //js中的這個類似字典的不叫字典，而是一個對象
    for (var i in obj){
        console.log(i);  //拿到的是鍵
        console.log(obj[i]) //值
    }
    for (var j in arr){
        console.log(j); //拿到索引
        console.log(arr[j])  //拿到值
    }
</script>
</body>
</html>

二、獲取value屬性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取value值</title>
</head>
<body>
<input type="text" id="c1">
<select name="pro" id="s1">
        <option value="1">河北省</option>
        <option value="2">河南省</option>
        <option value="3">北京省</option>
</select>
<button>show</button>
<script>
     var ele_button=document.getElementsByTagName("button")[0];

    ele_button.onclick=function () {
        var ele_input=document.getElementById("c1");
        var ele_select=document.getElementById("s1");
        console.log(ele_select.value)
    };
</script>
</body>
</html>

三、表格示例（全選，反選，取消）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格示例</title>
</head>
<body>
<button class="select">全選</button>
<button class="reserve">反選</button>
<button class="cancel">取消</button>
<table border="1">
    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
     <tr>
        <td><input type="checkbox" class="check"></td>
        <td>111</td>
        <td>222</td>
         <td>333</td>
    </tr>
     <tr>
        <td><input type="checkbox" class="check"></td>
        <td>111</td>
        <td>222</td>
         <td>333</td>
    </tr>
     <tr>
        <td><input type="checkbox" class="check"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
</table>
<script>
//    方式一：分別給每個button增加事件
    var ele_select = document.getElementsByClassName(‘select‘)[0];
    var ele_reserve = document.getElementsByClassName(‘reserve‘)[0];
    var ele_cancel = document.getElementsByClassName(‘cancel‘)[0];
    var ele_input = document.getElementsByClassName(‘check‘);
    //全選
    ele_select.onclick = function () {
        for (var i = 0; i < ele_input.length; i++) {
            //添加一個checked屬性
            ele_input[i].checked = ‘checked‘
        }
    };
    //取消
    ele_cancel.onclick = function () {
         for (var i =0;i<ele_input.length;i++){
            //刪除checked屬性，直接設置為空就行了
            ele_input[i].checked = ‘‘
        }
    };
    //反選
    ele_reserve.onclick = function () {
        for (var i = 0; i < ele_input.length; i++) {
            var ele = ele_input[i];
            if (ele.checked) {//如果選中了就設置checked為空
                ele.checked = ‘‘;
            }
            else {//如果沒有就設置checked = checked
                ele.checked = ‘checked‘;
            }
         }
    };




    //方式二：方式一的優化循環增加事件
//    var ele_button = document.getElementsByTagName(‘button‘);
//    var ele_input = document.getElementsByClassName(‘check‘);
//    for(var i=0;i<ele_button.length;i++) {
//        ele_button[i].onclick = function () {
//            if (this.innerHTML == ‘全選‘) {
//                for (var i = 0; i < ele_input.length; i++) {
//                    //添加一個checked屬性
//                    ele_input[i].checked = ‘checked‘
//                }
//            }
//            else if (this.innerHTML == ‘取消‘) {
//                for (var i = 0; i < ele_input.length; i++) {
//                    //刪除checked屬性，直接設置為空就行了
//                    ele_input[i].checked = ‘‘
//                }
//            }
//            else {
//                for (var i = 0; i < ele_input.length; i++) {
//                    var ele = ele_input[i];
//                    if (ele.checked) {//如果選中了就設置checked為空
//                        ele.checked = ‘‘;
//                    }
//                    else {//如果沒有就設置checked = checked
//                        ele.checked = ‘checked‘;
//                    }
//                }
//            }
//        }
//    }


</script>
</body>
</html>

四、模態對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: white;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: grey;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>
<div class="back">
    <input class="c" type="button" value="click">
</div>

<div class="shade hide handles"></div>

<div class="models hide handles">
    <input class="c" type="button" value="cancel">
</div>


<script>


    var eles=document.getElementsByClassName("c");
    var handles=document.getElementsByClassName("handles");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function(){

            if(this.value=="click"){

                for(var j=0;j<handles.length;j++){

                    handles[j].classList.remove("hide");

                 }

            }
            else {
                for(var j=0;j<handles.length;j++){

                    handles[j].classList.add("hide");
                }

            }
        }
    }

</script>

</body>
</html>

五、搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模擬placeholder屬性的功能</title>
</head>
<body>
<input type="text" placeholder="username" id="submit">
<input type="text" value="username" id="submit1">
<script>
//    var ele = document.getElementById(‘submit1‘);
    var ele = document.getElementById(‘submit1‘);
    ele.onfocus = function () {
        //先獲取焦點，點擊輸入框就獲取到焦點，光標一上去就把值設成空
        this.value=""
    };
    ele.onblur = function () {
//        當光標不點擊那個輸入框的時候就失去焦點了
        //當失去焦點的時候，判斷當前的那個值是不是為空，是否含有空格
//        如果為空或者有空格，用trim()去掉空格。然後賦值為username
        if (this.value.trim()==""){
            this.value=‘username‘
        }
    }
</script>
</body>
</html>

六、tab切換

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>
  <style>
    *{margin:0; padding:0; list-style:none;}
    body{
        font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
    }
    h3{
        text-align: center;
        color:darkcyan;
        margin-top: 30px;
        letter-spacing: 5px;
    }
    .box{
      width: 1000px;
      margin:50px auto 0px;
    }
    #title{
      line-height: 40px;
      background-color: rgb(247,247,247);
      font-size: 16px;
      font-weight: bold;
      color: rgb(102,102,102);
    }
    #title span{
      float: left;
      width: 166px;
      text-align: center;
    }
    #title span:hover{
      /*color: black;*/
      cursor: pointer;
    }
    #content{
      margin-top: 20px;
    }
    #content li{
      width: 1050px;
      display: none;
      background-color: rgb(247,247,247);
    }
    #content li div{
      width: 156px;
      margin-right: 14px;
      float: left;
      text-align: center;
    }
    #content li div a{
      font-size: 14px;
      color: black;
      line-height: 14px;
    /*  float: left;*/
    display: inline-block;
      margin-top: 10px;
    }
    #content li a:hover{
      color: #B70606;
    }
    #content li div span{
        font-size: 16px;
        line-height: 16px;
        /*float: left;*/
        display: block;
        color: rgb(102,102,102);
        margin-top: 10px;
      }
    #content img{
      float: left;
      width: 155px;
      height: 250px;
    }
    #title .select{
      background-color: #2459a2;
      color: white;
        border-radius: 10%;
    }
    #content .show{
      display: block;
    }

    .show span{
        color: red!important;
        font-size: 30px;
    }
  </style>
</head>

<body>
    <h3 id="wel">京東商城歡迎您</h3>
    <!--  direction="right up down left" -->
<!--  behavior：滾動方式(包括3個值：scroll、slide、alternate) -->
<!--  說明：scroll：循環滾動，默認效果；slide：只滾動一次就停止；alternate：來回交替進行滾動。 -->
<!--  scrollamount="5" 滾動速度 -->

<marquee behavior="scroll" direction="right">歡迎您苑昊先生</marquee>
    <script>

    function test(){

        var mywel = document.getElementById("wel");
        var content = mywel.innerText;

        var f_content = content.charAt(0);
        var l_content = content.substring(1,content.length);

        var new_content = l_content + f_content;
        mywel.innerText = new_content;

    }

    // setInterval("test();", 500);
</script>
    <div class="box">
      <p id="title">
        <span class="select">家用電器</span>
        <span>家具</span>
        <span>汽車</span>
        <span>食品</span>
        <span>女鞋</span>
        <span>醫療保健</span>
      </p>

      <ul id="content">
        <li class="show">

          <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容聲(Ronshen)冰箱</a><span>價格:5600</span></div>
          <div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣機"><a href="#">海爾洗衣機</a><span>價格:5400</span></div>
          <div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="電飯煲"><a href="#">福庫(CUCKOO)電飯煲</a><span>價格:3999</span></div>
          <div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能電視"><a href="#">三星智能電視</a><span>價格:8999</span></div>
          <div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="凈水器"><a href="#">凈水器</a><span>價格:1300</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空氣凈化器"><a href="#">空氣凈化器</a><span>價格:5300</span></div>
        </li>

        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>

        </li>
        <li>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
        </li>
        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div>

        </li>
        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>

        </li>
        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>

        </li>


      </ul>
    </div>

    <script>
      var title=document.getElementById(‘title‘);
      var content=document.getElementById(‘content‘);
      var category=title.getElementsByTagName(‘span‘);
      var item=content.getElementsByTagName(‘li‘);

      for (var i = 0; i < category.length; i++) {

          category[i].index=i;

          category[i].onclick=function(){

            for (var j = 0; j < category.length; j++) {
              category[j].className=‘‘;
              item[j].className=‘‘;
            }
            this.className=‘select‘;
            item[this.index].className=‘show‘;
          }


      }

    </script>
</body>
</html>

四、作用鏈域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用鏈域</title>
</head>
<body>
<script>
    var s = 12;
    function f() {
        console.log(s); //undefined
        var s=12;
        console.log(s);//12
    }
    f();
</script>
</body>
</html>

js的作用域

作用域是JavaScript最重要的概念之一，想要學好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。

任何程序設計語言都有作用域的概念，簡單的說，作用域就是變量與函數的可訪問範圍，即作用域控制著變量與函數的可見性和生命周期。在JavaScript中，變量的作用域有全局作用域和局部作用域兩種。

作用域

1. 全局作用域(Global Scope)

在代碼中任何地方都能訪問到的對象擁有全局作用域，一般來說一下幾種情形擁有全局作用域：

(1)最外層函數和在最外層函數外面定義的變量擁有全局作用域

var name="yuan";

    function foo(){
        var age=23;
        function inner(){
            console.log(age);
        }

        inner();
    }

    console.log(name);    // yuan
    //console.log(age);   // Uncaught ReferenceError: age is not defined
    foo();                // 23
    inner();              // Uncaught ReferenceError: inner is not defined

(2)所有末定義直接賦值的變量自動聲明為擁有全局作用域，例如：

    var name="yuan";

    function foo(){
        age=23;

        var sex="male"
    }
    foo();
    console.log(age);   //  23
    console.log(sex);   // sex is not defined

變量blog擁有全局作用域，而sex在函數外部無法訪問到。

(3)所有window對象的屬性擁有全局作用域

一般情況下，window對象的內置屬性都都擁有全局作用域，例如window.alert()、window.location、window.top等等。

2. 局部作用域(Local Scope)

和全局作用域相反，局部作用域一般只在固定的代碼片段內可訪問到，最常見的例如函數內部，所有在一些地方也會看到有人把這種作用域成為函數作用域.

如示例1中的age與inner都只有局部作用域。（js中if、for沒有自己的作用域）

作用域鏈(Scope Chain)

在JavaScript中，函數也是對象，實際上，JavaScript裏一切都是對象。函數對象和其它對象一樣，擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被創建的作用域中對象的集合，這個集合被稱為函數的作用域鏈，它決定了哪些數據能被函數訪問。

示例演示

please have a try:

//-----**********************例1*********************************

var s=12;
    function f(){
        console.log(s);
         var s=12;          // if s=12
        console.log(s)
    }
    f();

//-----**********************例2*********************************

var s=10;
function foo(){
  console.log(s);
  var s=5;
  console.log(s);
  function s(){console.log("ok")}// 函數的定於或聲明是在詞法分析時完成的,執行時已不再有任何操作

  console.log(s);
}

foo();

//-----***********************例3********************************

function bar(age) {

        console.log(age);
        var age = 99;
        var sex= ‘male‘;
        console.log(age);
        function age() {
            alert(123)
        };
        console.log(age);
        return 100;
}

result=bar(5);

//-----********************************************************

結果分析

我相信大家一定會有想不到的結果，接下來我們就以最復雜的例3來分析整個過程。

當一個函數創建後，它的作用域鏈會被創建此函數的作用域中可訪問的數據對象填充。在函數bar創建時，它的作用域鏈中會填入一個全局對象，該全局對象包含了所有全局變量，如下圖所示：

技術分享圖片

解析到函數調用時，即bar(5)，會生成一個active object的對象，該對象包含了函數的所有局部變量、命名參數、參數集合以及this，然後此對象會被推入作用域鏈的前端，當運行期上下文被銷毀，活動對象也隨之銷毀。新的作用域鏈如下圖所示：

技術分享圖片

過程解析：

function bar(age) {

        console.log(age);
        var age = 99;
        var sex="male";
        console.log(age);
        function age(){
            alert(123);
        } ;
        console.log(age);
        return 100;
}

result=bar(5);

一 詞法分析過程(涉及參數，局部變量聲明，函數聲明表達式)：
    1-1 、分析參數，有一個參數，形成一個 AO.age=undefine;
    1-2 、接收參數 AO.age=5;
    1-3 、分析變量聲明，有一個 var age, 發現 AO 上面有一個 AO.age ，則不做任何處理
    1-4 、分析變量聲明，有一個 var sex，形成一個 AO.sex=undefine;
    1-5 、分析函數聲明，有一個 function age(){} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){};
二 執行過程：
    2-1 、執行第一個 console.log(age) 時，當前的 AO.age 是一個函數，所以輸出的一個函數
    2-2 、這句 var age=99; 是對不 AO.age 的屬性賦值， AO.age=99 ，所以在第二個輸出的age是 99;
    2-3 、同理第三個輸出的是 99, 因為中間沒有改變 age 值的語句了。

          註意：執行階段：
                        function age(){
                            alert(123)
                        } ;

            不進行任何操作，將執行語句復制給age這部操作是在詞法分析時，即運行前完成的。

web前端【第九篇】JS的DOM對象三

web前端【第九篇】JS的DOM對象三

js的作用域

1. 全局作用域(Global Scope)

2. 局部作用域(Local Scope)

作用域鏈(Scope Chain)

示例演示

結果分析

web前端【第六篇】JavaScript對象

web前端【第九篇】JS的DOM對象三

web前端【第四篇】CSS屬性操作

web前端【第五篇】JavaScript基礎

web前端【第七篇】JS的DOM對象一

web前端【第八篇】JS的DOM對象二

web前端【第十篇】jQuery基本語法

web前端【第十三篇】jQuery擴展和事件

python之旅六【第七篇】面向對象

python全棧開發【第九篇】Python常用模塊一（主要是re正則和collections）

MySQL數據庫學習【第九篇】索引原理與慢查詢優化

Django 【第九篇】自定義的分頁器組件

Flask 【第九篇】flask-script組件

Python進階【第九篇】裝飾器

python學習【第九篇】python面向對象編程

第九篇：面向對象之多態與封裝

web前端【第三篇】CSS選擇器

web前端【第十二篇】jQuery文檔相關操作

web前端【第十一篇】jQuery屬性相關操作

web前端【第十四篇】Bootstrap簡單使用

web前端【第九篇】JS的DOM對象三

js的作用域

1. 全局作用域(Global Scope)

2. 局部作用域(Local Scope)

作用域鏈(Scope Chain)

示例演示

結果分析

相關推薦