Rumah > Artikel > hujung hadapan web > JS的8个必须注意的基础知识

JS的8个必须注意的基础知识

php中世界最好的语言asal: 2018-03-13 13:16:111567semak imbas

这次给大家带来JS的8个必须注意的基础知识，JS的8个必须注意的基础知识注意事项有哪些，下面就是实战案例，一起来看一下。

1 JS 中修改元素的类名: 可以通过className修改,不能使用class

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

2 函数传参

<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修改属性的第二种方法:(3499910bf9dac5ae3c52d5ede7383485要修改的属性不固定时使用5db79b134e9f6b82c0b36e0489ee08ed)

可以通过 oDiv.style[属性名字] = 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.style和className的区别

元素.style.属性 = xxx;是修改的行间(行内)样式,它的优先级比较高 !!! 例如:oDiv.style.backgroundColor = 'red';
className : 可以通过指定的类名,去找到对应的样式;
但是如果使用了style之后,再使用className指定样式,就会没有效果!!!!

注意:要么都是用style设置样式,要么单独使用className指定样式,不可混合使用,会有未知的错误发生!

5.提取行间事件

window.onload 页面加载完成时才执行
行为、样式、结构三者分离: JS CSS HTML 分离

提取事件

为元素添加事件

<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从父元素获取子元素

从下面代码中获取到input

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

放下如下:

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

7. innerHTML

用于设置容器标签的内容,可以是文字,也可以是 HTML(标签)。

<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.字符串的拼接:

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Artikel berkaitan

Lihat lagi