HTML第十六天

1

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>封閉函數(shù)</title>
<script type="text/javascript">
    /*原來的寫法
    function myAlert(){
        var str = '歡迎訪問我的主頁';
        alert(str);
    }
    myAlert();*/
    var str = function(){
        alert('test');
    }
    
    //封閉函數(shù)的一般寫法
    //封閉函數(shù)定義：(function(){……})()
    /*
    ;;(function(){
        var str = '歡迎訪問我的主頁';
        alert(str);
    })();//最后的()表示馬上執(zhí)行
    */
    //封閉函數(shù)其他的寫法：在匿名函數(shù)前加“！”或者“~”，之后加“()”
    ~function(){
        var str = '歡迎訪問我的主頁';
        alert(str);
    }();
</script>
  </head>
  <body>

  </body>
  </html>

2

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>用變量的方式定義函數(shù)</title>
<script type="text/javascript">
    /*
    原來的寫法：可以提前
    myAlert();
    function myAlert(){
        alert('hello!');
    }*/
    //函數(shù)用變量方式定義：先定義再使用
    // myalert();//提前會報錯
    var myAlert = function(){
        alert('hello!');
    }
    myAlert();//放在下面可以執(zhí)行
</script>
  </head>
  <body>

  </body>
  </html>

3

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>閉包</title>
<script type="text/javascript">
    /*
    //閉包的一般寫法
    function aa(b){
        var a = 12;
        function bb(){
            alert(a);
            alert(b);
        }
        return bb;
    }
    var cc = aa(24);*/
    
    //閉包的封閉函數(shù)寫法
    var cc = (function(b){
        var a = 12;
        function bb(){
            alert(a);
            alert(b);
        }
        return bb;
    })(24);
    cc();
    
    /*
    //只能調(diào)用一次的閉包
    (function(b){
        var a = 12;
        function bb(){
            alert(a);
            alert(b);
        }
        return bb;
    })(24)();
    */
</script>
  </head>
  <body>

  </body>
  </html>

4

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>閉包存循環(huán)的索引值</title>
<style type="text/css">
    li{
        height: 30px;
        background-color: gold;
        margin-bottom: 10px;
    }
</style>
<script type="text/javascript">
    //閉包的用途：存循環(huán)的索引值
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // alert(aLi.length);//8
        for(var i=0; i<aLi.length; i++){
            /*
            aLi[i].onclick = function(){
                alert(i);//每個li都彈出8，因為點擊時循環(huán)已完畢，i最后為8
            }
            */
            (function(k){//這里的k是形參
                aLi[k].onclick = function(){
                    alert(k);//彈出每個li的索引值
                }
            })(i);//這里的i是實參
        }
    }
</script>
  </head>
  <body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
  </body>
  </html>

5

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>閉包做私有變量計數(shù)器</title>
<script type="text/javascript">
    //閉包的用途：私有變量計數(shù)器
    var count = (function(){
        var a = 0;
        function bb(){
            a++;
            return a;
        }
        return bb;
    })();
    
    //每調(diào)用一次count，a就自增一次
    alert(count());//1
    alert(count());//2
    var c = count();
    alert(c);//3
</script>
  </head>
  <body>

  </body>
  </html>

6

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>閉包做選項卡</title>
<style type="text/css">
    .btns{
        width: 500px;
        height: 50px;
    }
    /*選項卡的樣式*/
    .btns input{
        width: 100px;
        height: 50px;
        background-color: #ddd;/*默認灰色*/
        color: #666;
        border: 0px;
    }
    /*被選中的選項卡的樣式*/
    .btns input.cur{
        background-color: gold;
    }
    /*內(nèi)容區(qū)的樣式*/
    .contents div{
        width: 500px;
        height: 300px;
        background-color: gold;
        display: none;/*默認隱藏*/
        line-height: 300px;
        text-align: center;
    }
    /*被選中的內(nèi)容區(qū)的樣式*/
    .contents div.active{
        display: block;
    }
</style>
<script type="text/javascript">
    //閉包做選項卡
    window.onload = function(){
        var aBtn = document.getElementById('btns').getElementsByTagName('input');
        var aCon = document.getElementById('contents').getElementsByTagName('div');
        // alert(aCon.length);
        //循環(huán)所有的選項卡按鈕
        for(var i=0; i<aBtn.length; i++){
            (function(i){
                //給每個選項卡按鈕添加點擊事件
                aBtn[i].onclick = function(){
                    //遍歷所有選項卡按鈕
                    for(var j=0; j<aBtn.length; j++){
                        //將每個選項卡按鈕都設為灰色
                        aBtn[j].className = '';
                        //將每個內(nèi)容區(qū)都隱藏
                        aCon[j].className = '';
                    }
                    //this代表當前點擊的Button對象
                    this.className = 'cur';//當前點擊的按鈕為金色
                    // alert(i);//不加閉包時，不管點哪個按鈕，i都等于3
                    //加閉包保存了索引值才有效
                    aCon[i].className = 'active';//當前點擊的按鈕對應的內(nèi)容顯示
                }
            })(i);
        }
    }
</script>
  </head>
  <body>
<div class="btns" id="btns">
    <input type="button" value="tab01" class="cur">
    <input type="button" value="tab02">
    <input type="button" value="tab03">
</div>
<div class="contents" id="contents">
    <div class="active">tab文字內(nèi)容一</div>
    <div>tab文字內(nèi)容二</div>
    <div>tab文字內(nèi)容三</div>
</div>
  </body>
  </html>

7

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>獲取地址欄參數(shù)</title>
<script type="text/javascript">
    window.onload = function(){
        //url？aa=tom#12
        var data = window.location.search;//？aa=tom
        var hash = window.location.hash;//#12
        alert(hash);//#12
        var oSpan = document.getElementById('span01');
        // alert(data);//？aa=tom
        var arr = data.split('=');
        // alert(arr);//?aa,tom
        var name = arr[1];
        oSpan.innerHTML = name;
    }
</script>
  </head>
  <body>
<div>歡迎<span id="span01"></span>訪問我的主頁</div>
  </body>
  </html>

8

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>Math</title>
<script type="text/javascript">
    // var num = Math.random();
    // alert(num);//彈出0-1之間的隨機數(shù)
    var a = 10;
    var b = 20;
    // var num = Math.random()*(b-a)+a;
    // alert(num);//彈出10-20之間的隨機數(shù)
    var arr = [];
    for(var i=0; i<20; i++){
        // var num = Math.floor(Math.random()*(b-a)+a);//向下取整，10-19
        var num = Math.floor(Math.random()*(b-a + 1)+a);//向下取整，10-20
        
        arr.push(num);//生成一個數(shù)就放進數(shù)組
    }
    alert(arr);//17,20,20,11,11,19,17,16,10,11,16,11,18,13,13,11,17,14,19,19
</script>
  </head>
  <body>

  </body>
  </html>

9

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>單體創(chuàng)建對象</title>
<script type="text/javascript">
    var Tom = {
        // 屬性
        name:'tom',
        age:18,
        // 方法
        showName:function(){
            alert(this.name);
        },
        showAge:function(){
            alert(this.age);
        }
    }
    //調(diào)用屬性
    alert(Tom.name);
    alert(Tom.age);
    
    //調(diào)用方法
    Tom.showName();
</script>
  </head>
  <body>

  </body>
  </html>

10

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>工廠模式創(chuàng)建對象</title>
<script type="text/javascript">
    function Person(name,age,job){
        //創(chuàng)建一個空對象
        // var o = new Object();//方式一
        var o = {};//方式二
        o.name = name;
        o.age = age;
        o.job = job;
        o.showName = function(){
            alert(this.name);
        }
        o.showAge = function(){
            alert(this.age);
        }
        o.showJob = function(){
            alert(this.job);
        }
        return o;
    }
    var Tom = Person('tom',18,'程序猿');
    Tom.showJob();
    var Jack = Person('jack',19,'攻城獅');
    Jack.showJob();
</script>
  </head>
  <body>

  </body>
  </html>

11

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>構造函數(shù)</title>
<script type="text/javascript">
    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.showName = function(){
            alert(this.name);
        }
        this.showAge = function(){
            alert(this.age);
        }
        this.showJob = function(){
            alert(this.job);
        }
    }
    //new的作用就相當于工廠模式中最開始創(chuàng)建了一個空對象，最后把對象返回
    var Bob = new Person('bob',18,'產(chǎn)品汪');
    Bob.showJob();
    var Alex = new Person('alex',19,'運營喵');
    Alex.showJob();
    alert(Bob.showName == Alex.showName);//false
</script>
  </head>
  <body>

  </body>
  </html>

12

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>原型模式</title>
<script type="text/javascript">
    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        Person.prototype.showName = function(){
            alert(this.name);
        }
        Person.prototype.showAge = function(){
            alert(this.age);
        }
        Person.prototype.showJob = function(){
            alert(this.job);
        }
    }
    //先去自己的對象中找showName函數(shù)，再去構造函數(shù)的原型找
    var Lucy = new Person('lucy',18,'測試鼠');
    //重寫自身對象中的方法，不會影響其它對象
    Lucy.showName = function(){
        alert('我的名字是' + this.name);
    }
    Lucy.showName();//我的名字是lucy
    var Lily = new Person('lily',19,'市場雞');
    Lily.showName();//lily
    alert(Lucy.showName == Lily.showName);//false
</script>
  </head>
  <body>

  </body>
  </html>

13

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>call和apply</title>
<script type="text/javascript">
    /*
    call和apply的區(qū)別
    二者都可以改變當前的this，區(qū)別在于apply方法要將參數(shù)放入數(shù)組中再傳參
    */
    function aa(a,b){
        alert('我的this是' + this + ',我的a是' + a + ',我的b是' + b);
    }
    //我的this是[object Window],我的a是2,我的b是3
    // aa(2,3);
    //我的this是abc,我的a是2,我的b是3
    // aa.call('abc',2,3);
    //我的this是abc,我的a是2,我的b是3
    aa.apply('abc', [2,3]);
</script>
  </head>
  <body>

  </body>
  </html>

14

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>函數(shù)的繼承</title>
<script type="text/javascript">
    //父類
    function Fclass(name, age){
        this.name = name;
        this.age = age;
    }
    Fclass.prototype.showName = function(){
        alert(this.name);
    }
    Fclass.prototype.showAge = function(){
        alert(this.age);
    }
    //子類
    function Sclass(name, age, job){
        //屬性用call或者apply的方式來繼承
        Fclass.call(this, name, age);
        this.job = job;
    }
    //方法繼承：將父類的一個實例賦值給子類的原型屬性
    Sclass.prototype = new Fclass();
    Sclass.prototype.showJob = function(){
        alert(this.job);
    }
    //由于已經(jīng)繼承了父類的屬性和方法，所以可以直接調(diào)用
    var Driver = new Sclass('tom',18,'老司機');
    Driver.showName();
    Driver.showAge();
    Driver.showJob();
</script>
  </head>
  <body>

  </body>
  </html>

15

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>新增選擇器</title>
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.querySelector('#div1');
        alert(oDiv);//彈出[object HTMLDivElement]，表示選擇了該Div
        //如果要選擇多個元素用querySelectorAll
        var aLi = document.querySelectorAll('.list li');
        alert(aLi.length);//8
    }
</script>
  </head>
  <body>
<div id="div1">這是一個div元素</div>
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
  </body>
  </html>

16

  <!DOCTYPE html>
  <html lang="en">
  <head>
<meta charset="UTF-8">
<title>jQuery加載</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    // alert($);//彈出function (a,b){return new n.fn.init(a,b)}表示JQuery已經(jīng)引進來了，這是它的一個構造函數(shù)
    //JS寫法
    window.onload = function(){
        var oDiv = document.getElementById('div');
        alert(oDiv.innerHTML);//這是一個div元素
    }
    //jQuery的完整寫法
    //比上面JS寫法先彈出，因為window.onload是把頁面元素加載、渲染完才彈出，而ready()是把所有頁面的節(jié)點加載完之后就彈出了，不用等渲染了
    /*$(document).ready(function(){
        var $div = $('#div');
        alert('jQuery:' + $div.html());//jQuery:這是一個div元素
    })*/
    //簡寫方式
    $(function(){
        var $div = $('#div');//CSS樣式怎么寫，這里就怎么寫
        //html()方法相當于原生JS的innerHTML
        alert($div.html() + 'jQuery');
    })
</script>
  </head>
  <body>
<div id="div">這是一個div元素</div>
  </body>
  </html>
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 曾經(jīng)有一份美好的愛情放在我的面前我沒有珍惜。等到失去后才后悔莫及。如果可以再對小李說。毛欣想說。這輩子無緣再牽手。...
    毛欣與小李閱讀 3,319評論 0贊 13
  • 【1】7，9，-1，5，( ) A、4；B、2；C、-1；D、-3 分析:選D，7+9=16；9+（-1）=8；（...
    Alex_bingo閱讀 19,790評論 1贊 19
  • 男人再帥，扛不起責任，照樣是廢物！女人再美！自己不奮斗，照樣是擺設！我很喜歡這段話：人生就要活得漂亮！無論你是誰，...
    悠悠夢閱讀 128評論 0贊 1
  • 2018年3月16日 周五 晴 早晨起床5點半，在店里忙活早餐的時候，突然接到閨女的電話，說她鼻子出血了，讓我...
    李墨兒媽媽閱讀 260評論 0贊 0
  • 我的東哥
    明明羊閱讀 176評論 0贊 1

友情鏈接更多精彩內(nèi)容