欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-06 08:50:20
...
这次给大家带来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

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

HTML与CSS中背景相关属性

HTML与CSS中2D转换模块

以上就是JS的8个必须注意的基础知识的详细内容,更多请关注其它相关文章!