js基础

每日测验

"""
今日日考
1.
	二进制转换成十进制：v = “0b1111011”
	十进制转换成二进制：v = 18
	八进制转换成十进制：v = “011”
	十进制转换成八进制：v = 30
	十六进制转换成十进制：v = “0x12”
	十进制转换成十六进制：v = 87
2.简述可迭代对象，迭代器对象，生成器对象及应用场景
3.什么是元类?元类的应用场景有哪些，能具体说说吗？
4.你用的MySQL是哪个引擎，各个引擎之间有什么区别
5.你所知道的定位有哪些，每个定位各有什么特点，列举哪些是不脱离文档流的哪些是脱离文档流的
"""

昨日内容回顾

Ps:浏览器默认优先展示文本内容

• 清除浮动带来的影响

  """
  浮动的元素会造成父标签的塌陷
  
  解决塌陷推导步骤
  	1.自己写一个标签强行撑起一个高度
  	2.clear属性
  			clear:left\right\both
  	3.统一解决方式	提前定义好后续直接使用
    	.clearfix:after {
    		content:'';
    		display:block;
    		clear:both;
   	 }
   	 谁塌陷了就给谁加上clearfix类属性
  """
  

• 溢出属性

  """标签内部的内容超出了标签自身的范围会造成内容的溢出"""
  overflow:hidden/scroll/auto/visible
    
  # 圆形头像制作
  overflow:hidden
    
  img {
      max-width:100%;
    }
  

• 定位

  """
  静态 static
  	默认所有的标签都是静态的 无法改变位置	
  
  相对定位 relative
  	相对于标签自身原来的位置
  	(如果你讲标签的position由static变成relative，那么标签就会由没有定位过的标签变成已经定位过的标签 性质就改变了)
  
  绝对定位 absolute
  	eg:小米购物车
  	相对于已经定位过的父标签(如果没有则以body作为参照)
  
  固定定位  fixed
  	eg:回到顶部、右侧小广告...
  	相对于浏览器窗口定位
  
  left
  top
  right
  bottom
  """
  
  # 脱离文档流
  	1.浮动
    2.绝对定位
    3.固定定位
  # 不脱离文档流
  	1.相对定位
  

• z-index

  # 其实是用来调节指向我们人的z轴的距离   模态框
  """
  eg:百度登陆页面 三层结构
  	1.底部正常文本内容
  	2.黑色的布
  	3.白色的登陆页面
  """
  z-index:999
  

• 透明度

  opacity  # 颜色和字体均可改变
  

• 简易版本的博客园首页

  """
  先用div划定区域
  再用HTML先占位
  最后调节样式
  	1.在给标签起id或者class属性的时候 也应该做到见名知意
  
  css单独开设文件书写
  	1.上来先用注释表明用途 以及作用区域
  		/*这是一个博客园首页的样式文件*/
  		
  		/*通用样式*/
      body {
      	margin:0;
      }
      a {
      	text-decoration:none
      }
      ul {
      	list-style-type:none
      	padding-left:0
      }
  		
  		/*左侧样式*/
  		
  		/*右侧样式*/
  """
  

• js简介

  """
  js也是一门编程语言(但是它内部的逻辑有很多bug，不是很严谨)
  js的发展史 javascript ecmascript
  主要版本
  	5.1
  	6
  
  js是很容易学习的
  	当你有了一门编程语言的基础之后 再去学其他编程语言真的没有那么难
  
  js的注释
  	//单行注释
  	/**/  多行注释
  
  js的引入方式
  	两种
  		script内部书写
  		script src属性引入外部js文件
  
  js是用分号作为语句的结束 但是你不写基本也没问题
  
  """
  
  

• js变量

  """
  在js中首次声明变量需要使用关键字
  	var
  		声明的都是全局
  	let
  		可以区分全局和局部
  	for循环案例
  	不用关键字其实也不报错(js非常的不严谨,不容易报错)
  """
  

• js常量

  """
  在js中是有真正意义上的常量的 
  	const pi = 3.14
  	pi = 3.44  # 报错
  """
  

今日内容概要

• 数值类型

• 字符类型

• 布尔值

• null与undefined

• 对象

  数组

  自定义对象

• 流程控制

• 函数

• 内置对象

  时间对象

  正则对象

  JSON对象

• BOM操作(js操作浏览器 显示动态效果等...)

今日内容详细

变量

"""
js变量的命名规范
	1.变量名只能是 
		数字 字母 下划线 $
	2.变量名命名规范(不遵循也可以)
		1.js中推荐使用驼峰式命名
			userName
			dataOfDb
		2.python推荐使用下划线的方式
			user_name
			data_of_db
	3.不能用关键字作为变量名
			不需要记忆 

js代码的书写位置
	1.可以单独开设js文件书写
	2.还可以直接在浏览器提供的console界面书写
		在用浏览器书写js的时候 左上方的清空按钮只是清空当前页面 代码其实还在
		如果你想要重新来 最好重新开设一个 页面
		(在使用浏览器书写 你自己的js代码的时候推荐你在 自己的html页面打开)
"""

数据类型

js也是一门面向对象 的编程语言 即一切皆对象!!!

js/python是一门拥有动态类型

name = 'jason'
name = 123
name = [1,2,3,4]
# name可以指向任意的数据类型 
# 但是有一些语言中，变量名之内指向一种后续不能更改 

数值类型(number)

var a = 11;
var b = 11.11;
// 如何查看当前数据类型
typeof a;

var a = 11;
var b = 11.11;
typeof a;
typeof b;
"number"

// 特殊的 NaN:数值类型 表示的意思是“不是一个数字” NOT A NUMBER

// 类型转换
parseInt()
parseFloat()


parseInt('12312312')
12312312
parseFloat('11.11')
11.11
parseInt('11.11')
11
parseInt('123sdasdajs2312dasd')
123
parseInt('asdasdad123sdasdajs2312dasd')
NaN

字符类型(string)

var s = 'jason'
undefined
typeof s
"string"
var s1 = "jason"
undefined
typeof s1;
"string"
var s2 = '''egon'''  // 不支持三引号
VM665:1 Uncaught SyntaxError: Unexpected string

// 模版字符串
var s3 = `
asdkajsd
sdjkladj
asdjlajdkl
`
typeof s3
"string"
// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错
var name = 'jason'

var age = 18

var sss = `
   my name is ${name} and my age is ${age}
`
sss
"
   my name is jason and my age is 18
"

var s4 = `my name is ${namemmmmm}`
VM1140:1 Uncaught ReferenceError: namemmmmm is not defined
    at <anonymous>:1:24
// 在写js代码的时候 不要去管左侧箭头的内容


// 字符串的拼接
// 在python中不推荐你使用+做拼接 join
// 在js中推荐你直接使用+做拼接
name + age

字符类型常用方法

"""
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
	联想记忆
		MySQL
			concat
			concat_ws
			group_concat
		python
			join
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割
"""
# 记忆的时候一定要对比python去记 

var name = 'egondsb'
undefined

name.length
7

var name1 = '  egonDSB  '
undefined
name1
"  egonDSB  "
name1.trim()
"egonDSB"
name1.trimLeft()
"egonDSB  "
name1.trimRight()
"  egonDSB"

var name2 = '$$jason$$'
undefined
name2.trim('$')  # 不能加括号指定去除的内容
"$$jason$$"

name2.charAt(0)
"$"
name2.indexOf('as')
3

name2.substring(0,5)
"$$jas"
name2.slice(0,5)
"$$jas"
name2.substring(0,-1)  # 不识别负数
""
name2.slice(0,-1)  # 后面推荐就使用slice就可以
"$$jason$"


var name3 = 'eGoNDsb123666HahA'
undefined
name3.toLowerCase()
"egondsb123666haha"
name3.toUpperCase()
"EGONDSB123666HAHA"
var name = 'tank|hecha|liaomei|mengsao|...'
undefined

name.split('|')
(5) ["tank", "hecha", "liaomei", "mengsao", "..."]
name.split('|',2)
(2) ["tank", "hecha"]0: "tank"1: "hecha"length: 2__proto__: Array(0)
name.split('|',10)  # 第二个参数不是限制切割字符的个数还是获取切割之后元素的个数
(5) ["tank", "hecha", "liaomei", "mengsao", "..."]


name.concat(name1,name2)
"tank|hecha|liaomei|mengsao|...  egonDSB  $$jason$$"
var p = 1111
undefined
name.concat(p)  # js是弱类型(内部会自动转换成相同的数据类型做操作)
"tank|hecha|liaomei|mengsao|...1111"


l = [1,2,3,4,5,6,7]
res = '|'.join(l)  # 直接报错
print(res)

布尔值(boolean)

"""
1.在python中布尔值是首字母大写的
	True
	False
2.但是在js中布尔值是全小写的
	true
	false
# 布尔值是false的有哪些
	空字符串、0、null、undefined、NaN
"""

null与undefined

"""
null
	表示值为空 一般都是指定或者清空一个变量时使用
		name = 'jason'
		name = null
undefined
	表示声明了一个变量 但是没有做初始化操作(没有给值)
	函数没有指定返回值的时候 返回的也是undefined
	
参考博客图解：厕所卷纸
https://www.cnblogs.com/Dominic-Ji/p/9111021.html
"""

对象

一切皆对象

• 数组(类似于python里面的列表) []

  var l = [11,22,33,44,55]
  
  typeof l
  "object"
  var l1 = [11,'sdasd',11.11,true]
  
  l1[1]
  "sdasd"
  l1[-1]  # 不支持负数索引
  
  
  var l = [111,222,333,444,555,666]
  undefined
  l.length
  6
  l.push(777)
  7
  l
  (7) [111, 222, 333, 444, 555, 666, 777]
  l.pop()
  777
  l
  (6) [111, 222, 333, 444, 555, 666]
  l.unshift(123)
  7
  l
  (7) [123, 111, 222, 333, 444, 555, 666]
  l.shift()
  123
  l.slice(0,3)
  (3) [111, 222, 333]
  l.reverse()
  (6) [666, 555, 444, 333, 222, 111]
  l.join('$')  # 跟python刚好相反
  "666$555$444$333$222$111"
  
  l.concat([111,222,333])  # extend
  (9) [666, 555, 444, 333, 222, 111, 111, 222, 333]
  l.sort()
  (6) [111, 222, 333, 444, 555, 666]
  
  # 三个比较重要的方法
  var ll = [111,222,333,444,555,666]
  ll.forEach(function(value){console.log(value)},ll)
  VM2277:1 111  # 一个参数就是数组里面每一个元素对象
  VM2277:1 222
  VM2277:1 333
  VM2277:1 444
  VM2277:1 555
  VM2277:1 666
  
  ll.forEach(function(value,index){console.log(value,index)},ll)
  VM2346:1 111 0  # 两个参数就是元素 + 元素索引
  VM2346:1 222 1
  VM2346:1 333 2
  VM2346:1 444 3
  VM2346:1 555 4
  VM2346:1 666 5
  undefined
  ll.forEach(function(value,index,arr){console.log(value,index,arr)},ll)  # 元素 + 元素索引 + 元素的数据来源
  VM2430:1 111 0 (6) [111, 222, 333, 444, 555, 666]
  VM2430:1 222 1 (6) [111, 222, 333, 444, 555, 666]
  VM2430:1 333 2 (6) [111, 222, 333, 444, 555, 666]
  VM2430:1 444 3 (6) [111, 222, 333, 444, 555, 666]
  VM2430:1 555 4 (6) [111, 222, 333, 444, 555, 666]
  VM2430:1 666 5 (6) [111, 222, 333, 444, 555, 666]
  undefined
  
  ll.forEach(function(value,index,arr,xxx){console.log(value,index,arr,xxx)},ll)  # 最多三个
  VM2532:1 111 0 (6) [111, 222, 333, 444, 555, 666] undefined
  VM2532:1 222 1 (6) [111, 222, 333, 444, 555, 666] undefined
  VM2532:1 333 2 (6) [111, 222, 333, 444, 555, 666] undefined
  VM2532:1 444 3 (6) [111, 222, 333, 444, 555, 666] undefined
  VM2532:1 555 4 (6) [111, 222, 333, 444, 555, 666] undefined
  VM2532:1 666 5 (6) [111, 222, 333, 444, 555, 666] undefined
    
    
  
  ll
  (6) [111, 222, 333, 444, 555, 666]
  ll.splice(0,3)  # 两个参数 第一个是起始位置 第二个是删除的个数
  (3) [111, 222, 333]
  ll
  (3) [444, 555, 666]
  ll.splice(0,1,777)  # 先删除后添加
  [444]
  ll
  (3) [777, 555, 666]
  ll.splice(0,1,[111,222,333,444])
  [777]
  ll
  (3) [Array(4), 555, 666]
  
  
  
  var l1 = [11,22,33,44,55,66]
  undefined
  l1.map(function(value){console.log(value)},l1)
  VM3115:1 11
  VM3115:1 22
  VM3115:1 33
  VM3115:1 44
  VM3115:1 55
  VM3115:1 66
  l1.map(function(value,index){return value*2},l1)
  (6) [22, 44, 66, 88, 110, 132]
  l1.map(function(value,index,arr){return value*2},l1)
  (6) [22, 44, 66, 88, 110, 132]
  

运算符

# 算术运算符
var x = 10;
var res1 = x++;
var res2 = ++x;
res1 10
res2 12
++表示自增1 类似于 +=1
加号在前先加后赋值 加号在后先赋值后加

# 比较运算符
1 == '1'  # 弱等于  内部自动转换成相同的数据类型比较了
true  

1 === '1'  # 强等于  内部不做类型转换

1 != '1'
false
1 !== '2'
true

# 逻辑运算符
	# python中 and or not
  # js中 && || !
5 && '5'
'5'

0 || 1
1

!5 && '5'
false

"""
一定要注意到底什么时候返回的是布尔值 什么是返回的是数据
按照后端逻辑理解吧 js这块看看就行了
"""

# 赋值运算符
= += -= *= ....

流程控制

# if判断
var age = 28;
# if(条件){条件成立之后指向的代码块}
if (age>18){
  console.log('来啊 来啊')
}
# if-else
if (age>18){
  console.log('来啊 来啊')
}else{
  console.log('没钱 滚蛋')
}
# if-else if else
if (age<18){
  console.log("培养一下")
}else if(age<24){
  console.log('小姐姐你好 我是你的粉丝')
}else{
  console.log('你是个好人')
}
"""
在js中代码是没有缩进的 只不过我们处于python书写习惯人为的加上了而已
()条件
{}代码块
"""

# switch语法
"""
提前列举好可能出现的条件和解决方式
"""
var num = 2;
switch(num){
  case 0:
  	console.log('喝酒');
  	break;  # 不加break 匹配到一个之后 就一直往下执行
  case 1:
  	console.log('唱歌');
  	break;
  case 2:
  	console.log('洗脚');
  	break;
  case 3:
  	console.log('按摩');
  	break;
  case 4:
  	console.log('营养快线');
  	break;
  case 5:
  	console.log('老板慢走 欢迎下次光临');
  	break;
  default:
  	console.log('条件都没有匹配上 默认走的流程')
}

# for循环
# 打印0-9数字
for(let i=0;i<10;i++){
  console.log(i)
}
# 题目1  循环打印出数组里面的每一个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
  console.log(l1[i])
}

# while循环
var i = 0
while(i<100){
  console.log(i)
  i++;
}

# 三元运算符
# python中三元运算符 res = 1 if 1>2 else 3
# JS中三元运算  res = 1>2?1:3 
条件成立取问好后面的1 不成立取冒号后面的3
var res = 2>5?8:10 # 10
var res = 2>5?8:(8>5?666:444)  # 666
"""
三元运算符不要写的过于复杂 
"""

函数

# 在python定义函数需要用到关键字def
# 在js中定义函数需要用到关键字function

# 格式
function 函数名(形参1,形参2,形参3...){函数体代码}

# 无参函数
function func1(){
  console.log('hello world')
}
func1()  # 调用 加括调用 跟python是一样的

# 有参函数
function func2(a,b){
  console.log(a,b)
}
func2(1,2)

func2(1,2,3,4,5,6,7,8,9)  # 多了没关系 只要对应的数据
VM3610:2 1 2
undefined

func2(1)  # 少了也没关系
VM3610:2 1 undefined
  
# 关键字arguments
function func2(a,b){
  console.log(arguments)  # 能够获取到函数接受到的所有的参数
  console.log(a,b)
}

function func2(a,b){
  if(arguments.length<2){
    console.log('传少了')
  }else if (arguments.length>2){
    console.log('传多了')
  }else{
    console.log('正常执行')
  }
}


# 函数的返回值  使用的也是关键字return
function index(){
  return 666
}
function index(){
  return 666,777,888,999
}
res = index();
999
res
999  # 只能拿到最后一个

function index(){
  return [666,777,888,999]
}
# js不支持解压赋值


# 匿名函数  就是没有名字
function(){
  console.log('哈哈哈')
}
var res = function(){
  console.log('哈哈哈')
}

# 箭头函数(要了解一下)  主要用来处理简单的业务逻辑 类似于python中的匿名函数
var func1 = v => v;  """箭头左边的是形参 右边的是返回值"""
等价于
var func1 = function(v){
  return v
}

var func2 = (arg1,arg2) => arg1+arg2
等价于
var func1 = function(arg1,arg2){
  return arg1+arg2
}

函数的全局变量与局部变量

# 跟python查找变量的顺序一致
var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是？


var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？


var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

词法分析（直接忽略）

自定义对象

# 你可以看成是我们python中的字典 但是js中的自定义对象要比python里面的字典操作起来更加的方便

# 创建自定义对象 {}
"""第一种创建自定义对象的方式"""
var d1 = {'name':'jason','age':18}


var d = {'name':'jason','age':18}
typeof d
"object"

d['name']
"jason"
d.name  # 比python从字典获取值更加的方便
"jason"
d.age
18

for(let i in d){
  console.log(i,d[i])
}  # 支持for循环 暴露给外界可以直接获取的也是键


"""第二种创建自定义对象的方式  需要使用关键字 new"""
var d2 = new Object()  # {}

d2.name = 'jason'
{name: "jason"}

d2['age'] = 18
{name: "jason", age: 18}

Date对象

let d3 = new Date()
Fri May 15 2020 14:41:06 GMT+0800 (中国标准时间)
   
d3.toLocaleString()
"2020/5/15 下午2:41:06"

# 也支持自己手动输入时间
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()

let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString()  # 月份从0开始0-11月
"1111/12/11 上午11:11:11"

# 时间对象具体方法
let d6 = new Date();
d6.getDate()  获取日
d6.getDay()		获取星期
d6.getMonth()		获取月份(0-11)
d6.getFullYear()		获取完整的年份
d6.getHours()			获取小时
d6.getMinutes()		获取分钟
d6.getSeconds()		获取秒
d6.getMilliseconds()  获取毫秒
d6.getTime()					时间戳

JSON对象

"""
在python中序列化反序列化
	dumps 		序列化
	loads			反序列化

在js中也有序列化反序列化
	JSON.stringify()								dumps
	JSON.parse()										loads			
"""
let d7 = {'name':'jason','age':18}
let res666 = JSON.stringify(d7)
"{"name":"jason","age":18}"

JSON.parse(res666)
{name: "jason", age: 18}

RegExp对象

"""
在python中如果需要使用正则 需要借助于re模块
在js中需要你创建正则对象
"""
# 第一种 有点麻烦
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
# 第二种 个人推荐
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/

# 匹配内容
reg1.test('egondsb')
reg2.test('egondsb')

# 题目 获取字符串里面所有的字母s
let sss = 'egondsb dsb dsb'
sss.match(/s/)  # 拿到一个就停止了
sss.match(/s/g)	# 全局匹配  g就表示全局模式

sss.match(/s/)
["s", index: 5, input: "egondsb dsb dsb", groups: undefined]
sss.match(/s/g)
(3) ["s", "s", "s"]

# 全局匹配模式吐槽点
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('egondsb')

reg3.test('egondsb')  # 全局模式有一个lastIndex属性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false

reg3.lastIndex
0
reg3.test('egondsb')
true
reg3.lastIndex
7

# 吐槽点二 
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()

reg4.test()  # 什么都不传 默认传的是undefined
true
reg4.test()
true

reg4.test(undefined)
true
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test()
true

"""
总结 你在用js书写正则的时候一定要注意上述问题
一般情况下你后续也不会解除到了
"""

Math对象(有兴趣就看一下)

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

总结

"""js数据类型	自己从头到位敲一边	有一些模棱两可的知识点直接忽略(逻辑漏洞...)	JSON对象要掌握"""

作业

必做题1.博客园首页搭建(继续完成)2.js部分博客整理(熟悉语法结构及重点强调知识点记忆)3.基础薄弱的同学整理回顾之前的知识点，没事多找些代码敲一敲保持手感选做题1.编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出(提示:switch结构)

每日测验

"""
今日考题:
1.什么是Js，Js的数据类型有哪些,Js序列化反序列化用的是什么方法
2.现有三个普通函数a,b,c都需要用户登陆之后才能访问。现需要你写一个装饰器校验用户是否登陆，并且用户只要登陆一次其他函数在调用时也无需再校验(提示:全局标志位)
3.什么是进程，线程，协程，程序中如何依次创建/实现它们
"""

上周内容回顾

• HTML

  # HTTP协议
  
  # 超文本标记语言 就是一堆标签 每个标签具有特定的含义 是浏览器展示页面所公用的一套标准
  
  # 注释 <!---->
  
  # web服务的本质
  		服务端
   		客户端
      文件(.html)
      （你在浏览器上看到的花里胡哨的页面内部都是由HTML组成的）
  
  # HTML文档结构
  		html
    		head
      	body
        
  # 标签的分类
  	1.
    	单标签
      双标签
    2.
    	块儿级标签
      行内标签
      	特例:p标签
          
  # 一堆标签
  	标题:h1~h6
    u i s b
    hr br
    段落:p
      
  # 特殊符号
  	&nbsp;
    &amp;
    &gt;
    &lt;
    &copy;
    &reg;
    &yen;
  
  # 标签笔记重要的两个属性
  	id
    class
    
  # 常用标签
  	div
    span
    	自己联想简易版本的博客园页面搭建，体会上述标签的作用
    
    a链接标签
    	href
      	1.放url 点击跳转
        2.放其他标签的id值 锚点功能
      target
      	默认是当前页面跳转 _self
        也可以新建页面打开 _blank
      
    img图片标签
    	src
      	图片的地址
      
      alt
      	图片加载不出来的情况下展示提示信息
      
      title
    		鼠标悬浮上去之后展示的提示信息
      
      height、width
  
  # 列表标签
  	ul
    	li
      list-style-type:none
      padding-left:0px
    
    ol
    	li
      
    dl	
    	dt
      dd
  
  # 表格表格
  	表格标签不一定非要讲thead和tbody都写出来 也可以只有tbody没有thead
  	table
    	thead
      	tr
        	th/td
      tbody
      
   		colspan
      rowspan
  
  # form表单
  	朝后端发的获取用户数据的标签 一定要写在form表单内
  	action  控制数据提交的路径
    	1.不写
      2.全写
      3.后缀
    
    method  控制提交方式get/post
    	form默认是get请求
   	
    enctype  控制数据提交的编码格式	
    	urlencoded
      formdata
      ...
   	
  # input标签
  	type属性
    	text
      password
      date
      radio
      	checked  属性名和属性值相同的情况下可以简写
      checkbox
      	checked
      file
      
      submit
      	button标签也可以
      button
      reset
      
  # select标签		
  	默认是单选 可以设置成多选multiple
    一个个的下拉选项是由一个个的option标签组成
    	selected
  
  # textarea标签
  	获取大段文本
  
  # label标签
  
  """
  获取用户数据的标签都应该有name属性用来表明数据的含义 类似于字典的key
  获取到的用户数据类似于字典的value(也是存储到标签的value属性中了)
  """
  

• CSS

  # 样式
  
  # 注释 /**/
  
  # 引入方式
  	三种方式
    	1.style
      2.link
      3.行内
      
  # 如何查找标签
  	选择器 {属性名:属性值;...}
  
  # 基本选择器
  	id选择器
    	#d1
    class选择器
    	.c1
    标签选择器
    	div
   	通用选择器
    	*
  # 组合选择器  我们将标签的嵌套关系比喻成了亲戚关系
  	div span
    
    div>span
    
    div+span
    
    div~span
  
  # 属性选择器
  	input[username='jason']
  
  # 不同选择器之间可以并列、混用
  	div,p,span 
    
    div,#d1,.c1
  
  # 伪类选择器
  	a标签的四个状态
    	:link
      :hover	鼠标放上去
      :active
      :visited
      :focus	聚焦
  # 伪元素选择器
  	:first-letter
    :before
    :after
      	解决浮动带来的影响
        .clearfix:after {
          
        }
  # 选择器的优先级
  	行内  id	class 标签
  
  # 属性相关
  	font-family
    font-size
    font-weight
    color
    	red
      #eee
      rgb()
      rgba()
   	取色工具
   	
    text-align
    	center
    text-decoration
    	none
      a标签自带的下划线
    text-indent
    
    backgroud:red url('') no-repeat center center	
      	背景图片不动
        葫芦娃...
    
    border:3px solid red;
     
   	border-radius
    	50%  圆形头像
     
   	display
    	none
      block
      inline
      inline-block
    
    盒子模型
    	margin
      border
      padding
      content
    
    浮动
    	float
      	0.浮动多用于前期页面布局
      	1.浮动的元素会造成父标签塌陷
    
    清除浮动
    	1.clear
      2.通用的方式
      	哪里塌陷加哪里
        .clearfix:after{
          content:'';
          display:block;
          clear:both
        }
    溢出
    	overflow
      圆形头像
    
    定位
    	静态 static
      相对定位  relative
      绝对定位  absolute
      固定定位	fixed
      
    z-index
    	模态框
    
    透明度
    	opacity
   	
    box-shadow:3px 3px 3px rgba(0,0,0,0.5)
  

• JS

  # 面向对象的编程语言
  
  # 注释	//		/**/
  
  # 引入方式
  	script
  
  # 数据类型
  
  # 变量
  	var 5.1版本及之前的
    let 6.0版本新出的
    
    变量命名规范
    	1.数字 字母 下划线 $
      2.驼峰命名
      	userName
      3.不能有关键字
  # 常量
  	const
  
  # 数值类型 number
  	NaN
  # 字符类型string
  	模版字符串
    	res = `
      sd
      ads
      `
      
      res=`
      asdsa ${name} ...
      `
  # 布尔值boolean
  	true、false
  
  # null与undefined
  	厕纸图片
  
  # 数组对象	python中的列表 []
  
  # 运算符
  	++
    
    ===
    
    && || !
    
  # 流程控制  （）条件		{}代码块
  if-else if -else
  	if(){}else if(){}else{}
  
  switch
  
  for
  	for(let i=0;i<10;i++){}
  
  while
  	while(i<100){}
  
  # 三元运算
  	1>2?3:4
  # 函数
  function func(arg1,arg2,...){
    arguments
    return  不能返回多个 需要你自己构造容器类型返回
  }
  
  # 箭头函数
  var func1 = v => v
  
  # 自定义对象
  """
  在js中创建对象有一个关键字new
  """
  d1 = {'name':'jason','password':123}
  d1.name 
  
  d2 = new Object()
  d2.name = 'jason'
  
  
  # Date对象
  
  # JSON对象
  	JSON.stringify()			dumps
    JSON.parse()					loads
  
  # RegExp对象
  	1.全局模式下有一个lastIndex属性
    2.什么都不写默认匹配undefined
  
  # Math对象(了解)
  

今日内容概要

• JS结束

  BOM与DOM

• jQuery框架

  选择器

  操作样式

今日内容详细

BOM与DOM操作

# 截至目前为止 我们虽然已经学会了js语法 但是你会发现跟浏览器和html文件还是一点关系没有
"""
BOM
	浏览器对象模型  Browser Object Model
		js代码操作浏览器
DOM
	文档对象模型	  Document Object Model
		js代码操作标签
"""

BOM操作

# window对象
window对象指代的就是浏览器窗口

window.innerHeight  浏览器窗口的高度
900
window.innerWidth   浏览器窗口的宽度
1680

window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px')
# 新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置
# 扩展父子页面通信window.opener()  了解

window.close()  关闭当前页面

window子对象

window.navigator.appName
"Netscape"
window.navigator.appVersion
"5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

window.navigator.userAgent		掌握  # 用来表示当前是否是一个浏览器
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

"""
扩展:仿爬措施
	1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器
		userAgent
		user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
	如何破解该措施
		在你的代码中加上上面的user-agent配置即可
"""

window.navigator.platform
"MacIntel"

# 如果是window的子对象 那么window可以省略不写

history对象

window.history.back()  回退到上一页
window.history.forward()  前进到下一页
# 对应的就是你浏览器左上方的两个的箭头

location对象(掌握)

window.location.href	# 获取当前页面的url
window.location.href = url  # 跳转到指定的url
window.location.reload()  # 属性页面   浏览器左上方的小圆圈

弹出框

• 警告框
• 确认框
• 提示框

alert('你不要过来啊！！！')
undefined

confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...')
false
confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...')
true

prompt('手牌号给我看一下','22号消费888')
"来宾三位"

计时器相关

• 过一段时间之后触发(一次)
• 每隔一段时间触发一次(循环)

<script>
    function func1() {
        alert(123)
    }
    let t = setTimeout(func1,3000);  // 毫秒为单位 3秒之后自动执行func1函数

    clearTimeout(t)      // 取消定时任务  如果你想要清除定时任务 需要日前用变量指代定时任务


    function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒执行一次
        function inner(){
            clearInterval(t)  // 清除定时器
        }
        setTimeout(inner,9000)  // 9秒中之后触发
    }
    show()
</script>

DOM操作

"""
DOM树的概念

所有的标签都可以称之为是节点

JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应


DOM操作操作的是标签 而一个html页面上的标签有很多 
	1.先学如何查找标签
	2.再学DOM操作标签
	
DOM操作需要用关键字document起手
"""

查找标签

• 直接查找(必须要掌握)

  """
  id查找
  类查找
  标签查找
  """
  # 注意三个方法的返回值是不一样的
  document.getElementById('d1')
  <div id=​"d1">​…​</div>​
  
  document.getElementsByClassName('c1')
  HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection
        
  document.getElementsByTagName('div')
  HTMLCollection(3) [div#d1, div, div, d1: div#d1]
                     
                     
  let divEle = document.getElementsByTagName('div')[1]
  divEle
  <div>​div>div​</div>​
  """
  当你用变量名指代标签对象的时候 一般情况下都推荐你书写成
  xxxEle
  	divEle
  	aEle
  	pEle
  """
  

• 间接查找(熟悉)

  let pEle = document.getElementsByClassName('c1')[0]  # 注意是否需要索引取值
  
  pEle.parentElement  # 拿父节点
  <div id=​"d1">​"div
      "<div>​div>div​</div>​<p class=​"c1">​…​</p>​<p>​div>p​</p>​</div>​
  pEle.parentElement.parentElement
  <body>​…​</body>​
  pEle.parentElement.parentElement.parentElement
  <html lang=​"en">​<head>​…​</head>​<body>​…​</body>​</html>​
  pEle.parentElement.parentElement.parentElement.parentElement
  null
  
  let divEle = document.getElementById('d1')
  divEle.children  # 获取所有的子标签
  divEle.children[0]
  <div>​div>div​</div>​
  
  divEle.firstElementChild
  <div>​div>div​</div>​
  
  divEle.lastElementChild
  <p>​div>p​</p>​
  
  divEle.nextElementSibling  # 同级别下面第一个
  <div>​div下面div​</div>​
  
  divEle.previousElementSibling  # 同级别上面第一个
  <div>​div上面的div​</div>​
  

  节点操作

  """
  通过DOM操作动态的创建img标签
  并且给标签加属性
  最后将标签添加到文本中
  """
  let imgEle = document.createElement('img')  # 创建标签
  
  imgEle.src = '111.png'  # 给标签设置默认的属性
  "111.png"
  imgEle
  
  imgEle.username = 'jason'  # 自定义的属性没办法点的方式直接设置
  "jason"
  imgEle
  <img src=​"111.png">​
  
  
  imgEle.setAttribute('username','jason')   # 既可以设置自定义的属性也可以设置默认的书写
  undefined
  imgEle
  <img src=​"111.png" username=​"jason">​
  imgEle.setAttribute('title','一张图片')
  imgEle
  <img src=​"111.png" username=​"jason" title=​"一张图片">​
  
  let divEle = document.getElementById('d1')
  undefined
  divEle.appendChild(imgEle)  # 标签内部添加元素(尾部追加)
  <img src=​"111.png" username=​"jason" title=​"一张图片">​
  
  
  """
  创建a标签
  设置属性
  设置文本
  添加到标签内部
  	添加到指定的标签的上面
  """
  let aEle = document.createElement('a')
  
  aEle
  <a>​</a>​
  aEle.href = 'https://www.mzitu.com/'
  "https://www.mzitu.com/"
  aEle
  <a href=​"https:​/​/​www.mzitu.com/​">​</a>​
  
  aEle.innerText = '点我有你好看!'  # 给标签设置文本内容
  "点我有你好看!"
  aEle
  <a href=​"https:​/​/​www.mzitu.com/​">​点我有你好看!​</a>​
  let divEle = document.getElementById('d1')
  undefined
  let pEle = document.getElementById('d2')
  undefined
  divEle.insertBefore(aEle,pEle)  # 添加标签内容指定位置添加
  <a href=​"https:​/​/​www.mzitu.com/​">​点我有你好看!​</a>​
  
  
  """
  额外补充
  	appendChild()
  		removeChild()
  		replaceChild()
  	
  	
  	setAttribute()  设置属性
  		getAttribute()  获取属性
  		removeAttribute()  移除属性
  """
  
  # innerText与innerHTML
  divEle.innerText  # 获取标签内部所有的文本
  "div 点我有你好看!
  div>p
  div>span"
  
  divEle.innerHTML  # 内部文本和标签都拿到
  "div
          <a href="https://www.mzitu.com/">点我有你好看!</a><p id="d2">div&gt;p</p>
          <span>div&gt;span</span>
      "
      
  divEle.innerText = 'heiheihei'
  "heiheihei"
  divEle.innerHTML = 'hahahaha'
  "hahahaha"
  
  divEle.innerText = '<h1>heiheihei</h1>'  # 不识别html标签
  "<h1>heiheihei</h1>"
  divEle.innerHTML = '<h1>hahahaha</h1>'  # 识别html标签
  "<h1>hahahaha</h1>"
  

  获取值操作

  # 获取用户数据标签内部的数据
  let seEle = document.getElementById('d2')
  seEle.value
  "111"
  seEle.value
  "333"
  
  let inputEle = document.getElementById('d1')
  inputEle.value
  
  # 如何获取用户上传的文件数据
  let fileEle = document.getElementById('d3')
  fileEle.value  # 无法获取到文件数据
  "C:\fakepath\02_测试路由.png"
  
  fileEle.files
  FileList {0: File, length: 1}0: File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileList
        
  fileEle.files[0]  # 获取文件数据
  File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}
  

  class、css操作

  let divEle = document.getElementById('d1')
  undefined
  divEle.classList  # 获取标签所有的类属性
  DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]
  
  
  divEle.classList.remove('bg_red')  # 移除某个类属性
  undefined
  
  divEle.classList.add('bg_red')  # 添加类属性
  undefined
  divEle.classList.contains('c1')  # 验证是否包含某个类属性
  true
  divEle.classList.contains('c2')
  false
  
  divEle.classList.toggle('bg_red')  # 有则删除无则添加
  false
  divEle.classList.toggle('bg_red')
  true
  divEle.classList.toggle('bg_red')
  false
  divEle.classList.toggle('bg_red')
  true
  divEle.classList.toggle('bg_red')
  false
  divEle.classList.toggle('bg_red')
  true
  
  
  
  # DOM操作操作标签样式 统一先用style起手
  let pEle = document.getElementsByTagName('p')[0]
  undefined
  pEle.style.color = 'red'
  "red"
  pEle.style.fontSize = '28px'
  "28px"
  pEle.style.backgroundColor = 'yellow'
  "yellow"
  pEle.style.border = '3px solid red'
  "3px solid red"
  

  事件

  """
  达到某个事先设定的条件 自动触发的动作
  """
  # 绑定事件的两种方式
  <button onclick="func1()">点我</button>
  <button id="d1">点我</button>
  
  <script>
      // 第一种绑定事件的方式
      function func1() {
          alert(111)
      }
      // 第二种
      let btnEle = document.getElementById('d1');
      btnEle.onclick = function () {
          alert(222)
      }
  </script>
  
  
  """
  script标签既可以放在head内 也可以放在body内
  但是通常情况下都是放在body内的最底部
  
  
  # 等待浏览器窗口加载完毕之后再执行代码
  window.onload = function () {
              // 第一种绑定事件的方式
              function func1() {
                  alert(111)
              }
              // 第二种
              let btnEle = document.getElementById('d1');
              btnEle.onclick = function () {
                  alert(222)
              }
          }
  """