每日测验
上周内容回顾
- HTML
HTTP协议
超文本标记语言就是一堆标签每个标签具有特定的含义是浏览器展示页面所公用的一套标准
注释
web服务的本质
HTML文档结构
标签的分类
一堆标签
特殊符号
标签笔记重要的两个属性
常用标签
列表标签
表格表格
form表单
input标签
select标签
textarea标签
label标签
- JS
面向对象的编程语言
注释 // /**/
引入方式
数据类型
变量
常量
数值类型 number
字符类型string
布尔值boolean
null与undefined
数组对象 python中的列表 []
运算符
流程控制（）条件 {}代码块
三元运算
函数
箭头函数
自定义对象
Date对象
JSON对象
RegExp对象
Math对象(了解)
- BOM操作
- window子对象
- history对象
- location对象(掌握)
- 弹出框
- 计时器相关
DOM操作
- 查找标签
注意三个方法的返回值是不一样的
- 获取值操作
- class、css操作
事件

每日测验

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

上周内容回顾

HTML
```python
HTTP协议

超文本标记语言就是一堆标签每个标签具有特定的含义是浏览器展示页面所公用的一套标准

注释

web服务的本质

    服务端
     客户端
文件(.html)
（你在浏览器上看到的花里胡哨的页面内部都是由HTML组成的）

HTML文档结构

    html
      head
    body

标签的分类

1.
  单标签
双标签

2. 块儿级标签行内标签特例:p标签

一堆标签

标题:h1~h6

u i s b hr br 段落:p

特殊符号

&nbsp;

& > < © ® ¥

标签笔记重要的两个属性

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属性中了) “””


-    
<a name="CSS"></a>
### CSS
```python
# 样式

# 注释 /**/

# 引入方式
    三种方式
      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
```python
面向对象的编程语言

注释 // /**/

引入方式

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对象(了解)


<a name="c7a1dd9a"></a>
# 今日内容概要

-  JS结束<br />BOM与DOM 
-  jQuery框架<br />选择器<br />操作样式 

<a name="69f4f6b4"></a>
# 今日内容详细

<a name="855b5cf2"></a>
### BOM与DOM操作

```python
# 截至目前为止 我们虽然已经学会了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起手
"""

查找标签

直接查找(必须要掌握)
```python “”” id查找类查找标签查找 “””
注意三个方法的返回值是不一样的
document.getElementById(‘d1’)
…

document.getElementsByClassName(‘c1’) HTMLCollection [p.c1]0: p.c1length: 1proto: HTMLCollection

document.getElementsByTagName(‘div’) HTMLCollection(3) [div#d1, div, div, d1: div#d1]

let divEle = document.getElementsByTagName(‘div’)[1] divEle

div>div

“”” 当你用变量名指代标签对象的时候一般情况下都推荐你书写成 xxxEle divEle aEle pEle “”” - 间接查找(熟悉)python let pEle = document.getElementsByClassName(‘c1’)[0] # 注意是否需要索引取值 pEle.parentElement # 拿父节点

“div “

div>div

…

div>p

pEle.parentElement.parentElement … pEle.parentElement.parentElement.parentElement …… pEle.parentElement.parentElement.parentElement.parentElement null let divEle = document.getElementById(‘d1’) divEle.children # 获取所有的子标签 divEle.children[0]

div>div

divEle.firstElementChild

div>div

divEle.lastElementChild

div>p

divEle.nextElementSibling # 同级别下面第一个

div下面div

divEle.previousElementSibling # 同级别上面第一个

div上面的div

<a name="47104a6e"></a>
### 节点操作
```python
"""
通过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)
            }
        }
"""

6、JS BOM和DOM

每日测验

上周内容回顾

HTML

HTTP协议

超文本标记语言 就是一堆标签 每个标签具有特定的含义 是浏览器展示页面所公用的一套标准

注释

web服务的本质

HTML文档结构

标签的分类

一堆标签

特殊符号

标签笔记重要的两个属性

常用标签

列表标签

表格表格

form表单

input标签

select标签

textarea标签

label标签

JS

面向对象的编程语言

注释 // /**/

引入方式

数据类型

变量

常量

数值类型 number

字符类型string

布尔值boolean

null与undefined

数组对象 python中的列表 []

运算符

流程控制 （）条件 {}代码块

三元运算

函数

箭头函数

自定义对象

Date对象

JSON对象

RegExp对象

Math对象(了解)

BOM操作

window子对象

history对象

location对象(掌握)

弹出框

计时器相关

DOM操作

查找标签

注意三个方法的返回值是不一样的

获取值操作

class、css操作

事件

超文本标记语言就是一堆标签每个标签具有特定的含义是浏览器展示页面所公用的一套标准

流程控制（）条件 {}代码块