天天看點

javascript基礎(上)

1.javaScript:

世界上最流行的腳本語言;

屬于web語言;

被設計為html頁面增加互動性;

2.寫入html輸出:

<script type="text/javascript">

 document.write("<h1>this is a javascript!</h1>");

 document.write("<font size=4>this is a javascript!</font>");

</script>

不屬于任何函數的語句,即加載即可執行;

隻能在html輸出中使用document.write();在文檔加載後使用會覆寫整個頁面;

3.onclick的四個框:

  <head>

    <title>javascript.html</title>

    <script type="text/javascript">

    //警告框

    function text(){

    alert("OFF");

    }

    //确認框

    function textconfirm(){

    alert(confirm("Del"));

    }

    //詢問框

    function textprompt(){

    prompt("password","123654");

    }

    //輕按兩下框

    function textdbl(){

    alert("你輕按兩下了我!");

    }

    </script>

  </head>

  <body>

  <input type="button" value="alert" οnclick="text()"/>

  <input type="button" value="Del" οnclick="textconfirm()"/>

  <input type="button" value="确認" οnclick="textprompt()"/>

  <input type="button" value="輕按兩下" οndblclick="textdbl()"/>

  </body>

4.document屬性擷取:

<head>

   <script>

function textimg(){

var textimg = document.getElementById("imgid");

alert(textimg.value);

alert(textimg.type);

alert(textimg.src);

// document.getElementById("imgid").value = "1234";

}

    </script>

  </head>

  <body>

  <input type="button" value="alert" οnclick="text()"/><br/>

  <input type="button" value="Del" οnclick="textconfirm()"/><br/>

  <input type="button" value="确認" οnclick="textprompt()"/><br/>

  <input type="button" value="輕按兩下" οndblclick="textdbl()"/><br/>

<input type="button" value="擷取" οnclick="email()"/>

<input type="text" id="mail"/>

<img src="u==0.jpg" width="200px" height="200px" οnclick="textimg()"/>

<input type="text" id="imgid">

  </body>

5.單次點選更改頁面圖檔

<head>

<script type="text/javascript">

function email(){

var email = document.getElementById("mail");

alert(email.id);

alert(email.src);

email.src = "img/hhh.png";

}

</script>

  </head>

  <body>

    <input type="button" value="擷取" οnclick="email()"/>

<img src="img/hhh.png" style="width: 200px;height: 200px;" />

<img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/>

  </body>

6.反複點選按鈕轉換圖檔

<head>

<script type="text/javascript">

function email(){

var email = document.getElementById("mail");

if(email.src.match("1f.jpg")){

email.src = "img/hhh.png";

}else{

email.src = "img/1f.jpg";

}

}

</script>

  </head>

  <body>

    <input type="button" value="擷取" οnclick="email()"/><br/>

<img src="img/hhh.png" style="width: 200px;height: 200px;" /><br/>

<img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/>

  </body>

7.點選圖檔轉換圖檔

<head>

<script type="text/javascript">

function email(obj){

// var email = document.getElementById("mail");

if(obj.src == "http://pc-7thboy:8080/new009/img/1f.jpg"){

obj.src = "http://pc-7thboy:8080/new009/img/hhh.png";

}else{

obj.src = "http://pc-7thboy:8080/new009/img/1f.jpg";

}

}

</script>

  </head>

  <body>

  <!-- 

    <input type="button" value="擷取" οnclick="email()"/><br/>

    -->

<img src="img/hhh.png" style="width: 200px;height: 200px;" οnclick="email(this)"/><br/>

<img src="img/1f.jpg" style="width: 200px;height: 200px;" id="mail"/>

  </body>

繼續閱讀