js知识点

最新推荐文章于 2022-08-30 16:22:55 发布

前端学习中。。。

最新推荐文章于 2022-08-30 16:22:55 发布

阅读量272

点赞数 1

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_41005228/article/details/109638752

版权

1.js初识

1.1 js概念

JavaScript是基于对象和事件驱动的解释性的脚本语言。

1.2 js组成

ECMAScript 核心js的标准；
DOM （Document Object Model）文档对象模型
BOM（Borwser Object Model）浏览器对象模型

1.3 js引入

行内
内嵌

<!-- 
内嵌 script标签
script可以有任意多个，可以放置在任意位置，一般放置在head中或者是body末尾，建议放置body末尾
-->
<script>
    //js代码
    alert("玩游戏吗1？");
</script>

外链

<!-- 
外链：
<script src='外部js文件'>
-->
<script src="./outer.js">
    //引入外部js文件的script标签，不能再写其他的js代码
</script>
<script>
    alert("我今年16岁");
</script>

1.4 window.onload

作用：等文档（标签）和资源（图片、视频、音频等）都加载完后调用

1.5 鼠标点击事件

onclick : 点击
onmouseover：（子元素可以触发父元素的事件冒泡）：移入 onmouseenter（子元素不可以触发父元素的事件）
onmouseout：移出 onmouseleave
onmouseup：抬起
onmousedown：按下
onmousemove：移动
ondbclick ：双击
oncontextmenu：右击

1.6 变量

变量：存储数据的容器
声明变量：var 变量名 = 值 (声明变量，没有赋值，undefined:未定义声明变量，没有赋值)
变量命名规则：
- 只能以数字、字母、下划线、$组成，不能以数字开头
- 不能使用关键字和保留字
- 见名知意，遵循驼峰标识 top_nav topNav
- 不要重名,会覆盖

1.7 操作标签内容

标签：开始标签和结束标签中间的都是内容

闭合标签有内容
<p>
    标签内容
</p>

表单元素
<input value=‘内容’>

1.7.1 操作表单元素内容

获取：var 变量 = 标签.value

设置：标签.value = 值

//1.获取标签
var oQQ = document.getElementById("qq");

//2.获取标签的value
var v = oQQ.value;
console.log(v); //12345

//3. 设置value 67890
oQQ.value = "上山打老虎"; //变量和数字不用加

1.7.2 操作闭合标签内容

获取：var 变量 = 标签.innerHTML/innerText

设置：标签.innerHTML/innerText = 值

/* 
         innerHTML特性:
            会覆盖之前所有的内容 +=
            能够识别标签
        innerText特性：
            会覆盖之前所有的内容 +=
            不识别标签
        */
//1.获取元素
var oBox = document.getElementById("box");

//2.获取闭合标签的内容  标签.innerHTML
var inner = oBox.innerHTML;
console.log(inner);

//3.设置闭合标签内容  标签.innerHTML = 值
//oBox.innerHTML = oBox.innerHTML+"我是一个程序员";
//累加
oBox.innerHTML += ",我是一个程序员";
oBox.innerHTML += ",我变<strong>秃</strong>了！！";

//不识别标签
oBox.innerText = ",我变<strong>秃</strong>了！！";

1.8 操作属性和样式

1.8.1 操作样式

语法：标签.style.属性名 = 值

 size3.onmouseover = function(){
     oLeftBox.style.width = "300px";
     oLeftBox.style.height = "200px";
  }

特殊：font-size js中不允许出现连接符，必须使用驼峰标识

//js中没有-，都用驼峰标识font-size---》fontSize   
oText.style.fontSize = "32px";

1.8.2 cssText

标签.style.cssText = “width:200px;height:200px;background:gold”;

少用，重写style属性，覆盖

//标签.style.cssText = "width:200px;height:200px;background:gold";
//重写的style
oBox.style.cssText = "width:200px;height:200px;background:gold";

1.8.3 操作标签属性

<div id="" class="" name="" title>
    name value src alt type 
</div>

获取：var 变量 = 标签.属性名

设置：标签.属性名 = 属性值

//1.获取id名    标签.属性名
var id = oDiv.id;
console.log(id);

//2.设置id名  标签.属性名 = 属性值
oDiv.id = "active";

//3.特殊：class
oDiv.className = "active";

2.JavaScript 数据类型

2.1 数据类型分类

六大数据类型
- 五大基本数据类型
  - number：数值类型 10 3.14
  - string：字符串"web" ‘web’
  - boolean：布尔 true false
  - undefined：未定义
  - null：空对象
- 复合类型
  - object：对象
  - array：数组
  - function：函数
number：整数、小数、八进制、十六进制、NaN

//1.number 数值 
//整数
var n1 = 10;
console.log(n1);

//2.typeof:检测当前数据的类型 typeof(要检测的内容);typeof 要检测的内容
var type = typeof(n1);
console.log(type); //number

//小数
var n2 = 3.14;
console.log(typeof n2); //number

//0开头，并且没有超过8的值，默认为8进制
var n3 = 057;
console.log(typeof n3,n3); //number 47

//16进制
var n4 = 0x10;
console.log(typeof n4,n4); //number 16

//NaN：not a number
console.log(10/"衣"); //NaN
var n5 = NaN;
console.log(typeof n5); //number

console.log(NaN == NaN); //false
//小数在运算的时候会有偏差，不要使用做判断
console.log(0.1+0.2); //0.30000000000000004 精度缺失

string

//2.字符串,用引号引起来的就是字符串
var str1 = "web";
var str2 = 'web';
console.log(typeof str1,typeof str2); //tring string

var str = "13112345678";
var l = str.length; //获取字符串长度
console.log(l); //11

var char = str.charAt(0); //下标从0开始
console.log(char);

boolean

//3.boolean 布尔  判断条件  判断结果
var b1 = true;
var b2 = false;
console.log(typeof b1,typeof b2); //boolean
console.log(10>20);//false

null和undefined

区别：
- undefined：访问一个空变量返回的值，声明了没有赋值
- null：访问一个不存在对象返回的值，空对象

//4.undefined和null
var a; 
console.log(a); //未定义 ，声明变量但是没有赋值

var b = document.getElementById("box");
console.log(b); //null  访问一个不存在对象返回的值
console.log(typeof a,typeof b); //undefined object:空对象

复杂类型（复合类型、引用类型）
- 对象object
- array
- function

//object
console.log(typeof document); //object
console.log(typeof window); //object
var obj = { //key:value
    "name":"彭赓",
    "age":19,
    "height":190
}
console.log(obj,typeof obj);
console.log(obj.name);
var a = "age";
console.log(obj[a]); //用[]代替点 19

//数组：存储数据的容器，可以存储任意数据类型，可以存储任意多个
var arr = [1,"a",true,null,undefined,{}];
console.log(arr);
console.log(typeof arr); //object
console.log(arr.length); //获取数组的长度
console.log(arr[2]); //arr[下标]  下标从0开始


//function : 函数 存储一段代码块，在需要的时候调用
//1.声明函数 function 函数名(){  存储的代码块 }
function homework(){
    //存储的代码块
    console.log("今天需要做作业吗？");
    console.log("开始写作业");
    console.log("作业已完成");
}

//2.调用  函数名()
homework();
homework();
console.log(typeof homework); //function

2.2 typeof 的返回值

number— typeof ---- number
string— typeof ---- string
boolean— typeof ---- boolean
undefined— typeof ---- undefined
null — typeof — object
object — typeof — object
array — typeof — object
function — typeof — function
分类依据
- 数据特点：基本数据类型中存储的数据结构简单，复杂类型中存储结构复杂的数据
- 存储区域：基本数据存储栈，复合类型堆（变量==地址）

2.3 数据类型的强制转换

2.3.1 强制转换为number

Number()：boolean,字符串（纯数值、""）

//1.Number(要转换的内容)
//字符串：纯数字字符、""
var str = "10";
var s = Number(str);
console.log(s);
console.log(Number("3.14")); //3.14
console.log(Number("")); //0
console.log(Number("9元"));//NaN
console.log(Number("9a"));//NaN

//boolean
console.log(Number(true));//1
console.log(Number(false));//0
//null
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN

parseInt()/parseFloat()

//2.parseInt(需要转换的内容)：从左往右转换，遇到不能转换的或者是到末尾结束，取整
//2.parseFloat(需要转换的内容)：从左往右转换，遇到不能转换的或者是到末尾结束，保留小数
var str = "99.99元";
console.log(parseInt(str)); //99
console.log(parseFloat(str));//99.99

toFixed(n):保留几位小数

//3.值.toFixed(n) n:0-20  保留n位小数，默认是四舍五入
var n = 299.96499999999997;
n = n.toFixed(2); 
console.log(n);

isNaN

//4. isNaN：is not a number ：判断当前值是否是数字，是数字：false  不是：true
//在使用isNaN判断数值之前，会先使用Number()方法对数值进行转换
var n1 = "hahahahah";
var n2 = "10";
console.log(isNaN(n1));//true
console.log(isNaN(n2));//false

2.3.2 强制转换为string

String(需要转换的值)
需要转换的值.toString()

//String(要转换的内容)
var tel = 17712345678;
console.log(String(tel));
console.log(String(tel).length);
//直接在数据外面加一个""
console.log(String(1));
console.log(String(true));
console.log(String(false));
console.log(String(NaN));
console.log(String(undefined));
console.log(1,String(null)); 
console.log(1,String([1,2,3])); //"1,2,3"
console.log(String({})); //[object Object]

//数据.toString()
console.log(1,String(undefined));
console.log(1,String(null)); 

//undefined和null没有toString()
console.log(tel.toString());
// console.log(undefined.toString());
// console.log(null.toString());

2.3.3 真假问题

console.log(Boolean(1));  //true 非0为真
console.log(Boolean(true));  //true
console.log(Boolean([])); //true  复合类型永远是真
console.log(Boolean({})); //true

console.log(Boolean(0));  //false
console.log(Boolean(false));  //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined));//false
console.log(Boolean(NaN));//false
console.log(Boolean(""));//false

2.4 运算符

运算符五大类：算术运算符，赋值运算符、比较运算符、逻辑运算符、三目运算符

2.4.1 算术运算符

//算术运算符  + - * / %(求模、取余) ++自加   --：自减
console.log(10/4); //2.5
console.log(10%4); //2

var a = 10;
a++;  //++在前，先自加后运算，++在后，先运算，后自加
console.log(a); //11

var x1 = 10;
var y1 = 10;

var x2 = x1++; // x1=11 x2=10
var y2 = ++y1; //y1=11  y2=11
console.log(x1,x2,y1,y2); //11 10 11 11

var a = 10;
var b = a++ + ++a + a++; //b = 10+12+12  a = 13
console.log(a,b);//13,34

2.4.2 赋值运算符

//赋值运算符 =  += -= *= /= %=
var a = 10; //将10赋值给a ，赋值是从右往左算

var b = 10;
b += 2; //b = b + 2;  累2   12

2.4.3 比较运算符

比较运算符：> < >= <= == != === !==

//字符串比较的时候一位一位比较，比较的是编码ASCII
console.log("10000"<"20"); //true  "0"--48 “A"---65  ”a"----97
console.log(10 == "10"); //true 隐式转换，尽量转换成number
console.log("10"*1); //10
console.log(10 === "10"); //false 横等，不会进行隐式转换

console.log({}=={}); //false  
//null==null undefined==undefined null==undefined 除此以外其他的都不相等
console.log(null == null); //true
console.log(undefined == undefined);//true
console.log(null == undefined);//true

2.4.4 逻辑运算符

&& || ！

//逻辑运算符  && || ！
var s = 77;
console.log(80>s && s>60); //两真为真
console.log(s<60 || s>100); //一真为真
//!取反  true false
console.log(!1); //false

2.4.5 三目运算符

//三目
//条件?条件成立执行的代码:条件不成立时执行的代码
var s = 18000;
s>=30000?console.log("买买买！！"):console.log("被媳妇打！！");

3.控制流程语句

3.1 流程控制语句结构

顺序结构
选择结构（分支语句）：if if-else switch
循环结构：for for-in while do-while
关键字：break,continue

3.2 选择结构（分支语句）

if:如果

语法：if(条件){条件成立时执行的代码}

注意：if后面的大括号可以省略，但是只能控制紧跟在后面的一行代码
if-else

语法：if(条件){条件成立时执行的代码}else{条件不成立时执行的代码}

//如果是周天，睡到自然醒，否则7点半起
var w = "星期三";
if(w == "星期天"){
    //条件成立执行的代码
    console.log("睡觉自然醒");
    console.log("一天不吃饭");
}else{
    //条件不成立执行的代码
    console.log("7点半起床吃早餐");
}

if-else if

语法：if(条件){ 条件成立时执行的代码}else if(条件){条件成立执行}else if…-
switch

switch(匹配项){

case 情况1(常量)：匹配到情况1执行的代码；break；

case 情况2(常量)：匹配到情况2执行的代码；break；

case 情况3(常量)：匹配到情况3执行的代码；break；

default：没有匹配到执行的代码

}

break:防止穿透，如果不加break，当他匹配到一项以后，后面就不会再判断，直接执行

var str = "-";
switch(str){
    case "+" : console.log(100+10);break;
    case "-" : console.log(100-10);break;
    case "*" : console.log(100*10);break;
    case "/" : console.log(100/10);break;
    case "%" : console.log(100%10);break;
    default:console.log("不会！！！");
}

3.3 DOM获取元素

通过id

document.getElementById（“id名”）
通过标签名

document.getElementsByTagName(“标签名”) ：整个文档中获取

父元素.getElementsByTagName(“标签名”) ：父元素中获取
通过类名

document.getElementsByClassName(“类名”) ：整个文档中获取

父元素.getElementsByClassName(“类名”) ：父元素中获取

通过标签和类名获取都是元素集合，在使用的时候，必须通过下标获取到具体的标签才可以使用
var oLis = document.getElementsByTagName("li");
console.log(oLis); //HTMLCollection(10)  元素集合,类似数组，和数组的使用方式是一样
console.log(oLis.length); //10
console.log(oLis[0]);

//集合不能一起操作，必须通过下标获取出具体的标签
oLis[0].onclick = function(){
    alert("点击了");
}


//1.通过父元素获取
var oUl = document.getElementsByTagName("ul")[1];
var oLis1 = oUl.getElementsByTagName("li");
console.log(oLis1);


//2.通过className获取元素
var oBox = document.getElementsByClassName("box");
console.log(oBox);

3.3.1 id和tagName获取的区别

<ul id="list"></ul>
<script>
    //id静态获取，获取的时候有就是有，没有就是没有
    //tagName动态获取，获取的时候没有，但是后期添加上了，依然可以获取到
    var oUl = document.getElementById("list");
    var oId = document.getElementById("li");
    var oTag = document.getElementsByTagName("li");
    console.log(oId);
    console.log(oTag);

    oUl.innerHTML = "<li id='li'>1</li>";
    console.log(oId);
    console.log(oTag);
</script>

3.3.2 document.wirte和innerHTML的区别？

innerHTML
- 操作的闭合标签
- 可以识别标签
- 会覆盖之前的内容
document.write()
- 操作的是body标签
- 可以识别标签
- 会覆盖之前，但是不会覆盖自己写的

3.4 循环结构

3.4.1 for循环

for：可以让指定的代码执行特定的次数

语法：for(表达式一；表达式二；表达式三){ 循环体 }

for(初始化循环变量；判断条件；更新循环变量){ 循环体 }

执行过程：

1、初始化循环变量 var i = 0;

2、判断条件 i<5

条件成立 ----》3

条件不成立结束循环

3、执行循环体

4、更新循环变量 i++ 5

5、回到第2步

for(var i = 0;i<5;i++){
     console.log(i);
 }

3.4.2 for实际作用

循环添加事件

for(var i = 0;i<oLis.length;i++){
    oLis[i].onclick = function(){
        
    }
}

遍历

var arr = [1,2,3,4,5];
for(var i = 0;i<arr.length;i++){
    arr[i]
}

循环添加元素

var oUl = document.getElementsByTagName("ul")[0];

//经常需要变换的内容，通过获取后台实现的动态操作
var arr = ["数控技工参加优就业网络营销培训，成功转行入职云*集团","年薪40万“屌丝”的优就业SEO培训学习体验","美国疫情破1000万","天猫销售额5千亿","川建国同志解聘国防部长"];

for(var i = 0;i<arr.length;i++){
    oUl.innerHTML += "<li>" + i + "</l>";
}

3.4.3 双重for循环

//循环嵌套 外循环循环父元素，内循环循环子元素
for(var i = 0;i<oUls.length-1;i++){ //1，外循环循环父元素
    //2.获取子元素
    var lis = oUls[i].getElementsByTagName("li");
    //3.内循环循环子元素
    for(var j = 0;j<lis.length;j++){
        lis[j].style.border = "1px solid teal";
    }
}

3.4.4 for-in

专门用来循环对象

obj = {
    "name":"web",
    "age":"18"
}
for(var key in 循环的对象){ //变量：每一次循环项的key会存储在变量中
    key ---  name,age
    obj[key]--- web,18
}

3.4.4 while和do-while

初始化循环变量
while（判断条件）{ 循环体；更新循环变量}

初始化循环变量
do{ 循环体；更新循环变量}while(判断条件)

while：先判断后执行
do-while：先执行后判断

3.4.5 关键字 break continue

break：结束循环
continue：跳出本次循环

4.this

this：特殊的全局对象，一般在函数中使用，没有特定的指向，在不同环境中代表的含义不一样，取决于当前函数被调用时所处的环境。

var oBtn = document.getElementsByTagName("button");
//4
//0 1 2 3
for (var i = 0; i < oBtn.length; i++) {
    oBtn[i].onclick = function () { //在事件处理函数中
        console.log(this); //触发事件的对象
    }
}

5.自定义属性

自定义属性：不是系统提供的标签属性，是自己定义的属性

开关（一个标签两种状态）

for(var i = 0; i < oBtn.length; i++){
    oBtn[i].tag = true;
    使用：this.tag
}

索引（需要下标，但是没法获取下标）

for(var i = 0; i < oBtn.length; i++){
oBtn[i].index = i;
使用：this.tag
}

6.函数

函数：由事件驱动的或当他被调用时可重复使用的代码块
使用场景：

作为处理函数：
oDiv.onclick = function(){}

代码复用：一样的代码写多遍，把重复的代码，存储在函数中，需要的时候调用
例：作业的图片切换

封装：实现某个特定功能

作为对象的方法
var obj = {
    "name":"web",
    "eat":function(){} //方法
}

6.1函数的声明和调用

（存储一段代码块，需要的时候调用）

6.1.1 普通声明

普通函数声明

声明： function 函数名(){存储的代码块}

调用：函数名()

 //1.声明函数， 函数不调用是不会执行 
function hello(){
    console.log("hello world");
}
//2.调用函数 
hello();
hello(); //可以重复调用
console.log(hello); //function hello（）{}

6.1.2 表达式声明

表达式声明

声明：var 变量 = function(){存储的代码块啊}

调用：变量()

//3.表达式声明方式
var work = function (){
    console.log("我想学习，我想工作，想赚钱");
}
work();
work();

6.2 参数

6.2.1 参数使用

参数：函数中，如果出现不能确定的值，做参数

形参(形式参数)：function 函数名(a)----a:形参

实参(实际参数):函数名(10)–实参

多个参数：多个参数之间用逗号隔开，实参和形参是一一对应

参数个数不确定的情况，就干脆不写形参，使用arguments(实参集合)

//计算两个数的和 形参和实参之间是一一对应的
function add(a,b){//var a,b  a = 10,b=20
    console.log(a+b); 
}
add(10,20);
add(100,200);

//计算所有用户输入的值的和
function he(){
    console.log(arguments); //实参集合 类数组
    console.log(arguments.length); //实参个数
    console.log(arguments[0]);
}
he(10,20);
he(10,20,30);

6.2.2 参数类型

参数类型：js中，所有的数据类型都能做为参数

number string boolean null undefined 复合类型（object function array）

null 和 undefined 不会作为参数，没有意义

//string ： 声明一个函数，获取div标签的一个属性 attribute
function getAttr(attr){
    var s = oDiv[attr];
    console.log(s);
}
getAttr("title");



//函数做参数
function fun2(f){//var f = function(){console.log("这是一个函数");}
    console.log(f);
    f();
}
fun2(function(){console.log("这是一个函数");});

6.2.3 函数注意

函数名重名会覆盖

//1.函数名重名会覆盖
function sum(x,y){
    console.log(x+y)
}
function sum(x,y){
    console.log("x+y="+(x+y))
}
sum(10,20); //x+y=30

变量名和函数名重名会覆盖

function add(a){
    console.log(a)
}
var add = 10;
add(10); //add is not a function

实参个和形参个数一样

function sum(x,y){
    console.log(x+y)
}
sum(10) //一一对应，不能赋值为undefined
sum(10,20,30); //一一对应，多了不管

this

document.onclick = function(){this ---- 触发事件的对象}
function sum(){this---window}

参数和arguments

 function s(a){
     console.log(a);
     console.log(arguments);

     a = 20;
     console.log(arguments); //20 argument和形参是公用的状态，一改全改
 }
s(10)

6.3 作用域与变量提升

6.3.1 作用域

作用域：变量或者函数的有效使用范围全局、局部

全局变量：函数外声明的变量/函数，会一直存储在内存，可以在任何地方使用和修改
局部变量/函数：在函数内声明的变量/函数,称之为局部变量/函数，只能在函数内修改和访问，一出函数的{}，就会被销毁
作用域链：js一种查找机制，先找自己作用域里面，自己有就用自己的，自己没有找父级作用域，依次，找到全局还是找不到，报错 is not defined

6.3.2 预解析

js代码在执行过程中，会经过很多操作，至少会有下面两步

预解析（变量提升）：找 var function

找var：将变量提前声明 var 变量,同名声明一次

找function：将函数提前声明,函数名同名，会多次声明并且覆盖
逐行执行

面试题

1、
console.log(c); 
var c = 10;
function c(){
    console.log("函数1");
}
console.log(c); 
var c = 20;
function c(){
    console.log("函数2");
}
console.log(c); 
c(); 

2.
var x = 10;
var y = 20;
function s(){
    console.log(x,y);
    var x = 30;
}
s();

3.
var x = 10;
var y = 20;
function s(){
    console.log(x,y);
    var x = y = 30;
}
s();

4.
function fun(a){//函数的第一行代码是给参数赋值 a = 10
    console.log(a);
    var a = 20;
}
fun(10);

6.4 函数返回值

6.4.1 返回值return

return : 函数返回值，所有的函数都有返回值，默认为undefined

语法：return 返回值

特性：一次只能返回一个值最后的一个

函数中只要遇到return 函数就结束了

//2.返回值
function add(x,y){//var x = 10,y=20
    var s = x + y;
    return s;
}
var ss = add(10,20);
console.log(ss); //30

var sss = add(100,200);
alert(sss);

//3.一次只能返回一个值,最后的一个
function fun(a,b){
    var x1 = a+b;
    var x2 = a*b;
    return x1,x2;
}
var res1 = fun(2,3);
console.log(res1); //6


//4.函数中只要遇到return 函数就结束了
function fun2(a,b){
    return "哈哈";
    var c = a+b;
    return c;
}
var res2 = fun2(4,5);
console.log(res2); //哈哈

function fun3(){
    var s = 0;
    for(var i = 1;i<=100;i++){
        s += i;
        return s;
    }
}
var res3 = fun3();
console.log(res3); //1

6.4.2 返回值类型

所有的js数据类型都能作为返回值

 function sort(array){
     //冒泡
     for(var i = 0;i<array.length;i++){
         //两两比较
         for(var j = 0;j<array.length-1-i;j++){
             if(array[j] > array[j+1]){
                 var temp = array[j];
                 array[j] = array[j+1];
                 array[j+1] = temp;
             }
         }
     }
     return array;
 }

//函数作为返回值
function outer(){   
    function inner(){ //局部函数，
        console.log("里面的函数");
    }
    return inner;
}
var inn = outer(); //表达式函数
inn();

6.5 函数封装

6.5.2 获取非行间样式

标准浏览器：getComputedStyle(标签).属性名 ie8-
IE浏览器：标签.currentStyle.属性名

//标准浏览器：getComputedStyle(标签).属性名  ie8-
var width = getComputedStyle(oDiv).width;
console.log(width); //100px

//ie浏览器：标签.currentStyle.属性名
var width = oDiv.currentStyle.width;
console.log(width);

//兼容，拿其中一个作为判断条件，  **.**
alert(window.getComputedStyle);
if(window.getComputedStyle){
    var width = getComputedStyle(oDiv).width;
}else{
    var width = oDiv.currentStyle.width;
}
alert(width);

6.5.2 函数封装

封装步骤：

声明一个函数

把主要代码放进去

找可变的值做参数

调用调试

/* 
 *作用：获取标签的样式
 *@parm {object} elem：标签
 *@parm {string} attr：属性
 */
function getStyle(elem,attr) {//标签：elem 属性：attr
    if (elem.currentStyle) {
        var w = elem.currentStyle[attr];
    } else {
        var w = getComputedStyle(elem)[attr];
    }
    return w;
}

7.定时器

7.1 定时器分类

setTimeout(函数,时间) ：延迟执行（一次）广告弹窗 ms
setInterval(函数,时间)：间歇执行（无限执行）轮播、倒计时、抽奖

7.2 setTimeout

setTimeout(函数,时间ms)
setTimeout(函数,1000) ： 延迟1秒执行这个函数一次 
使用场景：广告弹窗

setTimeout(auto,1000)
function auto(){}

7.3 setInterval

setInterval(函数,时间ms)
setInterval(函数,1000) ： 隔1秒执行这个函数一次
使用场景：轮播图，倒计时，抽奖
 //隔2秒换一次图片
var n = 1;
setInterval(function(){
    //换图片
    n++;
    if(n>4){n = 1}
    oImg.src = "./image/"  +  n  + ".jpg"
},1000);

7.4 停止定时器

定时器只要一开启，就不会主动停止，手动停止

语法：clearInterval(intervalId)

intervalId：每一个定时器开启的时候，都会返回一个能唯一标识当时定时器的id

/* 
          定时器只要一开启，就不会主动停止,手动停止定时器
          停止定时器：clearInterval(intervalId)/  clearTimeout(intervalId)
          intervalId:每一个定时器开启的时候，都会返回一个能唯一标识当前定时器的id
         */
var n = 10;
//倒计时 
var timer = setInterval(function(){
    n--;
    console.log(n);
    if(n<=0){
        n = 0;
        //停止定时器
        clearInterval(timer); //停止下一次定时器的执行
    }
    document.body.innerText = n;
},1000);

8.Math、Date、String对象的方法

对象的概念（类）：万物皆对象

对象分类：

原生对象（内部对象、本地对象）：Number、String、Boolean、Object、Function、

Array、Math、Date、Error、RegExp、Global（全局）

内置对象：Math、Global（原生对象包含内置对象）

宿主对象：DOM、BOM（非本地对象）

全局对象：window（全局的变量和函数都属于window）

对象的组成：方法，属性

属性：str.length

方法（函数）：str.charAt(0)

创建对象：

//1.字面量创建
var str1 = "abc";
console.log(str1);
console.log(str1.length); //3
//字面量创建的对象，并不是一个真正的对象，在使用属性和方法的过程中，被暂时包装成了对象

//2.关键字创建 new
var str2 = new String("abc");
console.log(str2);
console.log(str2.length);//3

8.1 Math对象

Math.floor(number)：往下取整，舍弃小数部分
Math.ceil(number):往上取整，有小数就进位
Math.round(number):四舍五入
Math.random（）：生成0-1之间的随机数，包括0，不包括1

公式：min-max之间的随机数

Math.floor(Math.random()*(max-min-1)+min)

8.2 Date 时间对象

8.2.1 创建时间对象

var oDate = new Date(); //Wed Nov 18 2020 11:20:02 GMT+0800 (中国标准时间)
console.log(oDate); //获取的是当前这一秒的计算机的时间

8.2.2 获取特定格式时间

//获取固定格式的时间
console.log(oDate.toDateString()); // Wed Nov 18 2020
console.log(oDate.toLocaleDateString()); //2020/11/18

console.log(oDate.toTimeString());//11:23:27 GMT+0800 (中国标准时间)
console.log(oDate.toLocaleTimeString()); //上午11:23:27

8.2.3 获取单个时间

console.log(oDate.getFullYear()); //2020
console.log(oDate.getMonth()+1);//月份从0开始
console.log(oDate.getDate()); //日期18
console.log(oDate.getDay()); //星期  3
var works = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
console.log(works[oDate.getDay()]);


console.log(oDate.getHours()); //小时
console.log(oDate.getMinutes()); //分钟、
console.log(oDate.getSeconds()); //秒
console.log(oDate.getMilliseconds()); //1000ms = 1s

console.log(oDate.getTime()); //1605677831117 时间戳  1970 1 1--现在的毫秒数

8.2.4 倒计时

原理：未来的时间 - 当前的时间

setInterval(auto, 1000);
function auto() {
    //原理：未来的时间 - 当前的时间
    //创建未来的时间
    var futureDate = new Date("2020,11,22");

    //创建现在时间
    var currentDate = new Date();

    //时间差 = 未来的时间 - 当前的时间
    var time = Math.floor((futureDate - currentDate) / 1000); //时间戳 ms/1000 s


    var t = Math.floor(time / 86400);
    console.log(t);

    var h = Math.floor(time % 86400 / 3600);
    console.log(h);

    var m = Math.floor(time % 3600 / 60);
    console.log(m);

    var s = time % 60;
    console.log(s);

    document.body.innerText = "现在距离放假还剩：" + fullZero(t) + "天" + fullZero(h) + ":" + fullZero(m) + ":" + fullZero(s);

    /* 
            s = time;
            m = s / 60;
            h = s / 60 / 60
            t = s / 60 / 60 /24 
            */
}

8.3 字符串对象String

8.3.1 创建字符串

 //1.字面量创建
var str1 = "abc";

//2.关键字
var str2 = new String("abc");

8.3.2 字符串属性

length : 获取字符串长度

8.3.3 字符串方法

charAt(下标)

作用：获取对应下标位置的字符
charCodeAt(下标)

作用：获取对应下标字符的编码

indexOf(searchStr,index)

作用：查询一个字符串在另一个字符串中首次出现的位置，出现返回对应的下标，没有返回-1

参数：

searchStr:必须的，需要查询的字符串

index:可选，开始查找的位置，默认是下标0

var str = "web1012web1012web";
var index = str.indexOf("10");
console.log(index);//3
var index = str.indexOf("17");
console.log(index);//-1

var index = str.indexOf("10",5); //从下标为5的位置开始查找
console.log(index); //10

//一般用于：看字符串中是否有某个特定的字符  例：验证小数
var str = "1256";
if(str.indexOf(".") != -1){
    alert("小数")
}else{
    alert("整数")
}

lastIndexOf(searchStr,index)

作用：查询一个字符串在另一个字符串中最后一次出现的位置，出现返回对应的下标，没有返回-1

参数：
- searchStr:必须的，需要查询的字符串
- index:可选，开始查找的位置，默认是str.length 从后往前找
```
 var str = "web1012web1012web";
var index = str.lastIndexOf("10");
console.log(index);//10  从后往前找
```
substring(start,end)：截取

作用：提取字符串中介于两个指定下标的字符，包括开始下标，不包括结束下标

参数：
- start:可选，开始截取的下标位置，默认是0
- end:可选，结束截取的下标位置，默认是str.length
slice(start,end) ：截取

作用：提取字符串中介于两个指定下标的字符，包括开始下标，不包括结束下标

参数：
- start:可选，开始截取的下标位置，默认是0
- end:可选，结束截取的下标位置，默认是str.length

 var str = "431102197812123333";
//5.1 substring(start,end) : 提取字符串中介于两个指定下标的字符，包括开始下标，不包括结束下标
//start:可选，开始截取的下标位置，默认是0
//end:可选，结束截取的下标位置，默认是str.length
var s = str.substring(6); //下标为6开始，默认到最后
console.log(s); //197812123333

var s = str.substring(6,10);
console.log(s); //1978

//5.2 slice(start,end) : 提取字符串中介于两个指定下标的字符，包括开始下标，不包括结束下标
//start:可选，开始截取的下标位置，默认是0
//end:可选，结束截取的下标位置，默认是str.length
var s = str.slice(6,10);
console.log(s); //1978


 //区别
var str = "abcedfg";
console.log(str.substring(5,1)); //bced    自动调整大小顺序
console.log(str.slice(5,1)); //""   不调

console.log(str.substring(3,-1)); //默认负数为0  abc
console.log(str.slice(3,-1)); //截取倒数第几个 edf

var arr = ["[object Object]","[object Array]","[object Function]"];
//循环数组，打印所有具体数据类型 Object Array Funtion
for(var i = 0;i<arr.length;i++){
    console.log(arr[i].slice(8,-1));
}

substr(start,length)

作用：从那开始，截取几个

var str = "431102197812123333";
console.log(str.substr(6,4));

前端学习中。。。

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js知识点

1.js初识1.1 js概念JavaScript是基于对象和事件驱动的解释性的脚本语言。1.2 js组成ECMAScript 核心js的标准；DOM （Document Object Model）文档对象模型BOM（Borwser Object Model）浏览器对象模型1.3 js引入行内内嵌<scr
复制链接

扫一扫