20220826 第一组于芮 web前端知识深入

小白成长记——第三十七天

通过几天的学习，我们重新学习了web前端的知识，并且更加深入的学习了jQuery，对于web前端有了更深入的了解，来看一下这几天的学习笔记吧！

布局
双列布局（两列布局）
三列布局
动画
css3兼容性问题
-moz-transition针对火狐浏览器
-webkit-animation针对Safari和Google浏览器
-o-animation针对Opera浏览器

transition 延迟
transition 属性延迟时间变换方式（transition width 2s ease-in ）
animate动画（帧改变）
transform 旋转

弹性布局（块级元素和行内块元素）
1.父容器加上display：flex
row：从左到右

js脚本语言，主要是给网页添加动态功能
两种模型
DOM：文档对象模型
BOM：浏览器对象模型

js解释器，不同浏览器，解释器不一样

js是web前端的核心

js的数据类型
（弱类型，自动进行类型推断，以下三个）
1.number 数字
2.string 字符串
3.boolean 布尔型
（）
4.null 空（定义了，值为空）
5.underfined 未定义
6.NaN 非数字
7.数组
8.对象

对象

文档本身就是一个文档对象
所有的html元素都是元素节点
所有的HTML属性都是属性节点
元素的文本是文本节点

获取元素节点
1.根据ID属性获取对应的元素节点（获取的是唯一一个节点）
2.根据标签名获取元素节点（获取的是多个节点）
3.根据class样式获取对应的元素节点（获取的是多个节点）
新方式
1.找到和传入的选择器匹配的第一个元素节点，返回值是一个元素节点
document.queryselector（“选择器”）
2.找到和传入的选择器匹配的所有元素节点，返回值是多个元素节点
document.queryselector（“选择器”）

新建一个元素节点
document.createelement

属性节点(属性名. 方法名)
获取属性getattribute
设置属性setattribute（重复的设置会覆盖）
删除属性removeattribute
拿到元素所有属性attributes（返回的结果是一个属性节点的映射和集合）

BOM：浏览器对象模型（核心对象：window）
navigator：
history：
screen：
location：

回调函数（一个函数的参数是另一个函数）
callback（）；
传入的参数是函数类型时，只需要写函数名，不需要写小括号，在调用的时候传入参数
定时函数
延迟时间过后，开始执行函数
settimeout（函数，延迟时间）；
清除计时函数
cleartimeout（计时器）；
周期性定时器
setinterval（函数，时间）

浏览器自带了一个小型的数据库，map集合，永久保存
window.localstorage.setitem向storage设置键值对
window.localstorage.getitem获取键值对
localstorage.clear清空键值对
session 会话

弹窗
alert（）；警告弹窗
带有确认和取消的弹窗
confirm（“提示文字”）；（返回值TRUE，FALSE）
带有文本框的弹窗
prompt（“提示文字”，“文本框的文字”）；（返回值文本框中输入的内容）

history历史记录
back（）；
可以前进，可以后退，参数为正，前进，参数为负，后退
location.href=""跳转页面的路径，可以使相对路径，也可以是绝对路径

事件
addeventlistener（添加的事件，触发的函数）
属性.onclick
删除事件
属性.onclick=FALSE

onsubmit事件校验
注意事项
1.加在form表单上
2，要有return
3，函数也要返回boolean类型

事件冒泡和蛊惑
阻止事件冒泡
1.在子元素的时间触发函数中阻止
2，借助event对象（必须通过addeventlistener方式添加的对象才可以使用）
3.调用event.stopproagation

ES6语法
1.let const
2.模板字符串
3.箭头函数 =>
4.symbol
5.promise函数处理回调地狱

js库(别人写好的js文件，我们直接用)
JQuery.js
文档就绪函数：当页面的文档部分加载完成后，要执行的函数
$（document.ready（function（）{}））；
选择器
基本选择器
id选择器--返回值固定一个
class选择器--返回值多个
*选择器-返回值全部
标签选择器--返回值多个

层级选择器
div p 后代
div>p直接子元素
div+p 相邻
过滤选择器
：first获取第一个元素
：last获取最后一个元素
：eq(index)给定位置的元素
：gt(index)大于给定位置
：lt(index)小于指定位置
：not(selector)除了selector以外的所有选择器
内容选择器
：empty 匹配所有不包含子元素的选择器
：parent匹配含有子元素的父元素、、

属性选择器
【name】包含name的元素
input【type=text】文本框
input[type!=text]---除文本框的其他

事件
分别在什么时候触发
1，JQuery文档就绪函数在页面加载完毕之后触发，浏览器解析完HTML标签window.onload
除了解析完HTML标签之外，等到浏览器创建好DOM对象
2、JQuery文档就绪函数可以执行多次，window.onload只能执行一次

mouseover（）鼠标悬停事件
live（）可以绑定选择器匹配元素的事件，后面动态创建出来的也可以
change（）改变事件

appendto（）追加
prepareto（）在之前追加
replacewith（）替换

属性操作
HTML（）===innerHTML
text（）====innertext
val()===input.value
val()函数：给文本框赋值，可以操作单选框，复选框

学习的试试就是这些了，学习的同时还有一些实践案例，例如，本次的实践案例是一个简单的网上订餐的的网页，一起来看看吧！

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>网上点餐</title>
 8 </head>
 9 <body>
10     <span>
11 
12         <h1>欢迎来到本小店</h1>
13     
14         <p>
15             <span>辣子鸡</span>----------------------￥<span>45</span><button>选择</button><button id="b1-" onclick="minus(this)">-</button><span id="s1">0</span>
16             <button id="b1" onclick="add(this)">+</button>
17         </p >
18         <p>
19             <span>木须柿子</span>----------------------￥<span>25</span><button>选择</button><button id="b2-" onclick="minus(this)">-</button><span id="s2">0</span>
20             <button id="b2+" onclick="add(this)">+</button>
21         </p >
22         <p>
23             <span>可口可乐</span>----------------------￥<span>4</span><button>选择</button><button id="b3-" onclick="minus(this)">-</button><span id="s3">0</span>
24             <button id="b3+" onclick="add(this)">+</button>
25         </p >
26         <p>
27             <span>米饭2两</span>----------------------￥<span>2</span><button>选择</button><button id="b4-" onclick="minus(this)">-</button><span id="s4">0</span>
28             <button id="b4+" onclick="add(this)">+</button>
29         </p >
30     
31         <button id="show1" onclick="show(this)">查看订单</button>
32         <button onclick="clears(this)">清空订单</button>
33         <button onclick="oderAll(this)">结账</button>
34     </span> 
35     <script>
36          function add(obj){
37             let ss=obj.parentNode.childNodes;
38             let num=ss[6].innerText;
39             ss[6].innerText=parseInt(num)+1;
40         }
41 
42         function minus(obj){
43             let ss=obj.parentNode.childNodes;
44             let num=ss[6].innerText;
45             if(parseInt(num)==0){
46                 alert("已经没有了！");
47             }else{
48                 ss[6].innerText=parseInt(num)-1;
49             }
50         }
51 
52         function show(obj){
53             let strs=``;
54             let num=3;
55             let child=obj.parentNode.childNodes;
56             while(num<=10){
57                 let str="";
58             }
59         }  
60     </script>
61 </body>
62 </html>