Xiaoqiang の HTML5 モバイル開発ロード (31) - JavaScript レビュー 6-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

Xiaoqiang の HTML5 モバイル開発ロード (31) - JavaScript レビュー 6

黄舟

Feb 04, 2017 pm 02:32 PM

HTML DOM モデル: w3c dom モデル (仕様) が登場する前は、各ブラウザーがいくつかの dom 操作をサポートしていました
オブジェクトの選択
属性: selectedIndex: ユーザーが現在選択しているオプションの添字を示します (0 から始まります) 長さ: Get または Setオプションの長さ options: 値は配列であり、各配列要素はオプションオブジェクトであり、ドロップダウンリストのすべてのオプションを表します。 Option オブジェクト
属性: text: オプション値の説明: 選択されたオプションの値: 値が true の場合、これを意味しますユーザーがオプションを選択すると、Option オブジェクトは次のように作成できます

var obj = new Option(text, value);

<html>  
    <head>  
        <script src="myjs.js"></script>  
        <script>  
            function f1(){  
                //alert($(&#39;s1&#39;).selectedIndex);  
                //alert($(&#39;s1&#39;).length);  
                var arr = $(&#39;s1&#39;).options;  
                for(i=0;i<arr.length;i++){  
                    alert(arr[i].text +&#39;   &#39;+ arr[i].value);  
                }  
            }  
            function f2(){            
                var op = new Option(&#39;武汉&#39;,&#39;wh&#39;);  
                $(&#39;s1&#39;).options[$(&#39;s1&#39;).options.length] = op;  
            }  
        </script>  
    </head>  
    <body>  
        <select id="s1" style="width:120px;" name="s1">  
            <option value="bj">北京</option>  
            <option value="sh">上海</option>  
            <option value="xa">西安</option>  
            <option value="sz">深圳</option>  
            <option value="tj">天津</option>  
        </select>  
        <input type="button" value="点我吧" onclick="f2();"/>  
    </body>  
</html>

ログイン後にコピー

カスケードドロップダウンリスト

<html>  
    <head>  
        <script src="myjs.js"></script>  
        <script>  
            var arr = new Array();  
            arr[0] = [new Option(&#39;--方向--&#39;,&#39;-1&#39;)];  
            arr[1] = [new Option(&#39;商务英语&#39;,&#39;en1&#39;),  
                new Option(&#39;专业英语&#39;,&#39;en2&#39;)];  
            arr[2] = [new Option(&#39;计算机软件&#39;,&#39;comp1&#39;),  
                new Option(&#39;计算机网络&#39;,&#39;comp2&#39;),  
                new Option(&#39;计算机应用&#39;,&#39;comp3&#39;)];  
            //数组的创建放在外面执行效率更高  
            function change(index){  
                $(&#39;s2&#39;).length = 0;  
                for(i=0;i<arr[index].length;i++){  
                    $(&#39;s2&#39;).options[i] = arr[index][i];  
                }  
            }  
        </script>  
    </head>  
    <body>  
        <select id="s1" style="width:120px;" onchange="change(this.selectedIndex);">  
            <!-- this表示绑定该事件的节点,在这里表示<select>节点-->  
            <option value="-1">--专业--</option>  
            <option value="english">英语</option>  
            <option value="computer">计算机</option>  
        </select>  
        <select id="s2" style="width:120px;">  
            <option value="-1">--方向--</option>  
        </select>  
    </body>  
</html>

ログイン後にコピー

Table オブジェクト

Attribute と同等: tHead: tHead オブジェクトを返す tFoot: tFoot オブジェクトを返す tBody: tBody オブジェクトを返す配列 rows: テーブルのすべての行を返す、TableRow 配列メソッド: var obj = insertRow(index):インデックスに行を挿入します。返される obj は TableRow オブジェクトです (添え字は 0 から始まります)deleteRow(index): インデックスにある TableRow オブジェクトの行を削除します。
Attributes: cell: すべてのセルを表す配列。 (TableCell オブジェクト) メソッド: var obj = insertCell(index); インデックス Cell に 1 つ挿入、obj を返す TableCelldelecteCell(index): セルの削除 TableCell オブジェクトは

<html>  
    <head>  
        <script src="myjs.js"></script>  
        <script>  
            //html dom模型做  
            function addRow1(){  
                var tr = $(&#39;t1&#39;).insertRow($(&#39;t1&#39;).rows.length);      
                var td1 = tr.insertCell(tr.cells.length);  
                var td2 = tr.insertCell(tr.cells.length);  
                td1.innerHTML = $(&#39;name&#39;).value;  
                td2.innerHTML = $(&#39;salary&#39;).value;  
                //tr.style.backgroundColor = &#39;red&#39;;   //两种样式1  
                //tr.className = &#39;selected&#39;;          //两种样式2  
                $(&#39;t1&#39;).rows[1].cells[1].style.backgroundColor = &#39;red&#39;;//把某一格加亮  
            }  
            //采用w3c dom模型做  
            function addRow2(){  
                var tr1 = document.createElement(&#39;tr&#39;);  
                var td1 = document.createElement(&#39;td&#39;);  
                var td2 = document.createElement(&#39;td&#39;);  
                td1.innerHTML = $(&#39;name&#39;).value;  
                td2.innerHTML = $(&#39;salary&#39;).value;  
                tr1.appendChild(td1);  
                tr1.appendChild(td2);  
                $(&#39;t1&#39;).appendChild(tr1);  
            }  
        </script>  
        <style>  
            .selected{  
                background-color:red;  
            }  
        </style>  
    </head>  
    <body>  
        <table id="t1" border="1" cellpadding="0" cellspacing="0" width="60%">  
            <tr><td>姓名</td><td>工资</td></tr>  
            <tr><td>zs</td><td>2000</td></tr>  
            <tr><td>ls</td><td>3000</td></tr>  
            <tr><td>wu</td><td>4000</td></tr>  
        </table><br/>  
        姓名：<input type="text" name="name" id="name"/>  
        工资：<input type="text" name="salary" id="salary"/>  
        <input type="button" value="添加" onclick="addRow2();"/>  
    </body>  
</html>

ログイン後にコピー

上記は Xiaoqiang の HTML5 モバイル開発です道路 (31) - JavaScript レビュー 6 コンテンツ、その他の関連コンテンツ PHP 中国語 Web サイト (www.php.cn) にご注意ください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。