这次给大家带来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修改属性的第二种方法:(3499910bf9dac5ae3c52d5ede7383485要修改的属性不固定时使用5db79b134e9f6b82c0b36e0489ee08ed)
可以通过 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中文网其它相关文章！
推荐阅读：
以上是JS的8个必须注意的基础知识的详细内容。更多信息请关注PHP中文网其他相关文章！
es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。
JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。
原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。
javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。
JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。
整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。
foreach是es6里的吗May 05, 2022 pm 05:59 PMforeach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Atom编辑器mac版下载
最流行的的开源编辑器
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
