JS知识点-CSDN博客

本文链接：https://blog.csdn.net/Jie_Chang/article/details/131800390

本文介绍了JS（JavaScript）的基本知识，包括JS的引入方式（行内式、内联式、外链式）、ECMAScript中的变量和常量、数据类型以及比较操作，详细讲解了函数的定义和调用。此外，还阐述了DOM操作，如获取和设置标签内容、属性及样式，以及BOM（浏览器对象模型）中的Windows对象和location对象的常用API。最后，文中涉及了页面加载事件和一些常见的用户交互事件。

摘要由CSDN通过智能技术生成

js

什么是JS?

js=javascript，可以让页面实现一些动态的业务改变
java的组成部分

ECMAScript js的基本语法
DOM 文档对象模型
BOM 浏览器对象模型

hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld</title>
</head>
<body>
    <script>
        //所有的js代码都要写到这里
        alert("弹窗了")
    </script>
    
</body>
</html>

js的引入方式

行内式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('我点击了按钮')">
        我是一个按钮
    </button>
</body>
</html>

内联式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('我点击了按钮')">
        我是一个按钮
    </button>
    <hr>
    <button id="btn2">
        按钮2
    </button>
    <script>
        //1.找到表浅
        var btn2 = document.getElementById('btn2')
        //2.给按钮2绑定点击事件
        btn2.onclick=function(){
            alert('按钮2被点击了')
        }
    </script>
</body>
</html>

外链式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert('我点击了按钮')">
        我是一个按钮
    </button>
    <hr>
    <button id="btn2">
        按钮2
    </button>
    <script>
        //1.找到表浅
        var btn2 = document.getElementById('btn2')
        //2.给按钮2绑定点击事件
        btn2.onclick=function(){
            alert('按钮2被点击了')
        }
    </script>
    <hr>

    <button id="btn3">按钮3</button>
    <script src="js/btn3.js"></script>
</body>
</html>

//当前文件就是专门写js代码的地方
var btn3 = document.getElementById('btn3')
btn3.onclick=function(){
    alert('按钮3被点击了')
}

注意事项

如果我们一旦引入了外部的js，那么从script中添加的内容不生效。
标签的按照顺序加载，从上到下。

ECMAScript

变量和常量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //定义变量 age
        var age = 10;
        //定义变量name
        let name = 'tom'
        alert(age+'==== '+name)

        //常量
        const PI = 3.14;
        //常量定义过后不能随意修改
        alert(PI)

    </script>
</body>
</html>

js中的数据类型

js是一门弱类型的脚本语言

string 字符串
boolean 布尔
number 数字
object 对象
undefined 未定义

关键字typeof

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var name = 'tom'
        alert(typeof name) //string
        var reslut = true;
        alert(typeof reslut)//boolean
        var int = 12.3123;
        alert(typeof int)   //number
        //在js中如何描述对象呢？？
        var zhangsan = {
            "name":"zhangsan",
            "age":18

        }
        alert(typeof zhangsan); //object
        //在js中null是一种特殊类型，null的数据类型是object，本身就存在的bug，bug从js出生到现在就一直有
        var obj = null;
        alert(typeof obj) //object
        //只要定义不给值就是undefined
        var persion;
        alert(typeof persion)   //undefubed
    </script>
</body>
</html>

和=

==只比较值，数据类型无所谓
===值和数据类型一致才可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert(1=='1')  //true
        alert(1==='1') //false
    </script>
</body>
</html>

函数

语法格式

function 函数名称（参数1，参数2）{
  //实现函数业务逻辑
return 返回值；
}
//调用函数
var result =  函数名称（参数1，参数2）

 <script>
        //定义一个求和的函数
        //实现函数的核心功能 求和
        //把结果返回
        function sum(a,b){
            return a+b
        }
        var result = sum(10,7)
        alert(result)


        function tk(){
            alert('弹窗')
        }
        tk();
</script>

调用函数和函数引用

//匿名函数
        var fun1= function(){
            alert('这是一个匿名函数')
        }
        //此时
        //fun1 就是相当这个函数本身
        
        //fun1() //函数引用
        
        //fun1()//函数调用



        var fun2 = function (a,b){
            return 'a-b'
        }

        fun2    //函数对象
        var fun3 = fun2;
        var result =fun3(10,5)
        alert(result)
        //结论：
        //带()表示执行函数
        //不带()表示函数对对象

DOM

dom ==> 文档对象模型

dom树形结构

注意事项：

在js中，我们把整个页面加载到内存中会封装成为一个对象
document ==>整个完整的文档

标签在js中使用元素对象来表示标签，Element ==>标签

标签的属性 Attribute==>属性对象

标签的内容 TEXT==> 标签内容区域

具体应用

如何获取标签

API	解释说明
document.getElementById(“id值”)	根据id值获取标签对象
document.getElementsByTagName(“标签名”)	根据签名来获取标签数组对象
document.getElementsByClassName(“class值”)	根据clss值获取标签数组对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="d1">这是一段文字1</div>
    <div class="dclass">这是一段文字2</div>
    <div class="dclass">这是一段文字3</div>
    <script>
        //根据id获取标签对象
        var d1Ele = document.getElementById('d1')
        //获取标签的内容 innerHTML
        alert(d1Ele.innerHTML)
        //这是一段文字1
        //根据标签名来获取标签数组对象
        var dirArr = document.getElementsByTagName("div")
        //先遍历再循环
        for(var i = 0; i<dirArr.length;i++){
            alert(dirArr[i].innerHTML)
        }
        //这是一段文字1
        //这是一段文字2
        //这是一段文字3

        var dirArr1 = document.getElementsByClassName("dclass")
        for(var i = 0; i<dirArr1.length;i++){
            alert(dirArr1[i].innerHTML)
        }
        //这是一段文字2
        //这是一段文字3

    </script>
</body>

</html>

如何获取和设置标签内容

api	说明
ele.innerHTML	获取&设置内容(标签会被解析) 这是一个属性不是方法
ele.innerText	获取&设置内容(标签不会被解析)

<body>
    <div id="content"></div>
    <script>
        var content='<b>hello js</b>';
        //innerHTML可以获取或者设置标签的内容区域
        var divEle = document.getElementById('content')
        //标签会被解析

        divEle.innerHTML=content
        //divEle.innerText=content

    </script>
</body>

如何获取和设置标签的属性

api	说明
ele.属性= 值	获取或设置标签属性值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <button onclick="showImg()">点我查看图片</button>
    <hr>
    <br>
    <img src="" id="pic">
    <img src="" id="pic2">
    <script>
      function showImg(){
        //alert('点击查看图片')
        //1.拿到img标签对象
        var picEle= document.getElementById('pic')
        //2.设置图片的src属性
        picEle.src = "./1.png"
        var picEle1 = document.getElementById('pic2')
        picEle1.src='./2.jpg'

      }
    </script>
  </body>
</html>

如何设置标签的样式

api	说明
ele.style.样式名 = 值	获取或者设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #d1{
            width:  200px;
            height: 200px;
            border: .5px solid red;
        }
    </style>
</head>
<body>
    <button id="btn">点我改变div的背景颜色</button>
    <div id="d1"></div>
    <script>
        document.getElementById('btn').onclick=function(){
            document.getElementById('d1').style.backgroundColor =  "green"
        }
        
        
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            display: block;
        }
    </style>
    <button id="btn1" onclick="hide()">点我隐藏</button>
    <button id="btn2" onclick="show()">点我显示</button>
    <div id="d1"></div>


    <script>
        //display样式可以控制标签的状态！！！
        function hide(){
            document.getElementById('d1').style.display="none";
        }
        function show(){
            document.getElementById('d1').style.display="block";
        }

    </script>
    
</body>
</html>

BOM

BOM翻译过来是浏览器对象模型
五大内置对象：

Windows对象，老大哥一切的基础
location对象，地址栏的封装
history对象，历史记录的封装
screen对象，屏幕的参数进行封装
navigator对象，浏览器参数分装的对象

Windows对象常用api

Windows对象是bom中的顶级对象
弹窗方法：
alert、confirm、console.log

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>输出内容</h1>
    <script>
        //alert("hahhahahha")，alert是普通弹框
        if (confirm('你确定删除么')) {
            alert('点击的确认')
        } else {
            alert('点击的取消')
        }
        //confirm确认框，有返回值

        //console.log控制台输出
        console.log('我输出日志了')
        
    </script>




</body>

</html>

Windows定时器：
setTimeout、eval

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    
    <script>
        //任务需求，5秒钟后弹出框
        function tk() {
            alert('弹框1')
        }
        //5秒钟后执行任务，执行一次
        setTimeout("tk", 5000);//弹窗，执行一次，
        //字符串当成js命令去执行
        eval("tk();")//弹窗
        eval("alert('任务执行了');") //直接执行

        //每隔一秒执行一次
        setInterval(tk, 1000);
    </script>
</body>

</html>

location对象常用api

api	说明
location.herf	页面跳转
location.reload()	页面刷新

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="baidu()">点我跳转百度</button>
    <button onclick="refresh">点我刷新页面</button>
    <script>
        //协议。http https file  
        function baidu() {
            location.href = "https://baidu.com"
        }
        function refresh(){
          location.reload()//重新加载页面
        }
        
    </script>
</body>

</html>

bom的综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>

<body>
    <center style="margin-top: 100px;">
        <div>
            登陆成功，页面将在<span id="numSpan">5</span>秒后跳转首页
        </div>
    </center>
    <script>
        function jumpIndex() {
            //对5进行倒计时显示
            var num = document.getElementById('numSpan').innerHTML
            //当值变成0的时候跳转
            num --;
            if(num <1){
                location.href="https://www.baidu.com"
            }else{
                //值>=1的时候改变内容即可
                document.getElementById('numSpan').innerHTML=num

            }
            
        }
        setInterval(jumpIndex, 1000);
    </script>
</body>

</html>

事件

常用的事件：

onclick 点击事件点击的时候才会触发
**onblur 失去焦点事件 **
onfocus 获得焦点事件
onload 页面加载事件，准确来说不是加载页面。
onkeydown 按键事件

onbuler 失去焦点

 <h1>失失去焦点事件</h1>
    <input type="text" id="username" ><span id="msg"></span>
    <script>
        document.getElementById('username').onblur=function(){
            var username = this.value
            if(username.length<5){
                document.getElementById('msg').innerHTML= '<font color = "red">用户名长度大于5</font>'
                //alert('用户名长度大于5')
            }else{
                document.getElementById('msg').innerHTML= '<font color = "green">用户名可以使用</font>'
               // alert('用户可以使用')
            }
        }

    </script>

onfocus 获得焦点事件


<h1>获取焦点</h1>
<input type="text" id="password" ><span id="passMsg"></span>
<script>
    document.getElementById('password').onfocus = function(){
        document.getElementById('passMsg').innerHTML='<font color = "blue">请输入密码,长度在6-10位之间</font>'
    }
</script>

onload 页面加载事件，准确来不是加载页面的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //默认情况下代码是从上到下加载的。
        //我们这行走的时候，DIV还没有初始化
        //document.getElementById('d1').innerHTML='DIV内容被填充了'

        /* 
        Windows.onload =>事件=>Windows对象初始化之后才回来执行
        当Windows对象创建完成后回头来执行这里的代码        
        */
        window.onload = function(){
            document.getElementById('d1').innerHTML='DIV内容被填充了'
        }
    </script>
    <div id="d1"></div>
</body>
</html>