suchen

Heim >Web-Frontend >js-Tutorial >8 Grundkenntnisse von JS, auf die Sie achten müssen

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

php中世界最好的语言
php中世界最好的语言Original
2018-03-13 13:16:111634Durchsuche

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('box1');
            tobox.className = 'tmpBox';
        }
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>
3 Die zweite Methode zum Ändern von Attributen: (3499910bf9dac5ae3c52d5ede7383485Verwenden Sie diese Methode, wenn das zu ändernde Attribut nicht festgelegt ist5db79b134e9f6b82c0b36e0489ee08ed)

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

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.提取行间事件

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

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

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

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!

Stellungnahme：
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
Vorheriger Artikel：Einige kleine Übungen zu regulären AusdrückenNächster Artikel：Einige kleine Übungen zu regulären Ausdrücken

In Verbindung stehende Artikel

Mehr sehen