JavaScript js 基础学习，页面优化

最新推荐文章于 2024-11-05 15:26:40 发布

月初，

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量104

点赞数

文章标签： javascript 学习前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73745224/article/details/129565320

版权

js工具和插件的安装：

js基本语法：

单行注释//

多行注释/**/

//1.输入框

//prompt("请输入数据")

//2.弹出警告框

// alert("hello")

//3.控制台输出

// console.log("hello js")

//4.页面输出内容

document.write("hello js")

//5.换行

document.write("<br/>")

document.write("hello.js")

原始数据类型：

bolean：布尔类型

null：声明null值的特殊关键字

undefined：代表变量未定义

number：整数或浮点数

string：字符串

bigint：大整数例如 let=10n

算术运算符：

（字符串类型运算时，会自动转化为number类型）

+加法运算

-减法运算

*乘法运算

/除法运算

%取余数

++自增

--自减

== 判断值是否相等

=== 判断数据类型和值是否相等

&& 逻辑与，并且

|| 逻辑或，或者

！，取反

三元运算符：

三元运算符格式：

（比较表达式）？表达式1：表达式2；

执行流程：

如果比较表达式为ture，则取表达式1，反之取表达式2；

数组：

定义格式：

let 数组名=[元素1，元素2，...]

索引范文：

从0开始，最大到数组长度减一

数组长度

数组名.length

函数：

类似java中的方法，可以将一些代码进行抽取，达到复用的效果

定义格式

function 方法名（参数列表）{

方法体；

return返回值

}

可变参数：

function 方法名（...参数名）{

方法体；

return返回值

}

匿名函数：

function 方法名（参数列表）{

方法体；

}

DOM：

1. DOM介绍：

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

将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。

2.Element元素的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的获取</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username"/>
</body>
<script> 
    //1.getElementById()  根据id属性值获取元素对象
  let div1= document.getElementById("div1");
  document.write("<br>"+div1);
     //2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组
    let divs=document.getElementsByTagName("div");
    document.write("<br>"+divs.length)
    //3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组
    let cls = document.getElementsByClassName("cls");
    document.write("<br>"+cls.length);
    //4. getElementsByName()   根据name属性值获取元素对象们，返回数组
   let username= document.getElementsByName("username");
   document.write("<br>"+username);
    //5. 子元素对象.parentElement属性   获取当前元素的父元素
   let body=div1.parentElement();
   document.write("<br>"+body);
</script>
</html>

3.属性的操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的操作</title>
    <style>
        .aColor{
            color: rgb(0, 162, 255);
        }
    </style>
</head>
<body>
    <a>点我啊</a>
</body>
<script>
     //1. setAttribute()    添加属性
   let a= document.getElementsByTagName("a")[0];
   a.setAttribute("href","http://www.baidu.com")
    //2. getAttribute()    获取属性
      let value=  a.getAttribute("href");
      document.write("<br>"+value)
    //3. removeAttribute()  删除属性
    //a.removeAttribute("href");
    //4. style属性   添加样式
    // a.style.color="red";
    //5. className属性   添加指定样式
    a.className="aColor"
</script>
</html>

4.文本的操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div id="div"></div>
</body>
<script>
      //1. innerText   添加文本内容，不解析标签
      let div= document.getElementById("div");
      //div.innerText="第一次添加文本"
      //2. innerHTML   添加文本内容，解析标签
      div.innerHTML="<strong>第一次添加文本</strong>"
</script>
</html>

事件：

事件指的是当某些组件执行某些操作之后或会触发某些代码的执行。

常用的事件：

了解的事件：

绑定事件方式

方式一：通过标签中的事件属性进行绑定。

方式二：通过 DOM 元素属性绑定。

基本案例实现（学生表信息的添加和删除）：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格</title>
    <style>
        table{
            border:1px solid;
            margin: auto;
            width: 520px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: auto;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
        <input type="text" id="age" placeholder="请输入年龄" autocomplete="off">   
        <input type="text" id="gender" placeholder="请输入性别" autocomplete="off">
        <input type="button" value="添加" id="add">
    </div>
    <table id="tb">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <!--Javascipt:void(0); 作用：不刷新页面-->
            <td><a href="Javascipt:void(0);" onclick="drop(this)">删除</a></td>
        </tr>
        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="Javascipt:void(0);" onclick="drop(this)">删除</a></td>
        </tr>
    </table>
</body>
<script>
    //一、添加功能
    //1.为添加按钮绑定单击事件
    document.getElementById("add").onclick = function(){
        //2.创建行元素
    let tr= document.createElement("tr");
        //3.创建4个单元格元素
      let nameTd= document.createElement("td");
      let ageTd= document.createElement("td");
      let genderTd= document.createElement("td");
      let deleteTd= document.createElement("td");
        //4.将td添加到tr中
      tr.appendChild(nameTd);
      tr.appendChild(ageTd);
      tr.appendChild(genderTd);
      tr.appendChild(deleteTd);
        //5.获取输入框的文本信息
       let name= document.getElementById("name").value;
       let age= document.getElementById("age").value;
       let gender= document.getElementById("gender").value;
        //6.根据获取到的信息创建3个文本元素
     let nameText= document.createTextNode(name);
     let ageText= document.createTextNode(age);
     let genderText= document.createTextNode(gender);
        //7.将3个文本元素添加到td中
     nameTd.appendChild(nameText);
     ageTd.appendChild(ageText);
     genderTd.appendChild(genderText);
        //8.创建超链接元素和显示的文本以及添加href属性
       let a=document.createElement("a");
       let aText=document.createTextNode("删除");
       a.setAttribute("href","Javascript:void(0);")
       a.setAttribute("onclick","drop(this)");
       a.appendChild(aText)  
       //9.将超链接元素添加到td中
        deleteTd.appendChild(a);
        //10.获取table元素，将tr添加到table中
    let table=document.getElementById("tb");
     table.appendChild(tr); 
     if(tr!=0){
     alert("添加成功")
     }else{alert("添加失败")}
    }
    //二、删除的功能
//1.为每个删除超链接标签添加单击事件的属性
//2.定义删除的方法
function drop(obj){
//3.获取table元素
let table = obj.parentElement.parentElement.parentElement;
//4.获取tr元素
let tr = obj.parentElement.parentElement;
//5.通过table删除tr
table.removeChild(tr);
}
</script>
</html>

效果演示：

面向对象：

类的定义和使用：

定义格式

class 类名{

constructor （变量列表）{

变量赋值；

}

方法名（参数列表）{

方法体：

return 返回值

}

使用格式：

let 对象名=new 类名（实际变量值）；

对象名.方法名

继承：

继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。

继承关键字：extends

顶级父类：Object

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
      //定义Person类
      class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //eat方法
        eat(){
            document.write("吃烤肉");
        }
    }
        //定义worker类继承Person
        class Worker extends Person{
            constructor(name,age,salary){
                //super继承父类的
                super(name,age);
                //this特有的
                this.salary=salary
            }
            show(){  
                 document.write(this.name + "," + this.age + "," + this.salary + "<br>");
                }
        }
        //使用worker类
        let w=new Worker("张三",23,10000);
        w.show();
        w.eat();
    
</script>
</html>