【前端】周总结

目录

1. 前端简介

1.1 前端与后端

  1. 前端：与用户直接打交道的操作界面都可以称之为是前端
  2. 后端：不直接与用户打交道的内部真正执行核心业务逻辑的代码程序

1.2 前端的学习

HTML CSS JS(javascipt)
网页的骨架 网页的样式 网页的动态

1.3 HTTP超文本传输协议

浏览器需要兼容很多服务端软件，为了实现无障碍沟通交流有了一些协议HTTP协议、FTP协议、HTTPS协议

1.四大协议

1. 基于请求响应(客户端主动，服务端被动)
2. 基于TCP/IP之上作用应用层的协议
   七层协议:应用层、表示层、会话层、传输层、网络层、数据链路层、物理连接层
3. 无状态(服务端记不住你是谁，无论你来了多少次，都当第一次见面)
4. 无/短连接(彼此之间不会有长连接）

2.数据格式

1. 请求数据格式
   1. 请求首行(请求方式(有很多种）协议名称及版本 )
   2. 请求头(一大推k:v键值对)
   3. 换行
   4. 请求体(携带一些敏感的数据，不是所有的请求都有请求体)
2. 响应数据格式
   1. 响应首行(响应状态码)
   2. 响应头(一大堆k:v键值对)
   3. 换行
   4. 响应体(一般情况下就是浏览器再展示给用户看的数据)

3.响应状态码

1. 利用数字来表示一些复杂的情况说明(类似于暗号)
   1. 1XX 服务端已经接收到你的请求正在处理，你可以继续提交或者等待
   2. 2XX 200 OK 服务端给出了相应响应
   3. 3XX 重定向
   4. 4XX 403请求不符合条件，404请求资源不存在
   5. 5XX 服务端内部错误
2. 一般在公司还会自己定义更多的状态码，一般情况下从10000开始(聚合数据，天气预报API错误码参照)

2. HTML

2.1 HTML简介

1. 超文本标记语言,是所有浏览器展示的页面必备的!!!
2. 浏览器展示的界面我们也称之为HTML页面 存储HTML语言的文件后缀一般是.html
3. HTML没有任何的逻辑 所见即所得
4. HTML注释语法 <!--注释内容-->
5. HTML文件结构
   <html>  所有的代码都必须写在html标签内部
    	<head></head>  head内的数据一般都不是给用户看的
       <body></body>  body内的数据就是浏览器展示给用户看的
   </html>
6. HTML标签的分类
   1. 单标签(自闭和标签)
      <img/>
   2. 双标签
      <a></a>
7. HTML代码是不讲究缩进的 我们只是习惯了python的缩进语法

2.2 HTML标签

1.hesd内容见标签

1. title   定义网页标题
2. style   内部支持编写CSS
3. link    引入外部CSS文件或网站图标
4. script  内部支持编写JS代码，还可以通过src属性引入外部JS文件
5. meta    通过内部属性的不同可以有很多功能

2.body标签

1. body内基本标签
   h1~h6 	标题标签
   p	 	段落标签
   hr		水平分割线
   br		换行符
   u		下划线
   i		斜体
   s		删除线
   b		加粗

2. 块儿级标签  
   h1~h6 p hr br   一个标签独占一行

3. 行内标签  
   u i s b    内部文本多大自身就占多大

4. body内基本符号
   &nbsp;	空格
   &gt;		大于号
   &lt;		小于号
   &amp;	&
   &yen;	¥
   &reg;	注册
   &copy;	版权

5. body内布局标签
   div    块儿级标签
   span   行内标签
   1. 块儿级标签是可以通过CSS调整为不独占一行
   2. 标签之间很多时候可以嵌套
   3. 块儿级可以嵌套任何类型的标签
   4. p标签虽然是块儿级标签，但是不能块儿级标签
   5. 行内标签只能嵌套行内标签 

6. body内常见标签
   1. a标签 链接标签
      href 可以填写网址，点击自动跳转
      href 还可以填写其他标签的id值，实现锚点功能
      target 可以控制是否新建页面跳转 _self _blank
   2. img标签 图片标签
      src 填写图片地址(网路地址 本地地址)
      title 鼠标悬浮在图片上就会有提示信息
      alt 图片加载失败提示的信息
      height 调整图片的高度
      width 调整图片的宽度 调整一个另外一个等比例缩放

7. 标签两个重要属性
   1. id性(一对一管理)
      类似于身份证号，在同一个html页面上，id值不能重复
   2. class属性(批量管理)
      类似于分组，多个标签可以拥有相同的class值

3.列表标签

1. 列表标签
   页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
   1. 无序列表
      <ul type="">
        <li>python</li>
        <li>golang</li>
        <li>linux</li>
      </ul>
      type属性：
          disc（实心圆点，默认值）
          circle（空心圆圈）
          square（实心方块）
          none（无样式）
    2. 有序列表
       <ol type="A">
          <li>第一项</li>
          <li>第二项</li>
          <li>第三项</li>
      </ol>
      type属性：
          1 数字列表，默认值
          A 大写字母
          a 小写字母
          Ⅰ大写罗马
          ⅰ小写罗马
    3. 标题列表
       <dl>
         <dt>标题1</dt>
            <dd>内容1</dd>
         <dt>标题2</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
       </dl>
2. 表格标签
     <table border="1">
        <thead>
            <tr>
              <th>序号</th>
              <th>用户名</th>
              <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>1</td>
              <td>jason</td>
              <td>123</td>
            </tr>
            <tr>
              <td>2</td>
              <td>zhang</td>
              <td>111</td>
            </tr>
        </tbody>
     </table>
     属性：
        border: 表格边框.
        cellpadding: 内边距
        cellspacing: 外边距.
        width: 像素 百分比.（最好通过css来设置长宽）
        rowspan: 单元格竖跨多少行
        colspan: 单元格横跨多少列（即合并单元格）

4.表单标签

1. 表单标签
   能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
   <form action="" method=""></from>
   action属性：用于控制数据的提交地址，不写的话就是朝当前页面所在的地址提交
   method属性：用于控制请求的方式(get\post)
<h1>用户注册</h1>
<form action="" method="post">
    <p>username:<input type="text"></p>
    <p>password:<input type="password"></p>
    <p>birthday:<input type="date"></p>
    <p>emali:<input type="email"></p>
    <p>gender:
      <input type="radio" name="gender" checked>男
      <input type="radio" name="gender">女
      <input type="radio" name="gender">其他
    </p>
    <p>hobby:
      <input type="checkbox" name="hobby" checked>篮球
      <input type="checkbox" name="hobby">足球
      <input type="checkbox" name="hobby">双 
色球
    </p>
    <p>file:
      <input type="file" >
    </p>
    <p>files:
      <input type="file" multiple>
    </p>
    <input type="submit">
    <p>province:
      <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">河南</option>
      </select>
    </p>
    <p>GF:
      <select name="" id="" multiple>
        <option value="">小明</option>
        <option value="">小王</option>
        <option value="">小李</option>
        <option value="">小天</option>
      </select>
    </p>
    <p>info:
      <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    <input type="submit" value="用户注册">
    <input type="reset" value="重置内容">
    <input type="button" value="普通按钮">
</form>

3.表单表单标签知识补充

1. 获取用户输入的标签两大重要的属性
   name属性：类似于字典的键
   value属性：类似于字典的值
   form表单在朝后端发送数据的时候，标签必须要有name,否则不会发送该标签的值
2. 获取用户输入的input标签理论上需要有label配合使用
   <lable for="某个input标签的id值"></label>
3. 获取用户输入的input标签也可以添加背景提示
   <input type="text" name="password" placeholder="密码">
4. 获取用户输入的标签如果不是让用户自己写而是选择，那么标签需要自己写value
   <input type="radio" name="gender" value="male">男
   <input type="checkbox" name="bobby" value="basktball">篮球
   <select name="province" id=""><option value="sh">上海</option></select>
5. 针对radio和checkbox可以默认选中
   checked="checked" 如果属性名和属性值相等，那么可以简写 checked
6. 针对option标签也可以默认选中
   selected="selected" 简写为 selected

3. CSS

3.1 CSS 选择器

1. CSS层叠样式表

1. 调整标签样式
2. 语法结构
   选择器{
       属性名1：属性值1；
       属性名2：属性值2；
   }
3. 注释语法
   /*注释内容*/
4. 三种编写css的方式
   1. head中style标签内部直接编写(内部样式)
   2. hesd中link标签引入外部CSS文件(外部样式)
   3. 直接在标签内部通过style属性编写(行内样式)

2.CSS基本选择器

1. 标签选择器：直接编写标签签名来查找标签
    div {
        color: red;  /*查找所有的div标签，并将内部的文本颜色变为红色*/
    }

2. 类选择器：通过编写class的值来查找标签
    .c1{
        color: lime; /*查找所以class属性中含有c1的标签，并将内部的文本颜色变为黄绿色*/
    }

3. id选择器:通过编写id的值来精准查找标签
    #d1 {
        color: aquamarine;  /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/
    }

4. 通用选择器:查找所有的标签
    * {
        color: blue;  /*查找所有的标签 并将内部的文本颜色改为蓝色*/
    }

3.CSS组合选择器

查找div标签内部所有的span(后代)
1. 后代选择器: 两个选择器之间空格隔开 查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签
    #d1 span{
       color: lime;
    }

查找div标签内部所有的儿子span
2. 儿子选择器 两个选择器之间大于号隔开 查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签
    #d1>span {
      color: red;
    }

查找div标签同级别下面紧挨着的一个span标签(弟弟)
3.毗邻选择器
    #d1+span {
      color: aqua;
    }

查找div标签同级别下面所有的span标签(弟弟们)
4.弟弟选择器
    #d1~span{
      color: fuchsia;
    }

4.CSS属性选择器

所以的标签除了有自己默认的属性之外，还可以拥有自定义的任意属性，默认属性 id class 自定义属性 x=1 y=2

1. 查找属性名含有name的标签
  [name] {
   background-color: aqua;
  }

2. 查找属性名含有name并且值是username的标签
  [name='username']{
    background-color: orange;
  }

3. 查找input标签并且 属性名含有name值是username的
  input[name='username']{
      background-color: aqua;
  }

5.CSS选择器之分组与嵌套

1. 当多个选择器查找到的标签需要调整相同的样式，那么可以合并
   div,p,span{
     color: red;
   }
2. 并且合并的选择器彼此不干扰也没有类型的限制
  #d1,.c1,span {
      color: gold;
  }
3. 还可以在选择器基础之上添加额外的选择使得查找更精确
  span.c1{
     color: aqua;
  }
  div#d1{
     color: lime;
  }

6. CSS选择器之伪类选择器

1. a标签默认的颜色有两种 紫色跟蓝色
   紫色:链接地址已经被点击过了
   蓝色:链接地址从来没有点击过

a:hover {
           color: blue;
        }
鼠标悬浮上去之后样式改变 适用于所有含有文本的标签

7. CSS选择器之伪元素选择器

伪元素选择器可以用在解决标签浮动所带来的的负面影响 也可以用来做数据的防爬

1.第一个字体定义
  p:first-letter{
    font-size: 40px;
    color: lime;
  }
2.p前加语句
  p:before{
    content: "CSS";
    color: aqua;
  }
3.p后加语句
  p:after{
  content: "html";
  color: fuchsia;
  }

8.CSS选择器优先级

当多个选择器查找到相同的标签修改不同的样式 那么标签该听谁的
1.选择器相同 引入位置不同
   就近原则
2.选择器不同的情况
   行内 > id选择器 > 类选择器 > 标签选择器
3. !important作用是提高指定样式规则的应用优先权（优先级）。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}。 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。

3.2 CSS相关属性

1.宽和高

1. width属性可以为元素设置宽度。
2. height属性可以为元素设置高度。
3. 块级标签才能设置宽度，行内标签的宽度由内容来决定

2.字体样式

font-family:"微软雅黑"   字体类型
font-size:18px          字体大小
nomal    默认值，标准粗细    
bold     粗体          
bolder   更粗          
lighter  更细          
inherit  继承父元素字体的粗细值

3.文本颜色

十六进制值          #FF0000                                    
RGB值              RGB(255,0,0)                               颜色名称            red                                        
rgba(255,0,0,0.3)  第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

4.文字属性

text-align       水平对齐方式。   
left             左边对齐 默认值 
right            右对齐       
center           居中对齐      
justify          两端对齐      
text-decoration  给文件添加特殊效果                
none             默认，定义标准的文本                
underline        定义文本下的一条线                 
overline         定义文本上的一条线                 
line-through     定义穿过文本下的一条线               
inherit          继承父元素的text-decoration属性的值

5.背景属性

1. 去掉a标签默认的自划线
   a{ text-decoration:none;}
2. 首行缩进
   p{text-indent:32px}
3. 背景属性
   背景颜色
   background-color:red;
   背景图片
   background-image:url('图片路径');
   背景重复
   repeat(默认):背景图片平铺排满整个网页
   repeat-x：背景图片只在水平方向上平铺
   repeat-y：背景图片只在垂直方向上平铺
   no-repeat：背景图片不平铺
   background-repeat: no-repeat; 
   背景位置
   background-position: left top;
   background-position: 200px 200px;
4. 支持简写
   background:#336699 url('1.png') no-repeat left top;

6.边框

border	        属性
border-width	边框宽度
border-style	边框样式
border-color	边框颜色
border-style	边框样式
none	        无边框
dotted	        点状虚线边框
dashed	        矩形虚线边框
solid	        实线边框
border-top	上边框
border-right	右边框
border-left	左边框
border-bottom	下边框
border-radius   用这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形。

7.display

用于控制HTML元素的显示效果
display:"none"          HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。                           
display:"block"         默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。                                 
display:"inline"        按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 
display:"inline-block"  使元素同时具有行内元素和块级元素的特点。

3.3 盒子、浮动、溢出、定位、z-index

1.盒子

1.所有的标签都可以看成是一个快递盒
  margin(外边框)  控制标签之间的距离          两个快递盒之间的距离  
  padding(内边框) 控制内容与边框之间的距离     快递盒的厚度      
  border(边框)    内部文本与边框的距离        盒子内物体距离盒子内壁 
  content(内容)   标签内部的内容             物体自身的大小    
2.margin,padding 操作，padding使用方式与margin一致
  margin-top: 20px;
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 100px;
3.body标签自带8px的外边距
margin:0;         简写形式 作用于上下左右
margin: 10px 20px;           上下  左右
margin: 10px 20px 30px;      上 左右 下
margin: 10px 20px 30px 40px; 上 右 下 左
margin还可以让内部标签居中展示
margin:100px auto  仅限于水平方向

2.浮动

1. 在CSS中，任何元素都可以浮动。
2. 浮动元素会生成一个块级框，而不论它本身是何种元素。
3. 关于浮动的两个特点：
   1. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
   2. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样.（浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示)）

1.取值
  left    向左浮动    
  right   向右浮动    
  none    默认值，不浮动 
2.clear属性规定元素的哪一侧不允许其他浮动元素。
  left	   在左侧不允许浮动元素。
  right	   在右侧不允许浮动元素。
  both	   在左右两侧均不允许浮动元素。
  none	   默认值。允许浮动元素出现在两侧。
  inherit  规定应该从父元素继承 clear 属性的值
3.解决浮动造成的父标签塌陷
  提前写好css操作 遇到标签塌陷就给标签加clearfix类值即可
  .clearfix:after {
           content: '';
           display: block;
           clear: both
  }

3.溢出

visible    默认值。内容不会被修剪，会呈现在元素框之外。       
hidden     内容会被修剪，并且其余内容是不可见的。          
scroll     内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 
auto       如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 
inherit    规定应该从父元素继承 overflow 属性的值。    
overflow   水平和垂直均设置                     
overflow-x 设置水平方向                       
overflow-y 设置垂直方向

4.定位

static(静态)：
    所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
relative(相对定位)：
    相对于标签原来的位置做定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute(绝对定位)：
    基于已经定位过的父标签做定位(如果没有父标签则以body为参照)。设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed(固定定位)：
    相对于浏览器窗口做定位。对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

5.z-index

设置对象的层叠顺序
1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4. 从父现象：父亲怂了，儿子再牛逼也没用

4. JavaScript

4.1 JavaScript简介

1. 跟java没有关系 蹭热度
   该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
2. JavaScript与ECMAScript区别
   ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现
3. JavaScript是一门编程语言(NodeJS)
   1. JavaScript 是脚本语言
   2. JavaScript 是一种轻量级的编程语言。
   3. JavaScript 是可插入 HTML 页面的编程代码。
   4. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
4. html页面两种引入js的方式
   1. <script>代码 </script>
   2. <script src="myscript.js"></script>
5. 两种注释语法
   1. //
   2. /*  */
6. JavaScript中的语句要以分号（;）为结束符,建议加分号
7. 支持编写js代码地方
   1. pycharm
   2. 浏览器

4.2 JS数据类型

1.JS变量与常量

1. 在JS中声明变量和常量都需要使用关键字
    1. var:全局有效
    2. let:如果在局部名称空间中使用 那么仅在局部名称空间有效
    3. const:定义常量
2. JS也是动态类型:变量名绑定的数据值类型不固定
3. 在js中查看数据类型可以使用 typeof

2.JS数据类型之数值类型(number)

1.JavaScript不区分整型和浮点型，就只有一种数字类型，即所有的数值都是数值类型number
  var a = 12.34;
  var b = 20;
2.还有一种NaN，表示不是一个数字（Not a Number）返回NaN。
  parseInt("123")  // 返回123
  parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
  parseFloat("123.456")  // 返回123.456

3.字符串(String)

1.字符串拼接
  var a = "Hello"
  var b = "world;
  var c = a + b; 
  console.log(c);  // 得到Helloworld
2.方法
  .length                    返回长度       
  .trim()                    移除空白     
  .trimLeft()                移除左边的空白   
  .trimRight()               移除右边的空白   
  .charAt(n)                 返回第n个字符   
  .concat(value, ...)        拼接        
  .indexOf(substring, start) 子序列位置     
  .substring(from, to)       根据索引获取子序列 
  .slice(start, end)         切片        
  .toLowerCase()             小写        
  .toUpperCase()             大写        
  .split(delimiter, limit)   分割

4.JS数据类型之布尔值(boolean)

1.python与js对比
  python                                js                                
  bool                                  boolean                           
  True                                  true                              
  False                                 false                             
  False:0 None 空字符串 空列表 空字典      false:(空字符串)、0、null、undefined、NaN 
2.null和undefined
  1.null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null
  2.undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined.还有就是函数无明确的返回值时，返回的也是undefined
  3.null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null),undefined则表示只声明了变量，但还没有赋值

5.JS数据类型之对象(object)

1.简介
  在JS中也是一切皆对象,提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。对象之数组(相当于python中的列表)。
2.对象之数组
  数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表
3.常用方法
  .length     数组的大小   
  .push(ele)  尾部追加元素  
  .pop()      获取尾部的元素 
  .unshift    头部插入元素  
  .shift      头部移除元素  
  .forEach()  将数组的每个元素传递给回调函数
  .splice()   删除元素，并向数组添加新元素
  .map()      返回一个数组元素调用函数处理后的值的新数组

6.JS数据类型之自定义对象

1.自定义对象(两种方式）
  自定义对象(相当于python中的字典),自定义对象操作数据值的方式更加简单，直接使用句号符

定义方式1：
    let d1 = {'name':'jason','pwd':123}
定义方式2：
    let d2 = new Object()
2.查询
  ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。
  typeof "abc"  // "string"
  typeof null  // "object"
  typeof true  // "boolean"
  typeof 123 // "number"

4.3 运算符与流程控制

1.运算符

1.算数运算符
  + - * / % ++ --
  x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值
2.比较运算符
  > >= < <= != == === !==
  ==	弱等于(自动转换成相同数据类型)
  === 强等于(不自动转换)
  1 == “1”  // true  弱等于
  1 === "1"  // false 强等于
  //上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
  //数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误
3.逻辑运算符
  && || !
  &&	等价于python中的and
  ||      等价于python中的or
  !	等价于python中的not
4.赋值运算符
  = += -= *= /=

2.流程控制

1.分支结构
  1. 单if分支
  if(条件){条件成立之后执行的代码}
  2. if...else分支
  if(条件){
     条件成立之后执行的代码
  }else{
     条件不成立之后执行的代码 
  }
  3. if...elif if ...else分支
  if(条件1){
     条件1成立之后执行的代码
  }else if(条件2){
     条件1不成立条件2成立执行的代码
  }else{
     条件不成立之后执行的代码
  }
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
2.循环结构
  1.for
  for (var i=0;i<10;i++){
     console.log(i);
  }
  2.while
  var i = 0;
  while (i < 10) {
    console.log(i);
    i++;
  }

4.4 JS函数

1.函数定义

JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。
// 普通函数定义
function f1() {
   console.log("Hello world!");
}

// 带参数的函数
function f2(a, b){
   console.log(arguments); //内置的arguments对象
   console.log(arguments.length);
   console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
   return a + b;
}

sum(1, 2); //调用函数

// 匿名函数方式
var sum = function(a, b){
   return a + b;
}
sum(1, 2);

// 立即执行函数，书写立即执行的函数，首先先写两个括号（）（）这样防止书写混乱
(function(a, b){
  return a + b;  
})(1, 2);

//ES6中允许使用“箭头”（=>）定义函数。
var f = v => v;
// 等同于
var f = function(v){
  return v;
}
如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：
var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

// 函数中的arguments参数
function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}
add(1,2)

注意：函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回

2. 函数的全局变量和局部变量

1. 局部变量
   在JavaScript函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除
2. 全局变量
   在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它
3. 变量生存周期
   JavaScript变量的生命期从它们被声明的时间开始
   局部变量会在函数运行以后被删除
   全局变量会在页面关闭后被删除
4. 作用域
   首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样

4.5 内置对象和方法

JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。
1.Date对象 创建Date对象
  //方法1：不指定参数
  var d1 = new Date();
  console.log(d1.toLocaleString());
  //方法2：参数为日期字符串
  var d2 = new Date("2004/3/20 11:12");
  console.log(d2.toLocaleString());
  var d3 = new Date("04/03/20 11:12");
  console.log(d3.toLocaleString());
  //方法3：参数为毫秒数
  var d3 = new Date(5000);
  console.log(d3.toLocaleString());
  console.log(d3.toUTCString());
  //方法4：参数为年月日小时分钟秒毫秒
  var d4 = new Date(2004,2,20,11,12,0,300);
  console.log(d4.toLocaleString());  //毫秒并不直接显示
2.JSON对象
  1.python中
  dumps() 将其他数据类型转换成json格式字符串
  loads() 将json格式字符串转化成对应的数据类型
  dump() 将其他数据数据以json格式字符串写入文件
  load() 将文件中的json格式字符串读取出口并转换成对应的数据类型
  2.js中
  var str1 = '{"name": "jason", "age": 18}';
  var obj1 = {"name": "jaosn", "age": 18};
  // JSON字符串转换成对象
  var obj = JSON.parse(str1); 
  // 对象转换成JSON字符串
  var str = JSON.stringify(obj1);
3.RegExp对象
  // 定义正则表达式两种方式
  var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
  var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
  // 正则校验数据
  reg1.test('jason666')
  reg2.test('jason666')   
4.Math对象
  abs(x)      返回数的绝对值。
  exp(x)      返回 e 的指数。
  floor(x)    对数进行下舍入。
  log(x)      返回数的自然对数（底为e）

4.6 BOM和DOM

1.简介

BOM（Browser Object Model）是指浏览器对象模型，通过写js代码可以跟浏览器交互
DOM（Document Object Model）是指文档对象模型，通过写js代码可以跟html交互

2.BOM操作

1.window对象
  window.innerHeight - 浏览器窗口的内部高度
  window.innerWidth - 浏览器窗口的内部宽度
  window.open() - 打开新窗口
  window.close() - 关闭当前窗口
2.window的子对象
  navigator.appName　　// Web浏览器全称
  navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
  navigator.userAgent　　// 客户端绝大部分信息
  navigator.platform　　　// 浏览器运行所在的操作系统
3.location对象
  window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
  常用属性和方法：
  location.href  获取URL
  location.href="URL" // 跳转到指定页面
  location.reload() 重新加载页面
  警告框
  alert("你看到了吗？")
  确认框
  confirm("你确定吗？")
  提示框
  prompt("输入密码")
4.计时事件
  1.setTimeout定时
    1. setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
    2. setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
    3. 第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
    4. setTimeout("JS语句",毫秒)
  2.clearTimeout() 取消任务
  3.setInterval()
    1. setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
    2. setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
    3. setInterval("JS语句",时间间隔)
  4.clearInterval()
    1. clearInterval() 方法可取消由 setInterval() 设置的 timeout。
    2. clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

3.DOM操作

1.查找标签
  document.getElementById 根据ID获取一个标签 
  document.getElementsByClassName 根据class属性获取 
  document.getElementsByTagName   根据标签名获取标签合集 
  parentElement                  父节点标签元素     
  children                       所有子标签      
  firstElementChild              第一个子标签元素    
  lastElementChild               最后一个子标签元素   
  nextElementSibling             下一个兄弟标签元素   previousElementSibling         上一个兄弟标签元素   
2.节点操作(标签操作)
  // 动态创建即零时有效 非永久性
  // 追加一个子节点（作为最后的子节点）
  somenode.appendChild(newnode)；
  // 把增加的节点放到某个节点的前边。
  somenode.insertBefore(newnode,某个节点);
  // 命名 XXXEle规范后缀为Ele
  let XXXEle = document.createElement('标签名') //添加节点
  XXXEle.id = 'id值'   // 为节点添加id值
  XXXEle.innerText = '内部文本'  // 为节点添加内部文本
  divEle.append(XXXEle)  // 给div标签里添加XXX节点
  // 删除节点
  somenode.removeChild(要删除的节点)
  // 替换节点
  somenode.replaceChild(newnode, 某个节点);
3.属性节点
  XXXEle.属性   // 只能是默认属性
  XXXEle.setAttribute()  //默认属性、自定义属性
  XXXEle.getAttribute()  //拿一个属性对应的值
  XXXEle.removeAttribute()  // 删除属性
  //文本操作
  XXXEle.innerHTML  // 获取标签内部所有的内容
  XXXEle.innerText  // 只获取文本不获取标签
  XXXEle.innerHTML="标签文本内容 eg:<p>2</p>"  // 添加值
  XXXEle.innerText="文本内容 eg:2"   // 添加值

4.7 JS操作

1.JS获取用户输入

1.普通数据(输入，选择)
    标签对象.value
2. 文件数据(上传)
    标签对象.files
    标签对象.files[0]

2.JS类属性操作

标签对象.classList   获取所有标签值
标签对象.className  获取所有样式类名（字符串）
标签对象.classList.contains()  存在返回true ,否则返回false
标签对象.classList.add()  添加类
标签对象.classList.remove()  删除类
标签对象.classList.toggle()  存就删除类，否则添加

3.JS样式操作

标签对象.style.标签样式属性名
eg: backgroundColor
    backgroundImage

5. 事件

1.事件理解

HTML4.0的新特性，事件可以理解为是给html标签绑定一些额外的功能（能够触发js代码的运行）
    onclick        当用户点击某个对象时调用的事件句柄。
    ondblclick     当用户双击某个对象时调用的事件句柄。
    onfocus        元素获得焦点。    // 练习：输入框
    onblur         元素失去焦点。    应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
    onchange       域的内容被改变。    应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
    onkeydown      某个键盘按键被按下。  应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
    onkeypress     某个键盘按键被按下并松开。
    onkeyup        某个键盘按键被松开。
    onload         一张页面或一幅图像完成加载。
    onmousedown    鼠标按钮被按下。
    onmousemove    鼠标被移动。
    onmouseout     鼠标从某元素移开。
    onmouseover    鼠标移到某元素之上。
    onselect      在文本框中的文本被选中时发生。
    onsubmit      确认按钮被点击，使用的对象是form。

2.绑定事件的两种方式

// 方式1：提前写好函数，标签内部指定
function func1(){
   alert(123）
}
// 方式2：先查找标签，然后批量绑定
let btnELe = document.getElementById('d1')
btnEle.onclick = function() {
   alert(321）
}

3.事件中的关键字this

<input type="button" value="快来点我" ondblclick="func1()">
<button id="d1">快来按我</button>
<script>
   // 绑定事件的方式1:提前写好函数 标签内部指定
    function func1(){
      alert(123)
      console.log(this)
    }
   // 绑定事件的方式2:先查找标签 然后批量绑定
   let btnEle = document.getElementById('d1')
   btnEle.onclick = function (){
     alert(321)
     console.log(this)
   }

4.window.onload

window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。.onload()函数存在覆盖现象。

6. jQuery

6.1 jQuery简介

1.定义
  jQuery是一个轻量级、兼容多浏览器的JavaScript库
  jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“(少写，多做)
2.jQuery的优势
  一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
  链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
  事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
  跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
3.jQuery导入
  使用jQuery必须要先导入，本质其实就是一个js文件
  本地导入：提前下载文件并导入
  网路CDN服务：只要计算机能够联网就可以直接导入 bootcdn
  网址：https://www.bootcdn.cn/
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  注意: 使用CDN的jQuery前提必须要有网络
  优点：好处在于无需下载文件，直接走网络请求使用
  缺点: 不好的地方在于必须要有网才可以使用

6.2 jQuery基本使用

1. JS与jQuery语法对比，js实现两个标签颜色不同


2.查找标签

jQuery()  >>>  $()  简写
id选择器:
   $(#id)
标签选择器：
   $("tagName")
class选择器:
   $(".className")
配合使用：
   $("div.cl")  //找到有cl class 类的div标签
所有元素选择器：
   $("*")
组合选择器：
   $("#id, .className, tagName")
层级选择器：
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

3.jQuery选择器查找标签之后的结果与js有何区别

结果集都是数组但是功能有区别
1. 如果使用索引取值，那么都是标签对象标签对象无法调用jQuery提供的方法的
2. 标签对象如果想转换成jQuery对象需要使用 $() 转换成jQuery对象的目的是为了使用jQuery提供的更多方法

6.3 选择器

1.基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

2.属性选择性

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

3.表单筛选器

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

4.表单对象属性

:enabled
:disabled
:checked
:selected
posted @ 2022-08-28 19:34  |相得益张|  阅读(71)  评论(0)  编辑  收藏  举报