【JavaScript详解】一文掌握JavaScript基础知识（下）

小新要变强

已于 2022-10-20 19:51:13 修改

阅读量1.4k

点赞数 1

分类专栏： JavaWeb 文章标签： javascript 前端

于 2022-09-29 08:00:00 首次发布

本文链接：https://blog.csdn.net/qq_42146402/article/details/127080840

版权

JavaWeb 专栏收录该内容

22 篇文章 7 订阅

订阅专栏

前言

本文为JavaScript基础知识与语法介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
本文上接：【JavaScript详解】一文掌握JavaScript基础知识（上）

六、面向对象编程

1.什么是面向对象

javascript、java、c#。。。都是面向对象的，javascript与其他是有区别的，类相当于javascript中的模板，对象相当于javascript中的具体的实例

javascript中的原型：

var user = {
    name: "ding",
    age: "3",
    run: function () {
        console.log(this.name + "run.....")
    }
};
// 原型对象
var xiaoming = {
    name: "xiaoming"
};
var Bird = {
    fly: function () {
        console.log(this.name+ "fly....")
    }
}
// 小明的原型 是user
xiaoming.__proto__ = user;

2.class继承

class关键字，是在ES6引入的

class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}

function Student(name) {
    this.name = name;
}
// 给student新增一个方法
Student.prototype.hello = function () {
    alert('Hello')
}
//ES6之后====
//定义一个学生的类
class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('hello')
    }
}
class XiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    mygrade() {
        alert('我是一名小学生')
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");

七、操作BOM对象（重点）

1.浏览器介绍

JavaScript和游览器的关系：javascript诞生就是为了能够让他在游览器中运行
BOM：及游览器对象模型，包括IE 6~11，Chrome，Safari，FireFox，Opera
第三方浏览器：QQ游览器，360

2.window

window 代表游览器窗口

window.alert(1);
window.innerHeight;
window.innerwidth;
window.outerHeight;
window.outerWidth;
//大家可以调整游览器窗口

3.Navigator

Navigator，封装了游览器的信息

navigator.appName;
navigator.appVersioin;
navigator.userAgent;
navigator.platform;

大多数时候，我们不会使用navigator对象，因为会被人为修改~
不建议使用这些属性来判断和编写代码

4.screen

screen.width
screen.height
//代表屏幕尺寸

5.location(重要)

location 代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https"
reloadLf reload() //刷新网页
// 设置新的地址
location.assign('新的网站')

6.document

document 当前的页面，HTML DOM文档树

document.title
document.title='ding'

获取具体的文档树节点

<body>
<dl id="app">
    <dt>java</dt>
    <dd>python</dd>
    <dd>ding</dd>
</dl>
</body>
<script>
    var dl = document.getElementById('app');
</script>

获取cookie

document.cookie;

劫持cookie原理

<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器 -->

服务器端可以设置cookie：httpOnly

7.history

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

八、操作DOM对象（重点）

1.核心

浏览器网页就是一个DOM树形结构！

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

要操作一个Dom节点，就必须先获得这个Dom节点

2.获得Dom节点

//对应 css选择器
var h1 = doucment.getElementByTagName('h1');
var p1 = doucment.getElementById('p1');
var p2 = doucment.getElementByClassName('p2');
var father = doucment.getElementById('father');
//获取父节点下所有的子节点
var childrens = father.children;
//father.firstChild
//father.lastChild

这是原生代码，之后会使用jQuery();

3.更新节点

<div id='id1'>
    <script>
        var id1 = document.getElementById('id1');
        id1.innerHTML('123')
        id1.style.color = 'red';//属性使用''包裹
        id1.style.fontSize = '200px';//- 转驼峰命名
        id1.style.padding = '2em';
    </script>
</div>

4.删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己
注意：删除多个节点的时候，children时再时刻变化的，删除节点的时候一定要注意！

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p2 class="p2">p2</p2>
</div>
<script>
    var self = document.get ElementById('p1');
    var father = p1.parentElement;
    father.removeChild(self)
    //删除时一个动态的过程
    father.removeChild(father.children[0])
</script>

5.插入节点

我们获得了某哦个DOM节点，假设DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素，我们就不能这样做了，因为会覆盖。

追加节点

<p id="js">biancheng</p>
<div id="list">
<p id="se">javascript</p>
<p id="ee">java</p>
<p id="py">python</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js); //追加到后面
</script>

6.创建一个新的标签，实现插入

var js = document.getElementById('js');   //已经存在的节点
var list = document.getElementById('list');
// 通过js 创建一个新的节点
var newp = document.createElement('p'); //创建一个P标签
newp.id = 'newp';
newp.innerText = 'hello,ding';
list.appendChild(newp)

// 可以创建一个Style标签
var mystyle= document.createElement('style');
mystyle.setAttribute('type','text/css');
// 设置标签内容
mystyle.innerHTML = 'body{background-color: #ffeb3b}'; 
document.getElementsByTagName('head')[0].appendChild(mystyle)
```javascript
var ee = document.getElementById('ee');
var py = document.getElementById('py');
 var list = document.getElementById('list');
 //要包含的节点，insertBefore（new，target）
list.insertBefore(py,ee);

九、操作表单（验证）

1.表单是什么：form DOM树

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

表单的目的：提交信息

2.获得要提交的信息

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <!--多选框的值，就是定义好的-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="boy" id="boy"> 男
        <input type="radio" name="sex" value="girl" id="girl"> 女
    </p>
</form>
<script>
    var input_text = document.getElementById('username')
    var boy_radio = document.getElementById('boy')
    var girl_radio = document.getElementById('girl')
    //得到输入框的值
    //修改输入框的值
    input_text.value = '123'
    //对于单选框，多选框等等固定的值，boy_radio.value 只能取到当前的值
    boy_radio.checked; //查看返回的结果，是否为true，如果为true 则这个被选中
    girl_radio.checked = true;
</script>

3.提交表单，md5加密密码，表单优化

<!--
表单绑定提交事件
onsubmit= 绑定一个提交检测的函数
true,false
讲这个结果返回给表单，使用onsubmit接收！
-->
<form action="#" method="post" onsubmit="return aa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <!--绑定事件 oncliek 点击-->
    <button type="submit" onclick="aa()">提交</button>
</form>
<script>
    function aa() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        //console.log(uname.value);
        // MD5 算法
        //pwd.value = md5(pwd.value);
        //console.log(pwd.value)
        md5pwd.value =md5(pwd.value)
        //可以检测判断表单内容，TRUE就是提交，false阻止提交
        return true;
    }
</script>

十、jQuery

1.什么是jQuery

jquery库：里面存在大量的javascript函数

2.获取jquery

https://www.bootcdn.cn/jquery/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
</body>
</html>

3.使用jquery

<a href="" id="test-jquery">点我</a>
<script>
    //选择器就是css选择器
    $('#test-jquery').click(function () {
        alert('hello,jquery')
    })
</script>

4.选择器

    //原生态js，选择器少，麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();
    //jquery css 中的选择器他全部都能用
    $('p').click(); //标签选择器
    $('#id').click(); //id选择器
    $('.class1').click(); //class选择器
    公式：
    $(selector).action()

5.事件

鼠标事件
键盘事件
其他事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!-- 要求：获取鼠标当前的一个坐标-->
mouse:  <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>
    //当网页元素加载完毕之后，响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
                $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
    })
</script>
</body>
</html>

6.操作DOM

节点文本操作

$('#test-ul li[name=python]').text();    //获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();    //获得值
$('#test-ul').html('<strong>123</strong>');  //设置值

css的操作

$('#test-ul li[name=python]').css("color","red")

元素的显示和隐藏,本质display：none

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

后记

Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~