前端
W3C标准
- W3C(World Wide Web Consortium(万维网联盟))
- 成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
标准包括:
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
UI框架
- Ant-Design:阿里巴巴出品,基于React的UI框架
- ElementUI、iview、ice:饿了么出品,基于Vue的UI框架
- Bootstrap:Twitter推出的一个用于前端开发的开源工具包
- AmazeUI:“妹子UI”,一款HTML5跨界前端框架
Javascript框架
- JQuery
- Angular
- React
- Vue
- Axios
图片属性
alt:图片名字
title:悬停文字
超链接
target:“_blank” 在新标签页打开超链接
target:“_self” 在本页打开超链接
锚链接:
1.需要一个锚标记 <a href="#top">回到顶部</a>
2.跳转到标记 <a name=“top”>
表单提交
action:表单提交的位置可以是网站,也可以是一个请求处理地址
method:post,get 提交方式
get方式提交:可以在url中看到我们提交的信息,不安全,高效
post:比较安全,传输大文件
placeholder:提示信息
requirde:非空判断
pattern:正则表达式判断 (常用正则表达式)https://www.cnblogs.com/yanmuxiao/p/8674241.html
JavaScript介绍
概述
JavaScript是一门世界上最流行的脚本语言
一个合格的后端人员,必须要精通Javascript
历史
https://blog.csdn.net/kese7952/article/details/79357868
ECMScript它可以理解为是JavaScript的一个标准
最新版本已经到es6版本
JavaScript入门
引入JS
内部引用
<script>
//...
</script>
外部引用
abs.js
test,html
<script src="abs.js"></script>
基本语法
console.log(score) 在浏览器的控制台打印变量
浏览器调试须知:
数据类型
数值、文本、图形、音频和视频…
number
js不区分小数和整数,Number
123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN //not a number
Infinity //表示无限大
比较运算符
=
== 等于(类型不一样,值一样,也会判断为true)
=== 绝对等于(类型一样,值一样,结果true)
这是一个JS的缺陷,坚决不能使用==比较
须知:
- NaN === NaN,这个与所有的数值都不相等,包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题:
console.log((1/3) === (1-2/3))
尽量避免使用浮点数进行运算,存在精度问题!
Math.abs(1/3-(1-2/3))<0.0000000001
null 和undefined
- null 空
- undefined 未定义
对象
对象是大括号,数组是中括号~~
每个属性之间使用逗号隔开,最后一个不需要添加
严格检查格式
前提:IDEA需要设置支持ES6语法
use strict
:严格检查模式,预防JS的随意性产生的一些问题
必须写在JS的第一行
局部变量建议都用let去定义~
数据类型
字符串
1、正常字符串使用单引号或者双引号包裹
2、注意转义字符 \
\`
\n
\t
\u4e2d \u#### Unicode字符
Ascll字符
3、多行字符串编写
//tab上面 esc下面
var msg =
`hello
world
nihao`
4、模板字符串
let name = "qinjiang"
let msg = 'nihao ${name}'
数组
Array可以包含任意的数据类型
-
长度
arr.length
可以给
arr.length
赋值,数组的大小就会发生变化,如果赋值过小,元素就会丢失 -
IndexOf,通过元素获得下标索引
-
slice() 截取Array的一部分,返回一个新的数组,类似于String中的substring
-
push、pop
push:添加在尾部、pop:弹出尾部元素
-
unshift()、shift() 头部
unshift:压入头部、shift:弹出头部的元素
-
sort() 排序
-
reverse() 元素反转
-
concat() 合并
注意:并没有修改数组,只是会返回一个新的数组
-
连接符 join(’’)
打印拼接数组,使用特定的字符串连接
对象
JS中的所有键都是字符串,值是对象!
若干个键值对
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
-
对象赋值
对象名.属性名 = ”“
-
使用一个不存在的对象属性,不会报错! 会显示undefined
-
动态的删减属性,通过delete实现
-
动态的添加属性,通过 给没有的属性赋值即可实现这个属性动态添加
-
判断属性值是否存在对象中使用 XXX in XXX 看返回值
-
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
流程控制
if 判断
while循环
for循环
foreach 循环
Map和Set
Map:
map.get(“键”)可以获取对应的值。
map.set(‘键’,‘值’) 新增或者修改
map.delete(“键”) 删除
Set:无序不重复集合
set.add(); 添加
set.delete(); 删除
console.log(set.has(3)); 查找
iterator
遍历数组:通过for of实现获取数组的值,通过for in获取下标
遍历Map:通过for of
遍历Set:通过for of
函数
函数定义及变量作用域
通过 function 方法名(方法参数){} 进行函数的定义
一旦执行到return 代表函数的结束,返回结果
如果没有执行return,函数执行完也会返回结果,结果就是undefined
通过var 方法名 = function(参数){} 进行函数定义
arguments是一个js免费赠送的关键字,代表传递进来的所有参数是一个数组
rest是一个获取除了已经定义的参数之外的所有参数
function adc(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后面,必须用…标识
作用域
和Java类似(内部函数可以访问外部的成员)
默认所有的全局变量,都会自动绑定在window对象下
由于我们所有的全局变量都会绑定到我们的window上,如果不同的js文件,使用了相同的全局变量,冲突 -> 怎样能够减少冲突?
//唯一全局变量
var abc = {};
abc.name = "tangs";
abs.add = function(a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
JQuery
局部作用域let:建议大家都有let去定义局部作用域的变量
const 常量
方法
意思就是把函数放在对象里面,对象只有两个东西:属性 和 方法
var tangs = {
name: 'tangs',
birth: 2000,
age: function(){
var now = new Date().getFullYear();
return now-this.birth;
}
}
//属性
tangs.name
//方法,一定要带()
tangs.age()
this是无法指向的,是默认指向调用它的那个对象
内部对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof undefined
"undefined"
Json
-
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言
-
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
在JS一切皆为对象,任何JS支持的类型都可以用JSON来表示
格式:
-
对象都用**{}**
-
数组都用**[]**
-
所有的键值对都是用key:value
对象转化为json字符串 JSON.stringify(对象)
json转化为对象 JSON.parse(json数据)
Ajax
- 原生的js写法, xhr异步请求
- JQuery封装好的方法 $("#name").ajax("")
- axios请求
面向对象编程
什么是面向对象
- 类 :模板
- 对象:具体的实例
在JS中这个需要大家换一下思维方式
原型:
var xiaoming = {
name: "xiaoming"
};
var Student = {
play:function(){
console.log(this.name + "studying...");
}
};
//小明的原型是学生
xiaoming._proto_ = Student;
class继承
class关键字 是在ES6引入的
下面是ES6之前使用的方法:
function Student(name){
this.name = name;
}
//给Student增加一个方法
Student.prototype.hello = function(){
方法体
}
class出现之后
class Studnet{
constructor(name){
this.name = name;
}
hello(){
alert('hello')
}
}
继承
class XiaoStudent extends Student{
}
操作BOM对象(重点)
Navigator 封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36"
navigator.appCodeName
"Mozilla"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36"
navigator.platform
"Win32"
大多数时候,不使用navigator对象,因为会被人为修改
不建议使用这些属性来判断和编写代码
screen 代表屏幕
screen.width
1600
screen.height
900
location(重要) 代表当前页面的URL信息
host:"www.baidu.com"
href:"https://www.baidu.com"
protocol:"https:"
reload(): 重新加载页面
//设置新的地址
location.assign('https://www.taobao.com/')
document 代表当前页面,HTML DOM文档树
获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
</dl>
<script>
var dl = document.getElementById('app')
</script>
获取cookie 服务器端可以设置cookie: httpOnly
history 两个方法 back()和forward() 后退 和 前进
操作DOM对象(重点)
核心
浏览器网页就是一个Dom树形结构!
- 更新:更新Dom节点
- 遍历Dom节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
要操作一个Dom节点,就必须要先获得这个Dom节点
获得Dom节点
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father') //获得指定父节点的所有子节点
这是原生代码,之后尽量使用JQuery();
更新节点
- id.innerText=’内容‘ 修改文本的值
- id.innerHTML=’<strong>123</strong>‘ 修改解析HTML文本标签
- id.style.color=‘yellow’ 操作JS
删除节点
先获取父节点,再通过父节点删除自己
//获取标签的父标签
var father = p1.parentElement;
father.removeChild(p1)
注意 删除多个节点的时候,Children是时刻变化的,删除节点的时候一定要注意
插入节点
我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了,会产生覆盖
追加:
<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.crwateElement('p');//创建一个P标签。
newP.id = 'newP';
newP.innerText = 'Hello Tangs';
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
</script>
操作表单 (验证)
获得要提交的信息
<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.cheched; //查看返回的结果,是否为true,如果为true,则被选中
girl_radio.checked = true; //赋值
</script>
提交表单(MD5加密)表单优化
<!--
οnsubmit= 绑定一个提交检测的函数,true false
将这个结果返回给表单,使用onsubmit接收!
οnsubmit="return abc()"
-->
<form action="www.baidu.com" method="post" onsubmit="return abc()">
<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 abc(){
alert(hello);
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以校验判断表单内容,true就是通过,false 阻止提交
}
</script>
JQuery
是JS的库,里面存在大量的JS函数
$(selector).action()
**获取JQuery **
http://www.jq22.com/cdn/ CDN获取
可以直接把包下载下来
<a href="" id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function(){
alert('hello jquery')
})
</script>
选择器
文档工具站 https://jquery.cuishifeng.cn/
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class').click(); //class选择器
事件
<style>
#divMove{
width:500px;
height:500px;
border:1px solid red;
}
</style>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMove">
点击
</div>
</body>
<script>
$(function(){
$('#divMove').mouse(function(e){
$('#mouseMove').text('X:' + e.pageX + 'Y:' + e.pageY)
})
})
</script>
操作Dom
节点文本操作
$('#test-ul li[name=python]').text(); //获得值
$('#test-ul li[name=python]').text('值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值
CSS操作
$('#test-ul li[name=python]').css("color","red")
元素的显示和隐藏 :本质 display : none;
$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()