Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (30) – JavaScript-Rezension 5-HTML-Tutorial-php.cn

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (30) – JavaScript-Rezension 5

黄舟

Freigeben： 2017-02-04 14:25:03

Original

1750 Leute haben es durchsucht

1. Suche

Der erste Weg: Suche nach ID

var obj = document.getElementById(id); //document ist eine Instanz von HTMLDocument

<html>  
    <head>  
        <script>  
            function f1(){  
                var obj = document.getElementById(&#39;a1&#39;); //双引号，单引号都可以  
                //innerHTML属性：可以访问或者设置节点的html的属性值  
                //alert(obj.innerHTML);   
                obj.innerHTML = "为什么点我"; //双引号单引号都可以  
            }  
            function f2(){  
                var obj = document.getElementById(&#39;d1&#39;);  
                alert(obj.innerHTML);  
            }  
            function f3(){  
                var obj = document.getElementById(&#39;username&#39;);  
                //value属性：可以获取文本输入框的值和改变值  
                alert(obj.value); //获得值  
                obj.value = &#39;abc&#39;;//改变值  
            }  
              
        </script>  
    </head>  
  
    <body style="font-size:30px;font-style:italic;">  
        <!--javascript:; 表示是一个空白的js语句-->  
        <a href="javascript:;" id="a1" onclick="f1();">click me</a><br/>  
        <div id="d1" ><span>你好</span></div><br/>  
        <input type="text" id="username" name="username"/><br/>  
        <input type="button" value="点我吧" onclick="f3();"/>  
    </body>  
</html>

Nach dem Login kopieren

Der zweite Weg

var arr = node.getElementsByTagName('tagName');

<html>  
    <head>  
        <style>  
            ul{  
                list-style-type:none;     
            }  
            ul li{  
                float:left;  
                border:1px solid black;  
                margin-left:10px;  
                width:100px;  
                height:40px;  
                background-color:red;  
                cursor:pointer;               
            }  
            .selected{  
                background-color:#ff88ee;  
            }  
        </style>  
        <script src="myjs.js"></script>  
        <script>  
            function doAction(index){  
                var arr = $(&#39;u1&#39;).getElementsByTagName(&#39;li&#39;);  
                for(i=0; i<arr.length; i++){  
                    arr[i].className = &#39;&#39;;  
                }  
                var obj = $(&#39;l&#39;+index);  
                obj.className = &#39;selected&#39;;  
            }  
        </script>  
    </head>  
    <body style="font-size:30px;">  
        <ul id="u1">  
            <li onmouseover="doAction(1);" id="l1">选项一</li>  
            <li onmouseover="doAction(2);" id="l2">选项二</li>  
            <li onmouseover="doAction(3);" id="l3">选项三</li>  
        </ul>  
    </body>  
</html>

Nach dem Login kopieren

Der dritte Weg

Traversal-Methode verwenden (schlechte Browserkompatibilität)

parentNode

previousSibling previous Brother

nextSibling next Brother

childNodes Alle Untergeordnete Knoten

firstChild Der vorherige untergeordnete Knoten

lastChild Der nächste untergeordnete Knoten

Aufgrund von Browserkompatibilitätsproblemen sollte die Traversal-Methode so minimal wie möglich sein. Verwenden Sie

2. Erstellen Sie

document.createElement(tagName); //Als letztes Kind hinzufügen

node.insertBefore(obj, refNode); //An den Anfang von refNode hinzufügen

node.replaceChild(obj, refNode) ; //refNode ersetzen

4. Löschen Sie

node.removeChild(obj );

5. Stil

Der erste Weg: Ändern Sie das className-Attribut des Knotens

<html>  
    <head>  
        <script src="myjs.js"></script>  
        <script>  
            function f1(){  
                var obj = document.createElement(&#39;div&#39;);      
                obj.innerHTML = &#39;兴趣最重要...&#39;;  
                obj.className = &#39;s1&#39;;  
            //  $(&#39;d1&#39;).appendChild(obj);     
            //  $(&#39;d1&#39;).insertBefore(obj, $(&#39;a1&#39;));   
            //  $(&#39;d1&#39;).replaceChild(obj, $(&#39;a1&#39;));  
                $(&#39;d1&#39;).removeChild($(&#39;a1&#39;));  
            }  
        </script>  
        <style>  
            .s1{  
                width:200px;  
                height:100px;  
                background-color:red;  
            }  
        </style>  
    </head>  
          
    <body style="font-size:30px;" id="d1">  
<!--         <a href="javascript:alert(&#39;hello&#39;);">如何学好java</a>  -->  
        <a id="a1" href="javascript:;" onclick="f1();">如何学好java</a>  
    </body>  
</html>

Nach dem Login kopieren

Zum Beispiel: var obj = document.getElementById( 'id1'); obj.className = 's1'; //S1-Stil verwenden ****Siehe Beispiel: Formularüberprüfung****

Zweiter Weg: Ändern Sie das Stilattribut des Knotens

1. Es muss ein Inline-Stil sein

2. Wenn der Name „-“ enthält, z. B. „Hintergrundfarbe“, müssen Sie „node.style.backgroundColor“ ändern = 'red' wie folgt:

So deaktivieren Sie die beiden Standardverhaltensweisen des Browsers:

Klicken Sie auf die Verbindung. Der Browser sendet eine Anfrage an die Adresse, auf die das href-Attribut verweist

<html>  
    <head>  
        <style>  
            #d1{  
                width:80px;  
                height:80px;  
                background-color:blue;  
                position:relative;  
            }  
        </style>  
        <script src="myjs.js"></script>  
        <script>  
            function f1(){  
                var v1 = parseInt($(&#39;d1&#39;).style.left);  
                $(&#39;d1&#39;).style.left = v1 + 50 + &#39;px&#39;;  
            }  
        </script>  
    </head>  
    <body>  
        <div id="d1" style="left:10px;"></div>  
        <input type="button" value="click me"  
        onclick="f1();"/>  
    </body>  
</html>

Nach dem Login kopieren

Klicken Sie auf die Schaltfläche zum Senden des Formulars. Der Browser sendet das Formular.

Verbotene Methode

Das Obige ist der Inhalt von Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (30) - JavaScript-Überprüfung 5. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!

<a href="" onclick="return false;"></a>
<from onsubmint="return false;"></form>

Nach dem Login kopieren