8 Grundkenntnisse von JS, auf die Sie achten müssen-js-Tutorial-php.cn

8 Grundkenntnisse von JS, auf die Sie achten müssen

php中世界最好的语言

Freigeben： 2018-03-13 13:16:11

Original

1609 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen 8 Grundkenntnisse von JS, auf die Sie achten müssen. Auf welche 8 Grundkenntnisse von JS müssen Sie einmal achten?

1 Ändern Sie den Klassennamen des Elements in JS: Sie können ihn über className ändern, Sie können class nicht verwenden

       function toRed() {            var tobox = document.getElementById(&#39;box1&#39;);
            tobox.className = &#39;tmpBox&#39;;
        }

Nach dem Login kopieren

2 Übergabe von Funktionsparametern

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>02-函数传参数</title>
    <style>
        #div1{width: 200px; height: 200px; border: 1px  solid #000;}    </style>
    <script>
        function setColor(color) {            var oDiv = document.getElementById(&#39;div1&#39;);
            oDiv.style.backgroundColor = color;
        }    </script></head><body><input type="button" value="变绿" onclick="setColor(&#39;green&#39;)"><input type="button" value="变黄" onclick="setColor(&#39;yellow&#39;)"><input type="button" value="变黑" onclick="setColor(&#39;black&#39;)"><div id="div1"></div></body></html>

Nach dem Login kopieren

3 Die zweite Methode zum Ändern von Attributen: (Verwenden Sie diese Methode, wenn das zu ändernde Attribut nicht festgelegt ist)

Sie können Attribute und Werte dynamisch ändern über oDiv.style[attribute name] = value;

//括号里放的是变量
       function setStyle(propertyName,value) { 
          var oDiv = document.getElementById(&#39;div1&#39;);
          oDiv.style[propertyName] = value;
      }

Nach dem Login kopieren

<html lang="en"><head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{            width: 100px;height: 100px;border: 1px solid #000;background-color: skyblue;
        }    </style>
    <script>
        function setStyle(propertyName,value) {            var oDiv = document.getElementById(&#39;div1&#39;);
            oDiv.style[propertyName] = value;
        }    </script></head><body><input type="button" value="变高" onclick="setStyle(&#39;height&#39;,&#39;200px&#39;)"><input type="button" value="变宽" onclick="setStyle(&#39;width&#39;,&#39;200px&#39;)"><input type="button" value="变红" onclick="setStyle(&#39;background&#39;,&#39;red&#39;)"><div id="div1"></div></body></html>

Nach dem Login kopieren

4 className

Element.style.Attribute = xxx; ist der modifizierte Interline-Stil (Inline-Stil), seine Priorität ist relativ hoch!!! Zum Beispiel: oDiv.style.backgroundColor = 'red';

className: Sie können den entsprechenden Stil finden, indem Sie den Klassennamen angeben;

Aber wenn Sie style verwenden und dann className zur Angabe verwenden Der Stil hat keine Auswirkung! 🎜>

window.onload Wird nur ausgeführt, wenn die Seite geladen wird

Trennung von Verhalten, Stil und Struktur: JS CSS HTML-Trennung

Ereignisse extrahieren

5.提取行间事件

Nach dem Login kopieren

Hinzufügen Ereignisse zu Elementen

6.JS ruft das untergeordnete Element

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>05-提取行间事件</title>
    <script>
        //window.onload 页面加载完成时才执行
        window.onload = function () {            var oBtn = document.getElementById(&#39;btn1&#39;);            //给元素添加事件
            oBtn.onclick = function () {  //匿名函数
                alert(&#39;我是打酱油的&#39;);
            };
        }    </script></head><body><input id="btn1" type="button" value="按钮"></body></html>

Nach dem Login kopieren

aus dem folgenden Code ab, um die Eingabe

abzurufen und einzufügen es wie folgt herunter:

<div id="box1">
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br>
    <input type="checkbox"> <br></div>

Nach dem Login kopieren

7. innerHTML

window.onload =function (){   var oDiv = document.getElementById(&#39;box1&#39;); //现获取父元素div
   var inputs = oDiv.getElementsByTagName(&#39;input&#39;); //再通过div获取到里面所有的input}

Nach dem Login kopieren

wird verwendet, um den Inhalt des Container-Tags festzulegen, der Text oder HTML (Tag) sein kann.

8. Saitenspleißen:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>08-innerHTML</title>
    <style>
        .content{            width: 200px;            height: 200px;            border: 1px solid #000;
        }    </style>
    <script>
        window.onload = function () {            var oText = document.getElementById(&#39;textField&#39;);            var oBtn = document.getElementById(&#39;button&#39;);            var oContent = document.getElementById(&#39;div-content&#39;);
            oBtn.onclick = function () {
                oContent.innerHTML = oText.value;//可以往里放文字,标签等
            }
        }    </script></head><body><input type="text" id="textField"><input type="button" value="点击" id="button"><div class="content" id="div-content"></div></body></html>

Nach dem Login kopieren

Empfohlene Lektüre:

var str = &#39;我叫小明&#39;+12+&#39;岁&#39;+168+&#39;2017&#39;; >>>  结果:我叫小明12岁1682017var num = &#39;9+6等于&#39;+(9+6); >>>  结果: 9 + 6 等于 15

Nach dem Login kopieren

Hintergrundbezogene Attribute in HTML und CSS

2D-Konvertierungsmodul in HTML und CSS

Das obige ist der detaillierte Inhalt von8 Grundkenntnisse von JS, auf die Sie achten müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!