前端-js
1. 什么是JavaScript
1.1概述
JavaScript是一门世界上最流行的脚本语言
Java，JavaScript
1.2 历史
https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript他可以理解为是JavaScript的一个标准
2 快速入门
2.1 引入JavaScript
-
内部标签使用
<script>
//....
</script> -
外部引入
abc.js
//...rest.html
<script src="abc.js"></script>
2.2 基本语法入门
<script src="js/qg.js">
// 1.定义变量 变量类型 变量名 = 变量值；
var num=1;
// 2.条件控制
if (2>1){
alert("true");
}
</script>
2.3 数据类型
数值，文本，图形，音频，视频...
变量
var 王者荣耀="倔强青铜";
number
js不区分小数和整数，Number
123 //整数123
123.1 //浮点数123.1
1.23e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大
字符串
‘abc’ “abc”
布尔值
true，false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
！ 真即假，假即真
比较运算符
=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）
坚持不要使用==比较
须知：
-
NaN===NaN，这个与所有的数值都不相等，包括自己
-
只能通过isNaN（NaN）来判断这个数是否是NaN
浮点数问题：
console.log((1/3) === (1-2/3))
尽量避免使用浮点数进行运算，存在精度问题！
Math.abs(1/3-(1-2/3))<0.0000001
null和undefined
-
null 空
-
undefined 未定义
数组
Java的数组必须是相同类型的对象，JS中不需要这样
var arr=[1,2,3,4,5,'hello',null,true]
取数组下标：如果越界了，就会：undefined
对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要
var person={
name:"dddd",
age: 3,
tags: ['js','ddd','dada']
}
取对象的值
person.age
>3
2.4 严格检查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';//预防js的随意性导致产生的问题，必须写在js第一行
// 局部变量建议用let定义
let i=1;
// ES6 let
</script>
</head>
<body>
</body>
</html>
3. 数据类型
3.1 字符串
-
正常字符串我们使用''，""，包裹
-
注意转义字符 \
\' '
\n 换行
\t
\u4e2d \u#### unciode字符
"\x41" Ascll字符 -
多行字符串编写
//tab 上面 `
var msg=`hello world 你都看得开`; -
模板字符串
let name="ddd";
let age=3;
let mm=`${name},${age}` -
字符串长度
str.length
-
字符串的可变性，不可变
-
大小写转换
//注意这里是方法不是属性
student.toUpperCase()
student.toLowerCase() -
student.indexOf('t')
-
student.substring(1,6)
3.2 数组
Array可以包含任意的数据类型
-
长度
arr.length
注意：加入给arr.length赋值，数组大小就会发生变化,如果赋值过小，元素就会丢失
-
indexOf ,通过元素小标索引
字符串的"2"与数字 1是不同的
-
slice（） 截取数组Array的一部分，返回一个新数组
-
push(), pop() 尾部
push 压入到尾部
pop 弹出尾部的一个元素
-
unshift(),shift() 头部
-
排序 sort()
-
元素反转 reverse()
-
concat() 拼接，返回一个新的数组，原数组不变
-
连接符 join
打印拼接数组，使用特定的字符串连接
-
多维数组
数组：存储数据
3.3 对象
若干个键值对
var 对象名={
属性名: 属性值,
属性名: 属性值,
属性名: 属性值,
}
var person={
name:"ddd",
age: 3,
email: "yyyy4396@163.com",
score: 58,
}
JS中对象，{....}表示一个对象，键值对描述属性 xxxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
1.对象赋值
person.name="sss"
2.使用一个不存在的对象属性，不会报错！ undefined
3.动态的删减属性
delete person.name
4.动态的添加属性
person.属性名="属性值"
5.判断属性是否在这个对象中！ xxxx in xxxx
'age' in person
true
//继承
'toString' in person
true
6.判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
3.4 流程控制
if判断
var age =3;
if (age>3){
alert("haha");
}else {
alert("wao");
}
while循环
while(age<100){
age=age+1;
console.log(age)
}
do{
age=age+1;
console.log(age)
}while(age<100)
for循环
for(let i=0;i<100;i++){
console.log(age)
}
forEach循环
var age=[1,2,12,3,5,45,455,41,85];
age.forEach(function (value) {
console.log(value)
})
for...in
for (var nun in age){
if (num.hasOwnProperty(num)){
console.log("存在")
}
console.log(age[num])
}
3.5 Map和Set
Map：
//ES6
//学生的成绩，学生的名字
var map=new Map([['tom',50],['jaick',80]]);
var name = map.get('tom');
map.set('curry',99);
map.delete('tom');
console.log(name);
Set：无序不重复的集合
set.add(1);
set.delete(1);
console.log(set.has(3));
3.6 iterator
使用iterator来遍历map和set
遍历数组
通过for of / for in 下标
var arr=[3,4,5];
for (let x of arr){
console.log(x)
}
遍历map
var map=new Map([['tom',50],['jaick',80]]);
for (let x of map){
console.log(x)
}
遍历set
var set=new Set(['tom',50,'jaick',80]);
for (let x of set){
console.log(x)
}
4 函数
4.1 定义函数
绝对值函数
function abs(x){
if(x>=0){
return x;
} else{
return -x;
}
}
一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined
var abs=function(x){
if(x>=0){
return x;
} else{
return -x;
}
}
function(X){...}这是一个匿名内部类，但是可以把结果赋值给abs，通过abs就可以调用函数
4.2 变量的作用域
在js中，var定义变量实际是由作用域的
假设在函数体中声明，则在函数体外不可以使用
如果两个函数使用了相同的函数名，只要在函数内部，就不冲突
内部函数可以访问外部函数的成员，反之则不行
内部函数变量和外部函数的变量，重名！
函数查找变量从自身函数开始，由内向外查找。假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量
养成规范：所有的变量定义都放在函数的头部。
默认所有的全局变量，都会自动绑定在window对象下。
alter()这个函数本身也是一个window变量
实际上只有一个全局变量，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域没有找到，报错
由于所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，则会冲突->如果减少冲突
//唯一全局变量
var yyy={};
//定义全局变量
yyy.name='dsds';
yyy.add=function (a,b) {
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题
局部作用域 let
解决局部作用域冲突问题
function f() {
for (let i = 0; i <100 ; i++) {
console.log(i)
}
console.log(i+1);
}
建议使用let去定义局部作用域的变量
常量 const
const PI='3.14';//只读变量
console.log(PI);
4.3 方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
var yhh={
name: 'ddd',
birth: 2000,
//方法
age: function () {
//今年-出生年
var now=new Date().getFullYear();
return now-this.birth;
}
}
this是无法指向的，是默认指向调用它的那个对象：
apply控制this指向
5. 内部对象
5.1 Date
基本使用
var now =new Date();
now.getFullYear();
now.getMonth()
now.getDate();
now.getDay();//星期几
now.getHours();
now.getMinutes();
now.getSeconds();
now.getTime();//时间戳 全世界统一
5.2 JSON
早期，所有数据传输习惯是由XML文件！
-
JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式
-
简洁和清晰的层次结构是的JSON 成为理想的数据交换语言
-
易于人阅读和理解，同时也易于机器解析和生成，并有效地提升网络传输效率
在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON来表示；number,
格式：
-
对象都用 {}
-
数组都用 []
-
所有的键值对 都用 key:value
JSON和JS对象的转化
var user={
name:"sss",
age: 3,
sex: 'nan'
}
//对象转化为JSON字符串
var JSONuser=JSON.stringify(user);
//字符串转化为对象
var obj=JSON.parse('{"name":"sss", "age": 3, "sex": "nan"}')
JSON和JS对象的区别
var obj={a:'hello',b:'aaa'};
var json='{"a":"hello","b":"xxx"}'
5.3 Ajax
-
原生态的js写法， xhr异步请求
-
JQuery封装号的方法 $("#name").ajax("")
-
axios请求
6. 面向对象编程
什么是面向对象
javascript，java，c#... 面向对象 JavaScript有一些区别！
类：模板
对象：具体的实例
原型：
xiaoming._proto_=Student;
function Student(name) {
this.name=name;
}
//给Student新增一个方法
Student.prototype.hello=function () {
alert("hello")
}
class继承
class关键字，ES6引入
1.定义一个类，属性，方法
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert("hello")
}
}
var xiaoming=new Student("xiaoming");
2.继承
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert("hello")
}
}
class children extends Student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
myGrade(){
alert('xxs')
}
}
var xiaoming=new Student("xiaoming");
var xiaohu=new children("xiaoming");
7. 操作Bom对象
JS和浏览器关系
JS诞生就是为了能够让他在浏览器中运行！
BOM：浏览器对象模型
7.1 window
window代表浏览器窗口
window.innerHeight
235
window.innerWidth
1002
window.outerHeight
861
window.outerWidth
1016
7.2 navigator
封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36"
navigator.platform
"Win32"
大多数时候，我们不会使用navigator对象，因为会被人为修改
不建议使用这些属性来判断和编写代码
7.3 screen
代表屏幕尺寸
screen.width
1536
screen.height
864
7.4 location
代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/?tn=02003390_2_hao_pg"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('http://blog.kuangstudy.com/')
7.5 Document
代表当前的网页 ， HTML DOM文档树
document.title
"百度一下，你就知道"
document.title='ddd'
"ddd"
document.cookie
"BIDUPSID=C9A4370A9DA8520FF9A5550C4357AD27; PSTM=1606964447; BAIDUID=C9A4370A9DA8520F85C5B66E313D7425:FG=1; BD_UPN=12314753; COOKIE_SESSION=18_0_7_7_6_27_0_2_5_7_3_0_17_0_2_0_1627905511_0_1627905509%7C9%230_1_1624357199%7C1; BAIDUID_BFESS=4720DB5D08DD488487EEC713AC606957:FG=1; BDRCVFR[Ke8kQFs3CYT]=I3RFtBO5p3fThNLPWR8mvqV; BD_HOME=1; H_PS_PSSID=31254_26350; BDRCVFR[VBH4JnM-Vd0]=I3RFtBO5p3fThNLPWR8mvqV; BA_HECTOR=0h8h850ha0808hakh11ggs96k0q"
劫持cookie原理
<script src="aaa.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器-->
服务器端可以设置 cookie：httpOnly
7.6History
浏览器的历史记录
history.back()
history.forward()
8. 操作Dom对象
核心
浏览器网页就是一个DOM树形结构
-
更新：更新DOM节点
-
遍历DOM节点：得到Dom节点
-
删除：删除一个Dom节点
-
添加：添加一个新的节点
要操作一个DOM节点，就必须要获得Dom节点
获得dom节点
var h1=document.getElementsByTagName('h1')
var h2=document.getElementById('p1')
var h3=document.getElementsByClassName('p2')
var father=document.getElementsByClassName('father')
var childrens= father.children;//获取父节点下的所有子节点
// father.firstChild;
// father.lastChild;
之后尽量都是用JQuery():
更新节点
<div id="id1">
</div>
<script>
var id1=document.getElementById('id1')
</script>
id1.innerText='545' 修改文本的值
id1.innerHTML='<strong>123</strong>' 可以解析HTML文本标签
操作JS
id1.style.color='blue';
id1.style.fontSize='24px' //驼峰命名问题
id1.style.marginLeft='200px'
删除节点
步骤：先获取父节点，通过父节点删除自己
<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self= document.getElementById('p1');
var father=p1.parentElement;
father.removeChild(self)
//删除是一个动态的过程
father.removeChild(father.children[0])
</script>
删除多个节点的时候，Child是时刻变化的，要注意
插入节点
我们获得了某个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>
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');
//通过js创建一个新的节点
var newp =document.createElement('p');
newp.id='newp';
newp.innerText='hello.zzz';
list.append(newp);
//创建一个标签节点
var myScript=document.createElement('script');
myScript.setAttribute('type','text/javascript');
//创建一个style标签
var myStyle=document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{}';
document.getElementsByTagName('head')[0].appendChild(myStyle)
</script>
insertBefore
var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
//要包含的节点，newNode，targetNode
list.insertBefore(js,ee);
9. 操作表单（验证）
表单是什么 form DOM树
-
文本框 text
-
下拉框 <select>
-
单选框 radio
-
多选框 checkbox
-
隐藏域 hidden
-
密码框 password
表单的目的：提交信息
获得要提交的信息
<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="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只能取到当前的值
boy_radio.checked;//查看返回的结果是否为true，如果为true则被选中
girl_radio.value=true;
</script>
提交表单 md5加密密码，表单优化
<!-- md5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单绑定提交事件
onsubmit=绑定一个提交检测的函数 true，false
将这个结果返回给表单，使用onsubmit接收
-->
<form action="#" method="post" onsubmit="return a()">
<p>
<span>用户名：</span><input type="text" id="username"name="username">
</p>
<p>
<span>密码：</span><input type="password" id="input-password" >
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件-->
<button type="submit">提交</button>
</form>
<script>
function a() {
var uname=document.getElementById('username');
var pwd=document.getElementById('input-password');
var md5pwd=document.getElementById('md5-password');
md5pwd.value=md5(pwd.value);
//可以校验判断表单内容
return true;
}
</script>
10. jQuery
JavaScript
jQuery库，里面存在大量的JavaScript的函数
获取
选择器
<script>
//原生js，选择器少，不好记
//标签选择器
document.getElementsByTagNameNS();
//id选择器
document.getElementById();
//类选择器
document.getElementsByClassName();
//jQuery css中的选择器全部都能用
$('p').click() //标签选择器
$('#p').click() //id选择器
$('.class1').click() //类选择器
</script>
文档工具站https://jquery.cuishifeng.cn/
事件
鼠标事件，键盘事件，其他事件
操作DOM
$('#text-ul li[name=java]').text();//设置值
$('#text-ul li[name=java]').text('设置值');//获得值
$('#text-ul').html();//获得值
$('#text-ul').html('<strong>123</strong>');//设置值
css的操作
$('#text-ul li[name=ja]').css("color","red");
元素的显示和隐藏:本质 display: none;
$('#text-ul li[name=java]').show()
$('#text-ul li[name=java]').hide()
娱乐测试
$(window).width()
$(window).height()
浙公网安备 33010602011771号