js 函數經常使用事件 document事件 window對象

時間 2019-11-21

標籤函數經常使用事件 document window 對象欄目 JavaScript 简体版

原文原文鏈接

js入口函數 window.onload=function（）{javascript

}html

函數java

定義有必定功能代碼體的集合。函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。node

基本格式 function functionname(){執行代碼瀏覽器

}閉包

分類app

基礎函數函數

<script type="text/javascript">
	function aa(){
		alert("這是個人第一個函數");
	}
	aa();
</script>

參數函數：flex

  fanction sum（num1，num2）{
           sum= num1+num2；
          alert（sum）；
}

sum（1,2）；   //調用函數                輸出3；

帶有返回值的函數：this

fanction   bb（b,a）{                                   求一個b的a次冪
         var s = 1;
         for（var i=1，i<=a;i++){
              s=s*b;
         }
         return  bb=s;                           return  直接終止
}
bb（2,1）；      //調用函數                         輸出2；

變量的生命週期
JavaScript 變量生命週期在它聲明時初始化。

局部變量在函數執行完畢後銷燬。

全局變量在頁面關閉後銷燬

變量的做用域：

var  a=1：                         全局變量   a      對所有都起做用
function  b（）{  
     alert（a）；
}
b（）；                    輸出爲1

function  b（）{
     var  a=2；             局部變量 a    只對這個function起做用
     alert（a）；            
}                      這以前都不顯示
alert（a）；             輸出爲   a is not defined

function b（）{
         var a=1；            閉包：是指內部函數可使用外部函數的變量
        alert（a）；               輸出爲1
       function bb（）{
         sum= a+1；              這裏變量a=1
        alert（sum）；            輸出爲2
        }
          
}

js的經常使用事件：

1、給元素添加事件的三種方式：

一、在元素內部添加事件：

onclick事件：點擊事件

<button onclick="danji()">單擊</button><br />

function danji(){
        alert("我是單擊事件");
    }

效果以下：

二、ondbclick事件：雙擊事件

<button ondblclick="shuangji()">雙擊</button><br />

function shuangji(){
        alert("我是雙擊事件");
    }

效果以下：

三、onchange事件
當內容改變時觸發。可用於文本框、列表框等對象，該事件通常用於響應用戶修改內容帶來的其餘改變操做。

說明：當用戶向一個文本框中輸入文本時，不會觸發onchange事件，只有用戶輸入結束後，單擊文本框之外的區域，使文本框失去焦點時才觸發該事件，若是是下拉框，則選擇結束後即觸發。

<input type="text" name="" id="" value="" onchange="change()" /><br />

function change(){
        alert("我是改變事件");                 <!--這裏的aa 不能用 blur 以及下面的 bb 不能用focus--> 
    }

效果以下：

四、onblur事件和onfocus事件
onblur事件，當前元素失去焦點時觸發該事件。

<input type="text" name="" id="" value="" onblur="aa()" /><br />

function aa(){
        alert("我是失去焦點事件");
    }

效果以下：

對應的是onfocus事件：獲得焦點事件

<input type="text" name="" id="" value="" onfocus="bb()" /><br />

function bb(){
        alert("我是得到焦點事件");
    }

效果以下：

五、鼠標相關事件

　　　　　<div class="one" onmouseover="over()">鼠標移上</div>
        <div class="one" onmousemove="move()">鼠標移動</div>
        <div class="one" onmouseout="out()">鼠標離開</div>
        <div class="one" onmousedown="down()">鼠標點擊摁下</div>
        <div class="one" onmouseup="up()">鼠標點擊移開</div>

　　function down(){
        alert("我是鼠標摁住事件");
    }
    function up(){
        alert("我是鼠標摁住以後離開事件");
    }
    function move(){
        alert("我是鼠標移動事件");
    }
    function over(){
        alert("我是鼠標移上事件");
    }
    function out(){
        alert("我是鼠標離開事件");
    }

效果以下：

　 onmousemove
        鼠標移動到某對象範圍的上方時，觸發事件調用函數。注意：在同一個區域中，只要鼠標動一次就觸發一次事件。
   onmouseout
       鼠標離開某對象範圍時，觸發事件調用函數。
   onmouseover
        鼠標移動到某對象範圍的上方時，觸發事件調用函數。注意：在同一個區域中，不管怎樣移動都只觸發一次函數。
   onmouseup
        當鼠標鬆開時觸發事件
   onmousedown
        當鼠標按下鍵時觸發事件

2、經過循環給多個元素添加樣式：

<body>
        <div class="one">111</div>
        <div class="one">222</div>
        <div class="one">333</div>
        <div class="one">444</div>
    </body>
</html>

<script type="text/javascript">
    var one  = document.getElementsByClassName("one");
    for(var i = 0;i<one.length;i++){
        one[i].onclick = function(){
            alert(this.innerHTML);
        }
    }
</script>

效果以下：

3、經過addEventListener() 方法監聽事件函數

一、無參數的監聽事件

<button id="btn">無參數監聽事件</button><button id="btn">無參數監聽事件</button>

document.getElementById('btn').addEventListener('click',xyx);
function xyx(){
             alert("我是無參數的監聽事件");
        }

效果以下：

2.有參數的監聽事件：

<button id="btn2">有參數監聽事件</button><br />

//    設置有參數的監聽事件 
    document.getElementById('btn2').addEventListener('click',function(){
        btn1(1,2);
    });
function btn1(m,n){
             sum=m+n;
             alert(sum);
         }

效果以下：

js的document操做對象：

找到對象

 document.getElementById()
        返回對擁有指定 id 的第一個對象的引用。
    document.getElementsByName()
        返回帶有指定名稱的對象集合。
    document.getElementsByTagName()
        返回帶有指定標籤名的對象集合。
    document.getElementsByClassName()
        返回對擁有指定 class 的對象集合。

操做內容
表單元素

function denglu(){
     var zh = document.getElementById("zhanghao").value;
     var mm = document.getElementById("mima").value;
      alert("你的帳號是："+zh+"你的密碼是："+mm);
    }

帳號：<input type="text" name="" id="zhanghao" value="請輸入你的帳號" />
        密碼：<input type="password" name="" id="mima" value="" />
        <button onclick="denglu()">登陸</button><br /><br /><br />

效果以下：

   非表單元素
        innerHTML
           document.getElementById("id名字").innerHTML="<a href='https://www.baidu.com'>到百度</a> ";
               瀏覽器會將inneHTML後面的內容做爲html來解析。
       innerText
           document.getElementById("id名字").innerText="<a href='https://www.sina.com'>到新浪</a> ";
               瀏覽器會將innerText後面的內容做爲純文原本解析。

<button onclick="wenzi()">添加文字</button><br />
        <div id="wenzi">
            我是
        </div><br />

//添加文字：
    function wenzi(){
        document.getElementById("wenzi").innerHTML='添加的文字';
        //會覆蓋原來的文字
    }

效果以下：

操做屬性
    取值
       getAttribte()
           document.getElementsByTagName("標籤名")[0].getAttribute("屬性名");
   賦值
       setAttribte()
           document.getElementsByTagName("標籤名")[0].setAttribute("屬性名","屬性值");
   刪除屬性
       removeAttribute()
           document.getElementsByTagName("標籤名")[0].removeAttribute("屬性名");

//全選和取消全選
    function aa1(){
        var qx= document.getElementsByTagName("input");
        
        for(i = 0;i < 4; i++){
            qx[i].setAttribute("checked","checked");
        }
    }
    function bb1(){
        var qbx= document.getElementsByTagName("input");
        
        for(i= 0 ;i < 4; i++){
            qbx[i].removeAttribute("checked");
        }
    }

　　　　　<button onclick="aa1()">全選</button><button onclick="bb1()">取消全選</button><br />
        <input type="checkbox" name="" id="" value="" />春節<br />
        <input type="checkbox" name="" id="" value="" />五一<br />
        <input type="checkbox" name="" id="" value="" />國慶<br />
        <input type="checkbox" name="" id="" value="" />元旦<br />

效果以下：

什麼是節點
一、整個文檔時一個文檔節點。
二、每一個HTML元素是元素節點。
三、HTML元素內的文本是文本節點。
四、每一個HTML屬性是屬性節點。
五、每一個註釋是註釋節點。
因此HTML DOM 將 HTML 文檔視做樹結構，這種結構被稱爲節點樹。經過 HTML DOM，節點樹中的全部節點均可以經過 JS 進行訪問。全部 HTML 元素（節點）都可被修改。

建立節點、追加節點

<div id="div1">
            <p id="p1">這是一個段落。</p>
            <p id="p2">這是另外一個段落。</p>
        </div>

var para=document.createElement("p");
        var node=document.createTextNode("這是一個新段落。");
        para.appendChild(node);
        var element=document.getElementById("div1");
        element.appendChild(para);

效果以下：

刪除節點：

function rem(){
          one.removeChild(newdiv);
      }

<button onclick="rem()">移除節點</button>

效果以下：

查看元素：

<button onclick="cha()">查看元素的節點</button>

function cha(){
          console.log(one.childNodes);
      }

效果以下：

window對象：

屬性
   opener
       表明父窗體
           window.opener.test(); ---調用父窗體中的test()方法
效果以下：

打開/關閉窗口
open()
window.open([URL], [窗口名稱], [參數字符串])

<script type="text/javascript">
    window.open('https://www.baidu.com','_blank','width=300,height=200,scrollbars=yes')
</script>

    close()
       window.close();   //關閉本窗口
       關閉新建的窗口。

<script type="text/javascript">
    var mywin=window.open('https://www.baidu.com'); //將新打的窗口對象，存儲在變量mywin中
    mywin.close();
</script>

scrollTo();
scrollTo() 方法可把內容滾動到指定的座標。

function scrollWindow(){
        window.scrollTo(100,500);              左  上
    }

<input type="button" value="移動滾動條" onclick="scrollWindow()" />

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

效果以下：

moveTo()
將窗口移動到某一位置

  <body>
    <input type="button" value="打開窗口" onclick="openWin()" />
    <br>
    <input type="button" value="移動窗口" onclick="moveWin()" />
    </body>

function openWin(){
        myWindow=window.open('','','width=200,height=100');
        myWindow.document.write("<p>這是個人窗口</p>");
    }
    function moveWin(){
        myWindow.moveTo(100,0);
        myWindow.focus();//將輸入焦點定位在myWindow
    }

效果以下：

location

        href
            用腳原本跳轉頁面
                window.location.href = "https://www.baidu.com";
   
        reload()
            刷新頁面
                window.location.reload();

history

 go()
            history.go(num)表示向前或向後翻多少頁，num爲正數表示向前翻，爲負數則向後翻。

定時器：

setTimeout()
時間到了, 就會執行一個指定的 method/function

  setTimeout("changeState()",1000 );  
    function changeState(){  
     alert("這是等待三秒");
    }

效果以下：

setInterval()
setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。

       var biao = 0;
    setInterval("changeState()",1000 );  
    function changeState(){  
      biao++;
      alert(biao);
    }

清除定時器：clear

 var biao = 0;
    var time =  setInterval("changeState()",1000 );  
    function changeState(){  
      biao++;
      alert(biao);
    }  
    window.clearInterval(time );