狂神~面向对象编程学习笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44758926/article/details/115586709

面向对象编程

什么是面向对象

JS,JAVA, C#…面向对象：JS有些许的区别

类：模板
对象：具体的实例

在JS中这个需要换一下思路

原型继承

var Student = {
    name : "kele",
    age: 3,
    run : function () {
        console.log(this.name + "run...");
    }
};

var xiaoming = {
    name:"xiaoming"
};

//原型对象
xiaoming.__proto__ = Student;

var Bird = {
    fly : function () {
        console.log(this.name + "fly...");
    }
}

xiaoming.__proto__ = Bird;

class 继承

class关键字是在ES6引入的

定义一个类，属性，方法

class Studetn{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert("hello");
    }
}
var xiaoming = new Studetn("xiaoming");
var xiaohong = new Studetn("xiaohong");
xiaoming.hello();//hello

继承

class Studetn{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert("hello");
    }
}

class XiaoStudent extends Studetn{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert("我是一个小学生")
    }
}

var xiaoming = new Studetn("xiaoming");
var xiaohong = new XiaoStudent("xiaohong");

本质：查看对象原型

在这里插入图片描述

原型链

__ proto __：

操作BOM对象

浏览器介绍

JS和浏览器的关系？

JS的诞生就是为了能够在浏览器上运行

BOM:浏览器对象模型

IE 6-11
Chrome
Safari
FireFox
Opera

Window对象

window代表浏览器窗口

window.innerHeight
559
window.innerWidth
1053
window.outerHeight
1047
window.outerWidth
1069
//获得浏览器窗口的宽高

Navigator

Navigator,封装了浏览器的信息

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

大多是时候，我们不会使用navigator对象，因为会被人为的修改

不建议使用这些属性来判断和编写代码

screen

代表屏幕的尺寸

screen.width
1920
screen.height
1080

location(重要)

location代表当前页面的URL信息

host: "localhost:63342"
href: "http://localhost:63342/JS/JavaScript/lesson02/7.class%E7%BB%A7%E6%89%BF.html?_ijt=fsje5llhtfd6tsju7au9uf9mng"
protocol: "http:"//协议
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('http://www.baidu.com')

document

document:代表当前的页面

document.title='kele'
"kele"
document.title
"百度一下，你就知道"

获取具体的文档数节点

<dl id="app">
    <dt>java</dt>
    <dd>javase</dd>
    <dd>javaee</dd>
</dl>

<script>
    var dl = document.getElementById('app');
</script>

获取cookie

document.cookie
"BIDUPSID=7C0747F93044899D522D51A6D6A87674; PSTM=1539345377; BAIDUID=7C0747F93044899D522D51A6D6A87674:SL=0:NR=10:FG=1; BD_UPN=12314753; hide_hotsearch=1; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=32810_1429_33048_33059_32971_32705_32962_26350; BD_HOME=1; delPer=0; BD_CK_SAM=1; PSINO=2; Hm_lvt_aec699bb6442ba076c8981c6dc490771=1604745335,1604801221,1604917956,1605058879; Hm_lpvt_aec699bb6442ba076c8981c6dc490771=1605058879; BDRCVFR[feWj1Vr5u3D]=I67x6TjHwwYf0; shifen[200817726366_70032]=1605078500; BCLID=10483173971202792353; BDSFRCVID=SiAOJeC62wyVKw6rmkECrglFneO1tlJTH6aoVdpaP2Ev-atZLIQYEG0PVU8g0Ku-aYQPogKKBeOTHn0F_2uxOjjg8UtVJeC6EG0Ptf8g0f5; H_BDCLCKID_SF=JJPfoK_XtCvJfI_kMPn_bnIJhUTMetJyaR3gBljvWJ5TMCo62qjv5TKXhfR43bjMagcX0lAhbnRkShPC-tn4bb8_0a54-DrKbNQraxjw3l02VMQae-t2ynQD-JrIQPRMW23G0l7mWnu2sxA45J7cM4IseboJLfT-0bc4KKJxbnLWeIJIjj6jK4JKDG8DJ5JP; COOKIE_SESSION=17729_2_8_8_1_1_0_0_8_1_0_0_0_157256_12_7_1605078506_1605078501_1605078494%7C9%23157252_2355_1605078494%7C9; BAIDUID_BFESS=DBF29B1C624E40D74C333687578CAA7A:FG=1; H_PS_645EC=4610zG2kwHVCxn7ZOG4PNlkzcdTux8Id86pHkIo6SOH6YHT%2BrC35DvMY7Dh%2B5Qenhi3z; BA_HECTOR=2g8h248h012g0kbi111fqn4190o; sug=3; sugstore=0; ORIGIN=0; bdime=0"

劫持cookie的原理

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

服务器端可以设置copkie:httpOnly

history （不建议使用）

history代表浏览器的历史记录

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

操作DOM对象

DOM:文档对象模型

核心

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

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

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

获得DOM节点

//对应CSS的选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children;//获取父节点下的所有子节点

/*father.firstChild
    father.lastChild*/

这是原生代码，之后我们尽量都是用jQuery

更新节点

<div id="id1">

</div>

<script>
    var id1 = document.getElementById('id1');
</script>

操作文本

id1.innerText = 'kele'修改文本的值
id1.innerHTML= '<strong>123</strong>'

操作JS

id1.style.color = 'red'//属性使用字符串包裹
"red"
id1.style.fontSize = '50px'//驼峰命名问题
"50px"
id1.style.padding = '1em'
"1em"

删除节点

删除节点的步骤

先获取父节点
通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>

</div>
<script>
    var self = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(p1);
    
    //删除是一个动态的过程
    father.removeChild(father.chideren[0]);
    father.removeChild(father.chideren[1]);
    father.removeChild(father.chideren[2]);
    //删除失败，因为第一个元素被删除后就没有第三个元素了
</script>

==注意：==删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！

插入节点

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

追加操作

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaEE</p>
    <p id="ee">JavaSE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js  = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js)//追加
</script>

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

<script>
    var js  = document.getElementById('js');
    var list = document.getElementById('list');

    var newP = document.createElement('p');//创建一个p标签
    newP.id= 'newP';
    newP.innerText = 'Hello,Kele';
    //创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript');

    //创建一个style标签
    var myStyle = document.createElement('style');//创建一个空的Style标签
    myStyle.setAttribute('type', 'text/css');
    myStyle.innerHTML = 'body{background-color:pink}';//设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle);


</script>

insertBefore

插入到前面

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点insertBefore（newNode,targetNote）
list.insertBefore(js,ee);

操作表单

表单是什么

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

获得要提交的信息

表单的目的：提交信息

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>

    <!--多选框的值就是定义好的value值-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" 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;
    //修改输入框的值
    input_text.value = '123';

    //对于单选框多选框等等固定的值，boy_radio.value只能取到当前的值
    girl_radio.checked;//查看返回的结果是否被选中，如果为true，就是被选中
    boy_radio.checked = true;//赋值
</script>

提交表单

MD5加密密码

MD5链接：<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<!--
表单绑定提交事件
onsubmit = 绑定一个提交检测的函数
将结果返回给表单，使用onsubmit接收
-->
<form action="#" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="input-password">
    </p>
    <p>
        <input type="hidden" name="password" id="md5-password">
    </p>
    <!--绑定事件-->
    <button type="submit">提交</button>
</form>

<script>
    function aaa() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        console.log(uname.value);

        md5pwd.value = md5(pwd.value);
        //可以检验判断表单的内容，true就是通过提交,false就是阻止提交
        return true;
    }
</script>

jQuery

javascript和jQuery库

jQuery库：里面存在大量的JS函数

获取jQuery

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

        <!--
公式： $(selector).action()
-->
        <a href="" id="text-jquery">dainwo</a>
        <script>
            $('#text-jquery').click(function () {
                alert('hello,jquery')
            })
        </script>
    </body>
</html>

选择器

//原生JS，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//class
document.getElementsByClassName();

//jquery css中的选择器他全部都能用
$('p').click();//标签
$('#id1').click();//id选择器
$('.class1').click();//类选择器

文档工具站：https://jquery.cuishifeng.cn/index.html

事件

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

$('.class1').mousedown();//按下
$('.class1').mousemove();//移动

获取鼠标的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        #divMove {
            width: 500px;
            height: 500px;
            border: 1px solid pink;
        }
    </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>

操作DOM元素

节点文本操作

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

</head>
<body>

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

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

</body>
</html>

css操作

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

元素的显示和隐藏

元素隐藏的本质：display:none

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

ajax();