文章目录
3.5 内部对象
typeof 123
> "number"
typeof '123'
> "string"
typeof true
> "boolean"
typeof NaN
> "number"
typeof []
> "object"
typeof {}
> "object"
typeof Math.abs
> "function"
typeof undefined
> "undefined"
3.5.1 Date
- 基本使用
var now = new Date(); // Date Thu Feb 18 2021 18:13:23 GMT+0800 (中国标准时间)
now.getFullYear(); // 年
now.getMonth(); // 月 0 ~ 11代表月
now.getDate(); // 日
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒
now.getTime(); // 时间戳 全世界统一 从1970.01.01 00:00:00到现在的毫秒数
new Date(1613643203080); // 时间戳转换为时间
- 转换
now
> Date Thu Feb 18 2021 18:13:23 GMT+0800 (中国标准时间)
now.getTime();
> 1613643203080
new Date(1613643203080)
> Date Thu Feb 18 2021 18:13:23 GMT+0800 (中国标准时间)
now.toLocaleString // 注意,调用是一个方法,不是一个属性
> function toLocaleString()
now.toLocaleString()
> "2021/2/18 下午6:13:23"
now.toGMTString()
> "Thu, 18 Feb 2021 10:13:23 GMT"
3.5.2 JSON
-
JSON是什么
早期,所有数据传输习惯使用XML文件!JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
在JavaScript中一切皆为对象,任何js支持的类型都可以用JSON来表示:number、
-
格式
- 对象都用{}
- 数组都用[]
- 所有的键值对都用 key: value
-
JSON字符串 和 JS对象 的转化
var user = {
name: 'qinjiang',
age: 3,
sex: '男'
}
//对象转化为JSON字符串 "{\"name\":\"qinjiang\",\"age\":3,\"sex\":\"男\"}"
var jsonUser = JSON.stringify(user);
//json字符串转化为对象 Object { name: "qinjiang", age: 3, sex: "男" }
var obj = JSON.parse(jsonUser);
- JSON 和 JS对象 的区别
var obj = {a: "hello", b: "hellob"};
var json = '{' "a": "hello", "b": "hellob" '}'
3.5.3 AJax
原生的js写法 xhr异常请求,jQuey封装好的方法 $("#name").ajax("")
axios请求
3.6 面向对象编程
3.6.1 什么是面向对象
原型对象
javascript、java、c#…面向对象;Javascript有些区别,在JavaScript中类和对象需要换一下思维方式
-
类:模板
-
对象:具体的实例
原型
var user = {
name: 'qinjiang',
age: 3,
run: function (){
console.log(this.name + "run...");
}
}
var xiaoming = {
name: "xiaoming"
}
// 小明的原型对象是user
xiaoming.__proto__ = user;
function Student(name){
this.name = name;
}
//给student新增一个方法,老方法
Student.prototype.hello = function (){
alert('Hello');
}
class继承
- 定义一个类,属性、方法
class关键字,是在ES6引入的
//ES6之后,定义一个学生的类
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
var xiaoming = new Student("xiaoming");
- 继承
class child extends Student{
constructor(name, grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('i am child');
}
}
var xiaohong = new child("xiaohong", 1);
原型链
_ _ proto _ _:
3.7 操作Bom对象(重点)
浏览器介绍
JavaScript和浏览器的关系:JavaScript的诞生就是为了能够让他在浏览器中运行
BOM:浏览器对象模型
-
IE 6~11
-
Chrome
-
Safari
-
FireFox Linux
-
Opera
三方
- QQ浏览器
- 360浏览器
window
window代表浏览器窗口
window.innerHeight // 可以通过调整浏览器窗口改变
> 115
window.innerWidth
> 1920
window.outerHeight
> 1056
window.outerWidth
> 1936
window.alert(1)
> undefined
Navigator(不建议使用)
代表封装了浏览器的信息
navigator.appName
> "Netscape"
navigator.appVersion
> "5.0 (Windows)"
navigator.userAgent
> "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:85.0) Gecko/20100101 Firefox/85.0"
navigator.platform
> "Win32"
大多数时候,我们不会使用 navigator
对象,因为会被人为修改,不建议使用这些属性来判断和编写代码
screen
代表屏膜尺寸
screen.width
> 1920 px
screen.height
> 1080 px
location(重要)
代表当前页面的URL的信息
location
> host: "www.baidu.com" // 主机
> href: "https://www.baidu.com/index.php?tn=monline_3_dg" // 当前指向的位置
> protocol: "https:" // 协议
> reload: reload() // 方法:刷新网页
location.assign('https://blog.kuangstudy.com') // 设置新地址
document
代表当前的页面,HTML、DOM文档树
document.title
> "百度一下,你就知道"
document.title = "狂神说"
> "狂神说"
- 获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
'use strict'
let dl = document.getElementById('app');
</script>
dl
> <dl id="app">
- 获取cookie
document.cookie
> "BAIDUID=FFECCFCF53F44EB1AAAAE67B7740F577:FG=1; BIDUPSID=FFECCFCF53F44EB1AAAAE67B7740F577; PSTM=1590735923; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; H_PS_PSSID=33425_33515_33438_33344_33570_33318_33265; BDRCVFR[Fc9oatPmwxn]=aeXf-1x8UdYcs; delPer=0; BD_CK_SAM=1; PSINO=1; BD_HOME=1; BD_UPN=13314752; sugstore=1; BA_HECTOR=ag24ah8521ah05aljf1g2sl180q"
劫持cookie原理
<script src="aa.js"></script> // www.taobao.com
<!--恶意人员获取你的cookie上传到他的服务器-->
服务器端可以设置cookie:httpOnly
history(不建议使用)
代表浏览器的历史记录
historry.back() // 前进
history.forward() // 后退
3.8 操作Dom对象(重点)
DOM:文档对象模型
核心
浏览器网页就是一个Dom树形结构
-
更新:更新Dom节点
-
遍历Dom节点:得到Dom节点
-
删除:删除一个Dom节点
-
添加:添加一个新的Dom节点
要操作一个Dom节点,就必须要先获得这个Dom节点
获得Dom节点
<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('p1');
var p2 = document.getElementsByClassName('h1');
var father = document.getElementById('father');
var child = father.children; // 获取父节点下的所有子节点
father.firstChild
father.lastChild
</script>
这是原生代码,之后我们尽量使用jQuery();
更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
// 操作文本
id1.innerText = '123' // 修改文本的值
> "123"
id1.innerHTML = '<strong>123</strong>' // 可以解析HTML标签
> "<strong>123</strong>"
//操作JS,注意下划线转驼峰命名问题
id1.style.color = 'red'; // 设置颜色
> "red"
id1.style.fontSize = '200px' // 字体大小
> "200px"
id1.style.padding = '2em' // 缩进
> "2em"
删除节点
删除结点的步骤:先获取父节点,在通过父节点删除自己(只有标记为id选择器的节点才可以删除)
<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.children[0]);
</script>
注意:删除多个节点的时候,children是在时刻变换的,删除节点的时候一定要注意
插入节点
我们获得了某个Dom节点,假设这个Dom节点是空的,可以通过innerHTML就可以增加一个元素;但是若这个Dom节点已经存在元素,需要采取其他方法,因为会覆盖原始内容
- 追加
<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>
let
js = document.getElementById('js');
list = document.getElementById('list');
list.appendChild(js); //追加到后面
</script>
- 创建一个新的标签实现插入
<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>
let
js = document.getElementById('js'); // 已经存在的节点
list = document.getElementById('list');
//通过JS创建一个新节点
let newP = document.createElement('p'); //创建一个p标签
newP.id = 'newP'; // 等价于newP.setAttribute('id', 'newP');
newP.innerText = "Hello, Kuangshen";
list.appendChild(newP);
//创建一个标签节点(通过这个属性,可以设置任意的值)
let myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
list.appendChild(myScript);
//创建一个Style标签
let myStyle = document.createElement('style'); // 创建一个空style标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = 'body{background-color: chartreuse}'; // 设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>
3.9 操作表单
表单是什么 form Dom树
- 文本框 text
- 下拉框
- 单选框 radion
- 多选框 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="women" id="girl">女
</p>
</form>
<script>
let input_text = document.getElementById('username');
let boy = document.getElementById('boy');
let girl = document.getElementById('girl');
//修改输入框的值
input_text.value = '123'
//对于单选框、多选框固定的值,boy.value只能取到当前的值
boy.checked; //查看是否被选中,被选中为true
</script>
提交表单:md5假日密码、表单优化
<body>
<!--表单绑定提交事件
οnsubmit=绑定一个提交检测的函数,true、false
将这个结果返回个表单,使用onsubmit接收-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名:</span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span> <input type="password" id="input-password" name="input-password">
</p>
<input type="hidden" id="md5-password" name="md5-password">
<!--绑定事件-->
<button type="submit">提交</button>
</form>
<script>
function aaa(){
alert('跳转页面');
let username = document.getElementById('username');
let password = document.getElementById('input-password');
let md5pwd = document.getElementById('md5-password')
console.log(username.value);
//MD5算法
md5pwd.value = md5(password.value);
//password.value = md5(password);
console.log(md5pwd.value);
//可以较验判断表单内容,true就是通过提交,false就是阻止提交
return true;
}
</script>
3.10 jQuery
JavaScript
jQuery库:里面存在大量的JavaScript函数
获取jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<!--jQery公式:$(selector).action()-->
<a href="" id="test-jqery">点我</a>
<script>
document.getElementById('id');
id.click();
//选择器selector就是css的选择器
$('#test-jqery').click(function (){
//尽量使用单引号
alert('hello jqery');
})
</script>
</body>
</html>
$(selector).action(); // 公式
选择器
<script>
//原生js选择器少,麻烦不好记
document.getElementsByTagName(); //标签
document.getElementById(); //id
document.getElementsByClassName(); //类
//jQuery选择器
$('p').click(); //标签
$('#id1').click(); //id
$('.class1').click(); //类
</script>
文档工具站: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>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求:获取鼠标当前的坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">在这里移动鼠标试试</div>
<script>
// 当网页元素加载完毕之后,响应事件
// $(document).ready(function (){})
//简写
$(function () {
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x: ' + e.pageX + 'y: ' + e.pageY);
})
});
</script>
</body>
</html>
操作Dom元素
- 节点文本操作
<script>
//document.getElementById('') 原先代码
$('#test-ul li[name=python]').text(); //获得值
$('#test-ul li[name=python]').text('设置值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值
</script>
- css的操作
$('#test-ul li[name=python]').css("color", "red");
- 元素的显示和隐藏
$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()
本质:display: none
- 娱乐测试
$(window).width()
$(window).height()
$(document).width()
$(document).height()
$('#test-ul li[name=python]').toggle()
- 未来在后端要学习ajax();
$('#from').ajax()
文档工具站:ajax中文文档
看源码:源码之家
小技巧
- 如何巩固JS(看jQery源码,看游戏源码)
- 巩固HTML、CSS(扒网站,全部down下来,然后对应修改效果)