recherche

Maison  >  Article  >  interface Web  >  8 connaissances de base de JS auxquelles vous devez prêter attention

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

php中世界最好的语言
php中世界最好的语言original
2018-03-13 13:16:111564parcourir

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('box1');
            tobox.className = 'tmpBox';
        }

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>

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

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

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>

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>

et mettre comme suit : 

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

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>

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

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Quelques petits exercices sur les expressions régulièresArticle suivant：Quelques petits exercices sur les expressions régulières

Articles Liés

Voir plus