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函数
<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")
}
});