JS基础知识总结3-CSDN博客

本文链接：https://blog.csdn.net/wjj1209973939/article/details/73550933

一、 JS中的基本语法
（一）基本语法
1.变量：
全局变量和局部变量：
在编程里面变量的作用域
全局变量：在事件或者函数之外的和所有变量称为全局变量
局部变量：事件或函数里面的变量作用范围只是该范围之内称为局部变量
将局部变量在其他作用域里面用，采用闭包方法，尽量避免使用闭包，会将值存在内存中，会增大内存的压力
2.数据类型：
number string boolean object array
（二）语法
1.数据类型统一关键字：var
var 变量名;//变量的声明
给变量进行初始化：给变量赋值
2.javascript里面的循环结构表
(1) 最简单的for循环（死循环）
for(;;){
}
（2）用for循环实现九九乘法表：
for(var i=1;i<10;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+"="+j*i+(j*i>=10 ? " " : " "));
}
document.write("<br/>");
}
3.for( in ){
}//循环遍历针对于对象组来使用，在一组里面找某一个东西
in 前面是定义的变量，后边是一个组
4.while() //括号里面是判断条件
var a=1;
while(a<10){
a++;
document.write(a);
}
5.do while() //while()和do while()的区别：后者循环至少执行一次
var b=5;
do{
b++;
}
while(b<5)
document.write(b);
6.switch(判断的值){
case : ;break;
case : ;break;
case : ;break;
}
var name= "小王";
switch(name) {
case "小王":document.write("我是小王");break;
case "小张":document.write("我是小张");break;
case "小赵":document.write("我是小赵");break;
case "小郑":document.write("我是小郑");break;
}
7.逻辑选择结构：
if(){}else{}
8.if的嵌套使用：
if(){}else if(){}else{}
二、 js事件的绑定
对象具有属性和行为（被动行为叫事件，主动行为叫方法，完成一系列的功能）
1.直接元素里面绑定
2.代码里面直接写：
获取元素对象添加点击事件 js里面的事件之前都有on
onclick onmouseenter onmoouseleave onmouseout
onmouseover onmousemove onfocus onblur
三、 函数的定义
function 函数名(){}
1.function sum(){} 调用函数的方法：sum();
2.var data=function(){} 调用函数;data();
3.var array={
name:function(){} 调用函数：array.name();
}
四、函数的传参问题
目的：简化代码，重利用
参数、参数的类型、参数的个数都是自定义的，在JS中没有函数的重载。
function Stu_info(id, name, sex, age) {
document.write(id + " " + name + " " + sex + " " + age);
}
Stu_info(100,"小陈","男",18)

五、索引相对（索引对索引）
选项卡：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单个选项卡</title>
<style type="text/css">
body,html,ul,li{margin: 0;padding: 0;}
#box1{width: 488px;height: 200px;margin: 100px auto;border: 1px solid orangered;}
#box1 ul{margin: 0 auto;}
#box1 ul li{height: 40px;float: left;list-style: none;width:120px;text-align: center;line-height: 40px;border: 1px solid blueviolet;}
#box1 div{width: 100%;float: left;text-align: center;height: 160px;line-height: 160px;font-size: 20px;display: none;}
#box1 div.active{display: block;}
.bg{background: deepskyblue;color: white;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oli=document.getElementById("ul1").getElementsByTagName("li");
//alert(oli.length);
var odiv=document.getElementById("box1").getElementsByTagName("div");
//alert(odiv.length);
for(var i=0;i<oli.length;i++){
oli[i]._index=i;
oli[i].οnclick=function(){
for(var i=0;i<oli.length;i++){
oli[i].className="";
odiv[i].style.display="none";
}

this.className="bg";
odiv[this._index].style.display="block";
}
}
}
</script>
</head>
<body>
<div id="box1">
<ul id="ul1">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
<div id="div1" class="active">
选项一内容
</div>
<div id="div2">
选项二内容
</div>
<div id="div3">
选项卡三内容
</div>
<div id="div4">
选项卡四内容
</div>
</div>
</body>
</html>