JS基础知识总结

1.JS的三种引入方式

-行内引入

        eg:<button οnclick="alert('再点一下')">点一下</button>

-内联引入(推荐学习中使用)

        通过script标签引入

-外部引入(推荐开发中使用)

        编写JS代码在外部的.JS文件中,然后再通过script标签引入

        eg:alert("我是外联引入")  <script src="./3.1.1js的三种引入方式.js"></script>

注:单行注释//:一般写在单行代码之后

        多行注释:一般写在方法和类之前 /*注释内容*/或 /**注释内容*/

2.JS的三种对话框

-弹出框 :alert("提示内容")

-确认框 : confirm("提示确认的信息") 返回值:true/false

 -输入框:prompt("提示输入的信息")  返回值:输入的具体数据 

3.JS输出数据的三种方式

-浏览器弹窗

<script>
    alert('浏览器弹框输出字符');
</script>

-输出HTML页面

<script>
    document.write('输出html内容到页面');
</script>

 -输出浏览器控制台

<script>
    console.log('输出到浏览器控制台');
</script>

4.JS变量

java是强类型语言,注重变量的定义,所以在定义变量时都需要指定数据类型。

js是弱类型语言,不注重变量的定义,所以在定义变量时不需要指定数据类型。

4.1 变量的声明

局部变量:用 let 定义

let   变量  =  值 ;

全局变量 :用 var 定义

var   变量  = 值 ;

4.2 常量

const    常量名  =   值 ;

		<script>
			//整数类型
			var a=3;
 
			// Boolean类型
			var b=true;
			
			// 定义小数类型  小数和整数类型统称为number类型
			var score=2.333;
			
			// 定义常量类型  常量类型一旦被定义就不能被改变
			const PI=3.1415926 
			 
		    //boolean类型 
			var f=true;
			
			var m;
			console.log(m);
			// undefined;  表示变量未被定义
	
			// 字符串类型 string
			var o="dd";

            //for 循环  定义局部变量
            let sum=0;
            for(let i = 0; i < 100 ; i++){
            sum += i;
            }
            console.log("sum") //结果是5050
		</script>

 注意事项:

1、ECMAScript6之前定义变量使用var 但是会有很多坑,所以ECMAScript6之后开始推出let声明变量,const声明常量。

2、在js中,末赋值的变量,也是可以使用的,但是这个值是undefined,末定义的变量。

 

4.3 变量的命名

          (1)必须符合"见名之意"、且小驼峰的明敏规范(第一个单词首字母小写,其他单词首字母大写)

           (2)必须符合标识符的命名规范

                --只能由字母、数字、下划线、$组成

                --不能以数字开头

                --不能为保留字class和关键字

                --不建议使用中文

 4.4数据类型

<script>
    //测试常见数据类型
    console.log(typeof 1.23)  //number
    console.log(typeof true)  //boolean
    console.log(typeof "zhangsan")  //string
    console.log(typeof 'zhangsan')  //string
    console.log(typeof goSchool)   //undefined
    console.log(typeof Symbol())  //symbol
    console.log(typeof BigInt(10))  //bigint
    console.log(typeof Object())  //object
    console.log(typeof Array())  //object
    console.log(typeof function sum(){})  //function
</script>

 

5.JS的运算符

算数运算符    +、 - 、*、 / 、% 、 ++ 、 --
赋合运算符    = 、+= 、-= 、 *= 、 /= 、 %=
关系运算符    > 、>= 、 < 、<= 、==、===(全等于 , 仅js) 、!= (结果只能为boolean类型)
逻辑(位)运算符    && 、 || 、 !
三目运算符    关系表达式 ? 值1 : 值2;
 

5.1算数运算符

字符串连接符:+  (当数值与字符串运算时会拼接)

<script>
    //测试运算符
    var x=100
    var y=30
    //第一个+表示字符串和后面的拼接,第二个加号  表示运算
    console.log("sum:"+(x+y))  //sum=130

    // 案例 字符串拼接训练
    console.log("sum:"+100+200)//sum:100200
    console.log(100+200+"sum:")//300sum:
    console.log(100+200+"sum:"+100+200)//300sum:100200
    console.log("sub:"+(x-y))//sub:70
    console.log("mul:"+(x*y))//mul:3000
    console.log("div:"+(x/y))//div:3.333333333333

    //自增
    var a=10
    var b=20
    var c= a ++
    var d= ++ b
    console.log("a="+ a +",b="+ b +",c="+ c +",d="+ d)
    //a=11  b=21  c=10  d=21

</script>

 注意:字符串类型与数字类型的运算中,只有相加会进行字符串拼接,而减、乘、除运算中,字符串中的数值可与字符串进行数学运算。

5.2关系运算符

        结果是boolean类型,===(恒等于)比较的是值和类型

<script>
    //测试
     var a=20
     var b=30
    console.log(a!=b)  //true
    //==比较的是值  不看类型
    console.log(a==b)   //false
    var c="30"//字符串
    console.log(b==c)   //true

    //===恒等于  比较值和类型
    console.log(c===b)  //false

</script>

5.3位运算符 

1.与或非(逻辑)运算  ----与运算一假则假,或运算一真必真

            &&  ||  !

 2.位运算符(本质就是二进制运算)

            &:位与

            |:位或

            ~:位反

            ^:异或 相同取0 相异取1

            <<:左移运算    正负数都是 高位丢弃、低位补0

            >>:右移运算     对于正负数的右移运算,正数高位补0,负数高位补1

            >>>:无符号的右移运算    对于负数,整个32位都需要向右移动,且高位补0

3.正负数的二进制计算方式

     原码  反码  补码  ----正数原反补码相同, 负数反码等于原码按位取反,补码等于反码末位+1

      x= 12: 0000 1100  

                 0000 1100

      y= -9 : 1111 0111

            原码:0000 1001

            反码:1111 0110

            补码:1111 0111    

 4.

        x:0000 1100

        y:1111  0111

            x & y =0000 0100 =>4

            x | y =补1111 1111  =>反1111 1110 =>原 0000 0001 =>保留符号位 -1

            ~x= 补 1111 0011 => 反 1111 0010 =>原 0000 1101=>-13

            ~y= 0000 1000 =>8x^y=补1111 1011=>反1111 1010=>原0000 0101=>-5

            x ^ y =补 1111 1011=>反 1111 1010=>原 0000 0101   -5

            x << 3 =0110 0000 =>96

            y << 3 =补 1011 1000 =>反 1011 0111 => 原 0100 1000   -72

           

            x>>3 = 0000 0001  =>1

            y>>3=补1111 1110 =>反1111 1101=>原0000 0010  -2

            x>>>2 = 0000 0011  3

            y>>>30 = 0011...11111 1111 1111 1101 ==>比较大了

5.4复合运算 

<script>
    var x=100
    x +=100  //<==>x = x + 100
    console.log(x)  //200
    x%=2
    console.log(x)  //0
</script>

5.5三目运算 

格式:boolean表达式 ? 结果1 :结果2 ;

如果表达式运算的结果是true,把结果1返回
如果表达式运算的结果是false,把结果2返回

<script>
    //案例
    // var age=20
    // res=age>=18 ? "成年" : "不成年" ;
    // console.log(res)

      year=prompt("请输入需要计算的年份:")
      Year=(year%4==0 && year%100!=0)||year%400==0 ? "闰年" :" 平年" ;
      console.log(Year)
</script>

 

6.JS流程控制语句

6.1 if分支

<script>
    if (条件表达式) {
        代码块;
    } else if(条件表达式){
        代码块;
    } else {
        代码块;
    }
</script>

JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别。

JS中对各种数据类型作为布尔值有以下特点:

类型用法
booleantrue为真、false为假
number非0为true
string除了空字符串(""),其他都是true
null&undefined都是false
对象所有对象都是true

无意义的数据都为false 反之都为true。

6.2 switch分支 

格式:

            switch:(变量/表达式){

                case 1:

                    语句体1;

                    break; 

// 表示跳出当前case,如果没有break,则会依次向下执行到有break的case为止

                case 2:

                    语句体2;

                    break;

                ....

                case n:

                    语句体n;

                    break;

                default:   

// default默认的出口,可以省略不写,不写则不执行任何不匹配的语句体

                    默认语句;

                    break;

            }

 <script>
    var x=3
    //key可以为任意类型
    switch (x) {
        //value可以为任意类型
        case 4:
            alert("me is 4")
            break;
         case 5:
            alert("me is 5")
            break;
        case 3:
            alert("me is 3")
            break;
        default:
            alert("所有case不匹配则执行default")
            break;
    }
 </script>

6.3 for循环 

循环三要素:-循环变量  -循环条件  -循环变量的改变

格式:

普通for循环:for(循环变量;循环条件;循环变量的改变){循环体}

增强for循环:for( let 变量名 of 对象 ) {  需要执行的代码;}

索引for循环:for( let 变量 in 对象 ) { 需要执行的代码}

执行逻辑:

                1.循环变量---只定义一次

                2.循环条件

                3.循环体

                4.循环变量改变

                5.循环条件

                6.循环体

                7.循环变量改变

                。。。。

代码演示: 

<script>
    // 定义数组
  let arr = ["张三","李四","王五"];
 
    console.log("===================普通for循环===================");
    // 普通for循环
    for (let i = 0 ; i < arr.length ; i++) {
        console.log(arr[i]);
    }
 
    console.log("===================forof循环===================");
    // for of循环
    for (let e of arr) {
        console.log(e);
    }
 
    console.log("===================forin循环===================");
    // for in循环
    for (let index in arr) {
        console.log(arr[index]);
    }
</script>

 

forof 与 forin之间的区别

1. forin可以遍历对象,forof不能遍历对象
2. forin遍历出数组中的索引,forof遍历出数组中的元素

 6.4while循环

while一般用在一个确定的范围中循环

格式:while(boolean表达式){循环体} 

break和continue的区别

        break:跳出所有循环

        continue:跳出本次循环

代码演示: 

<script>
    // 案例一:计算0~100内的和
    var i=0
    var sum =0
    while(i<=100){
        sum+=i
        i++ 
    } 
    console.log(sum)
    //案例二 :计算除了51的奇数和
    var i=0
    var sum =0
    while(i<=100){
        // 判断是否为奇数,且!=51
        if(i%2==1 && i!=51){
            sum+=i
        }
        i++
    }
    console.log(sum)
    // 案例三:输入用户名和密码完成登录,如果用户名或密码错误则重新登录
    // do{
    //     var username=prompt("username:")
    //     var password=prompt("password:")
    // }while(username!="zhangsan"||password!="123")

</script>

 6.5 do-while循环

 格式:do{

        循环体

        }while(boolean类型的表达式)

  !do-while无论条件循环满足与否都会执行一次循环体--应用:登录系统 

7. 数组

7.1数组基础

(1)格式:

        var 数组名 = [元素1,元素2,元素3......];

        var 数组名 = new Array(元素1,元素2,元素3......);

(2)数组的访问

        通过   数组名 [ 下标 或 索引 ]    范围为: 0 ~ arr.lenght-1

(3)数组的变量(获取所有数组的元素)

        -for

        -for in  遍历的是下标,通过下标获取数组元素

        -for of  遍历的是元素值

<script>
    var arr1=[]//创建一个空数组
    var arr2=[1,2,3,4,5,6,7]//创建有元素的数组
    var arr3=new Array()//创建一个空数组
    var arr4=new Array(1,2,3,4,5,true,"zhangsan")//创建有元素的数组
    var arr5=new Array(10)//创建具备初始长度的空数组
    var arr6=[1,2,3,4,5]
    console.log("数组的长度:"+arr6.length)//个数为5
    console.log("数组元素为3:"+arr6[2])
    console.log("数组最后一个元素:"+arr6.length-1)
    for(var i=0;i<arr6.length;i++){
        console.log(arr6[i])
    }
    for (const key in arr6){
        console.log(arr6[key])
    }  
    for (const i of arr6){
        console.log(i)
    }
</script>

7.2数组常见API 

API(Application progromming Interface):应用程序接口---程序自带的功能(即函数)

方法说明
concat()合并两个及以上的数组
push()向数组的末尾添加一个或更多元素,并返回新的长度,原数组发生改变
join(参数)将数组中的元素按照指定的分隔符拼接为字符串
pop删除数组的最后一个原因并返回,原数组发生变化
splice

splice(起始索引,结束索引):删除且返回对应索引区间的元素

splice(起始索引,结束索引,替换的元素):删除且返回对应索引区间的元素,替换元素,原数组发生变化

reverse

颠倒数组中元素的顺序

shife

删除数组的第一个元素,并返回,原数组发生变化

slice

slice(起始索引,结束索引(不包含)):选取对应索引区间的元素,并将他存储在新的数组中

slice(起始索引):返回从索引位置处后续的所有元素

sort

正序排序 且按照第一个字符排序,可以执行排序规则

<script>
    var arr1=[1,2,3,4,5]
    var arr2=[6,7,8,9,10]

    //1.concat(第二个数组):合并两个数组
    console.log("concat:"+arr1.concat(arr2))

    //2.join(分隔符) 将数组转成字符串,并制定器分隔符
    console.log("join:"+arr1.join("/"))

    //3.pop:删除数组的最后一个元素并返回,原数组发生变化
    console.log("pop:"+arr1.pop())//5
    console.log("pop后的arr1:"+arr1)//1,2,3,4

    //4.push:在数组的末尾追加元素,并返回长度,且追加多个元素之间用逗号隔开
    console.log("push:"+arr1.push(55,66))//6
    console.log("push后的arr1:"+arr1)//1,2,3,4,55,66

    //5.splice(起始索引,结束索引):删除且返回对应索引区间的元素
    //5.splice(起始索引,结束索引,替换的元素):删除且返回对应索引区间的元素,替换元素,原数组发生变化
    console.log("splice:"+arr1.splice(1,3,"zhangsan"))//1,2,3
    console.log("splice删除后的arr1:"+arr1)//1,zhangsan,55,66

    //6.reverse():颠倒数组中元素的顺序
    console.log("reverse:"+arr2.reverse())//10,9,8,7,6

    //7.shift():删除数组的第一个元素,并返回,原数组发生变化
    console.log("shife:"+arr2.shift())//10
    console.log("shife:"+arr2)//9,8,7,6

    //8.slice(起始索引,结束索引(不包含)):选取对应索引区间的元素,并将他存储在新的数组中
    //8.slice(起始索引):返回从索引位置处后续的所有元素
    console.log("slice新的数组:"+arr2.slice(1,3))//新的数组:[8,7]
    console.log("slice:"+arr2)//[9,8,7,6]

    //9.sort():正序排序 且按照第一个字符排序,可以执行排序规则,(函数学完后补充)
    console.log("sort:"+arr2.sort())

    //案例:输入一段字符串,判断是否是回文数 abcba ...
    var str=prompt("请输入一段字符串:")
    var arrStr=str.split('').reverse().join('')
    if(arrStr==str){
        alert("是回文数")
    }else{
        alert("不是回文数")
    }
   

</script>

8.JS函数 

js函数是执行特定功能的代码块,也可以称为js方法。

8.1函数基础

(1). 格式:

function 函数名(参数){

        函数体;

        [ return 返回值;]

}

(2).函数的参数

        形式参数(形参)

                函数在定义时的参数,内存没有分配空间

        实际参数(实参)

                函数在调用时的参数,内存是开辟了传递事件的空间数值的

        默认值参数

                格式:在函数定义时,使用 参数名 = 值 的形式给定默认值

                -特点:

                        在函数调用时,可以不用参数,使用默认值,也可以自行置顶参数

                        默认值参数在定义时,一般放在普通参数之后

(3).函数的调用

               使用 函数名(参数)调用函数

(4). 函数的调用过程

            -在函数定义时,会被加载到堆中,表示当前函数对象的方式为内存空间,他是一个十六进制的整数数值

            -函数被调用时,会在栈中开辟一个块栈帧,里面存储定义在函数内部是局部变量--压栈

            -函数调用完毕数,栈帧被销毁,同时局部变量也被销毁--弹栈

            -函数调用的本质为压栈

代码演示: 

<script>
//1.定义函数
function alertTest(){
    alert(1)
    alert(2)
    alert(3)
}
//2.函数的调用
alertTest()

//案例一:实现一个功能,计算两数的和,获取两个数,加法运算
function sum(a,b){
    console.log(a+b)
}
sum(100,300)

//案例二-计算圆的面积,半径为参数
function areacircle(r,PI=3.14){
    console.log(r ** 2 * PI)
}
areacircle(4,3)

//案例三-计算1-n内的和
function sumX(n){
    let sum=0
    for(let i=0;i<= n;i++){
        sum += i
    }
    return sum//立即结束函数,返回被调处
    } 
var res = sumX(100)
console.log(res)

</script>

8.2函数高级 

(1)函数参数对象argument

        arguments:获取函数的参数封装为一个argument对象, 通过他可以在函数内部获取传递的参数数据及长度等等

<script>
    //1.测试arguments对象
    function TestA(a,b,c,d){
        console.log(arguments) //arguments对象内容
        console.log(arguments.length) //测试当前参数的长度
        console.log(arguments[0]) //1
        console.log(arguments[1]) //2
        console.log(arguments[2]) //3
        console.log(arguments[3]) //4
    }
    TestA(1,2,3,4)
</script>

(2)匿名函数 --没有函数名的函数

        function () { 函数体 }

        主要将函数作为参数传递,简化传递过程

            -将函数作为参数传递

            -使用匿名函数传递参数

        匿名函数的另一种写法:

            -立即执行函数---不用调用---直接运行的函数

(3)lambda表达式(箭头函数)*重要    ---简化函数的写法

                ()=> { 函数体 }

<script>
//2.将函数作为参数传递
    function show(fn){
        console.log("在show函数的内部运行参数为函数的参数"+fn())
    }
    /*function sum(){
        return 100 +200
    }*/


   //3.匿名函数
   show(function(){
    alert("zhangsan")
   })

   //4.匿名函数变形
   var TestB=function(){
    alert("lisi")
   }
   TestB();

   //5.立即执行函数---在末尾记得加分号,不然会出现问题
    (function(){alert("wangwu")})();

    //6.箭头函数的几种写法
    //function test(){
   //     alert("zhaoliu")
   // }
   // test();

   //6.1无参的
   var test = () => {alert("zhaoliu")}
   test();

   //6.2如果函数的代码题只有一行代码,可以吧花括号省略,但不建议
   var test1 = () =>alert("zhaoliu1")
   test1();
   //6.3具备一个参数的函数
   var test2=(x)=>{alert("x:"+x)}
   test2(10);
   //6.4具备多个参数
   var test3=(x,y)=>{alert(x+y)}
   test3(10,20);
   //6.5如果是多行代码时
   var sum = (n) => {
    let s=0;
    for(i=0;i<=n;i++){
        s+=i;
    }
    return s;
   }
   res=sum(100)
   alert(res)

</script>

 9.JS的常用内置函数

9.1 String对象

三种方式:单引号、双引号、反引号。

常见的几种方法:
substring()     提取字符串中两个指定的索引号之间的字符,包左不包右
toLowerCase()    把字符串转换为小写。
toUpperCase()    把字符串转换为大写。
replace()    替换与正则表达式匹配的子串。
charAt()    返回指定字符第一次出现的索引。
trim()    移除字符串首尾空白
split(delimiter)    把字符串分割为子字符串数组;分割为数组

<script>
    //1.创建字符串的几种形式:单引号、双引号、反引号
    var str1='this is zhangsan'
    var str2="zhangsan"
    var str3=`zhangsan`
    console.log(str1)
    console.log(str2)
    console.log(str3)

    var str4 = new String("zhangsan") //Object  //字符串的本质就是一个字符数组
    var str5 =String("zhangsan")  //string
    console.log(typeof str4)
    console.log(typeof str5)
    console.log(str4[0]) //z
    console.log(str5)

    //字符串的常见方法
    console.log("字符串的长度"+str1.length)
    console.log("根据索引找字符charAt:"+str1.charAt(str1.length-1))
    console.log("返回指定字符第一次出现的索引indexOf:"+str1.indexOf("n")) //11
    console.log("返回指定字符最后一次出现的索引lastIndexOf:"+str1.lastIndexOf("n"))//15
    console.log("返回指定索引字符对应的ACSII码整数数值charCodeAt:"+str1.charCodeAt(10)) //a:97
    console.log("拼接两个字符串,参数可以为多个concat:"+str1.concat(str2)) //his is zhangsanzhangsan
    console.log("字符串的替换(第一次出现的字符)参数目标字符机替换字符replace:"+str1.replace("a","A"))
    console.log("字符串的替换(替换所有出现的字符)参数目标字符机替换字符replaceAll:"+str1.replaceAll("a","A"))
   
    //字符串的截取
    console.log("参数为起始位置和结束位置不包括结束位置slice:"+str1.slice(0,4)) //this
    console.log("参数为起始位置和截取长度substr:"+str1.substr(8,8)) //zhangsan
    console.log("参数为起始位置和结束位置不包括结束位置,可以倒序subString:"+str1.substring(0,4)) //this
    console.log("参数为起始位置和结束位置不包括结束位置,可以倒序subString:"+str1.substring(4,0)) //this

    console.log("根据指定字符分隔字符串"+str1.split("a"))
    console.log("转大写:"+ str1.toUppercase())
    console.log("转小写:"+ str1.toLowercase())

</script>

9.2 Math对象

Math对象不用创建,直接使用。 Math.方法名();

常用方法:

方法说明
round(x)把数四舍五入为最接近的整数。
floor(x)向下取整
ceil(x)向上取整
random()随机数,返回 0 ~ 1 之间的随机数。 含0不含1

代码演示:

<script>
    //1.圆周率
    console.log(Math.PI)
    //2.e底数
    console.log(Math.E)
     // 3.ln
    console.log(Math.LN10)
    console.log(Math.LN2)
    // 4.根号
    console.log(Math.SORT2)
    //5.*!!!向下取整
    console.log(Math.floor(3.14))//3
    //6.向上取整
    console.log(Math.ceil(3.14))//4
    //7.四舍五入
    console.log(Math.round(3.14))//3
    console.log(Math.round(3.54))//4
    //8.绝对值
    console.log(Math.abs(-5))//5
    //9.最大值和最小值
    console.log(Math.max(10,4))//18
    console.log(Math.min(10,4))//4
    //18.*!!!随机数
    console.log(Math.random())//0.0~1.0之间的数字且不包含1.0
    console.log(Math.floor(Math.random()*100))//0-100内的整数

</script>

9.3 Date对象 

创建对象:var date = new Date();

<script>
    //1.创建日期对象,默认获取当前时间
    var date =new Date()
    console.log(date)//Thu Aug 22 2024 16:06:02 GMT+0800 (中国标准时间)
    //2.获取指定时间对象
    date=new Date("2004-03-07 12:08:06")
    console.log(date)//Sun Mar 07 2004 12:08:06 GMT+0800 (中国标准时间)
    //3.获取时间分量
    //获取年份
    console.log(date.getFullYear()) //2004
    //获取月份  (月份的份量是从0开始的)
    console.log(date.getMonth()) //2
    //获取日期
    console.log(date.getDate()) //7
    //获取时、分、秒、毫秒  1s=1000ms
    console.log(date.getHours()) //12
    console.log(date.getMinutes()) //8
    console.log(date.getSeconds()) //6 
    console.log(date.getMilliseconds()) //0
    //获取星期数
    console.log(date.getDay())  //0

    //案例一:计算现在离国庆还有多少时间
    var time1=new Date().getTime()
    var time2=new Date("2024-10-01 00:00:00").getTime()
    var res=time2-time1  // ms -->h
    console.log("距离国庆还有"+res/1000/60/60+"小时")
    console.log("距离国庆还有"+res/1000/60/60/24+"天")


</script>

10.BOM编程 

BOM(Browser object Model) 浏览器对象模型

每打开一个网页,JS根据ES6语法规范操作浏览器窗口,比如弹出框、控制浏览器跳转、获取浏览器分辨率等,BOM把浏览器当做一个对象来看待,BOM的核心就是window。window的作用域:整个web页面。

BOM比DOM更大,它包含DOM。BOM的组成部分如下:

window窗口        // 整个浏览器的窗口

|-- history        //  浏览器的历史记录

|-- location        //  浏览器地址

|-- screen        //  屏幕分辨率

|-- navigator        //  浏览器内核信息

|-- document        //  文档对象(DOM)

window对象是BOM顶层对象;

window对象是JS访问浏览器窗口的一个接口

window对象是一个全局对象,声明的所有的全局变量和全局方法函数最终都是window对象的属性或者方法,在调用的时候可以省略 window。前学习的alert()、prompt()、confirm()方法都属于window对象的 

window常见属性和方法:

setTimeout 延时器:setTimeout(执行器(函数-一般使用匿名函数或箭头函数),延时时间(ms))

setInterval 定时器:setInterval(执行器(函数-一般使用匿名函数或箭头函数),定时时间(ms))

clearInterval 清除定时器 - setInterval

open(‘URL’):打开新的浏览器窗口。

close():关闭新打开的窗口(仅能关闭通过open方法打开的窗口)

<script> 
 //alert 是属于window对象的,但一般会省略window不写
    //window.alert("zhangsan")
    console.log(window)

    //1.常用属性
    //-*当前窗口可视区的宽和高(不包含底部任务栏、上面的导航栏、调试窗口)
    console.log(window.innerWidth)
    console.log(window.innerHeight)

    //-窗口的宽和高 不包含底部任务栏、包含上面的导航栏、调试窗口
    console.log(outerHeight)
    console.log(outerWidth)

    //-水平轴浏览器的偏移量
    console.log(window.screenLeft)
    console.log(window.screenX)

    //-垂直轴浏览器的偏移量
    console.log(window.screenTop)
    console.log(window.screenY)

    //-window对象的属性
    name="这是操作window的一个测试页面"
    console.log(window.name)


//案例一:3s后跳转到百度  (延时器)
    //setTimeout(执行器(函数-一般使用匿名函数或箭头函数),延时时间(ms))
    window.setTimeout(()=>{
        location.href="https://www.baidu.com"
    },3000);


//案例二:每1s刷新一次页面  (定时器)
    // setInterval(执行器(函数-一般使用匿名函数或箭头函数),定时时间(ms))
    setInterval(()=>{
        location.reload()
    },1000)

//案例三、回到顶部、底部
    function goFooter(){
        window.scrollTo(0,2500)
    }
    function goTop(){
        window.scrollTo(0,0)
    }
</script>
<body>
    <button onclick="goFooter()">回到底部</button>
    <li></li>
    <li></li>
    <li></li>
    略
    <li></li>
    <button onclick="goTop()">回到顶部</button>
</body>

window子对象: 

screen对象:包含显示设备信息

//显示器的分辨率
    console.log(screen.width)
    console.log(screen.height)

    //静态可视区的宽高(不包含任务栏的)
    console.log(screen.availHeight)
    console.log(screen.availWidth)

location对象:

 location.href="https://www.baidu.com"  // 跳转到百度

 location.reload()  // 重新加载、刷新页面

history对象: 

 //返回当前浏览器的历史url---网址

    console.log(history.length)

    console.log(history)

    console.log(Math.random())

    //回退

    function goBack(){

        //history.back()

        history.go(-1) // 使用频率高,一般参数为负数则后退x步,参数为正则前进x步

    }

    //前进

    function goForward(){

        //history.forword()

        history.go(1)

    }

navigator对象:

//-浏览器名称
    console.log(navigator.appName)
    //-浏览器的版本信息
    console.log(navigator.appVersion)

 11.DOM编程

-DOM(Document Object Model)文档对象模型

 -dom:主要指window下的document对象,使用document操作html文档中的其他元素

(1)dom的常见属性:

            console.log(document)

            console.log(document.cookie)//设置或返回当前文档的cookie

            console.log(document.domain) //当前文档的域名

            console.log(document.URL) //html页面的网址

            console.log(document.title) //html页面的标题

 (2)获取dom的几种方式

<body>
    <div id="test1">div-test1</div>
    <div id="test2" class="cls" name="nme">div-test2</div>
    <div id="test3" class="cls" name="nme">div-test3</div>
</body>
<script> 
//-通过id获取
    var div_test1 = document.getElementById("test1")
    console.log(div_test1)

    //-通过class属性获取 返回一个文档集合HTMLCollection
    var div_cls = document.getElementsByClassName("cls")
    console.log(div_cls)  //HTMLCollection的集合
    console.log(div_cls[0])//test2
    console.log(div_cls[1])//test3

    //-通过name属性获取 返回一个节点列表NodeList
    var div_nme = document.getElementsByName("nme")
    console.log(div_nme)
    console.log(div_nme[0])
    console.log(div_nme[1])

    //-通过标签名称获取 返回一个文档集合HTMLCollection
    var div_tag =document.getElementsByTagName("div")
    console.log(div_tag)
    console.log(div_tag[0])
    console.log(div_tag[1])
    console.log(div_tag[2])

    //-通过选择器获取 querySelector() 只匹配满足条件的第一个元素
    var div_selector = document.querySelector("#test1") //id选择器 -- 匹配一个
    console.log(div_selector)
    
    var div_selector2 = document.querySelector(".cls") //class选择器 -- 匹配多个
    console.log(div_selector2)

    //-通过选择器获取所有 返回一个节点列表NodeList
    var div_selectors = document.querySelectorAll(".cls") //class选择器 -- 匹配多个
    console.log(div_selectors)
    console.log(div_selectors[0])
    console.log(div_selectors[1])
</script>

(3)操作dom对象的内容

<script>
    // 1.获取当前要操作的元素dom对象
    var mgs = document.getElementsByClassName("mgs")[0]

    // 2.操作内容
    // -*-innerHTML  造成XSS攻击 标签会生效
    mgs.innerHTML ="<h1 style='color:red;'>修改后的内容</h1>"
    // --innerText  只改文本,标签不会生效  非W3C标准
    mgs.innerText ="<h1 style='color:red;'>修改后的内容</h1>"
    //  --textContent 推荐使用 W3C标准
    mgs.textContent ="<h1 style='color:red;'>修改后的内容</h1>"
</script>

(4)操作dom对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom操作属性</title>
    <style>
        .test1{
            width: 200px;
            height:200px;
            border: 1px solid grey;
            margin: auto;
            text-align: center;
            box-shadow: 10px 10px 10px;
            font-size: 20px;
            color: red;
            background-color: antiquewhite;
        }
        .test1{
            width: 200px;
            height:200px;
            border: 1px solid grey;
            margin: auto;
            text-align: center;
            box-shadow: 10px 10px 10px;
            font-size: 20px;
            color: red;
            background-color: rgb(45, 169, 99);
        }
    </style>
</head>
<body>
    <div id="test1" class="test1" name="test1" title="默认标题" >测试内容</div>
    <button onclick="changeBackgroundColor()">点一下</button><br>
   username: <input type="text" name="username" value="zhangsan">
</body>
</html>
<script>
    //案例一:修改div的title的属性值
    var test1 = document.querySelectorAll("[title]")[0]
    console.log(test1.getAttribute("title"))
    test1.setAttribute("title","修改后的标题")

    //1.修改属性值的几种方式
    // -dom对象.属性名 = 属性值
    test1.title="修改后的标题2"
    console.log(test1.title)
    // -dom对象["属性名"]
    test1["title"]="修改后的标题3"
    console.log(test1["title"])
    // -推荐:获取属性: getAttribute(属性名) 设置属性:setAttribute(属性名,修改的属性值)

    //案例二:修改背景颜色
    test1.setAttribute("class","test2")

    //案例三:点击按钮改变div的背景色,---深层逻辑,改变了class的属性值
    function changeBackgroundColor(){
        if(test1.getAttribute("class") == "test1"){
            test1.setAttribute("class","test2")
        }else{
            test1.setAttribute("class","test1")
        }
    }

    //案例四:修改文本框中的值
    var input = document.querySelectorAll("[name=username]")[0];
    // input.value = "lisi"
    // input["value"]= "lisi"
    input.setAttribute("value","wangwu")
</script>

(5)dom获取样式

<body>
    <div id="test1" style="width: 200px; height: 200px; background-color: aqua;">test1</div>
</body>
</html>
<script>
    var test1 = document.getElementById("test1")


    //获取样式的几种方式
    // -dom.style.样式名(通过这种方式获取样式名可能和css定义的样式名不一样)
    console.log(test1.style.width)
    console.log(test1.style.height)
    console.log(test1.style.background)

    test1.style.width="300px"
    test1.style.height="300px"

    // -通过getComputeStyle获取
    console.log(getComputedStyle(test1).width)
    console.log(getComputedStyle(test1).height)
    console.log(getComputedStyle(test1).background)

    // -无单位获取 样式偏移量
    console.log(test1.offsetWidth)
    console.log(test1.offsetHeight)
    console.log(test1.offsetTop)
    console.log(test1.offsetLeft)
</script>

12.JS事件 

 12.1 事件驱动方式

(1)JS采取事件驱动式编程方式,通过事件驱动响应用户的操作(点击、按压、移动等等)

(2)事件的过程

            -事件源:一般指的时HTML标签元素,浏览器的窗口等

            -事件处理函数:触发了事件后执行了哪个函数

            -事件对象:事件的触发也会具备事件对象,包含事件的信息

                 事件源==事件对象 ==》 事件处理函数

(3)this:关键字,指代当前对象

(4)JS三大事件方式

            -.标签方式  ————事件的驱动写在标签内部 --得不到事件对象,缺乏分离

            -.dom0方式 —————可以得到事件对象--事件和过程完成分离

            -.dom2方式 ——————推荐方式,可以得到事件对象--事件和过程完全分离--具备捕获和冒泡

<body>
    <!-- 事件源 -->
     <button onclick="test1()">点我试试</button>

     <button id="test2">dom0事件</button>
</body>
</html>
<script>
    //1.获取事件的方式 -标签方式
    //事件函数
    function test1(){
        //获取事件对象 ---获取不到
        //console.log(e)
        //当使用这种方式时,this指向window对象
        console.log(this) //window
        alert("zhangsna")
    }

    //2.获取事件的方式 -dom0
    //获取dom
    var test2 = document.getElementById("test2");

    //使用dom0驱动事件
    test2.onclick =function(e){
        //测试事件对象和this的指向
        console.log(e)//PointerEvent 事件对象
        console.log(this)//事件源
        alert("lisi")
    }

    //3.获取事件方式 -dom2
    //添加事件监听:addEventListener ("事件行为",事件执行函数,捕获和冒泡)
    test2.addEventListener("click",function (e) {
        console.log("---------------------------")
        //测试事件对象和this的指向
        console.log(e) //PointerEvent 事件对象
        console.log(this) //事件源
    },false)
</script>

12.2捕获和冒泡 

 

1.dom2事件方式,addEventListener(事件类型,事件函数,布尔类型(捕获和冒泡))

2.捕获和冒泡

           捕获:true 代表捕获 window -document-html-body=>日标元素

           推荐冒泡:false 代表冒泡 目标元素 -...body-html-document-=>window

 <style>
        #outer{
        width: 400px;
        height: 400px;
        margin: auto;
        background-color:aqua;
        border: 1px solid rebeccapurple;
        }
        #inner{
        width: 200px;
        height: 200px;
        margin: auto;
        background-color:brown;
        border: 1px solid yellow;
        }
        </style>
</head>
<body>
    <button id="btn">这是一个普通按钮</button>
    <div id="outer">
        <div id="inner"></div>
    </div>
</body>
</html>
<script>
    //1.测试捕获和冒泡

    //获取外层div dom对象
    var outer = document.getElementById("outer")
    //外层捕获
    outer.addEventListener("click",function(){
        alert("外层捕获")
    },true)
    //外层冒泡
    outer.addEventListener("click",function(){
        alert("外层冒泡")
    },false)

    //获取内层div dom对象
    var inner = document.getElementById("inner")
    //内层捕获
    inner.addEventListener("click",function(){
        alert("内层捕获")
    },true)
    //内层冒泡
    inner.addEventListener("click",function(){
        alert("内层冒泡")
    },false)

    //2.测试清除事件
    var btn = document.getElementById("btn")

    //抽取执行函数
    var fn = function(){
        alert("zhangsan")
    }
    //dom2 添加事件
    btn.addEventListener("click",fn,false)
    
    //清除事件
    btn.removeEventListener("click",fn,false)
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值