前端知识体系
想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走,其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端,为实现成为“互联网Java全栈工程师”再向前迈进一步。
前端三要素
- HTML(结构):超文本标记语言(Hyper Text Markup Language),决定网页的结构和内容
- CSS(表现):层叠样式表(Cascading Style Sheets),设定网页的表现样式。
- JavaScript(行为):是一种弱类型脚本语言,其源码不需经过编译,而是由浏览器解释运行,用于控制网页的行为
结构层(HTML)
太简单,略
表现层(CSS)
CSS层叠样式表是一门标记语言,并不是编程语言,因此不可以自定义变量,不可以引用等,换句话说就是不具备任何语法支持,它主要缺陷如下:
- 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;
- 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护;
这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题,前端开发人员会使用一种称之为【CSS预处理器】的工具,提供CSS缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。
什么是CSS预处理器
CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言,进行Web页面样式设计,再通过编译器转化为正常的CSS文件,以供项目使用”。
常用的CSS预处理器有哪些
- SASS:基于Ruby ,通过服务端处理,功能强大。解析效率高。需要学习Ruby语言,上手难度高于LESS。
- LESS:基于NodeJS,通过客户端处理,使用简单。功能比SASS简单,解析效率也低于SASS,但在实际开发中足够了,所以如果我们后台人员如果需要的话,建议使用LESS。
行为层(JavaScript)
JavaScript一门弱类型脚本语言,其源代码在发往客户端运行之前不需要经过编译,而是将文本格式的字符代码发送给浏览器,由浏览器解释运行。
JavaScript框架
- JQuery:大家熟知的JavaScript库,优点就是简化了DOM操作,缺点就是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6,7,8;
- Angular:Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念,与微软合作,采用了TypeScript语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如1代–>2 代,除了名字,基本就是两个东西;截止发表博客时已推出了Angular6)
- React:Facebook 出品,一款高性能的JS前端框架;特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作,在内存中模拟 DOM操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门【JSX】语言;
- Vue:一款渐进式 JavaScript 框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular(模块化)和React(虚拟 DOM) 的优点;
- Axios:前端通信框架;因为 Vue 的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery 提供的AJAX 通信功能;
UI框架
- Ant-Design:阿里巴巴出品,基于React的UI框架
- ElementUI、iview、ice:饿了么出品,基于Vue的UI框架
- BootStrap:Teitter推出的一个用于前端开发的开源工具包
- AmazeUI:又叫“妹子UI”,一款HTML5跨屏前端框架
JavaScript构建工具
- Babel:JS编译工具,主要用于浏览器不支持的ES新特性,比如用于编译TypeScript
- WebPack:模块打包器,主要作用就是打包、压缩、合并及按序加载
注:以上知识点已将WebApp开发所需技能全部梳理完毕
三端同一
- 混合开发(Hybrid App)
主要目的是实现一套代码三端统一(PC、Android:.apk、iOS:.ipa)并能够调用到设备底层硬件(如:传感器、GPS、摄像头等),打包方式主要有以下两种:
- 云打包:HBuild -> HBuildX,DCloud 出品;API Cloud
- 本地打包: Cordova(前身是 PhoneGap)
- 微信小程序
详见微信官网,这里就是介绍一个方便微信小程序UI开发的框架:WeUI
什么是Javascript
概述
javaScript是一门世界上最流行的脚本语言Java,
JavaScript,Java没有关系
10天
一个合格的后端人员,必须精通JavaScript
ECMAScript它可以理解为JavaScript的一个标准
最新版本已经到es6版本~
但是大部分浏览器还只停留在支持es5代码上!
开发环境––线上环境,版本不一致
快速入门
引入JavaScript
1- 内部标签
<script>
alert('hello world');
</script>
- 外部引入
ljy.js
alert('hello world');
test.html
<script src="ljy.js"></script>
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内,写Javascript代码-->
<!-- <script>-->
<!-- alert('hello world');-->
<!-- </script>-->
<!-- 外部引入-->
<!-- 注意:script必须成对呈现-->
<script src="JS/ljy.js"></script>
<!--不用显示定义type,也默认就是JavaScript-->
<script type="text/javascript"></script>
</head>
<body>
</body>
</html>
基本语法入门
console.log(xxx) 在浏览器的控制台打印变量
浏览器必备调试须知:
Elements(爬网站用) Console(调试) Sources(打断点) Network(抓包) Application
<script>
//1.. 定义变量 在Java中 变量类型 变量名=变量值;
var num = 1;
var name = "李x";
// alert(num+name)
//2.条件控制
var score=75;
if(score>60 &&score<70){
alert("及格");
}else if(score>70 && score<80){
alert("优秀");
}else{
alert("other");
}
</script>
数据类型
数值、文本、图形、音频、视频。。。
变量
var z=1;
number
js不区分小数与整数 ,统称Number
123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN // not a number
Infinity //表示无限大
字符串
‘abc’ 、“abc”
布尔值
true、false
逻辑运算
&& 都为真,则真
|| 一个为真,则真
! 真即假,假即真 取反
比较运算法 重要!!!
=
== 等于(类型不一样,值一样,也会判断为true)、
=== 绝对等于(类型与值都一样,才为true)
这是一个js的缺陷,坚持不要使用==比较 。
须知:
- Nan===NaN ,这个与所有的数值都不相等,包括自己
- 只能通过isNaN(Nan)来判断这个数是否是NaN
浮点数问题:
console.log((1/3)===1-(2/3));
尽量避免使用浮点数进行运算,存在精度问题!
console.log( Math.abs(1/3-(1-2/3))<0.000001);
用来比较是否相等
null和undefined
- null 空
- undefined 未定义
数组
Java的数组必须是相同类型的对象~ ,js中不需要这样
//保证代码的可读性,尽量使用[]
var arr=[1,2,3,4,5,"lijin",null,true]
new Array(1,12,5,"hello");
取数组下标:如果越界了,就会报错
undefined
对象
对象是大括号,数组是中括号
每个属性之间使用逗号隔开,最后一个不需要添加
//Person person = new Person(1,2,3,4) var person={ name:"lijinyu", age:3, tags:['js','java'] }
取对象的值:
person.age
> 3
person.name
> "lijinyu"
严格检查模式 strict
'use strict'; //严格检查模式,预防js的随意性导致产生的一些问题
<script>
/*
前提:IDEA需要设置支持es6语法
'use strict'; 严格检查模式,预防js的随意性导致产生的一些问题
必须写在javascript的第一行
局部变量都建议使用let去定义
es6中一般用let定义
let i = 1;
*/
</script>
数据类型
字符串
- 正常字符串我们使用’ ’ 或者" "包裹
- 注意转义字符 \
\'
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符
- 多行字符串编写
//Tab 上面那个键 ` `
let msg = `heloo
world
123
`
- 模板字符串
'use strict';
let name = "lijinyu";
let msg = `你好啊,${name}`;
console.log(msg);
- 字符串长度
console.log(str.length);
- 字符串的可变性—不可变
- 大小写转换方法:
//注意,这里是方法,不是属性了
str.toUpperCase();
str.toLowerCase();
- 获取指定的下标
str.indexof('x');
- 截取:substring方法
str.substring(1); //从第一个字符截取到最后一个字符串
str.substring(1,3); //截取包含第一个不包含第三个 [1,3)
数组
Array可以包含任意的数据类型
0.定义数组
let arr = [1,2,3,4,5];
arr[0]; //取值
arr[0] = 1; //赋值
- 长度
arr.length;
注意:假如给arr.length赋值,数组大小就会发生变化~ 如果赋值过小,元素就会丢失
- indexof, 通过元素获得下标索引
arr.indexof(2)
1
字符串的“1”与数字1是不同的
-
**slice() **截取Array的一部分,返回一个新数组,类似于String中的substring
-
push() 。 pop() 尾部
push:压入到尾部
pop:弹出尾部的一个元素
- **unshift() shift() **头部
unshift:压入到头部
shift:弹出头部的一个元素
- 排序用sort()
arr
(5) [1, 4, 2, 3, 2]
arr.sort();
(5) [1, 2, 2, 3, 4]
- 元素反转 reverse()
(5) [1, 2, 2, 3, 4]
arr.reverse()
(5) [4, 3, 2, 2, 1]
- concat() 拼接
(5) [4, 3, 2, 2, 1]
arr.concat(['a','b'])
(7) [4, 3, 2, 2, 1, "a", "b"]
arr
(5) [4, 3, 2, 2, 1]
注意:concat() 并没有修改数据,只是会返回一个新的数组
- 连接符 join
打印拼接数值,使用特定的字符串连接
(5) [4, 3, 2, 2, 1]
arr.join('-')
"4-3-2-2-1"
- 多维数组
let arr = [[1,2],['a','b'],[4,5]]
arr
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) ["a", "b"]
2: (2) [4, 5]
length: 3
arr[1][0]
"a"
数组:存储数据(如何存,如何取)
对象
let 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义了一个Person对象有三个属性
let Person = {
name: "lijinyu",
age: 3,
score: 100
}
JS中对象,{…}表示一个对象,键值对描述属性xxx:xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号!
javascript中的所有的键都是字符串,值是任意对象!
- 对象赋值
Person
{name: "lijinyu", age: 3, score: 100}
Person.name="李xxx";
"李xxx"
- 使用一个不存在的对象属性,不会报错! undefined
Person.haha
undefined
- 动态的删减属性,通过delete删除对象的属性
Person
{name: "lijinyu", age: 3, score: 100}
delete Person.age
true
Person
{name: "lijinyu", score: 100}
- 动态的添加,直接给新的属性添加值即可
Person
{name: "lijinyu", score: 100}
Person.sex="男"
"男"
Person
{name: "lijinyu", score: 100, sex: "男"}
- 判断属性值是否在这个对象中! xxx in xxx!
Person
{name: "lijinyu", score: 100, sex: "男"}
'score' in Person
true
//继承
'toString' in Person
true
- 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
Person.hasOwnProperty('toString')
false
Person.hasOwnProperty('score')
true
流程控制
if判断
'use strict';
let age = 4;
if(age>3){
alert("haha");
}else if(age<5){
alert("123456")
}else{
alert("5555")
}
while循环,避免程序死循环
let age = 3;
while(age<100){
age = age+1;
console.log(age);
}
do{
age=age+1;
console.log(age);
}while(age<100)
for循环
let age = 3;
for (let i = 0; i < 100; i++) {
console.log(i)
}
forEach循环
5.1引入
let age = [12, 5, 1, 5, 51, 51, 21];
//函数
age.forEach(function (value) {
console.log(value);
})
for…in
let age = [12, 5, 1, 5, 51, 51, 21];
//for(let index in object){}
for(let num in age){
if (age.hasOwnProperty(num)){
console.log("存在");
console.log(age[num])
}
}
for(let num in age){
console.log(age[num])
}
//num 是下标
Map与Set
Map:
'use strict';
//学生的成绩与学生的名字
let map=new Map([['tom',80],['jock',90]]);
let name = map.get('tom'); //通过key获得value
map.set('admin',100); //新增
map.delete('tom'); // 删除
console.log(name);
Set:无序不重复的集合
let set = new Set([3, 1, 1, 1, 1]);//Set可以去重
set.add(4); //添加
set.add(2); //删除
console.log(set.has(3)); //是否包含某个元素!
iterator
练习:使用iterator来遍历迭代我们Map,Set!
遍历数组:
//通过for of / for...in 是输出下标
let arr = [3,4,5];
for(let x of arr){
console.log(x)
}
遍历Map:
let map = new Map([['ljy', 100], ['qwe', 90]]);
for (let x of map) {
console.log(x)
}
遍历Set:
let set = new Set([2, 3, 4,]);
for (let y of set) {
console.log(y)
}
函数
定义函数
public 返回值类型 方法名(){
return 返回值;
}
定义方式一:
绝对值函数:
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return代表函数结束,返回结果!
如果没有执行return,函数执行完也会返回结果,结果就是undefined
定义方式二:
let abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){…} 这是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数!
调用函数
abs(10) ;//10
abs(-1); //1
参数问题:
javaScript可以传递任意个参数,也可以不传递参数~!
参数进来是否存在的问题? 假设不存在参数,如何规避
let abs = function (x) {
//手动抛出异常来判断
if (typeof x !== 'Number') {
throw 'not a number';
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
arguments
arguments
是一个JS免费赠送的关键字;
代表传递进来的所有的参数,是一个数组
let abs = function (x) {
console.log('x>='+x);
for(let i =0; i<arguments.length; i++){
console.log(arguments[i]);
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
问题:
arguments包含所有的参数,我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数。
rest
function a(a,b) {
console.log("a:"+a);
console.log("b:"+b);
if(arguments.length>2){
for (var i =2; i<arguments.length;i++){
//...
}
}
新特性(es6引入),获取除了已经定义的参数之外的所有参数~ ~ …rest
function a(a,b,...rest) {
console.log("a:"+a);
console.log("b:"+b);
console.log("rest:"+rest);
}
rest参数只能写在最后面,必须用 …标识。
变量的作用域
在javascript中,var定义的变量实际是有作用域的。
假设在函数体中声明,则在函数体外不可以使用~ (非要想实现的话,后面可以研究用:闭包
)
'use strict';
function a() {
var x = 1;
x = x + 1;
}
x = x + 2; // Uncaught ReferenceError: x is not define
如果两个函数使用了相同的变量名,只要在函数内部,就不冲突
function a() {
let x = 1;
x = x + 1;
}
function b() {
let x = 'A';
x = x + 2;
}
内部函数可以访问外部函数的成员,反之则不行
function a() {
let x = 1;
//内部函数可以访问外部函数的成员,反之则不行
function b() {
let y = x+1; //2
}
let z = y+1; //Uncaught ReferenceError: z is not defined
}
假设,内部函数变量和外部函数的变量,重名
function a() {
let x = 1;
function b() {
let x='A';
console.log('inner'+x); //innerA
}
console.log('outer'+x); //outer1
b();
}
a();
假设 JavaScript中,函数查找变量从自身函数开始~,用’‘内’‘向’‘外’'查询.假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。
提升变量的作用域
function a(){
let x="x"+y;
console.log(x);
let y='y'
}
结果:xundefined
说明:JS执行引擎,自动提升了y的声明,但是不会提升变量y的赋值。
等价于下面的这个代码:
function b(){
let y;
let x="x"+y;
console.log(x)
y='y';
}
这个是在Javascript建立之初就存在的特性。
养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码的维护
function a(){
let x=1,
y=x+1,
z,i,a; //undefined
//之后随意用
}
全部函数
'use strict';
let x = 1; //全局变量
function f() {
console.log(x)
}
f()
console.log(x)
全局对象window
var x='xxx';
alert(x);
alert(window.x); //默认所有的全局变量,都会自动绑定在window对象下
alert()这个函数本身也是一个window
的变量;
var x='xxx';
window.alert(x);
var old_alert=window.alert;
//old.alert(x);
window.alert=function(){
};
//发现alert()失效了
window.alert(123);
//恢复
window.alert=old_alert;
window.alert(456)
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有再函数作用内找到,就会向外查找,如果在全局作用域都没有找到,报错RefrenceError
规范:
由于我们所以的全局变量都会绑定到我们的window上,如果不同的JS文件,使用了相同的全局变量,冲突了。~>如何能够减少冲突?
// 唯一全局变量
var liapp ={};
//定义全局变量
liapp.name='lis';
liapp.add = function (a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
局部作用域 let
function a(){
for(var i = 0;i<100;i++){
console.log(i)
}
console.log(i+1); //i出了这个作用域还可以使用
}
ES6 let关键字,解决局部作用域冲突问题!
function a(){
for(let i = 0;i<100;i++){
console.log(i)
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}
建议使用let
去定义局部作用的变量
常量 const
在ES6之前,怎么定义常量:只要用全部大写字母命名的变量就是常量;建议不修改这样的值
var PI = '3.14';
console.log(PI);
PI='151'; //可以改变这个值
console.log(PI);
在ES6引入了常量关键字:const
const PI = '3.14'; //只读变量
console.log(PI);
PI = '541' //报错TypeError:Assignment to constant variable.
方法:
定义方法:
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法;
var li={
name:'李',
birth:2000,
//方法
age:function (){
// 今天-出生的年
var now = new Date().getFullYear();
return now-this.birth;
}
}
//属性
li.name
//方法,一定要带()
li.age()
this.代表什么? 拆开上面的代码看看~
function getage(){
// 今天-出生的年
var now = new Date().getFullYear();
return now-this.birth;
}
var li={
name:'李',
birth:2000,
age:getage
}
// li.age() OK
//getage() Nan window对象
this是无法指向的,是默认指向调用它的那个对象;
apply
在JS中可以控制this指向
function getage() {
// 今天-出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
var li = {
name: '李',
birth: 2000,
age: getage
}
// li.age() OK
getage.apply(li, []); //this,指向了li,参数为空。
内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof []
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
Data
基本使用
let now = new Date();
now.getFullYear(); //年
now.getMonth();//月 0~11 代表月
now.getDate();//日
now.getDay();//星期几
now.getHours()//时
now.getTime(); //时间戳 全世界统一 1970 1. 12 0:00:00 毫秒数
console.log(new Date(1607158351693)) //时间戳转为时间
转换
now.getTime()
1607158644346
now = new Date(1607158644346)
Sat Dec 05 2020 16:57:24 GMT+0800 (中国标准时间)
now.toLocaleString()
"2020/12/5 下午4:57:24"
now.toGMTString()
"Sat, 05 Dec 2020 08:57:24 GMT"
JSON
JSON是什么
- Json(JavaScript Object Notation,js对象简谱)是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示;
格式:
- 对象都用{}
- 数组都用[]
- 所有的键值对 都使用 key:value
JSON字符串和JS对象的转换
var user={
name:"lijin",
age:3,
sex:'男'
}
//对象转化为json字符串 //{"name":"lijin","age":3,"sex":"男"}
var jsonuser=JSON.stringify(user)
// json字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"lijin","age":3,"sex":"男"}')
很多人搞不清楚,JSON和JS对象的区别:
var obj = {a:'hello',b:'hellob'};
var json = '{"a":'hello',"b":'hellob'}'
Ajax
原生的js写法,xhr异步请求
jQuey封装好的方法$("#name").ajax("")
axios请求
面向对象编程
什么是面向对象
原型对象
javascript、java、C# … 面向对象,javascript有一些区别!
类:模板 原型对象
对象:具体的实例
在Javascript这个需要换一下思维方式!
原型:
var Student = {
name:'lijin',
age:3,
run:function () {
console.log(this.name+"runing....");
}
};
var xiaoming={
name:'xiaoming'
};
//原型对象
xiaoming.__proto__=Student;
var Bird={
fly:function () {
console.log(this.name+"fly...");
}
};
//小明的原型是 Bird
xiaoming.__proto__=Bird;
class继承
class关键字,是在ES6引入的
- 定义一个类,属性,方法
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello');
}
}
var xiaoming=new Student('xiaoming');
var xiaohong=new Student('小红');
xiaoming.hello()
- 继承
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert('hello');
}
}
class xiaoStudent extends Student {
constructor(name, grade) {
super(name);
this.grade = grade;
}
myGrade() {
alert('i am a student');
}
}
var xiaoming = new Student('xiaoming');
var xiaohong = new xiaoStudent('小红', 100);
本质:查看对象原型
原型链
操作BOM对象(重点 )
浏览器介绍
JavaScript和浏览器的关系?
javascript诞生就是为了能够让他在浏览器中运行!
BOM:浏览器对象模型
- IE 6~
- Chrome
- Safari
- FireFox
第三方浏览器
- QQ浏览器
- 360浏览器
window
window代表浏览器窗口
window.alert(1525)
undefined
window.innerHeight
474
window.innerHeight
507
window.innerWidth
845
//可以调整浏览器窗口再试试
Navigator(不建议使用)
Navigator,封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36 Edg/87.0.664.55"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36 Edg/87.0.664.55"
navigator.platform
"Win32"
大多数时候,我们不会使用navigator
对象,因为会被人修改!
不建议使用这些属性来判断和编写代码。
screen
代表屏幕的尺寸:
screen.width
1920 px
screen.height
1080 px
location(重要)
location代表当前页面的URL信息
host: "www.baidu.com"
hostname: "www.baidu.com"
protocol: "https:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('www.xxx.com') //跳转页面
document (内容:DOM)
document代表当前的页面,HTML DOM文档树
document.title
"新建标签页"
document,title='李'
"李"
获取具体的文档树节点:
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
<script>
var dl = document.getElementById('app')
</script>
获取cookie
document.cookie
"UM_distinctid=175b28ea52d3b-024d49a6993e2b-c7d6957-1fa400-175b28ea52e2b8; CNZZDATA155540=cnzz_eid%3D1738546486-1605016482-%26ntime%3D1605016482"
劫持cookie原理
<script src="a.js"></script>
<!--恶意人员:获取你的cookie上传到他的服务器->
服务器端可以设置cookie:httpOnly
history(不建议使用)
history代表浏览器的历史记录
history.back()//后退
history.forward() //前进
操作DOM对象(重点)
DOM:文档对象模型。
核心
浏览器网页就是一个Dom树形结构!
- 更新:更新Dom节点
- 遍历Dom节点:得到Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
要操作一个Dom节点,就必须要先获得这个Dom节点
获得DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/1.js"></script>
</head>
<body>
<div id="father">
<h1>标签一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
</body>
</html>
var h1 = document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2')
var father=document.getElementById('father')
var childrens=father.children; //获取父节点下的所有子节点
var childrens=father.children[index]; //获取具体第几个节点
// father.firstChild
// father.lastChild
这是原生代码。
更新节点
<body>
<div id="id1">
</div>
<script src="JS/2.js"></script>
</body>
let id1 = document.getElementById('id1');
id1.innerText = 'abc';
操作本文:
id1.innerText='456'
修改文本的值id1=innerHTML='<strong>123</strong>'
相当于HTML的文本标签,可以修改等(解析HTML文本标签)
操作JS:
id1.style.color='red' // 属性使用 字符串 包裹
id1.style.fontSize='30px' // - 转 驼峰命名问题
id1.style.padding='50px'
删除节点
删除节点的步骤:先获取父节点,再通过父节点删除自己
<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(self);
</script>
删除须知(html代码同上):
//删除是一个动态的过程:
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
注意:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意。就比如(删除了老大,那么老二就变成了老大)。
插入节点(比较复杂)
我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个Dmo节点已经存在元素了,我们就不能这样做了! 这样会产生覆盖,把原来已有的覆盖掉。
追加操作
<body>
<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 src="JS/3..js"></script>
</body>
// let js=document.getElementById('js');
// let list=document.getElementById('list')
let
js=document.getElementById('js'), //已存在的节点
list=document.getElementById('list');
在网页上的练习(直接在JS文件里一样的):
list.appendChild(js); //追加到后面
创建一个新的标签,实现插入(接着上面的代码)
let newp=document.createElement('p');//创建一个p标签
newp.id='newp';
newp.innerText='hello world';
list.append(newp);
//创建一个标签节点(通过这个属性,可以设置任意的值)
let myScripte = document.createElement('script');
myScripte.setAttribute('type', 'text/javascript');
list.appendChild('myScript')
//创建一个style标签
var myStyle = document.createElement('style'); //创建一个空标签style
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{backgeound-color:green;}'; //设置标签内容
document.getElementsByTagName('head')[0].appendchild(myStyle);
insertBefore
<body>
<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 ee = document.getElementById('EE');
var js = document.getElementById('js');
var lsit = document.getElementById('list');
//要包含的节点,insertBefore(nowNode,targetNode)
lsit.insertBefore(js, ee);
</script>
操作表单(验证)
表单是什么
form DOM树
-
文本框:text
-
下拉框:
-
单选框:radio
-
多选框:checkbox
-
隐藏域:hidden
-
密码框:password
-
…
表单的目的:提交信息
获得要提交的信息
<body>
<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 src="JS/4.js"></script>
'use strict';
let input_text = document.getElementById('username');
let boy_radio = document.getElementById('boy');
let girl_radio = document.getElementById('girl');
//得到输入框的值:
input_text.value
//修改输入框的值
input_text.value = 'xxx';
//对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
boy_radio.checked; //查看返回结果,是否为true,如果为true,则被选中~
boy_radio.checked = true; //用代码来手动选中(赋值)
提交表单
<body>
<form action="#" method="post">
<p>
<span>用户名:</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span><input type="password" id="password" name="password">
</p>
<!-- 绑定事件 onclick被点击时..-->
<button type="submit" onclick="a()">提交</button>
</form>
<script>
function a() {
let uname = document.getElementById('username');
let pwd = document.getElementById('password');
console.log(uname.value);
//MD5算法:
pwd.value = md5(pwd.value);
console.log(pwd.value);
}
</script>
</body>
提交表单。 MD5加密密码+表单优化
<body>
<!--表单绑定提交事件
οnsubmit=绑定一个提交检测的函数,true,false
将这个结果返回给表单,使用onsubmit接收
-->
<form action="https://www.taobao.com/" 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">
<!-- 绑定事件 onclick被点击时..-->
<button type="submit">提交</button>
</form>
<script>
function a() {
let uname = document.getElementById('username');
let pwd = document.getElementById('password');
let md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以校验判断表单内容,true就是通过提交,false就是阻止提交
return true;
}
</script>
jQuery
JavaScript
jQuery库,里面存在大量的javascript函数
获取jQuery
公式:
$(选择器).action();
- 在百度搜索:cdn jQuery 就可以复制了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cnd 引入->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
</body>
</html>
- 在百度下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>
</head>
<body>
<!--
公式:$(选择器).action();
-->
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是Css的选择器
$('#test-jquery').click(function () {
alert('hello,world');
})
</script>
</body>
</html>
选择器
代码如下:
//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器全都能用
$('p').click();//标签选择器
$('#id').click(); //ID选择器
$('.class').click(); //类选择器
文档工具站:http://jquery.cuishifeng.cn/
事件
鼠标、键盘等其他事件
鼠标事件:
<!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: 200px;
height: 300px;
border: #b1ff62 solid 2px;
}
</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>
键盘监听事件:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>习题</title>
</head>
<body>
<input type="text" >
<p></p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(function () {
$('input').keyup(function () {
$('p').text($('input').val());
})
})
</script>
</body>
</html>
操作DOM
节点本文操作
<!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>
</head>
<body>
<ul id="test-ul">
<li id="js">JavaScript</li>
<li id="python">Pythom</li>
</ul>
<script>
$('#test-ul li[id=js]').text(); //获得值
$('#test-ul li[id=js]').text('xxx');//设置值
$('test-ul').html();
// $('test-ul').html('<strong>123</strong>');
</script>
</body>
</html>
CSS的操作
$('#test-ul li[id=js]').css({ "color": "#ff0011", "background": "blue" });
元素的显示和隐藏
本质:
display=none;
$('#test-ul li[id=js]').show();
$('#test-ul li[id=js]').hide();
娱乐测试
$(window).width();
$(window).height();
$('#test-ul li[id=js]').toggle(); //显示隐藏切换
ajax
总结
小技巧
- 如何巩固JS(看jQuery源码,看游戏源码)
- 巩固HTML。CSS(扒网站,全部down下来,然后对应修改看效果)