1. JS的三种引入方式...
1）行内引入（行内式）
<开始标签 on +事件类型 ="js代码"></结束标签>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com" onclick="alter('您将要跳转到百度')">百度</a>
</body>
</html>
2)内部引入（内嵌式）
<script>
js代码
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
alter('这是内嵌式');
</script>
</body>
</html>
3)外部引入（外链式）
<script type="text/javascript" src="js文件的路径"></script>
alter("这是外链式的使用");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="importjs.js"></script>
</head>
<body>
</body>
</html>
2.JS的注释
JavaScript的注释用于解释JavaScript代码，增强其可读性。JavaScript 有两种注释方式:
(1)单行注释:以//开头，任何位于//与行末之间的文本都会被JavaScript忽略。
(2)多行注释:以/* 开头，以*/结尾，任何位于/*和*/之间的文本都会被JavaScript 忽略。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//初始化value变量为0
var value=0;
/**
* 设置节点透明度
* node节点
* val透明度的值
*/
function setOpacity(node,val) {
node.style.opacity=val;
}
</script>
</body>
</html>
3.变量定义和赋值
JavaScript不区分整数和浮点数，统一用Number表示
var num=1; //数值型变量 var b=true; //布尔型变量 var ud; //未赋值，其值为undefined,其类型也是undefined变量 var str='我是字符串'; //字符串变量 console.log(num,b,ud,str); //输出到控制台
null和undefined
null表示一个“空”的值，它和 0 以及 空字符串''不同，0 是一个数值，''表示长度为0的字符串，而null表示“空”。
在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，还有一个和null类似的undefined，它表示“未定义”。
4.数组定义、初始化、遍历(for in)
数组对象用来在单独的变量名中存储一系列的值。数组对象的字面量表示形式是[ ]。
var arr1=[]; //定义元素个数为0的数组 var arr2=['a',2,true]; //定义并初始化数组
var arr2=['a',2,true]; //定义并初始化数组
for(var m in arr2) //for in语法遍历数组时，in前的变量代表下标
{
console.log(arr2[m]); //访问数组元素
}
5.函数
无参函数定义和调用...
函数用于封装一段完成特定功能的代码
function 函数名 （参数）{
函数体...
}
function sayHello(){
console.log('Hello');
}
sayHello();
定义函数
在JavaScript中，定义函数的方式如下：
function abs(x) {
if (x >= 0) {
return x;
} else {
return -x; } }
上述abs()函数的定义如下：
- function指出这是一个函数定义；
- abs是函数的名称；
- (x)括号内列出函数的参数，多个参数以,分隔；
- { ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。
请注意，函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回。因此，函数内部通过条件判断和循环可以实现非常复杂的逻辑。
如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。
由于JavaScript的函数也是一个对象，上述定义的abs()函数实际上是一个函数对象，而函数名abs可以视为指向该函数的变量。
因此，第二种定义函数的方式如下：
var abs = function (x) { if (x >= 0) { return x; } else { return -x; } };
在这种方式下，function (x) { ... }是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量abs，所以，通过变量abs就可以调用该函数。
上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束。
调用函数
调用函数时，按顺序传入参数即可：
abs(10); // 返回10 abs(-9); // 返回9
由于JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数：
abs(10, 'blablabla'); // 返回10 abs(-9, 'haha', 'hehe', null); // 返回9
传入的参数比定义的少也没有问题：
abs(); // 返回NaN
此时abs(x)函数的参数x将收到undefined，计算结果为NaN。
要避免收到undefined，可以对参数进行检查：
function abs(x) {
if (typeof x !== 'number') {
throw 'Not a number';
} if (x >= 0) {
return x;
} else {
return -x; } }
- 函数名称。
- 函数的参数列表，用小括号( )括起来，并用逗号分隔
- 定义函数的语句，用大括号括{ }起来
6.DOM元素
由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：
- 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
- 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
- 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
- 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM树</title>
</head>
<body>
<a href="#">my link</a>
<h1>my header</h1>
</body>
</html>
在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，
以及CSS选择器document.getElementsByClassName()。
由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。
(1) 摘取果树上的果实(获取网页元素上的内容或属性值等)的顺序是:先获取枝条(即网页上的元素)，再获取枝条上的果实(元素的内部文字或属性等)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById演示</title>
</head>
<body>
<a href="#" id="link">my link</a>
<script type="text/javascript">
var link_a=document.getElementById('link');
console.log(link_a.innerHTML);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementByClassName演示</title>
</head>
<body>
<h1 class="flower">my header1</h1>
<h2 class="flower">my header2</h2>
<p class="flower">my p</p>
<script type="text/javascript">
var flowers = document.getElementsByClassName('flower');
for(var one_flower in flowers){
console.log(flowers[one_flower].innerHTML);
}
</script>
</body>
</html>
(2)给假树安装新树枝(向网页元素上添加新元素或给元素添加新属性等)。
顺序一:先创造并把新树枝接到树上(即把新元素添加到网页上，这种做法能立即看到新添加的元素)，再把果实接到这段新树枝上(即给新树枝添加子内容或属性)。
var newp= document.createElement("p"); // 创造的新柯枝，此时网页上看不到这个p
document.body.appendChild(newp); // 把新树枝安装到网页上，可以在开发者工具审查中看到了
newp.innerHTML='新的树枝';//新创建果实并安装到新树枝上，网页上可见
顺序二:创造一段新树枝(即创建一个网页元素，这种做法不能立即在网页上看到新内容)，然后创造其他更小的树枝或果实(这时候这些树枝还是独立的)，再把小树枝或果实安装到大树枝上(这时候网页上还看不到内容),最后把大树枝接到网页这棵大树的已经可以看到的某条树枝上(新内容可以看到了)。
var newp= document.createElement("p"); //创造的新树枝， 此时网页上看不到这个P
newp.innerHTML='新的树枝';//新创建果实并安装到新树枝上， 网页上不可见
document.body.appendChild(newp);//把新树枝安装到网页上，可以在开发者工具审查中看到了
7.定时器方法setTimeout和
setTimeout()是属于window的方法，该方法用于在指定的毫秒数后调用一次函数或计算表达式。
语法格式： setTimeout(javaScript函数，等待的毫秒数）
其返回值表示代表该定时器的句柄。
clearTimeout()方法可取消由setTimeout()方法设置的定时操作。clearTimeoutO 方法的参数必须是由setTimeout()返回的ID值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setTimeout 演示</title>
</head>
<body>
<script type="text/javascript">
var n=1;
//下面这段代码能输出到10吗？
var id=setTimeout(function (){
console.log(n++);
if(n>10) clearTimeout(id);
},1000);
//下面这段代码能输出到10吗？
var m=1;
var im;
function hi(){
console.log(m++);
im=setTimeout(hi,1000);
if(m>10) clearTimeout(im);
}
hi();
</script>
</body>
</html>
8.onload 事件
onl oad事件会在页面或图像加载完成后立即发生，最常用于<body>元素中，用于在网页完全加载所有内容(包括图像、脚本文件、CSS文件等)后执行脚本。
onload在HTML中的用法: <body onl oad="SomeJavaScriptCode">
onload在JavaScript中的用法： window.onload=function(){SomeJavaScriptCode};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload 演示</title>
<script>
//下面代码会出错，为什么？
document.getElementById('myp').innerHTML='你好';
window.onload=function (){
//下面代码不会出错，为什么？
document.getElementById('myp').innerHTML='你好';
}
</script>
</head>
<body>
<p id="myp">hi,everyone</p>
<script type="text/javascript">
//下面代码不会出错，上面相同的语句会出错，为什么？
document.getElementById('myp').innerHTML='你好';
</script>
</body>
</html>
9.随机数和取整
JavaScript中Math对象用于执行数学任务。Math 对象并不像Date和String那样是对象的类，因此没有构造函数Math(。像Math.sin()这样的函数只是函数，不是某个对象的方法，所以无需创建它。通过把Math作为对象使用就可以调用其所有属性和方法。
|
Math对象与随机数和取整有关的方法 |
|
|
Math.ceil(x) |
对数进行上舍入。（向上取整；大于等于x的最小整数） |
|
Math.floor(x) |
对数进行下舍入。（小于等于x的最大整数） |
|
Math.random() |
返回 0 ~ 1 之间的随机数。（此方法可扩展，如：取一定范围内的随机整数…） |
|
Math.round(x) |
把数四舍五入为最接近的整数。（对x四舍五入） |
|
Math.abs() |
取绝对值 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机数和取整</title>
</head>
<body style="">
<script type="text/javascript">
//第一步：获取0~1之间的随机数，注意这里是小数
var r=Math.random(),g=Math.random(),b=Math.random();
//第二步：扩展随机数的范围到 m-n(m减n),调整后的范围是最小为0，最大为m-n
//r=r*(m-n);
r=r*(255-0);
g=g*255;
b=b*255;
//第三步：调整区间最小值为n，最大值为m;本例最小值为0，此步跳过
//r=r+n;
//第四步：向下取整获得整数[n,m)
//r=Math.floor(r);
r=Math.floor(r);
g=Math.floor(g);
b=Math.floor(b);
document.body.style.backgroundColor="rgb("+r+","+g+","+b+")";
</script>
</body>
</html>
10.getElementsByClassName方法
document.getElementByClassName(classname)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p class='duan'>第一段</p>
<p class='luo'>第二段</p>
<p class='duan'>第三段</p>
<p id='duan'>第四段</p>
<script>
var duans=document.getElementsByClassName('duan');
for(var i=0;i<duans.length;i++){
duans[i].style.border='1px solid red';
}
</script>
</body>
</html>
11.选择结构
if单分支：当满足特定条件时执行的代码块。
if（条件）{
如果条件为true时执行的代码
}
if双分支：当满足特定条件时执行一部分的代码块，不满足时执行另一部分代码块。
if（条件）{
条件为true时执行的代码块
}else{
条件为false时执行的代码块
}
if多分支：当满足不同的条件时执行不同的代码块。
if（条件1）{
条件1为true时执行的代码的代码块
}else if(条件2){
条件1为false而条件2为true时执行的代码的代码块
}else{
条件1和条件2同时为false时执行的代码块
}
标签：10,函数,DOM,abs,var,document,2022.10,Math From： https://www.cnblogs.com/emilyiee/p/16777026.html