前端学习 03 —— JavaScript 02

其他 2021-02-09 05:47:18 阅读次数: 0

系列文章

前端学习 01 —— HTML5
前端学习 02 —— CSS01
前端学习 02 —— CSS 02
前端学习 02 —— CSS 03
前端学习 03 —— JavaScript 01
前端学习 03 —— JavaScript 02

文章目录

五、内部对象

标准对象

typeof "number"
"string"
typeof true
"boolean"
typeof 123
"number"
typeof NaN
"number"
typeof Math.abs
"function"
typeof []//数组——>object对象
"object"
typeof {
    
    }//{}对象——>object对象
"object"
typeof undefined
"undefined"

5.1、Date

let now = new Date();//这种获得的是外国时间
now.getFullYear();//年
now.getMonth();//月 0~11月
now.getDate();//日
now.getDay();//星期几
now.getHours();//小时 
now.getMinutes();//分
now.getSeconds();//秒
now.getMilliseconds();//获得Date的毫秒数

let time = now.getTime();//获得时间戳，从1970.1.1 0:00:00到目前的毫秒，全世界统一
now = new Date(time);//把时间戳放进去，可获得时间
time.toLocaleString();//得到本地时间

5.2、JSON

早期的数据传输是通过XML文件，后来用JSON格式

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中一切皆为对象，任何JavaScript支持的类型都是对象，而对象都能无缝转为JSON。

JSON格式：和JavaScript对象类似，但JSON是字符串，同时它的key也要用引号包裹。

let user = {
    
    name : "小明", age : 18, sex : "男"};
//json 结果为  "{"name":"小明","age":18,"sex":"男"}"
let json = JSON.stringify('{"name":"小明","age":18,"sex":"男"}');
user = JSON.parse(json);

注意上面user和json的区别，json里的key也需要引号，同时json本身是个字符串，所以一般我们在外面用单引号，里面用双引号。（如果外面也用双引号需要加转义）

六、面向对象编程

6.1、原型继承

JavaScript与Java、C#等语言的面向对象有点区别，在Java中类相当于一个模板，而对象就是该模板的一个具体例子。而JavaScript开始是没有模板的，它通过对象去原型继承另一个对象。

//这里得到一个Person对象，不是Person类
let Person = {
    
    
    name : "小白",
    age : 12,
    run: function () {
    
    
        console.log(this.name + " run");
    }
}
//Jack对象原型继承Person对象
let Jack = {
    
    
    name : "Jack"
}
Jack.__proto__ = Person;
Jack.run();

可以发现，原本Jack是没有run方法的，而当Jack的**__ proto __**属性指向Person后就有了Person的run，这里就相当于表明Jack的原型是Person，同时Jack也有了Person的age属性。

下面这个图显示了Jack的原型Person，以及Person的原型Object。【Object的原型也是它本身，形成了一个原型链】

原型

乍一看这似乎和Java的继承没什么区别，但Jack的__ proto __ 属性可以随时更改，并且通过这种方式依然会写很多重复代码。

let Birds = {
    
    
    name:"鸟",
    fly:function () {
    
    
        console.log(this.name + " run");
    }
}
Jack.__proto__ = Birds;
Jack.fly();

如此，Jack一开始是人在跑，后面就变成鸟在飞，这显然是不符合规定的。因此就有了后面class继承的方法。

6.2、class

JavaScript在ES6引入了class关键字，也就是Java中的类。通过class可以创建模板。

class Person{
    
    
    //静态属性，只属于Person类
    static school = "A";
//静态方法，只属于Person类
static getSchool(){
    
    
    console.log('学校：'+Person.school);
}
//构造方法
constructor(name, age) {
    
    
    this.name = name;
    this.age = age;
}
//实例方法
getInformation(){
    
    
    console.log('姓名:'+this.name+',年龄:'+this.age);
}
}
class Student extends Person{
    
    
    constructor(name, age, id) {
    
    
        super(name, age);
        this.id = id;
    }
    getInformation() {
    
    
        console.log('姓名:'+this.name+',年龄:'+this.age+',学号:'+this.id);
    }
}
//调用静态属性
console.log(Person.school);
//调用静态方法
console.log(Person.getSchool());
//实例化对象
let lihua = new Person("李华",17);
//调用方法
lihua.getInformation();

let student = new Student("小白",18,1);
student.getInformation();

结果：

A
学校：A
姓名:李华,年龄:18
姓名:小白,年龄:18,学号:1

下面是几点注意：

  • 这里Person类就是一个模板，而lihua对象就是该模板的一个具体例子，拥有模板预先设置好的属性和方法。

  • constructor构造方法用于创建并初始化一个对象，在一个类中只能有一个constructor方法，这点和Java的构造方法不同。同时JS中的构造方法也可以通过super调用父类构造方法。

  • class中的this指向的是实例时的对象。

  • 若子类调用父类方法时，子类没有对应的属性，则会去找父类的属性。

  • JavaScript是不存在方法重载的，但可以重写。

七、操作BOM对象（重点）

BOM（browser object model）即浏览器对象模型。我们常用的浏览器内核IE、Chrome、Safari、FirFox等，这些浏览器都有一些内置的对象可以直接操作。
 

1、window

它代表浏览器窗口，因此有非常多的方法可以使用，例如可以通过它获取浏览器窗口大小。

window.innerHeight;//获取浏览器内部高度
window.innerWidth;//获取浏览器内部宽度
window.outerHeight;//获取浏览器外部高度
window.outerWidth;//获取浏览器外部宽度

2、navigator

它封装了一些浏览器的信息

navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36"
navigator.platform
"Win32"

但我们在代码中一般不会通过这种方式来进行判断，因为这些信息都可以浏览器文件中直接修改。
 

3、screen

它代表屏幕的对象，可以获取电脑屏幕宽高等信息

screen.width
1536
screen.height
864

4、location（重要）

它包含了当前页面的URL信息，可以通过它刷新网页或重定向到其他页面

host:主机
href:当前指向的位置
protocol:协议
reload:刷新网页的方法
//设置新的地址
location.assign("https://www.baidu.com")
//这样访问当前页面，就会直接访问到百度

在这里插入图片描述

5、document

它代表了当前页面，即HTML DOM文档树，后面会详细将DOM文档树。

document.title = "这是document";
document1

还可以通过它获取HTML的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl id="app">
    <dt>Java</dt>
    <dt>JavaSE</dt>
    <dt>JavaEE</dt>
</dl>
<script>
    let dl = document.getElementById('app');
    console.log(dl);
</script>
</body>
</html>

直接通过document获得文档树节点，意味着能动态修改网页。

document2

通过document获得cookie

document.cookie

6、history

通过该对象可以实现网页前进或者返回，但一般不建议使用，还是通过后台实现。

history.back();//后退
history.forward();//前进

八、操作DOM对象（重点）

DOM：文档对象模型，我们的浏览器网页其实就是一颗文档树，每个元素都是HTML中的一个节点，例如下面这种，这棵树的每个节点被称为DOM节点。

文档树

我们可以通过JavaScript的document来操作DOM节点，实现动态的增删改查。
 

8.1、获得DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>这是标题</h1>
        <p class="classP">p1</p>
        <p class="classP">p1</p>
        <ul id="father">
            <li>li 1</li>
            <li>li 2</li>
        </ul>
    </div>
    <script>
        //通过标签名获得DOM节点
        let h1 = document.getElementsByTagName('h1');
        //通过class获得DOM节点，注意这里得到的是一个数组
        let p = document.getElementsByClassName('classP');
        //通过ID获得DOM节点
        let father = document.getElementById("father");
        //通过某个节点，获得其所有子节点，这里的children就是个数组
        let children = father.children;
        //获得第一个子节点
        let li1 = father.firstChild;
        let li1_2 = father.children[0];//也是第一个节点
        //其他还有很多方法
    </script>
</body>
</html>

这些都是原生代码，之后都使用jQuery()，更加方便。
 

8.2、更新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1"></div>
    <script>
        let div1 = document.getElementById('div1');
        //通过innerText属性，可以修改该标签的文本内容
        div1.innerText = '增加的文本内容';
        //通过innerHTML属性修改的内容会被HTML解析，这会覆盖前面innerText的内容
        div1.innerHTML = '<stronger>被HTML解析的文本</stronger>';
        //通过CSS修改
        div1.style.color = 'red'//值需要为字符串类型
        //CSS中的本来是 font-size，但命名问题要求用驼峰
        div1.style.fontSize = '19px';//值为字符串类型
    </script>
</body>
</html>

结果：

更新DOM

正因为有了这种动态修改网页的能力，所以JavaScript才能起到交互作用，下面我们可以通过这种方式修改百度首页，而不需要去HTML里面改代码。

修改百度 修改百度2

8.3、删除节点

从逻辑上来讲，自己删除自己显然是不可行的，因此要删除一个DOM节点要从其父节点进行删除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>这是标题</h1>
    <p class="classP">p1</p>
    <p class="classP">p2</p>
    <p class="classP">p3</p>
    <ul id="father">
        <li>li 1</li>
        <li>li 2</li>
    </ul>
</div>
<script>
    //获得类classP的所有节点
    let classP = document.getElementsByClassName('classP');
    //随便通过一个节点获取classP的父节点
    let app = classP[0].parentElement;
    //通过父节点来删除
    app.removeChild(classP[0]);
    //这里需要注意，如果我们想要再删除p3，下面这种操作是错误的
    app.removeChild(classP[2]);
	//如果删除所有孩子 app.remove();
</script>
</body>
</html>

结果：

删除DOM

删除节点是个动态的过程，当我们删除P1后，app的children就只有两个，此时classP[2]就会越界，所以应该用class P[1]。
 

8.4、插入节点

当我们获得了一个空节点，通过前面更新节点的innerText和innerHTML这两个方式，也能增加内容进去，但当节点本身有内容时会造成覆盖。所以这里的插入节点主要是指追加节点。

下面展示如何将已有节点追加到其他节点、创建新节点、修改属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="p0">p0</p>
    <div id="div">
        <p id="p1">p1</p>
        <p id="p2">p2</p>
    </div>
    <script>
        //将p0追加到div后面
        let div = document.getElementById('div');
        let p0 = document.getElementById('p0');
        div.appendChild(p0);

        //增加新节点并写入内容
        let p3 = document.createElement('p');
        p3.innerHTML = '<stronger>新p3</stronger>';

        div.insertBefore(p3, p0);//把p3放到div的p0之前
        //设置标签属性 等价于 <p id="p3" style="font-size: 30px">p3</p>
        p3.setAttribute('style', 'font-size: 35px');

        //动态修改body背景色
        let style = document.createElement('style');
        style.innerHTML = 'body{background-color: red;}';
        //把style标签追加在head后面，这里根据标签选择得到的是数组
        document.getElementsByTagName('head')[0].appendChild(style);
    </script>
</body>
</html>

结果：

插入

九、操作表单

表单包含：

  • 文本框 text
  • 下拉框 select
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏域 hidden
  • …
     

9.1、获取表单信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="post">
        <p>
            <span>用户名：</span>
            <input type="text" id="userName"/>
        </p>
        <p>
            <input type="radio" id="radio_man" name="sex" value="man"><span>男</span>
            <input type="radio" id="radio_woman" name="sex" value="woman"><span>女</span>
        </p>
    </form>
    <script>
        let userName = document.getElementById('userName');
        let radio_man = document.getElementById('radio_man');
    </script>
</body>
</html>

结果：

操作表单

可以发现像文本框之类的，直接通过value属性查看内容，而像单选框因为value是固定的，我们应该去查看它是否被选中，所以用checked属性。

9.2、按钮点击/表单提交 事件

可以将按钮和表单都绑定事件，类似于Java的监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 表单的onsubmit会检查返回值，若为true才成功提交到指定页面    -->
    <form action="#" method="post" onsubmit="return formOnclick()">
        <p>
            <span>用户名：</span>
            <input type="text" id="userName" name="userName"/>
        </p>
        <p>
            <span>密码：</span>
            <input type="password" id="password" name="password"/>
        </p>
        <!-- 这里没有使用 input的submit类型    -->
        <button type="submit" id="button" onclick="buttonOnclick()">提交</button>
    </form>
    <script>
        // 这是表单提交的事件
        function formOnclick() {
     
     
            console.log('表单提交');
            return false;
        }
        //这是点击按钮的事件
        function buttonOnclick() {
     
     
            console.log('按钮被点击');
        }
    </script>
</body>
</html>

这里把表单事件里的返回值写为false是为了方便查看结果，如果为true，则页面会被刷新，控制台的内容会直接清除。

结果：

表单事件

9.3、前端密码MD5加密

如果像上一节，我们直接通过表单提交密码时是能被抓包的，密码可以被监测，一般都会进行加密操作。

MD5加密

加密一般通过MD5，这我们需要导入jQuery和MD5包。这是链接（不要积分）jquery-3.5.1.rar、MD5

注意：这里通过将密码输入框的值加密后传给隐藏域，是因为密码加密后长度会改变，若直接赋值给原密码输入框则用户体验差。密码输入框没有name属性，所以在提交表单时不会提交密码输入框，只会提交隐藏域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入jQuery和md5   -->
    <script type="text/javascript" src="jquery-3.5.1.js"></script>
    <script type="text/javascript" src="md5.js"></script>
</head>
<body>
    <form action="#" method="post" onsubmit="return formOnclick()">
        <p>
            <span>用户名：</span>
            <input type="text" id="userName" name="userName"/>
        </p>
        <p>
            <span>密码：</span>
            <!--  注意 这里密码输入框没有name          -->
            <input type="password" id="password"/>
            <!--  这里增加了hidden隐藏真正的密码，且 name = password  -->
            <input type="hidden" id="md5_password" name="password"/>
        </p>
        <button type="submit" id="button">提交</button>
    </form>
    <script>
        function formOnclick() {
     
     
            let uname = document.getElementById('userName');
            let pwd = document.getElementById('password');
            //这里进行了加密，将输入的密码进行加密后赋值给隐藏密码
            let md5_pwd = document.getElementById('md5_password');
            md5_pwd.value = $.md5(pwd);
            alert('提交成功');
            return true;
        }
    </script>
</body>
</html>

结果：

MD5加密2

10、jQuery

10.1、初识

jQuery就是封装了大量JavaScript代码的库，需要我们先去下载jar包。官网，如果官网慢可以去我传的资源下载（不要积分）。jquery-3.5.1.rar

jQuery

两种方式均可以，第一种是生产版，是压缩过后的，要小些，第二种是开发版。我下载的第二种。下载后导入自己lib包即可（lib包自己在项目下创建就行）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js" ></script>
</head>
<body>
    <a href="" id="test-jquery">点我试试</a>
    <!-- 公式： $(CSS选择器).action()    -->
    <script>
        // 这里是id选择器，action是click
        $('#test-jquery').click(function () {
     
     
            alert("1");
        })
    </script>
</body>
</html>

10.2、选择器

详细参考这个jQuery API中文文档 jQuery API 3.5.1 速查表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="p" class="p"></p>
    <script>
        //标签选择器
        document.getElementsByTagName('p');
        //类选择器
        document.getElementsByClassName('p');
        //id选择器
        document.getElementById('p');

        //对应的jQuery
        $('p').click();//标签选择器
        $('.p').click();//类选择器
        $('#p').click();//id选择器
    </script>
</body>
</html>

10.3、事件

常用的就是鼠标、键盘、其他事件（例如提交事件）

下面这个代码实现鼠标在指定区域移动会显示其坐标，点击字体变红，松开变蓝。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "lib/jquery-3.5.1.js"></script>
    <style>
        #divMouse{
     
     
            height: 300px;
            width: 300px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <span>鼠标坐标：</span><span id="mouseMove"></span>
    <div id="divMouse"></div>
    <script>
        /*
        $(document).ready(function () {
            //这里是当页面加载完毕时才会执行，可以提高效率
        });
        */
        //这是上面的简写
        $(function () {
     
     
            //鼠标移动事件：鼠标在div1中移动时得到其坐标
            $('#divMouse').mousemove(function (e) {
     
     
                // text()是修改文本，html()则可以解析HTML代码
                $('#mouseMove').text("X:"+e.pageX+",Y:"+e.pageY);
            });
            //鼠标点击事件
            $('#divMouse').mousedown(function () {
     
     
                $('#mouseMove').css('color', 'red');
            })
            //鼠标点击事件
            $('#divMouse').mouseup(function () {
     
     
                $('#mouseMove').css('color', 'blue');
            })
        });
    </script>
</body>
</html>

更多事件以及其他jQuery可以直接查询文档 jQuery API 3.5.1 速查表
 

10.4、操作DOM

比之前的原生代码要简便许多，更多操作，查看文档。

<div id="div1">
    <ul id="ul1">
        <li>Java</li>
        <li>HTML</li>
    </ul>
</div>
<script>
    //文档加载完后执行
    $(function () {
     
     
        //追加内容到ul后面
        $('#ul1').append('<li id="css">CSS</li>');
        // 把Java放在CSS后面
        $('#ul1:nth-of-type(1) li').insertAfter('#css');
    })
</script>

10.5、Ajax

Ajax需要配合后端，这里不做具体描述，文档里直接查看，后面讲到后端在详细说。

$.ajax({
    
     url: "test.html", context: document.body, success: function(){
    
    
    $(this).addClass("done");
}});

猜你喜欢

转载自blog.csdn.net/qq_39763246/article/details/113463186
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022