JavaScript
1.什么是JavaScript
JavaScript是一门脚本语言
js很重要,比css,html难,但是要学好,不让vue框架也不懂
js教程视频:https://www.bilibili.com/video/BV1JJ41177di
2.快速入门
2.1、js引入
1.内部引入
<script>
alert('Hello,World!');
</script>
2.外部引入
<script src="js/hello.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个js程序</title>
<!-- <script>标签里写js代码-->
<!-- <script>-->
<!-- alert('Hello,World!');-->
<!-- </script>-->
<!--外部引入 script必须成对
不用显示定义 type
-->
<script src="js/hello.js"></script>
</head>
<body>
<!--这里也可以写-->
</body>
</html>
2.2、基本语法入门
<script>
// 1.定义变量 变量类型 变量名=变量值
var score=1;
//2.条件控制
if(score>60&&score<70)
{
alert("60-70");
}
else if(score>70&&score<80)
{
alert("70-80")
}else
{
alert("other")
}
//console.log(score)在浏览器控制台打印变量
/*
* 多行注释
* */
</script>
浏览器调试:
2.3、数据类型
数值,文本,图像,音频,视频。。。
变量:定义用var,变量名不以数字开头
number
123//整数
123.1//小数
1.23e3//科学计数
NaN//非数
Infinity//无穷大
js不区分小数整数
字符串:‘abc’,“ABC”
布尔类型:ture,false
逻辑运算:与或非
比较运算符:=赋值,==等于(类型不一样也可以),===绝对等于(类型一样,值一样)
须知:NaN与所有数值不相同,包括自己
用isNaN()判断
浮点数精度问题:尽量不使用浮点数运算
null和undefined:空和未定义
数组:[] 一些相同的类型的元素,但是js不需要, 越界会显示undefined
对象:{},类似结构体,每个属性使用,隔开,最后一个不需要。访问元素用.
2.4、严格检查模式
<!-- 'use strict';
必需写在第一行
严格检查模式
-->
<script>
'use strict';
//局部变量 用let定义
let i=1;
</script>
3.数据类型
3.1、字符串
1.正常字符串使用单引号,双引号,转义字符\
2.转义字符\
\'
\n
\t
\u### unicode字符
\x## ASCll码
3.多行字符串用
4.模板字符串
let name="sjk";
let age=3;
let msg= `你好,${name}`
5.字符串长度
str.length
6.字符串可变性:不可变
7.大小写转换
str.toUpperCase();
str.toLowerCase();
8.str.indexOf(‘t’);返回下标
9.str.substring(1,3);左闭右开
3.2、数组
Array可以包含任意数据类型
1.数组长度
arr.length,可变
可以给arr.length赋值,通过下标取值赋值
2.arr.indexof(),下标索引
3.slice()截取Array的一部分,返回一个数组,类似于substring()
4.push(),压入尾部 pop()弹出尾部
5.unshift(),压入头部shif(),弹出头部
6.sort()排序
7.元素反转,reverse()
8.concat()返回拼接的新数组
9.join()使用特定连接符打印拼接数组
10.多维数组
数组:重点存取
3.3、对象
js中所有键都是字符串,值任意
1.定义:
var person={
name:sjk,
age:21,
score:100
}
2.对象赋值:
person.name=“sasas”
3.使用不存在的对象 undefined
4.动态删除属性
delete person.name
5.动态添加,直接给新的属性赋值
person.haah=“as”
5.判断属性是否在对象中 xxx in xxxx
age in person
true
6.判断一个属性是否是这个对象自身拥有的
hasOwnProperty()
3.4、控制流程
选择:
if 判断
if()
{
}
else{
}
循环:
while
while(){
}
//一定执行一次
do{
}while()
for
for(int i=0;i<100;i++){
}
数组循环
for(var in age){
var 是数组下标索引 0-age.length
}
for(var of age){
var 数组值
}
3.5、Map和Set
Map,键值对对
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var map= new Map([["sjk",100],["wqw",11],["ewew",23]]);
var socre=map.get("sjk");
map.set("sss",111);
map.delete("ewew");
console.lot(socre);
</script>
</head>
<body>
</body>
</html>
Set:无序不重复的集合
var set = new Set([1,2,3,4])
set.add(5);
set.delete(1);
set.has(2);//是否包含
3.5、iterator迭代器遍历Map Set
遍历:
4.函数及其面向对象
4.1、函数定义
函数定义:
定义方式一
function abs(x){
if(x>=0)
return x;
else
return -x;
}
执行ruturn 返回结果,函数结束。
如果没有指向return,函数执行完也会返回结果。
定义方式二
var abs=function(x){
if(x>=0)
return x;
else
return -x;
}
function(x){…}匿名类
调用函数
abs(10)
abs(-1)
参数问题:js可以传任意数量的参数,也可以不传
手动抛出异常:throw
argument关键字,代表传进来的所以参数,是一个数组。
rest
ES6引入的新特性:获取除可用参数之外的参数
rest参数只能写在最后,必须用…标识。
4.2、变量作用域
在js中var定义发的变量是有作业域的
在函数体重声明的遍历,不可在函数外使用
如果两个函数使用相同的变量名,只要再函数内部也不会报错。
内部函数可以访问外部函数的成员
内部函数变量和外部函数变量重名,由内到外查找,内部有定义好的,就会屏蔽外部的,就近原则。
所以变量都的定义在最前面。类似于c
全局变量:
定义函数外部的变量。
全局对象 window
js实际上只有一个全局作用域,任何变量(函数也算),假设没有函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错。
规范
由于所有的全局变量都会绑定到我们的window上,如果不同的js文件,使用了相同的全局变量,如何减少冲突?
在每个文件里定义一个全局变量,其他变量和方法绑定在这个变量上。
局部作用域let
解决局部作用域的冲突问题
常量const
const PI=3.14;
4.3、方法
写在对象里的函数
指代本类用this
apply在js中可以控制this指向
4.3、闭包(难点)
4.4、箭头函数(新特性)
4.5、创建对象
4.6、class继承
4.7、原型链继承
5.常用对象
标准对象
5.1、Date
<script>
let data=new Date();
data.getFullYear();//年
data.getMonth();//月
data.getDate();//日
data.getDay();//星期
data.getHours();//时
data.getMinutes();
data.getSeconds();
data.getTime();//时间戳
data.toLocaleString();//本地时间
console.log(new Date(data.getTime()))//时间戳转为时间
</script>
5.2、json
json是什么
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
在js中一切皆为对象,任何js支持的类型都可以转换成json表示
对象用{}
数组用[]
键值对 key:value
var json =JSON.stringify();//对象转成json
//json转js,参数为json字符串
var oj=JSON.parse(json);
json和js对象的区别
var obj={a:"11",b:"232"};
var json='{"a":"11","b":"232"}';
5.3、Ajax
原生js写法,xhr异步请求
6.面向对象
什么是面向对象
类:模板
对象:具体的实例
js中有所不同
原型:
<script>
var student={
name:"sss",
age:3,
run:function (){
console.log(this.name+"runninng")
}
}
var xiaoming={
name: "xioaming"
};
var Bird={
fly:function (){
console.log("flying");
}
}
//小明原型是student
xiaoming.__proto__=student;
</script>
class继承
<script>
//定义学生类
class student{
constructor(name) {
this.name=name;
}
hello(){
alert("hello");
}
}
class xstudent extends student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
}
var xiaoming =new student("xiaoming");
var xiaohong =new student("xiaohong");
</script>
本质:原型链
——proto——
7.操作BOM(重点)
BOM:浏览器对象模型
内核:
IE6-11
Chrome
Safari
FireFox
第三方:
QQ浏览器
360浏览器
window 代表浏览器窗口
Navigator
封装了浏览器信息,可以查看
但大多数时候不使用,因为会被人为修改
screen
代表屏幕
location
重要对象,代表当前url信息
document
代表当前的页面信息,HTML。dom文档树
<body>
<dl id="app">
<dt>java</dt>
<dt>javase</dt>
<dt>javaweb</dt>
</dl>
<script>
var id=document.getElementById('app')
</script>
获取具体的文档树结点
获取cookie
history
history.back()//后退
history.forward()前进
8.操作Dom对象(重点)
DOM:文档对象模型
核心:浏览器网页就是一个Dom树形结构
更新:更新Dom结点
遍历dom结点:得到Dom结点
删除:删除Dom结点
添加:添加一个新结点
8.1、获取Dom结点
js原生代码
<body>
<div class="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var h1=document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
var father=document.getElementsByClassName('father');
var child=father.children;//获取父节点下的所有子节点
</script>
8.2、更新Dom结点
<body>
<div id="id1">
</div>
<script>
var id1=document.getElementById('id1');
</script>
操作文本
id1.innerText=‘xxxx’,修改文本值
操作css
8.3、删除Dom结点
步骤:先获取父节点,然后删除自己
<div class="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);
</script>
father.children,可以获得全体子结点,但在删除的时候,索引会动态调整
8.4、插入Dom结点
为我们获得某个节点,如果这个dom结点是空的,我们通过innerHTML就可以拯救一个个元素,但如果这个dom结点非空就不可以,因为会覆盖原来内容。
追加操作:
<body>
<p id="js">javscript</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.append(js);
</script>
</body>
var newp=document.createElement('p');//创建一个新的p标签
newp.id='newp';
newp.innerText="HELL";
list.append(newp)
//创建一个标签结点
var myscript=document.createElement('script');
myscript.setAttribute('type','text/javascript');
list.append(myscript);
//创建style标签
var mystyle=document.createElement('style');
mystyle.setAttribute('type','text/css');
mystyle.innerHTML='body{background-color: red;}';
document.getElementsByTagName('head')[0].append(mystyle);
在中间插入结点
9.操作表单(验证)
- 文本框 text
- 下拉框
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 passworld
- 。。。。。
表单目的:提交信息
<body>
<form action="post">
<p>
<span>用户名:</span><input type="text" id="usename">
</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 inpust_text=document.getElementById('usename');
var boy_radio=document.getElementById('boy');
var girl_radio=document.getElementById('girl');
//得到输入框的值
//对于单选框,多选框,boy_radio.value只能渠道当前值。
boy_radio.checked;//查看返回结果是否为true
MD5加密在线链接
<body>
<!--表单提交事件,使用οnsubmit=
绑定一个检测函数
-->
<form action="#" method="post" onsubmit="f()">
<p>
<span>用户名:</span><input type="text" id="usename" required>
</p>
<p>
<span>密码:</span><input type="text" id="password" required>
</p>
<!-- 绑定事件-->
<button type="button">登录</button>
</form>
<script>
function f(){
var name=document.getElementById("usename");
var pwd=document.getElementById("password");
//MD5
}
</script>
10.jQuery
jQuery库里有大量的js函数
获取jQuery
在线链接CDN
下载链接jquery下载所有版本(实时更新)_脚本之家 (jb51.net)
文档工具站
jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)
引入jQuery
<!-- cdn引入-->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
<script src="lib/jquery-3.6.0.js"></script>
使用:
<body>
<!--
公式:$(selector).action()
选择器就是css的选择器
-->
<a href="" id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function (){
alert("hello");
})
</script>
</body>
选择器:
<script>
//标签,选择p标签
$('p').click()
//id
$('#id1').click()
//类
$('.class1').click()
</script>
事件:
鼠标:
键盘:
操作Dom:
<body>
<ul id="test-ul">
<li class="js">javascript</li>
<li name="python">Python</li>
</ul>
<script>
$('#test-ul li[name=python]').text('qwqwq');//设置值
$('#test-ul li[name=python]').html();//获取html
$('#test-ul li[name=python]').html(<strong>122</strong>);//设置html
</script>
</body>
css操作
$('#test-ul').css({"color":"red"});
元素的显示和消失
$().show()
$().hide()
Ajax
小技巧
1.巩固js
2.巩固html,css
11.工具网站
LayerUILayui - 经典开源模块化前端 UI 框架
ElementUIElement - 网站快速成型工具
Ant DesignAnt Design - 一套企业级 UI 设计语言和 React 组件库