Xiaoqiangs mobile HTML5-Entwicklungsstraße (31) – JavaScript-Rezension 6-HTML-Tutorial-php.cn

HTML-DOM-Modell: Bevor das w3c-DOM-Modell (Spezifikation) erschien, unterstützte jeder Browser einige DOM-Operationen
Objekt auswählen
Attribute: selectedIndex: Gibt den Index der aktuell vom Benutzer ausgewählten Option an (von 0 Start ) Länge: Ruft die Länge der Option ab oder legt sie fest. Optionen: Der Wert ist ein Array, jedes Array-Element ist ein Optionsobjekt, das alle Optionen der Dropdown-Liste darstellt. Optionsobjekt
Attribute: Text: Beschreibung der Option Wert: Der Wert der ausgewählten Option: Wenn der Wert wahr ist, bedeutet dies, dass diese Option vom Benutzer ausgewählt wurde und das Option-Objekt wie folgt erstellt werden kann:

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>

Nach dem Login kopieren

Kaskadierende Dropdown-Liste

<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>

Nach dem Login kopieren

Tabellenobjekt entspricht

-Attribute: tHead: Gibt tHead-Objekt zurück tFoot: Gibt zurück tFoot-Objekt tBody: Gibt tBody-Objekt-Array-Zeilen zurück: Gibt alle Zeilen der Tabelle zurück, TableRow-Array. Methode: var obj = insertRow(index): Fügt eine Zeile am Index ein. Das zurückgegebene obj ist ein TableRow-Objekt (der Index beginnt bei 0) deleteRow (index): Eine Zeile von TableRow-Objekten am Index löschen. Äquivalent zu
Attribute: Zellen: ein Array, das alle Zellen darstellt (TableCell-Objekt) Methode: var obj = insertCell(index); , return obj ist TableCelldelecteCell(index): Eine Zelle löschen TableCell-Objekt Äquivalent zu < ;td>

<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>

Nach dem Login kopieren

Das Obige ist der Inhalt von Xiaoqiangs HTML5-Mobilentwicklung (31) – JavaScript-Rezension 6. Weitere Informationen zum Thema Inhalt, achten Sie bitte auf die chinesische PHP-Website (m.sbmmt.com)!

Verwandte Etiketten：

HTML5，移动开发，JavaScript回顾

Quelle：php.cn

Vorheriger Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (30) – JavaScript-Rezension 5 Nächster Artikel：Xiaoqiangs mobile HTML5-Entwicklungsstraße (32) – JavaScript-Rezension 7

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors