亚洲高清无码在线观看免费,性色av不卡无码一区二区

Web階段：第三章：JavaScript語言

《JavaScript語言精粹》點擊下載，密碼：synu

JavaScript介紹:
1.Javascript語言誕生主要是完成頁面的數(shù)據(jù)驗證。
2.它運行在客戶端，需要運行瀏覽器來解析執(zhí)行JavaScript代碼。
3.JS是Netscape網(wǎng)景公司的產(chǎn)品，最早取名為LiveScript;為了吸引更多java程序員。更名為javascript。
4.JS是弱類型，Java是強類型。

JavaScript特點：
1.交互性（它可以做的就是信息的動態(tài)交互）
2.安全性（不允許直接訪問本地硬盤）
3.跨平臺性（只要是可以解釋Js的瀏覽器都可以執(zhí)行，和平臺無關）

JavaScript和html代碼的結合方式
第一種方式
只需要在head 標簽中，或者在body標簽中，使用script 標簽來書寫JavaScript代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        
        <script type="text/javascript">
            // alert 是 js的警告框函數(shù)
            // 它可以接收任意類型的參數(shù)，你給它傳什么，它就彈出來什么
            alert("js hello");
        </script>
   </head>
   <body>
   </body>
</html>

第二種方式
使用Script 標簽引入單獨的JavaScript代碼文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        
        <script type="text/javascript" src="1.js"></script>
        <script type="text/javascript">
            alert(2222);
        </script>
   </head>
   <body>
   </body>
</html>

變量
什么是變量？
變量是可以存放某些值的內(nèi)存的命名。

javaScript的變量類型：
數(shù)值類型： number int short long float double byte
字符串類型： string
對象類型： object
布爾類型： boolean
函數(shù)類型： function

javascript里特殊的值：
undefined 未定義所有未賦初始化的變量，默認值都是undefiend
null 空值
NAN not a number 非數(shù)值，非數(shù)字（做非法算術運算時，就會返回NAN）

JS中的定義變量格式：
var 變量名;
var 變量名 = 值;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            var i ;
//             alert(i);// undefiend
            i = 12 ;
            // typeof是一個函數(shù)?？梢匀∽兞康臄?shù)據(jù)類型
//             alert( typeof(i) );// number
            i = "this is good boy!";
            alert( typeof(i) );//string
        </script>
   </head>
   <body>
   </body>
</html>

關系（比較）運算

等于： ==
全等于： ===

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            var a = 12;
            var b = "12";
            // js中的等于，只是簡單的做字面值的比較
            // alert( a == b );// true
            // 全等于，除了做字面值的比較之外，還會檢查兩個變量的數(shù)據(jù)類型
            alert( a === b );//false
        </script>
   </head>
   <body>
   </body>
</html>

邏輯運算
且運算： &&
或運算： ||
取反運算： !
0 、null、 undefined、””(空串) 都認為是 false；

&& 與運算。
有兩種情況：
第一種：當表達式全為真的時候。返回最后一個表達式的值。
第二種：當表達式中，有一個為假的時候。返回第一個為假的表達式的值

|| 或運算
第一種情況：當表達式全為假時，返回最后一個表達式的值
第二種情況：只要有一個表達式為真。就會把回第一個為真的表達式的值
并且 && 與運算和 ||或運算有短路。
短路就是說，當這個&&或||運算有結果了之后。后面的表達式不再執(zhí)行

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
//         0 、null、 undefined、””(空串) 都認為是 false；
//             var a = 0;
//             if ( a ) {
//                 alert("零為真");
//             } else {
//                 alert("零為假");
//             }
//             var b = null;
//             if ( b ) {
//                 alert("null為真");
//             } else {
//                 alert("null為假");
//             }
//             var c = undefined;
//             if ( c ) {
//                 alert("undefined為真");
//             } else {
//                 alert("undefined為假");
//             }
//             var d = "";
//             if ( d ) {
//                 alert("空串為真");
//             } else {
//                 alert("空串為假");
//             }
        var a = "abc";
        var b = true;
        var d = false;
        var c = null;
//         && 與運算。
//         有兩種情況：
//         第一種：當表達式全為真的時候。返回最后一個表達式的值。
   //         alert( b && a );//abc
   //         alert( a && b );//true
//         第二種：當表達式中，有一個為假的時候。返回第一個為假的表達式的值
   //         alert( d && c ); // false
   //         alert( a && c ); // null

//             || 或運算
//         第一種情況：當表達式全為假時，返回最后一個表達式的值
   //         alert( d || c ); // null
   //         alert( c || d ); // false
//         第二種情況：只要有一個表達式為真。就會把回第一個為真的表達式的值
//             alert( b || c ); // true
//             alert( d || a ); // abc
        </script>
</head>

數(shù)組
數(shù)組定義方式
Js 中數(shù)組的定義：
格式：
var 數(shù)組名 = []; // 定義一個空數(shù)組
var 數(shù)組名 = [ 值1，值2，值3 ]; // 定義數(shù)組同時賦初始值

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
//         Js 中數(shù)組的定義：
//         格式：
//         var 數(shù)組名 = []; // 定義一個空數(shù)組
        var arr = [];
//         alert( arr.length ); //0
        arr[0] = 12; // 通過數(shù)組下標給元素賦值
//         alert( arr[0] );//12
//         alert( arr.length );//1
        // js的數(shù)組在通過下載賦值的時候，會自動的根據(jù)最大下標做擴容操作。
        arr[2] = "abc";
//         alert( arr.length ); //3
//         alert( arr[1] ); //undefined
        // 數(shù)組的遍歷
//         for (var i = 0; i < arr.length; i++) {
//             alert( arr[i] );
//         }
//         var 數(shù)組名 = [ 值1，值2，值3 ]; // 定義數(shù)組同時賦初始值
        var arr2 = [12,"abc",true];
//         alert(arr2.length); // 3
        arr2[9] = 12;
        alert(arr2.length);
        </script>
   </head>

函數(shù)：
函數(shù)的二種定義方式
函數(shù)的第一種定義方式，使用function關鍵字進行定義函數(shù)。
格式如下：

function 函數(shù)名（形參列表）{
函數(shù)體
}

如何訪問函數(shù)：
函數(shù)名( 實參列表 );

如何定義帶有返回值的函數(shù)?
答：只需要在函數(shù)體內(nèi)直接使用return語句返回值即可。

<script type="text/javascript">
//         格式如下：
//         function    函數(shù)名（形參列表）{
//             函數(shù)體
//         }
//        無參函數(shù)定義
//         function fun(){
//             alert("無參函數(shù)被調(diào)用了");
//         }
//         有參函數(shù)
//         function fun2( a , b ){
//             alert("有參函數(shù)被調(diào)用 a=>" + a + ",b=>" + b);
//         }
        // 帶有返回值的函數(shù)定義
        function sum( num1, num2 ){
            return num1 + num2;
        }
//         如何訪問函數(shù)：    函數(shù)名( 實參列表 );
//         alert( sum("abc",100) );
        </script>

函數(shù)的第二種定義方式是：
var 函數(shù)名 = function(參數(shù)列表){函數(shù)體}

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Insert title here</title>
   <script type="text/javascript">
        var fun = function(num){
            alert("函數(shù)第二種定義方式 : " + num);
        }
        fun(123);
   </script>
</head>

注：在Java中函數(shù)允許重載。但是在Js中函數(shù)的重載會直接覆蓋掉上一次的定義

<script type="text/javascript">
            function fun(a,b){
                alert(a);
                alert(b);
                alert("有參函數(shù)被調(diào)用");
            }
            function fun(){
                alert("無參函數(shù)被調(diào)用");
            }
            fun(12,"abc",true);
</script>

函數(shù)的 arguments 隱形參數(shù)（只在function函數(shù)內(nèi)）
可變長參數(shù)：public void fun( int a , Object … args )……
args就是可變長參數(shù)
它本身是一個數(shù)組。
js中函數(shù)自帶有一個隱形參數(shù)arguments ，基本上使用跟java的可變長參數(shù)一樣。
都是用來接收任意多個參數(shù)。它的使用跟數(shù)組一樣。

<script type="text/javascript">
            function fun(a,b){
                alert(a);
                alert(b);
                alert("有參函數(shù)被調(diào)用");
            }
            function fun(pa,pb){
                alert( arguments.length );//3
                alert( arguments[0] );//12
                alert( arguments[1] );//abc
                alert( arguments[2] );//true
                alert("=====================");
                alert( pa );//12
                alert( pb );//abc
                alert("無參函數(shù)被調(diào)用");
            }
//             fun(12,"abc",true);
            //需求：現(xiàn)在需要有一個方法，可以計算傳遞進來的所有參數(shù)（只相加數(shù)字）相加的和并返回
            function sum(){
                var result = 0;
                for (var i = 0; i < arguments.length; i++) {
                    if ( typeof(arguments[i]) == "number" ) {
                        result += arguments[i];
                    }
                }
                return result;
            }
            alert( sum(100,"abc",100,1000) );
</script>

JS中的自定義對象（擴展內(nèi)容）
Object形式的自定義對象
var 變量名 = new Object(); 創(chuàng)建一個對象實例（空）
變量名.屬性名 = 值; 給對象實例，定義了一個屬性
變量名.函數(shù)名 = function(){} 給對象實例，添加一個方法
如何訪問對象：變量名.屬性名/方法名()

<script type="text/javascript">
            var obj = new Object();
            obj.name = "國哥好帥！";
            obj.age = 18;
            obj.fun = function(){
                alert("姓名：" + this.name + ",年齡：" + this.age);
            }
            // 訪問對象
//             alert( obj.name );
            obj.fun();
</script>

{}花括號形式的自定義對象
var 變量名 = { //定義一個空對象
屬性名 : 值, //定義了一個屬性
函數(shù)名 : function(){} // 定義一個函數(shù)
};
如何訪問對象：變量名.屬性名/方法名()

<script type="text/javascript">
            var obj = {
                    name:"華仔",
                    age:18,
                    fun:function(){
                        alert("姓名：" + this.name + ",年齡：" + this.age);
                    }
            };
            alert(obj.name);
            obj.fun();
</script>

js中的事件（重要）
什么是事件？
事件是電腦輸入設備與頁面進行交互的響應。我們稱之為事件。

常用的事件：
onload加載完成事件常用于頁面被瀏覽器加載完成之后自動做一些初始化工作。
onclick單擊事件常用于按鈕被單擊之后的響應工作
onblur失去焦點事件常用于輸入框失去焦點后，驗證其中的內(nèi)容是否合法
onchange內(nèi)容發(fā)生改變事件常用于輸入框或下拉列表內(nèi)容發(fā)生改變后響應
onsubmit表單提交事件常用于表單提交，在提交之前驗證所有表單項是否合法。只要有一個不合法，就阻止表單提交。

事件的注冊又分為靜態(tài)注冊和動態(tài)注冊兩種：
注冊事件和綁定事件是一個東西
注冊事件，就是告訴瀏覽器，當事件觸發(fā)后，需要執(zhí)行哪些代碼。

靜態(tài)注冊事件：靜態(tài)注冊是指通過事件屬性直接賦于事件響應后的代碼，這種方式我們稱之為靜態(tài)注冊。

動態(tài)注冊事件：動態(tài)注冊是指，通過先獲取標簽對象。然后再通過標簽對象.事件名 = function(){}的方式賦值，這種操作叫動態(tài)注冊。

window.onload = function(){
1 查找標簽對象
2 通過標簽對象.事件名 = function(){}
}
onload事件示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            window.onload = function(){
                alert("頁面加載完成==動態(tài)");
            }
        </script>
   </head>
   
   <body>
   </body>
</html>

onclick事件示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function onclickFun(){
                alert("這是單擊事件靜態(tài)注冊");
            }
            //動態(tài)注冊單擊事件
            window.onload = function(){
//                 1 查找標簽對象
                // getElementById    通過id屬性值獲取標簽對象
                //    get 是獲取
                //    Element是元素（元素就是標簽）
                // by    由..通過
                // id    id屬性
                var btnObj = document.getElementById("btn01");
//                 alert( btnObj );
//                 2 通過標簽對象.事件名 = function(){}
                btnObj.onclick = function(){
                    alert("這是動態(tài)注冊的onclick事件");
                }
            }
        </script>
   </head>
   <body>
        
        <input type="button" value="按鈕1" onclick="onclickFun();"/>
        <button id="btn01">按鈕2</button>
   </body>
</html>

onblur失去焦點事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function onblurFun(){
                // console這是js中提供的一個專門用于調(diào)試的對象。表示控制臺
                // log方法就是輸出內(nèi)容?？梢詡鬟f任意參數(shù)
                console.log("這是靜態(tài)注冊onblur事件");
            }
            window.onload = function(){
                //1 獲取標簽對象
                var passObj = document.getElementById("password");
                //2 通過標簽對象.事件名 = function(){}
                passObj.onblur = function(){
                    console.log("這是動態(tài)注冊的onblur事件");
                }
            }
        </script>
   </head>
   <body>
        用戶名：<input type="text" onblur="onblurFun();"/><br/>
        密碼：<input id="password" type="password" /><br/>
   </body>
</html>

onchange內(nèi)容發(fā)生改變事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function onchangeFun(){
                alert("靜態(tài)注冊onchange事件");
            }
            window.onload = function(){
                //1 獲取標簽對象
                var selObj = document.getElementById("sel01");
//                 alert( selObj );
                //2 通過標簽對象.事件名 = function(){}
                selObj.onchange = function(){
                    alert("動態(tài)注冊onchange事件");
                }
            }
        </script>
   </head>
   <body>
        請選擇你心中的女神：
        <select onchange="onchangeFun();">
            <option>--請選擇--</option>
            <option>劉奕菲</option>
            <option>迪麗熱巴</option>
            <option>殺那啦</option>
        </select>
        <br/>
        請選擇你心中的男神：
        <select id="sel01">
            <option>--請選擇--</option>
            <option>國哥</option>
            <option>龍哥</option>
            <option>華仔</option>
            <option>強哥</option>
        </select>
   </body>
</html>

onsubmit表單提交事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function onsubmitFun(){
                alert("開始驗證表單項，發(fā)現(xiàn)不合法");
                return false;
            }
            //
            window.onload = function(){
                // 獲取標簽
                var formObj = document.getElementById("form01");
//                 alert(formObj);
                // 通過標簽對象.事件名=function(){}
                formObj.onsubmit = function(){
                    alert("動態(tài)注冊==開始驗證表單項，發(fā)現(xiàn)不合法");
                    return false;
                }
            }
        </script>
   </head>
   <body>
        
        <form action="http://www.baidu.com" onsubmit="return onsubmitFun();">
            <input type="submit" value="靜態(tài)注冊"/>
        </form>
        <form action="http://www.baidu.com" id="form01">
            <input type="submit" value="動態(tài)注冊"/>
        </form>
   </body>
</html>

DOM 模型
DOM 全稱是Document Object Model 文檔對象模型，把文檔中的標簽，屬性，文本，轉(zhuǎn)換成為對象來管理。
Document 對象的理解：
第一點：Document它管理了所有的Html文檔內(nèi)容。
第二點：document它是一種樹結構的文檔。有層級關系。
第三點：它讓我們把所有的標簽都對象化
第四點：我們可以通過document訪問所有的標簽對象。

什么是對象化？？
我們基礎班已經(jīng)學過面向?qū)ο?。請問什么是對象化?br>舉例：
有一個人有年齡：18歲，性別：女，名字：張某某
我們要把這個人的信息對象化怎么辦！

Class Person {
private int age;
private String sex;
private String name;
}

那么 html 標簽要對象化怎么辦？

<body>
   <div id="div01">div01</div>
</body>

模擬對象化，相當于：
class Dom{
private String id; // id屬性
private String tagName; //表示標簽名
private Dom parentNode; //父親
private List children; // 孩子結點
private String innerHTML; // 起始標簽和結束標簽中間的內(nèi)容
}
Document對象中的方法介紹（*****重點）
1.document.getElementById(elementId)通過標簽的id屬性查找標簽dom對象，elementId是標簽的id屬性值

2.document.getElementsByName(elementName)通過標簽的name屬性查找標簽dom對象，elementName標簽的name屬性值

3.document.getElementsByTagName(tagname)通過標簽名查找標簽dom對象。tagname是標簽名

4.document.createElement( tagName )方法，通過給定的標簽名，創(chuàng)建一個標簽對象。tagName是要創(chuàng)建的標簽名

如果標簽對象有id屬性，優(yōu)先使用getElementById查找標簽對象
如果標簽沒有id屬性，只有name屬性，則使用getElementsByName方法進行查找
如果標簽即沒有id屬性，也沒有name屬性，最后才使用getElementsByTagName
getElementById和getElementsByName和getElementsByTagName都需要在頁面加載完成之后執(zhí)行。才能得到標簽對象。

getElementById方法示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        // 需求，當用戶點擊【驗證】按鈕的時候，幫我驗證一下，輸入框中的內(nèi)容是否合法
        // 驗證的規(guī)則是：必須由字母，數(shù)字，下劃線組成，并且長度是5到12位
        // 1、綁定單擊事件
        function onclickFun(){
            // 2 獲取輸入框中的內(nèi)容
            // 當我們要操作一個標簽對象的時候。一定要先獲取到這個標簽對象。
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;

            // 獲取用來輸出驗證結果的span標簽對象
            var spanObj = document.getElementById("usernameSpan");
            // innerHTML表示起始標簽和結束標簽中的內(nèi)容
            // 這個屬性，可讀可寫
//             spanObj.innerHTML = "帥哥講的真細";
            // 3 使用正則表達式去驗證
            var patt = /^\w{5,12}$/;//驗證的規(guī)則是：必須由字母，數(shù)字，下劃線組成，并且長度是5到12位
//             正則對象有一個test方法?？梢杂脕眚炞C一個字符串是否匹配正則表達式
//            匹配就返回ture，不匹配就返回false
            if (patt.test(usernameText)) {
//                 spanObj.innerHTML = "用戶名合法";
                spanObj.innerHTML = "<img alt=\"\" src='right.png' width='15' height='15' />";
            } else {
//                 spanObj.innerHTML = "用戶名不合法";
                spanObj.innerHTML = "<img alt=\"\" src='wrong.png' width='15' height='15' />";
            }
        }
        </script>
   </head>
   <body>
        用戶名：<input type="text" id="username" value="wzg168"/>
        <span style="color: red;" id="usernameSpan"></span>
        <button onclick="onclickFun()">驗證</button>
   </body>
</html>

getElementsByName方法示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            // 全選事件
            function checkAll(){
                // 當我們要操作一個標簽對象的時候。一定要先獲取到這個標簽對象。
                //getElementsByName是根據(jù)name屬性查找返回對象的集合。
                //這個集合的操作跟數(shù)組一樣
                //這個集合中的元素順序剛好是它們在html頁面中，從上到下的順序
                var hobbies = document.getElementsByName("hobby");
                // checked屬性表示單選，復選框的選中狀態(tài)。
                // 這個屬性可讀，可寫
                for (var i = 0; i < hobbies.length; i++) {
                    hobbies[i].checked = true;
                }
            }
            // 全不選
            function checkNo(){
                var hobbies = document.getElementsByName("hobby");
                // checked屬性表示單選，復選框的選中狀態(tài)。
                // 這個屬性可讀，可寫
                for (var i = 0; i < hobbies.length; i++) {
                    hobbies[i].checked = false;
                }
            }
            // 反選
            function checkReverse(){
                var hobbies = document.getElementsByName("hobby");
                // checked屬性表示單選，復選框的選中狀態(tài)。
                // 這個屬性可讀，可寫
                for (var i = 0; i < hobbies.length; i++) {
//                     if (hobbies[i].checked) {
//                         hobbies[i].checked = false;
//                     } else {
//                         hobbies[i].checked = true;
//                     }
                    hobbies[i].checked = !hobbies[i].checked;
                }
            }
        </script>
   </head>
   <body>
        興趣愛好：
        <input type="checkbox" name="hobby" checked="checked" value="hj"/>喝酒
        <input type="checkbox" name="hobby" value="cy"/>抽煙
        <input type="checkbox" name="hobby" value="tt"/>湯頭
        <br/>
        <button onclick="checkAll();">全選</button>
        <button onclick="checkNo();">全不選</button>
        <button onclick="checkReverse();">反選</button>
   </body>
</html>

getElementsByTagName方法示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            // 全選事件
            function checkAll(){
                //getElementsByTagName是通過指定的標簽名查找返回全部的標簽對象集合。
                //這個集合的操作跟數(shù)組一樣
                //這個集合中的元素順序跟他們在html頁面中，從上到下的順序一致！
                var inputObjs = document.getElementsByTagName("input");
                for (var i = 0; i < inputObjs.length; i++) {
                    inputObjs[i].checked = true;
                }
            }
        </script>
   </head>
   <body>
        興趣愛好：
        <input type="checkbox" checked="checked" value="hj"/>喝酒
        <input type="checkbox" value="cy"/>抽煙
        <input type="checkbox" value="tt"/>湯頭
        <br/>
        <button onclick="checkAll();">全選</button>
   </body>
</html>

createElement方法示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        window.onload = function(){
        //         需求：通過代碼創(chuàng)建標簽：<div>帥哥棒棒噠！</div>,并添加到body標簽中去顯示
            var divObj = document.createElement("div"); //<div></div>
//             alert( divObj );
            //divObj.innerHTML = "帥哥萌萌噠！"; //<div>帥哥萌萌噠！</div>
            var textNode = document.createTextNode("帥哥萌萌噠！");
            divObj.appendChild( textNode );
            //appendChild給body標簽添加子元素
            document.body.appendChild( divObj );
        }
        </script>
   </head>
   <body>
   </body>
</html>

節(jié)點的常用屬性和方法
所謂節(jié)點，就是前面講的標簽對象。

方法：
通過具體的元素節(jié)點調(diào)用
getElementsByTagName()
方法，獲取當前節(jié)點的指定標簽名孩子節(jié)點
appendChild( oChildNode )
方法，可以添加一個子節(jié)點，oChildNode是要添加的孩子節(jié)點

屬性：
childNodes屬性，獲取當前節(jié)點的所有子節(jié)點
firstChild屬性，獲取當前節(jié)點的第一個子節(jié)點
lastChild屬性，獲取當前節(jié)點的最后一個子節(jié)點
parentNode屬性，獲取當前節(jié)點的父節(jié)點
nextSibling屬性，獲取當前節(jié)點的下一個節(jié)點
previousSibling屬性，獲取當前節(jié)點的上一個節(jié)點
className屬性，用于獲取或設置標簽的class屬性值
innerHTML 屬性，表示獲取/設置起始標簽和結束標簽中的內(nèi)容
innerText屬性，表示獲取/設置起始標簽和結束標簽中的文本

練習：05.DOM查詢練習

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查詢</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
   window.onload = function(){
        //1.查找#bj節(jié)點
        document.getElementById("btn01").onclick = function(){
            alert( document.getElementById("bj").innerHTML );
        }
        //2.查找所有l(wèi)i節(jié)點
        var btn02Ele = document.getElementById("btn02");
        btn02Ele.onclick = function(){
            alert( document.getElementsByTagName("li").length );
        };
        //3.查找name=gender的所有節(jié)點
        var btn03Ele = document.getElementById("btn03");
        btn03Ele.onclick = function(){
            alert( document.getElementsByName("gender").length );
        };
        //4.查找#city下所有l(wèi)i節(jié)點
        var btn04Ele = document.getElementById("btn04");
        btn04Ele.onclick = function(){
            //1 先查找id為city的標簽
            //2 再查找city的li子元素
            alert( document.getElementById("city").getElementsByTagName("li").length );
        };
        //5.返回#city的所有子節(jié)點
        var btn05Ele = document.getElementById("btn05");
        btn05Ele.onclick = function(){
            //1 先查找id為city
            alert( document.getElementById("city").childNodes.length );
            //2 再通過city對象。獲取所有子節(jié)點
        };
        //6.返回#phone的第一個子節(jié)點
        var btn06Ele = document.getElementById("btn06");
        btn06Ele.onclick = function(){
            //1 先查找id為phone的標簽對象
            alert( document.getElementById("phone").firstChild.innerHTML );
            //2 再根據(jù)phone標簽對象，查找第一個子節(jié)點
        };
        //7.返回#bj的父節(jié)點
        var btn07Ele = document.getElementById("btn07");
        btn07Ele.onclick = function(){
            //1先查找id為bj的節(jié)點
            alert( document.getElementById("bj").parentNode.innerHTML );
            //2再通過bj節(jié)點找到父節(jié)點
        };
        //8.返回#android的前一個兄弟節(jié)點
        var btn08Ele = document.getElementById("btn08");
        btn08Ele.onclick = function(){
            alert( document.getElementById("android").previousSibling.innerHTML );
        };
        //9.讀取#username的value屬性值
        var btn09Ele = document.getElementById("btn09");
        btn09Ele.onclick = function(){
            alert( document.getElementById("username").value );
        };
        //10.設置#username的value屬性值
        var btn10Ele = document.getElementById("btn10");
        btn10Ele.onclick = function(){
            document.getElementById("username").value = "帥哥帥不要不要的";
        };
        //11.返回#bj的文本值
        var btn11Ele = document.getElementById("btn11");
        btn11Ele.onclick = function(){
//             alert( document.getElementById("bj").innerText );
            alert( document.getElementById("city").innerText );
        };
   };
</script>
</head>
<body>
<div id="total">
   <div class="inner">
        <p>
            你喜歡哪個城市?
        </p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>東京</li>
            <li>首爾</li>
        </ul>
        <br>
        <br>
        <p>
            你喜歡哪款單機游戲?
        </p>
        <ul id="game">
            <li id="rl">紅警</li>
            <li>實況</li>
            <li>極品飛車</li>
            <li>魔獸</li>
        </ul>
        <br />
        <br />
        <p>
            你手機的操作系統(tǒng)是?
        </p>
        <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
   </div>
   <div class="inner">
        gender:
        <input type="radio" name="gender" value="male"/>
        Male
        <input type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
   </div>
</div>
<div id="btnList">
   <div><button id="btn01">查找#bj節(jié)點</button></div>
   <div><button id="btn02">查找所有l(wèi)i節(jié)點</button></div>
   <div><button id="btn03">查找name=gender的所有節(jié)點</button></div>
   <div><button id="btn04">查找#city下所有l(wèi)i節(jié)點</button></div>
   <div><button id="btn05">返回#city的所有子節(jié)點</button></div>
   <div><button id="btn06">返回#phone的第一個子節(jié)點</button></div>
   <div><button id="btn07">返回#bj的父節(jié)點</button></div>
   <div><button id="btn08">返回#android的前一個兄弟節(jié)點</button></div>
   <div><button id="btn09">返回#username的value屬性值</button></div>
   <div><button id="btn10">設置#username的value屬性值</button></div>
   <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

JSP