前言

本文为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全栈学习技术清单~

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/154219.html

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

JavaScript基础

前言

六、面向对象编程

1.什么是面向对象

2.class继承

七、操作BOM对象（重点）

1.浏览器介绍

2.window

3.Navigator

4.screen

5.location(重要)

6.document

7.history

八、操作DOM对象（重点）

1.核心

2.获得Dom节点

3.更新节点

4.删除节点

5.插入节点

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

九、操作表单（验证）

1.表单是什么：form DOM树

2.获得要提交的信息

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

十、jQuery

1.什么是jQuery

2.获取jquery

3.使用jquery

4.选择器

5.事件

6.操作DOM

后记

发表回复

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

JavaScript基础

前言

六、面向对象编程

1.什么是面向对象

2.class继承

七、操作BOM对象（重点）

1.浏览器介绍

2.window

3.Navigator

4.screen

5.location(重要)

6.document

7.history

八、操作DOM对象（重点）

1.核心

2.获得Dom节点

3.更新节点

4.删除节点

5.插入节点

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

九、操作表单（验证）

1.表单是什么：form DOM树

2.获得要提交的信息

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

十、jQuery

1.什么是jQuery

2.获取jquery

3.使用jquery

4.选择器

5.事件

6.操作DOM

后记

相关推荐

发表回复

分享到: