JavaScript - 基礎輸入/輸出

位置

一般放在標籤之中
外部鏈接文件格式

<script src="demo.js" type="text/javascript"></script>

輸出

*允許組合輸出

document(變量+“字符串”+“標籤”)

例子:

var nickname="honey";
document.write("helloworld");
document.write(nickname);
document.write(nickname+"<hr>"+"we")
***************************************************************************
helloworldhoney
------------------------------------------------------------------------
honeywe

確認

confirm 消息對話框通常用於允許用戶做選擇的動作,如:“你對嗎?”等。彈出對話框(包括一個確定按鈕和一個取消按鈕)。

語法:

confirm(str);

參數說明:

str:在消息對話框中要顯示的文本
返回值: Boolean值

返回值:

當用戶點擊"確定"按鈕時,返回true
當用戶點擊"取消"按鈕時,返回false

提示

prompt(str1,str2)

//str1:提示文字

//str2:文本輸入框的默認內容

新窗口

window.open([URL], [窗口名稱], [參數字符串])

窗口名稱

_blank:在新窗口顯示目標網頁 _self:在當前窗口顯示目標網頁 _top:框架網頁中在上部窗口中顯示目標

DOM結構

HTML文檔可以說由節點構成的集合,三種常見的DOM節點:

**1. 元素節點:**上圖中、、

等都是元素節點,即標籤。

**2. 文本節點:**向用戶展示的內容,如

  • 中的JavaScript、DOM、CSS等文本。

    **3. 屬性節點:**元素屬性,如標籤的鏈接屬性href=“http://www.imooc.com”。

    通過ID獲取元素

    Object=getElementByID("idName");
    

    替換HTML元素內容

    Object.innerHTML
    

    改變HTML樣式

    #####風格

    Object.style.property=new style;
    

    例子:

    **************************************new.html*********************************************
    <p id="last">Hello World</p>
    *******************************************************************************************
    *****************************	*********new.js***********************************************
    var new=document.getElementById("last");
    new.style.font="微軟雅黑";
    new.style.backgroundcolor="red";
    
    
    可見性
    Object.style.display = value
    

    例子:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>測試2</title>
    	<style>	
    		
        </style>
    </head>
    <script type="text/javascript">
    
    
    function showtext()
    {
    	var poem=document.getElementById("Jay");
    	poem.style.display="block";
    
    }
    function hidetext()
    {
    	var poem=document.getElementById("Jay");
    	poem.style.display="none";
    	
    }
    
    
    
    </script
    <body>
    	<p id ="Jay">天青色等煙雨 而我在等你
    		<br/>
            炊煙裊裊升起 隔江千萬裏
    		<br/>
    		在瓶底書漢隸仿前朝的飄逸
    		<br/>
    		就當我爲遇見你伏筆 
    	</p>
    	<input type="button" value="顯示文本" onclick="showtext()"/>
    	<input type="button" value="隱藏文本" onclick="hidetext()"/>
    
    </body>
    </html>
    
    
    

    改變類屬性

    object.className = classname
    
    發表評論
    所有評論
    還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
    相關文章