JS的8个必须注意的基础知识-js教程-PHP中文网

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

php中世界最好的语言

发布： 2018-03-13 13:16:11

原创

1281人浏览过

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

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

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

登录后复制

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('div1');
            oDiv.style.backgroundColor = color;
        }    </script></head><body><input type="button" value="变绿" onclick="setColor('green')"><input type="button" value="变黄" onclick="setColor('yellow')"><input type="button" value="变黑" onclick="setColor('black')"><div id="div1"></div></body></html>

登录后复制

3修改属性的第二种方法:(<a>要修改的属性不固定时使用</a>)

可以通过 oDiv.style[属性名字] = value;来动态修改属性和值

//括号里放的是变量
       function setStyle(propertyName,value) { 
          var oDiv = document.getElementById('div1');
          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('div1');
            oDiv.style[propertyName] = value;
        }    </script></head><body><input type="button" value="变高" onclick="setStyle('height','200px')"><input type="button" value="变宽" onclick="setStyle('width','200px')"><input type="button" value="变红" onclick="setStyle('background','red')"><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('btn1');            //给元素添加事件
            oBtn.onclick = function () {  //匿名函数
                alert('我是打酱油的');
            };
        }    </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('box1'); //现获取父元素div
   var inputs = oDiv.getElementsByTagName('input'); //再通过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('textField');            var oBtn = document.getElementById('button');            var oContent = document.getElementById('div-content');
            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 = '我叫小明'+12+'岁'+168+'2017'; >>>  结果:我叫小明12岁1682017var num = '9+6等于'+(9+6); >>>  结果: 9 + 6 等于 15

登录后复制

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

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

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