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++){
                        //將每個選項卡按鈕都設(shè)為灰色
                        aBtn[j].className = '';
                        //將每個內(nèi)容區(qū)都隱藏
                        aCon[j].className = '';
                    }
                    //this代表當(dāng)前點擊的Button對象
                    this.className = 'cur';//當(dāng)前點擊的按鈕為金色
                    // alert(i);//不加閉包時，不管點哪個按鈕宴胧，i都等于3
                    //加閉包保存了索引值才有效
                    aCon[i].className = 'active';//當(dāng)前點擊的按鈕對應(yīng)的內(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>構(gòu)造函數(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的作用就相當(dāng)于工廠模式中最開始創(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ù)蒙挑，再去構(gòu)造函數(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ū)別
    二者都可以改變當(dāng)前的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)引進來了姑裂，這是它的一個構(gòu)造函數(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()方法相當(dāng)于原生JS的innerHTML
        alert($div.html() + 'jQuery');
    })
</script>
  </head>
  <body>
<div id="div">這是一個div元素</div>
  </body>
  </html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末茴厉，一起剝皮案震驚了整個濱河市泽台，隨后出現(xiàn)的幾起案子什荣，更是在濱河造成了極大的恐慌，老刑警劉巖怀酷，帶你破解...
    沈念sama閱讀 221,576評論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件稻爬，死亡現(xiàn)場離奇詭異，居然都是意外死亡蜕依，警方通過查閱死者的電腦和手機桅锄，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來样眠，“玉大人竞滓，你說我怎么就攤上這事〈档蓿” “怎么了？”我有些...
    開封第一講書人閱讀 168,017評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵锯茄，是天一觀的道長厢塘。 經(jīng)常有香客問我，道長肌幽，這世上最難降的妖魔是什么晚碾？ 我笑而不...
    開封第一講書人閱讀 59,626評論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮喂急，結(jié)果婚禮上格嘁，老公的妹妹穿的比我還像新娘。我一直安慰自己廊移，他們只是感情好糕簿，可當(dāng)我...
    茶點故事閱讀 68,625評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著狡孔，像睡著了一般懂诗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上苗膝，一...
    開封第一講書人閱讀 52,255評論 1贊 308
  • 城市分裂傳說
    那天殃恒，我揣著相機與錄音，去河邊找鬼辱揭。 笑死离唐，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的问窃。 我是一名探鬼主播亥鬓，決...
    沈念sama閱讀 40,825評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼泡躯！你這毒婦竟也來了贮竟？” 一聲冷哼從身側(cè)響起丽焊，我...
    開封第一講書人閱讀 39,729評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎咕别，沒想到半個月后技健，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 46,271評論 1贊 320
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡惰拱，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年雌贱，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片偿短。...
    茶點故事閱讀 40,498評論 1贊 352
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡欣孤，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出昔逗，到底是詐尸還是另有隱情降传，我是刑警寧澤，帶...
    沈念sama閱讀 36,183評論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布勾怒，位于F島的核電站婆排，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏笔链。R本人自食惡果不足惜段只，卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3贊 333
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望鉴扫。 院中可真熱鬧赞枕，春花似錦、人聲如沸坪创。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0贊 24
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽莱预。三九已至古话，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間锁施，已是汗流浹背陪踩。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留悉抵，地道東北人肩狂。 一個月前我還...
    沈念sama閱讀 48,906評論 3贊 376
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像姥饰，于是被迫代替她去往敵國和親傻谁。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,507評論 2贊 359

推薦閱讀更多精彩內(nèi)容

  • 曾經(jīng)有一份美好的愛情放在我的面前我沒有珍惜态蒂。等到失去后才后悔莫及杭措。如果可以再對小李說。毛欣想說钾恢。這輩子無緣再牽手手素。...
    毛欣與小李閱讀 2,622評論 0贊 13
  • 【1】7，9瘩蚪，-1泉懦，5，( ) A疹瘦、4崩哩；B、2言沐；C琢锋、-1；D呢灶、-3 分析:選D，7+9=16钉嘹；9+（-1）=8鸯乃；（...
    Alex_bingo閱讀 18,953評論 1贊 19
  • 男人再帥，扛不起責(zé)任跋涣，照樣是廢物缨睡！女人再美！自己不奮斗陈辱，照樣是擺設(shè)奖年！我很喜歡這段話：人生就要活得漂亮！無論你是誰沛贪，...
    悠悠夢閱讀 115評論 0贊 1
  • 2018年3月16日 周五 晴 早晨起床5點半陋守，在店里忙活早餐的時候，突然接到閨女的電話利赋，說她鼻子出血了水评，讓我...
    李墨兒媽媽閱讀 187評論 0贊 0
  • 我的東哥
    明明羊閱讀 162評論 0贊 1