JavaScript-02-面向对象编程

2021-02-22

5、面向对象编程

5.1、什么是面向对象

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

5.2、常用

1、原型：一个学生，一个小明

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

var xiaoming = {
    
    
    name: 'xiaoming'
};

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

// 小明的原型是 Student
xiaoming.__proto__ = Student;
console.log(xiaoming.run());// xiaomingcan run
console.log(Student.run()); // liucan run

xiaoming.__proto__ = Bird;
console.log(xiaoming.fly());  // xiaomingi can fly
console.log(xiaoming.run()); // 不能两个原型，这个就错误了

2、继承

// 继承
class Student {
    
    
    constructor(name) {
    
    
        this.name = name;
    }

    hello() {
    
    
        console.log("hello");
    }
}

var xiaoming = new Student("xiaoming");
xiaoming.hello();
class XiaoStudent extends Student {
    
    
    constructor(name, grade) {
    
    
        super(name);
        this.grade = grade;
    }

    myGrade() {
    
    
        console.log('我是小学生，年纪是' + this.grade);
    }
}

var xiaohong = new XiaoStudent("xiaohong", 22);
console.log(xiaohong.myGrade());

6、操作BOM对象（重点）

BOM：浏览器对象模型

6.1、window 浏览器窗口

window.alert(1);
window.innerHeight;
945
window.innerWidth;
150
window.outerHeight;
1066
window.outerWidth;
976

6.2、Navigator 封装了浏览器的信息

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

6.3、screen 屏幕尺寸分辨率？

screen.width
1920 px
screen.height
1080 px

6.4、location(重要)

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

6.5、document

（1）代表当前的页面，HTML，DOM文档结构

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

（2）获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dt>JavaSE</dt>
    <dt>JavaEE</dt>
</dl>
<script>
    var dl = document.getElementById("app");
</script>

（3）获取cookie

document.cookie
"BAIDUID=192949082FFD5308CCE99B045BAE8643:FG=1; ISSW=1; ORIGIN=2; ISSW=1; MCITY=-260%3A; BIDUPSID=192949082FFD5308CCE99B045BAE8643; PSTM=1613784366; BD_UPN=12314753; BAIDUID_BFESS=B7E83C9A84962E4D2B6A467B7A06920D:FG=1; __yjsv5_shitong=1.0_7_a5b51c7710a1fe6d521dce4f97660b2ac5ed_300_1613973751974_117.141.144.112_dd266c21; BD_HOME=1; H_PS_PSSID=33425_33507_33403_33272_31254_33594_33392_33337_26350; BA_HECTOR=8g052gah8la5a08ge41g36moo0q"

（4）劫持cookie

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

服务器端可以设置cookie:httpOnly

6.6、history

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

7、操作DOM对象

核心

DOM：文档对象模型，浏览器网页就是一个DOM树形结构！

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

7.1、获得节点

<div id="father">
    <h1>标题</h1>
    <p id="p1"> p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById();
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById("father");
    var ch = father.children;
    console.log(ch.firstChild);
    console.log(ch.lastChild);
</script>

7.2、更新节点

（1）操作文本

<div id="id1"></div>
<div id="id2"></div>
<script>
    var id1 = document.getElementById("id1");
    id1.innerText = "设置了文本内容";

    // 解析HTML文档
    var id2 = document.getElementById("id2");
    id2.innerHTML = "<h1> 大标题<\h1>";
</script>

（2）操作css

id1.style.color = "red"
"red"
id1.style.fontSize = "30px"
"30px"
id1.style.padding = "2em"
"2em"

7.3、删除节点

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

var self = document.getElementById("p1");
var father = self.parentElement;
// 删除是一个动态过程
father.removeChild(self);
// 虽然有 3 个孩子节点
father.removeChild(father.children[0]); // 只有 0 - 2
father.removeChild(father.children[1]); // 只有 0 - 1
father.removeChild(father.children[2]); // 只有 0

7.4、插入节点

1、插入

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

<script>
    // 获取节点
    var js = document.getElementById("js");
    var list = document.getElementById("list");

</script>

2、创建一个节点

// 通过js创建一个节点
var new_p = document.createElement('p'); // 创建一个 p 标签
new_p.id = 'n';
new_p.innerText = "这是新插入的";

list.appendChild(new_p);

3、创建一个标签

// 创建一个style标签
var myStyle = document.createElement('style');
myStyle.setAttribute("type", 'text/css');
myStyle.innerHTML = "body{background-color: chartreuse}"; // 背景是绿色的

document.getElementsByTagName('head')[0].appendChild(myStyle);

4、创建一个标签 script脚本

var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
myScript.innerHTML = "alert('hh')";
list.appendChild(myScript);

5、插入到节点之前

// 插入节点
var js = document.getElementById("js");
var ee = document.getElementById("ee");
var list = document.getElementById("list");
// insertBefore(newNode, targetNode); js在ee前面
list.insertBefore(js, ee);

8、操作表单（验证）

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

8.1、获取表单信息

<form action="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>

</form>
<script>
    var input_text = document.getElementById("username");
    console.log(input_text.value);
    input_text.value = "123";
    console.log(input_text.value);

    var boy_radio = document.getElementById("boy");
    var girl_radio = document.getElementById("girl");
    console.log(boy_radio.checked);
    girl_radio.checked = true; // 选上女的

</script>

8.2、提交表单

1、先绑定事件

2、触发这个函数

<form action="#" method="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
    <button type="button" onclick="btn()">提交</button>
</form>
<script> 
    function btn() {
     
     
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        console.log(username.value);
        console.log(password.value);

        function md5(value) {
     
     
            return Math.ceil(value / 20) + 2;
        }
        // 进行加密算法
        password.value = md5(password.value);
        console.log("进行加密算法");
        console.log(username.value);
        console.log(password.value);
        // 最后要return true
        return true;
    }
</script>

9、jQuery

9.1、获取jQuery

有很多大量的JavaScript函数

jquery CDN

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

官网下载

公式：$(seletor).action()

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--网址引入-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>-->
<script src="lib/jquery-3.5.1.js"></script>
<body>
<!--公式！
$(seletor).action()
-->
<a href="" id="test-jquery">点击我</a>
<script>
    document.getElementById("id");
    // CSS选择器
    $('#test-jquery').click(function () {
     
     
        alert("hello");
    })
</script>
</body>
</html>

9.2、选择器

// 原生
document.getElementById('id1');
document.getElementsByTagName('body');
document.getElementsByClassName('class1');

// jQuery
$('p').click(); // 标签选择器
$('#id1').click(); // id 选择器
$('.class1').click(); // class 选择器

9.3、事件

1、鼠标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.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 + '\n' + 'y:' + e.pageY);
        })
    })
</script>
</body>
</html>

2、键盘

9.4、操作DOM

1、文本节点

<ul id="test-ul">
    <li class="js"> js</li>
    <li name="python">python</li>
    <button value="button" onclick='bnt()'>点击我</button>
</ul>

var python_name = $('#test-ul li[name=python]').textContent;
$('#test-ul li[class=js]').textContent = 'new_js';
var js_name = $('#test-ul li[class=js]').textContent;

console.log(python_name);
console.log(js_name);

2、CSS操作

$('#test-ul li[name=python]').css({
    
    'color':'red'});

3、显示与隐藏

// 显示与隐藏
$('#test-ul li[name=python]').show();
$('#test-ul li[class=js]').hide();

4、异步请求

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

JavaScript-02-面向对象编程

JavaScript-02-面向对象编程

5、面向对象编程

5.1、什么是面向对象

5.2、常用

6、操作BOM对象（重点）

6.1、window 浏览器窗口

6.2、Navigator 封装了浏览器的信息

6.3、screen 屏幕尺寸 分辨率？

6.4、location(重要)

6.6、history

7、操作DOM对象

7.1、获得节点

7.2、更新节点

7.3、删除节点

7.4、插入节点

8、操作表单（验证）

8.1、获取表单信息

8.2、提交表单

9、jQuery

9.1、获取jQuery

9.2、选择器

9.3、事件

9.4、操作DOM

猜你喜欢

6.3、screen 屏幕尺寸分辨率？