Home > Article > Web Front-end > 8 basic knowledge of JS that you must pay attention to

8 basic knowledge of JS that you must pay attention to

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

This time I will bring you 8 basic knowledge of JS that must be paid attention to. 8 basic knowledge of JS that must be paid attention to. What are the precautions?. Here are the actual cases. Let’s take a look. one time.

1 Modify the class name of the element in JS: You can modify it through className, but you cannot use class

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

2 Function parameter passing

<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 The second method of modifying attributes: (3499910bf9dac5ae3c52d5ede7383485Use when the attribute to be modified is not fixed5db79b134e9f6b82c0b36e0489ee08ed)

You can use oDiv. style[attribute name] = value; to dynamically modify attributes and values

//括号里放的是变量
       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. The difference between style and className

##Element.style.Attribute = xxx; is the modified interline (inline) style, and its priority is relatively high!!! For example: oDiv.style.backgroundColor = ' red';

className: You can find the corresponding style by specifying the class name;
But if you use style and then use className to specify the style, it will have no effect!!!!

Note: Either use style to set the style, or use className to specify the style alone. They cannot be mixed, and unknown errors will occur!

5.提取行间事件

window.onload The

behavior will be executed only after the page is loaded. Separation of style and structure: JS CSS HTML separation

Extract events

Add events to elements

<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 gets child elements from parent elements

Get the input from the code below

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

and put it down as follows:

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

7. innerHTML

is used to set the container The content of the tag can be text or 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. String splicing:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

8 basic knowledge of JS that you must pay attention to

Related articles