8 connaissances de base de JS auxquelles vous devez prêter attention-js tutoriel-php.cn

8 connaissances de base de JS auxquelles vous devez prêter attention

php中世界最好的语言

Libérer： 2018-03-13 13:16:11

original

1583 Les gens l'ont consulté

Cette fois, je vous apporte 8 connaissances de base en JS auxquelles vous devez prêter attention. Quelles sont les 8 connaissances de base en JS auxquelles vous devez prêter attention Notes Quels sont les cas pratiques ? ci-dessous ?

1 Modifier le nom de classe de l'élément en JS : Vous pouvez le modifier via className, vous ne pouvez pas utiliser class

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

Copier après la connexion

2 Passage des paramètres de fonction

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

Copier après la connexion

3 La deuxième méthode de modification des attributs : (À utiliser lorsque l'attribut à modifier n'est pas fixe)

Vous pouvez modifier dynamiquement les attributs et les valeurs via oDiv.style[attribute name] = value;

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

Copier après la connexion

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

Copier après la connexion

4. className

Element.style.Attribute = xxx est le style interline (en ligne) modifié, sa priorité ; est relativement élevé !!! Par exemple : oDiv.style.backgroundColor = 'red';
className : vous pouvez trouver le style correspondant via le nom de classe spécifié ;
Mais si vous utilisez le style, puis utilisez className pour spécifier le style, cela n'aura aucun effet !!!!

Remarque : utilisez soit style pour définir le style, soit utilisez className seul pour spécifier le style. Ils ne peuvent pas être mélangés et des erreurs inconnues se produiront !

5.提取行间事件

Copier après la connexion

window.onload Il est exécuté uniquement lorsque la page est chargée
Séparation du comportement, du style et de la structure : séparation JS CSS HTML

Extraire les événements

Ajouter événements aux éléments

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

Copier après la connexion

6.JS obtient l'élément enfant

à partir du code suivant pour obtenir l'entrée

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

Copier après la connexion

et mettre comme suit :

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

Copier après la connexion

7. innerHTML

est utilisé pour définir le contenu de la balise conteneur, qui peut être du texte ou du HTML (tag).

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

Copier après la connexion

8. Épissage de cordes :

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Attributs liés à l'arrière-plan en HTML et CSS

Module de conversion 2D en HTML et CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!