前端基础知识汇总

发布于：2025-03-31 ⋅ 阅读:(21) ⋅ 点赞:(0)

目录

HTML5详解（结构层）

什么是HTML

HTML基本结构

网页基本信息

图像标签

链接标签

超链接

行内元素与块元素

列表标签

表格标签

页面结构分析

iframe内联框架

表单语法

表单元素格式

表单的简单应用

表单初级验证

CSS详解（表现层）

什么是CSS预处理器

常见的CSS预处理器有哪些？

什么是CSS

CSS发展史

CSS快速入门

CSS的三种导入方式

选择器（重点）

基本选择器

层次选择器

结构伪类选择器

属性选择器（重点 常用）

美化网页元素

为什么美化网页

字体样式

文本阴影与超链接伪类

列表(ul ol)

背景(background)

渐变（linear-gradient）

盒子模型

边框（border）

内外边距（padding margin ）

圆角边框（border-radius）

盒子阴影

浮动（float）

什么是浮动？

元素怎样浮动？

display

父级边框塌陷的问题

对比

定位

相对定位

绝对定位

固定定位 fixed

z-index

javaScript（行为层）

什么是JavaScript？

概述

历史

快速入门

引入JavaScript

基本语法入门

数据类型

严格检查格式

数据类型

字符串

数组

对象

流程控制

Map和Set

iterator

函数

定义函数

变量的作用域

方法

内部对象

Date

JSON

Ajax

面向对象编程

操作BOM对象（重点）

操作DOM对象（重点）

操作表单（验证问题）

jQuery

路线：HTML+CSS+JS+jQuery+vue

HTML5详解（结构层）

什么是HTML

  • HTML 超文本标记语言（Hyper Text Markup Language）超文本包括：文字，图片，音频，视频，动画等

拓展：

  • W3C

    • World Wide Web Consortium （万维网联盟）

    • 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构

    • W3C

    • W3C中国

  • W3C标准包括

    • 结构化标准语言（HTML、XML）

    • 表现标准语言（CSS）

    • 行为标准（DOM（文档标准模型）、ECMAScript）

HTML基本结构

<body></body>等成对的标签，分别叫做开放标签和闭合标签，单独呈现的标签（空元素），如<hr/>;意为用/来关闭空元素

网页基本信息

  • DOCTYPE声明

  • < title >标签

  • < meta > 标签

<!--!DOCTYPE ：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页的头部-->
<head>
<!--    meta 描述性标签，它用来描述我们网站的一些信息-->
<!--    meta一般用来做SEO（搜索引擎优化）-->
    <meta charset = "UTF-8">
    <meta name="keywords" content="lyc学Java，初学者">
    <meta name="description" content="这是我的第一个网页">

<!-- title网页标题 -->
    <title>My First Web</title>
</head>
<!--body标签代表网页主体-->
<body>
hello world
</body>
</html>

网页基本标签

  • 标题标签：< title >< /title>

  • 段落标签:< p>< /p>

  • 换行标签:< br/>

  • 水平线标签:< hr/> 删除线< del> 下划线 < u>

  • 字体样式标签:粗体：< b>< /b>或者< strong> 斜体 < i>< /i>或< em>

  • 注释与特殊符号:空格：&nbsp ; 大于：&gt ; 小于：&lt ;版权：&copy ;注册商标：&reg ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--段落标签-->
<p>花间一壶酒，独酌无相亲。</p>

<p>举杯邀明月，对影成三人。</p>

<p>月既不解饮，影徒随我身。</p>

<p>暂伴月将影，行乐须及春。</p>

<p>我歌月徘徊，我舞影零乱。</p>

<p>醒时相交欢，醉后各分散。</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
花间一壶酒，独酌无相亲。<br/>

举杯邀明月，对影成三人。<br/>

月既不解饮，影徒随我身。<br/>

暂伴月将影，行乐须及春。<br/>

我歌月徘徊，我舞影零乱。<br/>

醒时相交欢，醉后各分散。<br/>
<!--粗体，斜体-->
<b>花间一壶酒，独酌无相亲。

    举杯邀明月，对影成三人。

    月既不解饮，影徒随我身。

    暂伴月将影，行乐须及春。

    我歌月徘徊，我舞影零乱。

    醒时相交欢，醉后各分散。</b><br>
<i>花间一壶酒，独酌无相亲。

    举杯邀明月，对影成三人。

    月既不解饮，影徒随我身。

    暂伴月将影，行乐须及春。

    我歌月徘徊，我舞影零乱。

    醒时相交欢，醉后各分散。</i>

删除线：<del>花间一壶酒，独酌无相亲。</del>
下划线：<u>举杯邀明月，对影成三人。</u>
斜体：<i>月既不解饮，影徒随我身。</i>
粗体：<b>暂伴月将影，行乐须及春。</b>
斜体加粗：<i><b>我歌月徘徊，我舞影零乱。</b></i>
粗体加斜体：<b><i>醒时相交欢，醉后各分散。</i></b>
删除线加下划线：<del><u>花间一壶酒，独酌无相亲。</u></del>
删除线加斜体：<del><i>举杯邀明月，对影成三人。</i></del>
删除线加粗：<del><b>月既不解饮，影徒随我身。</b></del>
删除线加斜体加粗：<del><b><i>暂伴月将影，行乐须及春。</i></b></del>
删除线加斜体加粗加下划线：<del>
    <b><i><u>我歌月徘徊，我舞影零乱。</u></i></b>
</del>
</body>
</html>

图像标签

常见的图像格式： jpg,gif,png,bmp

格式：

<img src = "path" alt = "text" title = "text" width = "x" height = "y">

src:图像地址

alt：图像的替代文字

title：鼠标悬停提示文字

width：图像宽度 height：高度

链接标签

格式：

<a href="path" target="目标窗口位置" title="基本标签学习">
    <img src="010.jpg" alt="图片1" width="200" height="200"></a>

href:连接路径

target:链接在哪个窗口打开，常用值：_blank _self

<!--a标签
href：必填，表示要跳转到那个页面
target：_blank表示在新窗口打开，_self表示在当前窗口打开
title：鼠标移上去显示的文字
-->
<a href="https://www.baidu.com" target="_blank" title="百度">百度</a>
<a href="basictag.html" target="_self" title="基本标签学习">
    <img src="010.jpg" alt="图片1" width="200" height="200">
</a>
超链接

  • 页面间链接

    • 从一个页面连接到另一个页面

  • 锚链接

    <!--锚标签
1.需要一个锚标记
2.跳转到标记
-->
<a href="imgDemo.html" target="_self" #down> wqdqwdq</a>
<a id = "down">来来来</a>

  • 功能性链接

    邮件链接：mailto

    <a href = "mailto:邮箱地址@qq.com">点击联系我</a>

行内元素与块元素

  • 块元素

    • 无论多少内容，该元素占一行

    • （p,h1-h6...）

  • 行内元素

    • 内容撑开宽度，左右都是行内元素的可以排在一行

    • （a,strong,em...）

列表标签

  • 什么是列表

    • 列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者更快捷地获得相应的信息

  • 列表的分类

    • 无序列表

    • 有序列表

    • 定义列表

代码展示

<!--有序列表
应用范围：试卷，问答-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
</ol>
<!--无序列表
应用范围：导航，侧边栏。。。-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
应用范围：网站底部-->
<dl>
    <dt>java</dt>
    <dd>java</dd>
    <dd>java</dd>
    <dd>java</dd>

表格标签

  • 为什么使用表格

    • 简单通用

    • 结构稳定

  • 基本结构

    • 单元格

    • 行

    • 列

    • 跨列

    • 跨行

<!--table
行：tr
列：td-->
<table border="1px">
    <tr>
<!--       colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
<!--      rowspan  跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

页面结构分析

元素名 描述
header 标记头部区域的内容（用于页面或页面的一块区域）
footer 标记脚部区域的内容（用于页面或页面的一块区域）
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容

iframe内联框架

<iframe src="https://www.baidu.com” name = "mainFrame"></iframe>

name:框架标识名

width，height

<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px" name="hello"></iframe>
<a href="myFristWeb.html" target="hello">点击跳转</a>

在内联框架中跳转网页

表单语法

action：表单提交的位置，可以是网站，也可以是一个请求处理地址

method：post get 提交方式

get方式提交:我们可以在URL中看到我们提交的信息，不安全，高效

post提交：比较安全，传输大文件

表单元素格式
属性 说明
type 指定元素的类型。text,password,checkbox,radio,submit,reset,file,hidden,image和button，默认为text
name 指定表单元素的名称
value 元素的初始值，type为radio时必须指定一个值
size 指定表单元素的初始宽度，当type为text或password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位
maxlength type为text或password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否被选中
placeholder 当表单控件没有值时在控件中显示的文本
required 让某个文本框不能为空

代码示例;

<from method = "post" action="http://www.baidu.com">
    <input type="text" name="username" placeholder="请输入用户名" value="123121" maxlength="8" size="30"/>
    <input type="password" name="password" placeholder="请输入密码"/>
<!--单选框标签
type = radio
value:单选框的值
name:表示组
checked 默认选中-->
  <p>性别 <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女</p>
<!--多选框
type = “checkbox”
checked 默认选中
-->
    <p>爱好
        <input type="checkbox" name="hobby" value="打球">打球
        <input type="checkbox" name="hobby" value="打篮球">打篮球
        <input type="checkbox" name="hobby" value="打毛球">打毛球
    </p>
<!--    按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
    <p><input type="button" value="你是什么"></p>
    <p><input type="image" src="0190.jpg" alt="提交" ></p>
    <input type="submit" value="登录">
    <input type="reset" value="重置">
<!--    下拉框
selected 默认选中-->
    <p>下拉框
        <select name="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州" selected>广州</option>
            <option value="深圳">深圳</option>
        </select>
    </p>
<!-- 文本域
行：col
列：row
-->
    <p>文本域
        <textarea name="content" rows="5" cols="20">
            文本域
        </textarea>
    </p>
<!--    文件域
type="file" name="file"-->
    <p>
        <input type="file" name="file">
        <input type="submit" value="上传"></input>
    </p>
<!--    邮件验证-->
<p>邮箱：
    <input type="email" name="email">
</p>
<!--    URL验证-->
    <p>网址：
        <input type="url" name="url">
    </p>
<!--    数字-->
    <p>商品数量:
        <input type="number" name="number" min="10" max="100" step="1">
    </p>
<!--    日期-->
    <p>
        <input type="date" name="date">
    </p>
<!--    滑块-->
    <p>音量:
    <input type="range" name="voice" min="0" max="100" step="2">
    </p>
<!--    搜索框-->
    <p>搜索:
        <input type="search" name="search">
    </p>
</from>

表单的简单应用

  • 隐藏域:hidden

  • 只读 ：readonly

  • 禁用:disabled

    拓展

<!--    增强鼠标可用性 可以通过指定for的值,点击label直接锁定for中的值所对应的标签-->
<label for="username">用户名:</label>
    <p>
        <input type="text" name="username" id="username">

表单初级验证

  • 思考？为什么要进行表单验证

  • 答：减轻服务器的压力，保证数据的安全性

  • 常用方式

    • placeholder 提示信息

    • required 非空判断

    • pattern 正则表达式 去上网查询，可以自定义标签

CSS详解（表现层）

HTML+CSS+JavaScript ==》 结构+ 表现 + 交互

如何学习

1.CSS是什么

2.CSS怎么用？

3.CSS选择器（重点，难点）

4.美化网页（文字，阴影，超链接，列表，渐变。。。）

5.盒子模型

6.浮动，定位

7.网页动画（特效效果）

什么是CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一门专门的编程语言，为CSS增加一些编程的特性，将CSS作为目标生成文件，然后开发者使用这种语言进行CSS的编码工作，转化为普通的话说就是“用一门专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”

常见的CSS预处理器有哪些？

  • SASS：基于Ruby，通过服务端处理，功能强大，解析效率高，需要学习Ruby语言，上手难度高于LESS

  • LESS：基于NodeJS，通过客户端处理，使用简单，功能比SASS简单，解析效率也低于SASS，但实际开发中足够了，如果后台人员使用，建议使用LESS

什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

CSS发展史

CSS1.0

CSS2.0 DIV(块) +CSS HTML与CSS结构分离的思想，网页变得简单，SEO（搜索引擎优化）

CSS2.1 浮动，定位

CSS3.0 圆角边框 阴影，动画，问题：浏览器兼容性

CSS快速入门

规范：<style> 可以编写CSS的代码，每一个声明，最好使用分号结尾，

语法

选择器{
声明1;
声明2;
声明3;
}

CSS优势：

1.内容与表现分离

2.网页结构表现统一，可以实现复用

3.样式十分丰富

4，建立使用独立于HTML的CSS

5.利用SEO,容易被搜索引擎收录

CSS的三种导入方式

1.行内样式:行内样式，在标签元素中，编写一个style属性，编写样式即可

<h1 style="color: red;font-size: 50px;">首页</h1>

2.内部样式

<style>
    h1{
        color: #00ff51;
        font-size: 50px;
    }
</style>

3.外部样式

    <link rel="stylesheet" href="demo.css">
/*外部样式*/
h1{
    color: aquamarine;
}

优先级比较: 就近原则，离元素最近的优先级最高，行内一定是最高，可以调动外部和内部的位置来选择哪个

拓展：外部样式两种写法

  • 链接式：CSS3.0 属于HTML标签

     <link rel="stylesheet" href="demo.css">

  • 导入式：CSS2.1特有 不怎么使用，有弊端，网页内容过多的话，会先加载骨架，在渲染

 <style>
  @import "demo.css";
 </style>

选择器（重点）

作用：选择页面上的某一个或某一类元素

基本选择器

  1. 标签选择器：会选择页面上的所有的这个标签的元素 无法做到两个标签相同的元素渲染不一样的效果

     h1{
     color: #8dca84;
     border-radius: 40px;background: aqua;
 }

  2. 类选择器 class：选择所有class属性一致的标签 好处：可以多个标签归类，是同一个class，可以复用

     .hello{
             color: #8dca84;
             border-radius: 40px;
             background: #403da8
         }
 <h3 class="hello">你好</h3>

  3. id选择器：不可以重复，全局唯一

 #id{
             color: #8dca84;
  }
 ​
 <h1 id="id">biaoqing</h1>

优先级比较：不遵循就近原则，id选择器的优先级最高，其次是类选择器，再其次是标签选择器

层次选择器

1.后代选择器：在某个元素的后面， 全部

 body  p{
   color: red;
 }

2.子选择器 只有一代

 /*子元素选择器：父元素>子元素*/
 body>p{
   color: blue;
 }

3.相邻兄弟选择器 同辈 相邻 只有一个，且只对下一个相同标签

 .active+p{
   color: green;
 }
 <p>p1</p>
 <p class="active">p2</p>
 <p>p3</p>
 /* 只对p3起作用

4.通用选择器

 /*所有兄弟选择器：当前选中元素的向下的所有兄弟元素*/
 .active~p{
   color: yellow;
 }
结构伪类选择器

伪类：CSS伪类是用来添加一些选择器的特殊效果。

拓展：

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} / 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

结构伪类选择器是为了定位元素

 /* 选中 ul的第一个子元素 */
 ul li:first-child{
     color: red;
 }
 /* 选中 ul的最后一个子元素 */
 ul li:last-child{
     color: #00ff51;
 }
 ​
     /* 只选中p1* ：定位到父元素，选择当前的第一个元素
     选择当前p元素的父级元素，选中父级元素中的第一个元素并且是当前元素才生效,否则不生效
     按顺序排序，不分类型
      */
    p:nth-child(1){
        color: #cceeff;
    }
    /*
    选中父元素下的p元素的第二个，按类型排序
     */
    p:nth-of-type(2){
        color: #00a6ff;
    }
 </style>
属性选择器（重点 常用）
 
 /* 属性名，属性名 =属性值（正则）
     = 绝对等于
     *= 包含这个元素
     ^= 以这个元素开头
     $= 以这个元素结尾
      */
     /* 存在id属性的元素：
      a[]{}*/
     a[id]{
       background: #ff0000;
     }
     /* a标签中class属性中包含links的元素：
      */
     a[class*= "links"]{
       background: #ffa500;
     }
     /* a标签中id为 first的元素：
      */
     a[id = "first"]{
       background: #00a6ff;
     }
     /* a标签中href属性中包含HTTP开头的元素：
      */
     a[href^="http"] {
       background: #ff00ff;
     }
   </style>
 </head>
 <body>
 <p class="demo">
   <a href="http://www.baidu.com" class="links-item-first" id="first">1</a>
   <a href=""class="footer" target="_blank" title="test">2</a>
   <a href="123.html" class="link-item">3</a>
   <a href="123.png" class="link-item">4</a>
   <a href="123.jpg" class="link-item">5</a>
   <a href="abc">6</a>
   <a href="/a.pdf">7</a>
   <a href="/abc.pdf">8</a>
   <a href="abc.doc">9</a>
   <a href="abcd.doc" class="links-item-last">10</a>

美化网页元素

为什么美化网页

  1. 有效的传递页面信息

  2. 美化网页，吸引客户

  3. 凸显页面的主题

  4. 提高用户的体验

span：重点要突出的字，使用span标签套起来

字体样式
 font-family :字体样式
 font-size:字体大小
 font-weight:字体粗细
 color:颜色

可以都使用 font 按照字体风格， 字体粗细，字体大小 字体样式

 .p2{
     font : oblique bold 20px/30px 楷体;
 }

代码展示

 
<!-- font-family :字体样式
 font-size:字体大小
 font-weight:字体粗细
 color:颜色-->
     <style>
         #title{
             color: red;
         }
         body{
             font-family: 楷体;
         }
         h1{
             font-size: 50px;
         }
         .p1{
             font-weight: 800;
             color: blue;
         }
         .p2{
             font : oblique bold 20px/30px 楷体;
         }
     </style>
 ​
 </head>
 <body>
 欢迎学习<span id="title">Java</span>
 <h1>唐诗</h1>
 <p class="p1">花间一壶酒，独酌无相亲。</p>
 ​
 <p class="p2">举杯邀明月，对影成三人。</p>
 ​
 <p>月既不解饮，影徒随我身。</p>
 ​
 <p>暂伴月将影，行乐须及春。</p>
 ​
 <p>我歌月徘徊，我舞影零乱。</p>
 ​
 <p>醒时相交欢，醉后各分散</p>
 </body>
文本样式

1.颜色 color rgb rgba

2.文本对齐的方式 text-align = center

3.首行缩进 text-indent:2em

4.行高 line-height:

5.装饰 text-decoration: none，可以将超链接的下划线去掉

6.文本图片水平对齐：vertical-align：middle

代码展示：

<!--    颜色：
单词  RBG：如何调色，按照十六进制，
红色：#FF0000 绿色 ：#00FF00 蓝色：#0000FF
RGBA：A是透明度 0~1
文本对齐的方式：text-align
left center right
首行缩进：text-indent：2em
em:字体，px：像素
行高：line-height
行高和块的高度一致时，就可以达到上下居中的效果
中划线：  text-decoration: line-through;
 下划线：           text-decoration: underline;
 上划线：           text-decoration: overline;-->
    <style>
        #title{
            color: red;
            text-indent: 10em;
        }
        body{
            font-family: 楷体;
        }
        h1{
            font-size: 50px;
            color: rgba(0,255,255,0.5);
            text-align: center;
        }
        .p1{
            font-weight: 800;
            color: blue;
        }
        .p2{
            font : oblique bold 20px/30px 楷体;
        }
        .p3{
            line-height: 100px;
        }
        .p4{
            text-decoration: line-through;
        }
    </style>
文本阴影与超链接伪类

text-shadow:阴影颜色

值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅 CSS 颜色值。 
  /*文本阴影 阴影颜色， 水平偏移 垂直偏移，模糊半径*/
        #price{
            text-shadow:#403da8 2px 2px 2px  ;
        }

超链接伪类：常用：a:hover 悬浮状态

a{
    text-decoration: none;
    color: #010d13;
}
/*鼠标悬浮的颜色*/
a:hover{
    color: #ff0000;
    font-size: 30px;
}
/*鼠标按住未释放的颜色*/
a:active{
    color: #00ff51;
}
/*鼠标选中的颜色*/
a:focus{
    color: #00a6ff;
}
/*鼠标移出颜色*/
a:link{
    color: #ffa500;
}
/*鼠标移入颜色*/
a:visited{
    color: #ff00ff;
}
列表(ul ol)
/*list-style:列表样式
none:去掉圆点
circle：空心圆
decimal：数字
square：正放纵*/
ul{

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>

<ul>
    <li>
       <a href="#">图书&nbsp;&nbsp;</a>
        <a href="#">音像&nbsp;&nbsp;</a>
        <a href="#">数字商品</a>
    </li>
    <li>
        <a href="#">家用电器&nbsp;&nbsp;</a>
        <a href="#">手机&nbsp;&nbsp;</a>
        <a href="#">数码</a>
    </li>
    <li>
        <a href="#">电脑&nbsp;&nbsp;</a>
        <a href="#">办公</a>
    </li>
    <li>
        <a href="#">家居&nbsp;&nbsp;</a>
        <a href="#">家装&nbsp;&nbsp;</a>
        <a href="#">厨具</a>
    </li>
    <li>
        <a href="#">服饰鞋帽&nbsp;&nbsp;</a>
        <a href="#">个性化妆</a>
    </li>
    <li>
        <a href="#">礼品箱包&nbsp;&nbsp;</a>
        <a href="#">钟表&nbsp;&nbsp;</a>
        <a href="#">珠宝</a>
    </li>
    <li>
        <a href="#">食品饮料&nbsp;&nbsp;</a>
        <a href="#">保健食品</a>
    </li>
    <li>
        <a href="#">彩票&nbsp;&nbsp;</a>
        <a href="#">旅行&nbsp;&nbsp;</a>
        <a href="#">充值&nbsp;&nbsp;</a>
        <a href="#">票务</a>
    </li>
</ul>
</div>
</body>
</html>
 
.title{
     font-size: 18px;
     font-weight: bolder;
     line-height: 50px;
     background: #a4f1bd;
     text-align: center;
 }
 #nav{
     width: 300px;
 }
 /*list-style:列表样式
 none:去掉圆点
 circle：空心圆
 decimal：数字
 square：正放纵*/
 ul{
     background: #cceeff;
 }
 ul li{
     line-height: 30px;
     list-style: none;
     text-indent: 1em;
 }
 a{
     text-decoration: none;
     font-size: 14px;
     color: #000;
 }
 a:hover{
     color: red;
     text-decoration: underline;
 }

 

背景(background)

背景颜色 background :

背景图片

 /*background-repeat:平铺方式，
 repeat-x：水平平铺
 repeat-y:竖直平铺
 no-repeat:不平铺
 默认为 repeat*/
 .div1{
   background-repeat: repeat-x;
 }
 .div2{
   background-repeat: repeat-y;
 }
 .div3{
   background-repeat: no-repeat;
 }

主要应用：调整图片的大小与位置

 background:red url("001.jpg") 100px 10px no-repeat;

相当于

   
  background-image: url("001.jpg");
     background-repeat: no-repeat;
     background-position: 100px 2px;
渐变（linear-gradient）
 background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);

可以去网上查询 直接拿来用

盒子模型

什么是盒子？

margin：外边距

padding：内边距

border：边框

外边距和内边距的区别建议自己在浏览器上通过改变值来区分

边框（border）

  1. 边框的粗细 border：1px

  2. 边框的样式 border-style: none(无) solid（实线） dashed（虚线）dotted（圆点）

  3. 边框的颜色：border-color:

代码示例

 <style>
   /*默认初始化，因为div盒子默认的margin是8*/
   h1,ul,li,a,body{
     margin: 0;
     padding: 0;
     text-decoration: none;
   }
   /*默认顺序：边框粗细，边框样式 边框颜色，*/
   .box{
     width: 300px;
     border: 1px solid #000;
   }
   h2{
     background: #cceeff;
     text-align: center;
     margin: 0;
     line-height: 30px;
     font-size: 20px;
   }
   form{
     background: #cceeff;
   }
   div:nth-of-type(1) >input{
     border: 4px solid #00ff51;
   }
   div:nth-of-type(2) >input{
     border: 4px dashed #ff0000;
   }
   div:nth-of-type(3) >input{
     border: 4px dotted #ffa500;
   }
内外边距（padding margin ）

margin(外边距)属性定义元素周围的空间。

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

padding（内边距）定义元素到边框之间的空间，用法与margin大致相同

值 说明
auto 设置浏览器边距。 这样做的结果会依赖于浏览器
length 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距

Margin的妙用：居中元素

  • margin:25px 50px 75px 100px;

    • 上边距为25px

    • 右边距为50px

    • 下边距为75px

    • 左边距为100px

  • margin:25px 50px 75px;

    • 上边距为25px

    • 左右边距为50px

    • 下边距为75px

  • margin:25px 50px;

    • 上下边距为25px

    • 左右边距为50px

  • margin:25px;

    • 所有的4个边距都是25px

padding同上

圆角边框（border-radius）
 
<!--  圆角属性顺序为 左上 右上 右下 左下 顺时针方向-->
 <!--  可以用来画图
 圆形：高度，宽度，各个圆角都相等即可
 半圆：高度为宽度的一半 左上右上俩个圆角等于宽度，剩下俩圆角为零即可
 扇形：高度宽度相等，右上角也相等，其余为零-->
   <style>
     div{
       width: 40px;
       height: 40px;
       border:3px solid #000;
       border-radius: 0 40px 0 0;
     }
   </style>
盒子阴影
<style>
        div{
            width: 200px;
            margin: 0 auto;
        }
        img{
            border-radius: 50%;
              /*阴影颜色， 水平偏移 垂直偏移，模糊半径*/
            box-shadow: #ff9a9e 10px 20px 90px;
        }
    </style>
</head>
<body>
<div><img src="001.jpg"></div>

浮动（float）

什么是浮动？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

浮动是增加了层级，是浮在父级元素上的。所以可能会导致父级元素边框塌陷

元素怎样浮动？

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

注：行内元素可以被包含在块级元素中，反之，则不可以

属性 描述 值 CSS
clear 指定不允许元素周围有浮动元素。 left right both none inherit 1
float 指定一个盒子（元素）是否可以浮动。 left right none inherit

如果我们想让元素有块元素的性质，还可以浮动，我们可以先添加浮动，在添加clear：both，清除浮动效果就可以实现

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link rel="stylesheet" href="float.css">
</head>
<body>
<div class="father">
<div class="layer01">
<img src="image/001.jpg" alt="">
</div>
<div class="layer02">
<img src="image/002.jpg" alt="">
</div>
<div class="layer03">
<img src="image/003.jpg" alt="">
</div>
<div class="layer04">
<img src="image/004.jpg"alt="">
</div>
<div class="layer05">
    浮动的盒子可以向左浮动，也可以向右浮动，直到他的外边缘碰到包含框或另一个浮动盒子为止
</div>
</div>
</body>
</html>
body{
    margin: 0;
    padding: 0;
}
div{

    margin: 10px;
    padding: 5px;
}
.father{
    border: 1px solid #e82525;
}
.layer01{
    border: 1px solid #00a6ff;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px solid #7b239e;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px solid #f3c96e;
    display: inline-block;
    float: left;
}
.layer04{
    border: 1px solid #a4f1bd;
    display: inline-block;
    float: left;
}
.layer05 {
    border: 1px solid #730505;
    display: inline-block;
    float: left;
}
display

属性值

值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）

案例：仿QQ会员页面导航

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ会员</title>
<link rel="stylesheet" href="qq.css">
</head>
<body>
<div class="wrap">
   <header class="nav-header">
     <div class="head-contain">
       <a href="" class="top-logo"><img src="img.png"width="145px" height="90px"></a>
         <nav class="top-nav">
             <ul>
                 <li><a href="">游戏特权</a></li>
                 <li><a href="">功能特权</a></li>
                 <li><a href="">生活特权</a></li>
                 <li><a href="">会员活动</a></li>
                 <li><a href="">成长体系</a></li>
                 <li><a href="">年费专区</a></li>
                 <li><a href="">超级会员</a></li>
             </ul>
         </nav>
         <div class="top-right">
             <a href="">登录</a>
             <a href="">开通超级会员</a>
         </div>
     </div>
   </header>
</div>
</body>
</html>

CSS：

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: #000;
}
ul li{
  list-style: none;
}

.nav-header{
    background: rgba(0,0,0,0.4);
    height: 90px;
    width: 100%;
}
.head-contain{
    width: 1180px;
    height: 90px;
    margin: 0 auto;
    text-align: center;
}
.top-logo,.top-nav, .top-nav li, .top-right{
    height: 90px;
    display: inline-block;
    vertical-align: top;
}
.top-nav{
    margin: 0 48px;
}
.top-nav li{
    line-height: 90px;
    width: 90px;
}
.top-nav li a{
    display: block;
    width: 90px;
    height: 90px;
    text-align: center;
}e
.top-nav li a:hovr{
    color: #7b239e;
}
.top-right a{
    display: inline-block;
    text-align: center;
    margin-top: 25px;
    border-radius: 35px;
}
.top-right a:hover{
    background: #f6de8e;
}
.top-right a:first-child{
    width: 90px;
    height: 40px;
    line-height: 40px;
    color: #efa72c;
    border: 1px solid #efa72c;
}
.top-right a:last-child{
    width: 120px;
    height: 40px;
    font-weight: bolder;
    line-height: 40px;
    background: rgb(243, 201, 110);
    color: #6a4604;
}
.top-right a:last-child:hover{
    background: #bd7e07;
}

效果演示：

父级边框塌陷的问题

当父级边框里的所有子集元素都带有浮动属性时，就会导致父级边框塌陷，如图：

clear：clear属性是CSS中用于控制元素如何与之前的浮动元素相互作用的属性。当元素设置了clear属性后，它可以被强制移动到前面的浮动元素下方，从而避免浮动元素对其布局的影响。

clear属性主要有以下几个值：

值 概述
right 元素会被移动到右侧浮动元素的下方。
left 元素会被移动到左侧浮动元素的下方。
both 元素会被移动到左侧和右侧浮动元素的下方。
none 默认值，元素不会被移动来清除浮动

避免方法一：增加父级元素高度，超过子级元素的最高值。（不建议使用）

.father{
    border: 1px solid #e82525;
    height: 800px;
}

方法二：在所有子级元素后再加一个空盒子，让盒子的左右两侧不允许浮动，让前面的浮动元素，还在父级边框里。（标准方法）

</div>
    <div class="clear"></div>
</div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

方法三：overflow：在父级元素中增加一个overflow：hidden，就可以了

.father{
    border: 1px solid #e82525;
    overflow: hidden;
}

overflow 是 CSS的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化时。

overflow属性有以下值：

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

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

方法四：在父类中添加一个伪类 类似于第二种方案（伪类可以增加过滤条件），可以避免增加多余div的风险

.father:after{
    content: "";
    display: block;
    clear: both;
}

小结：1.设置父元素的高度，简单易懂，但元素假设有了固定的高度，就会被限制

2.浮动元素后面加空div，简单明了 缺点：代码中尽量避免空div

3.overflow 简单 缺点：一些下拉的场景中或一些不能切除的场景中避免使用

4.父类添加伪类 after（推荐） 写法稍微复杂，但没有副作用，推荐使用

对比

  • display

    方向不可以控制

  • float

    浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

定位

相对定位
 #first{
     background-color: #cceeff;
     border: 1px dashed #7b239e;
     position: relative;/* 相对定位：上下左右*/
     top:-20px;/* 向下移动-20px->即向上移动20px*/
     left: 20px/*向右移动20px*/
 }
 #second{
     background-color: #d6aa1a;
     border: 1px dashed #f6de8e;
 }
 #third{
     background-color: #720fb2;
     border: 1px dashed #cceeff;
     position: relative;
     bottom: -20px;/*向下移动20px*/
     right: 20px;/*向左移动20px*/
 }

相对定位：相对于自己原来的位置进行偏移 position：relative

相对于原来的位置，进行指定的偏移，相对定位，他仍然在标准文档流中，原来的位置会被保留

练习：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
   <style>
     a{
       text-decoration: none;
       color: #f6f0f0;
         background: #ff9a9e;
         width: 100px;
         height: 100px;
         display: block;
         line-height: 100px;
         text-align: center;
     }
 a:hover{
      background: #4ca2cd;
    }
     #father{
       border: 1px solid #e82525;
       width: 300px;
       height: 300px;
         padding: 10px;
     }
 ​
     #second,#fourtrh{
     position: relative;
         left: 200px;
         top: -100px;
     }
     #fifth{
     position: relative;
         left: 100px;
         top: -300px;
     }
 ​
   </style>
 </head>
 <body>
 <div id="father">
     <a id="first" href="#">链接一</a>
 <a id="second" href="#">链接二</a>
 <a id="third" href="#">链接三</a>
 <a id="fourtrh" href="#">链接四</a>
 <a id="fifth" href="#">链接五</a>
 </div>
 </body>
 </html>

效果展示：

绝对定位

定位：基于XXX的定位 上下左右

1.在没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位，我们通常相对于父级元素进行偏移

3.在父级元素范围内有移动，绝对定位的起始位置由他的父级元素决定

相对于父级或浏览器的位置，进行指定的偏移，绝对定位，他不在在标准文档流中，原来的位置不会被保留

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>相对定位</title>
   <style>
     div{
       margin: 10px;
       padding: 5px;
       font-size: 12px;
       line-height: 25px;
     }
     #father{
       border: 1px solid #e82525;
       padding: 0;
       position: relative;
     }
     #first{
       background-color: #cceeff;
       border: 1px dashed #7b239e;
     }
     #second{
       background-color: #d6aa1a;
       border: 1px dashed #f6de8e;
     }
     #third{
       background-color: #720fb2;
       border: 1px dashed #cceeff;
       position: absolute;
       top:30px;
     }
   </style>
 </head>
 <body>
 <div id="father">
   <div id="first">第一个盒子</div>
   <div id="second">第二个盒子</div>
   <div id="third">第三个盒子</div>
 </div>
 </body>
 </html>
固定定位 fixed

固定定位和绝对定位相同点：都可以拿父级元素或浏览器的位置进行定位

不同点：绝对定位会随着父级元素的移动而移动，但固定定位始终不动

案例：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
   <style>
     body{
       height: 1000px;
     }
     div:nth-of-type(1){/*绝对定位：相对于浏览器*/
       width: 100px;
       height: 100px;
       background: red;
       position: absolute;
       right: 0;
       bottom: 0;
     }
     div:nth-of-type(2){/*固定定位：相对于自身*/
       width: 50px;
       height: 50px;
       background: blue;
       position: fixed;
       right: 0;
       bottom: 0;
     }
   </style>
 </head>
 <body>
 <div>div1</div>
 <div>div2</div>
 </body>
 </html>

效果：

z-index

属性定义及使用说明

z-index 属性指定一个元素的堆叠顺序。

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

默认值： auto
继承： no
版本： CSS2
JavaScript 语法： object.style.zIndex="1"

opacity：0.5 /背景透明度

深度解析：

  1. 层叠上下文（stacking context） 看到上下文这个关键词，我想大家应该会有一点概念，没错就是context。和你们认识的那个BFC、IFC里面的上下文是一个意思，其实我想说css世界里面看到context或者XXX上下文其实都是同一个意思，完全可以理解为自成一派，在自己的小世界里面随便折腾，不受其他的context影响。当然，这个context是可以被其他context包含同时也可以包含其他context

  2. 层叠水平（stacking level） 层叠水平决定了在同一个层叠上下文中元素在Z轴上的显示顺序。 页面中的所有元素（普通元素和层叠上下文元素）都有层叠水平。然而对普通元素的层叠水平探讨只局限在层叠上下文元素中。 注：大家千万不要把层叠水平和z-index混为一谈，尽管某些情况下z-index确实可以影响层叠水平，但是也只局限于具有层叠上下文的元素，而层叠水平是所有元素都存在的

  3. 层叠顺序（stacking order） 层叠顺序表示发生层叠时有着特定的垂直显示顺序（规则）。 即：网上这张很流行的规则

    关于这张图有一些补充： 位于最下面的background/border特指层叠上下文元素的边框和背景色。每一个层叠顺序规则仅适用当前层叠上下文元素的小世界 inline水平盒子指的是包括inline/inline-block/inline-table元素的层叠顺序，他们都是同级别的 单纯从层叠水平上看，实际上z-index：0和auto是可以看成一样的，但是在层叠上下文领域有着根本性的差异

深入了解层叠上下文

  1. 特性

    层叠上下文的层叠水平要比普通元素高 层叠上下文可以阻断元素的混合模式 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或者渲染的时候，只需要考虑后代元素 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中

  2. 如何创建

    根元素 (HTML) z-index 值不为 "auto"的 绝对/相对定位（在firefox/ie浏览器下position: fixed也是可以的） 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex opacity 属性值小于 1 的元素（参考 the specification for opacity） transform 属性值不为 "none"的元素 mix-blend-mode 属性值不为 "normal"的元素 filter值不为“none”的元素 perspective值不为“none”的元素 isolation 属性被设置为 "isolate"的元素 position: fixed 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值 -webkit-overflow-scrolling 属性被设置 "touch"的元素

  3. 层叠上下文与层叠顺序

    文章中多次提到普通元素具备层叠上下文后层叠水平就会变高，那么他究竟在层叠顺序那个规则图的哪个位置呢 把目光向上锁定，第二条列举了12个可以创建层叠上下文的方法，我们把他分为两类：第二三条和其他。 依赖z-index取值的：位置取决于z-index的值 不依赖z-index取值的：在图中第二高的位置，即：z-index = auto 或者 0

    用一个例子来说明：

     <div class="container">
     <div class="div1">111</div>
     <div class="div2">222</div>
 </div>
 .container {
   width: 500px;
   height: 500px;
   background-color: #000;
   color: #fff;
   transform: scale(1); 
   /* 给container创建层叠上下文 */
 }
 .div1 {
   padding: 50px;
   background-color: aqua;
   z-index: 0;
   position: relative;
   /* 给div1创建层叠上下文，层叠水平依赖z-index的取值 */
 }
 .div2 {
   padding: 50px;
   background-color: red;
   opacity: 0.8;
   /* 给div2创建层叠上下文，层叠水平依赖z-index的取值 */
   /* margin-top: -40px; */
 }

    这个例子中一目了然，div1和div2的层叠水平一样，都是在规则那张图的第二高的位置，不过div2在div1的dom节点后面，所以div2要比div1的层叠水平高，我们把margin-top的注释去掉看下：

    要想使得div1在上面只需要把div1的z-index改成大于0的值就好了。

    还是上面的htl结构，接下来我们再来看一个有意思的例子：

     
    .container {
   width: 500px;
   height: 500px;
   background-color: #000;
   color: #fff;
   transform: scale(1);
   /* 给container创建层叠上下文 */
 }
 .div1 {
   padding: 50px;
   background-color: aqua;
   opacity: 0.8;
   /* 给div1创建层叠上下文，层叠水平在z-index：0 */
 }
 .div2 {
   padding: 50px;
   background-color: red;
   position: relative;
   margin-top: -40px;
 }

    大家肯定会说，div1明显盖过div2啊，可是我们来看下实际情况：

    实际情况下面的div2盖过了div1，原因是当html元素设置定位属性的时候（absolute/relative），其z-index属性自动生效变成 z-index： auto，所以这时候div1和div2的层叠水平是一致的，而div2在div1的dom节点后面，所以盖过了div1（注意这里div2并没有变成层叠上下文元素，这是有本质区别的）

常见错误认知解析

现在我们在一起看下文章开头提到的几个常见的错误认知：

  • z-index值越大越“靠近我们” -- 并不一定，首先要成为层叠上下文。或者如果比较的元素的父元素也是层叠上下文，那就完全取决于父元素了

  • 要搭配position: absolute | relative | fixed 使用才有用呢 -- 对了一部分，还有其他的条件也可以使元素称为层叠上下文元素

  • 比较两个兄弟节点谁更“靠近我们”，要看他们的同级父元素的比较呢。-- 如果同级父元素不是层叠上下文元素就不需要看“父元素的眼色”了

案例展示：

 
<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         #content{
             padding: 0;
             margin: 0;
             overflow: hidden;
             font-size: 12px;
             line-height: 25px;
             border: 1px solid #ccc;
             width: 270px;
         }
         ul,li{
             list-style: none;
             padding: 0;
             margin: 0;
         }
         /*父级元素相对定位*/
         #content ul{
             position: relative;
         }
         .tipText,.tipBg{
             position: absolute;
             width: 380px;
             top: 293px;
             height: 25px;
         }
         .tipBg{
             background: #010d13;
         }
         .tipText{
             z-index: 2;
             color: #fff;
         }
     </style>
 </head>
 <body>
 <div id="content">
     <ul>
         <li><img src="image/001.jpg" alt=""></li>
         <li class="tipText">容器的层级关系是：容器 > 组件 > 组件 > 组件</li>
         <li class="tipBg"></li>
         <li> 时间：2025-01-01</li>
         <li> 地点：月球一号基地</li>
     </ul>
 </div>
 ​
 </body>
 </html>

javaScript（行为层）

什么是JavaScript？

概述

JavaScript是一门世界上最流行的脚本语言

一个合格的后端人员，必须要精通JavaScript

历史

JavaScript的起源故事-CSDN博客

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

最新版本已经到es6版本

快速入门

引入JavaScript

  • 内部标签

     <script>
     //...
 </script>

  • 外部引入

    lyc.js

 alert()

test.html

 <script src = "lyc.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/qj.js"></script>
 <!--    不显示类型，也会默认为JS-->
     <script type="text/javascript">
         alert("hello world")
     </script>
 </head>
 <body>
 <!--这里也可以存放-->
 </body>
 </html>
基本语法入门
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--    javaScript严格区分大小写-->
     <script>
         // 1.定义变量 变量类型 变量  = 变量值
         const num = 1;
         const name = "张三";
         //2.条件控制
         if(num>60 && num<80){
             alert("60~80");
         } else if(num>80 && num<90){
             alert("80~90")
         }else {
             alert("垃圾");
         }
         //console.log(name);在浏览器控制台打印变量！类似于 System.out.println();
         /*
         * */
     </script>
 </head>
 <body>
 ​
 </body>
 </html>

浏览器调试必备须知

数据类型

数值，文本，图形，音频，视频

变量 不能以数字开头

number

js不区分小数与整数

 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))//false

尽量避免使用浮点数进行运算 存在精度问题！

 console.log(Math.abs(1/3-(1-2/3))<0.0000001)//true

null和undefined

  • null 空

  • undefined 未定义

数组

（Java数组中的对象必须是相同类型 ）一系列相同类型的对象 （JS不在乎是否相同类型）

   //保证代码的可读性，尽量使用【】
 var arr = [1,2,3,4,5,'hello',null,true]
 new Array(1,2,34,5,null,true)

取数组下标：如果越界了，就会undefined

对象

对象是大括号，数组是中括号

每个属性是用逗号隔开，最后一个不用添加

 var person = {
   name: "张三",
   age: 18,
   sex: "男",
   sayHello: function () {
     alert("你好")
   }
 }

取对象的值 person.sayhello（）

严格检查格式
 // "use strict"; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
 //建议写在第一行，严格检查模式，
   <script>
     "use strict";
     //默认是全局变量 在ES6中，局部变量声明一般用let
    a = 10;
 </script>

数据类型

字符串

  1. 正常字符串我们使用单引号或者双引号包裹

  2. 注意转义字符 \

     \' 字符串
 \n 换行
 \t 制表符
 \u4e2d Unicode字符
 \x41 AscII字符

  3. 多行字符串编写

     var msg = `hello
 world
 nihao`

4.模板字符串

  let name = "liuyucheng";
         let age = 3;
         let msg = `你好呀，${name}`

5.字符串长度

 console.log(student.length)

6.字符串的可变性，不可变

7.大小写转换

 //注意，这是方法，不是属性
 console.log(student.toUpperCase())//大写
 console.log(student.toLowerCase())//小写

8.获取下标

 student.indexOf('t')

9.substring

 [),含头不含尾
  student.substring(1)//从第一个字符截取到最后一个字符串
   student.substring(1，3)//[1,3)
数组

Array可以包含任意的数据类型

 var arr = [1,2,3,4,5,6]//通过下标取值和赋值
 arr[0] = 0

1.长度

 arr.length

注意，假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

2.indexOf():通过元素获得下标索引

 arr.indexOf(2)
 1

字符串得“1”和数字 1 是不同的

3.slice（）截取Array的一部分，返回一个新的数组，类似于String的subString（）

 arr = [1,2,3,4,5,6,7,"1","2"]
 //(9) [1, 2, 3, 4, 5, 6, 7, '1', '2']
 arr.slice(3)
 //(6) [4, 5, 6, 7, '1', '2']
 arr.slice(1,5)
 //(4) [2, 3, 4, 5]左开右闭

4.push,pop

 arr.push('a','b')//压倒尾部
 //11
 arr
 //(11) [1, 2, 3, 4, 5, 6, 7, '1', '2', 'a', 'b']
 arr.pop()//弹出尾部的一个元素
 //'b'
 arr
 //(10) [1, 2, 3, 4, 5, 6, 7, '1', '2', 'a']

5.unshift（），shift（）头部

  arr.unshift('c','d') 压入到首部
 //12
 arr
 //(12) ['c', 'd', 1, 2, 3, 4, 5, 6, 7, '1', '2', 'a']
 arr.shift() 弹出头部的一个元素
 //'c'
 arr
 //(11) ['d', 1, 2, 3, 4, 5, 6, 7, '1', '2', 'a']

6.排序 sort()

 ["B","C","A"]
 arr.sort()
 ["A","B","C"]

7.元素反转 reserve（）

 ["A","B","C"]
 arr.reverse()
 ["C","B","A"]

8.concat()

 arr = ["C","A","B"]
 (3) ['C', 'A', 'B']
 arr.concat(1,2,3)
 (6) ['C', 'A', 'B', 1, 2, 3]
 arr
 (3) ['C', 'A', 'B']

注意：concat()并没有修改数组，只是返回一个新的数组

9.连接符 join

打印拼接数组，使用特定的字符串连接

 arr
 (3) ['C', 'A', 'B']
 arr.join('_')
 'C_A_B'

10.多维数组

 arr = [[1,2],[3,4],["5","6"]]
 arr[1][1]
 4

数组 存储数据（如何存，如何取，方法都可以自己实现）

对象

若干个键值对

 var 对象名 = {
     属性名：属性值，
     属性名：属性值，
     属性名：属性值，
     属性名：属性值
 }
 ​
 var person = {
      name: '张三',
      age: 18,
     email: 'zhangsan@163.com',
     sayHello: function () {
         alert('hello')
     }
 }

JS中对象，{。。。}表示一个对象，键值对描述属性 xxxx:xxxx;,用逗号隔开，最后一个属性不加逗号！

JavaScript中的所有的键都是字符串，值是任意对象

1.对象赋值

 person.name = "lyc"
 "lyc"
 person.name
 "lyc"

2.使用一个不存在的对象属性，不会报错，只会提示未定义 undefined

 person.haha
 undefined

3.动态的删减属性

 delete person.name
 true
 person
 {age: 18, email: 'zhangsan@163.com', sayHello: ƒ}

4.动态的添加

 person.score = 0
 0
 person
 {age: 18, email: 'zhangsan@163.com', score: 0, sayHello: ƒ}

5.判断属性值是否在这个对象中！

 'age' in person
 true
 //继承
 'toString' in person
 true

6.判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

 person.hasOwnProperty('tostring')
 false
流程控制

if判断

  var age = 3;
         if (age >= 18) {
             console.log('adult');
         } else if(age <= 18){
             console.log('teenager');
         }else{
              console.log('teenager');
         }

while循环 避免程序死循环

 while (age < 18) {
     age++;
     console.log(age);
 }
 do{
     age++;
     console.log(age);
 }while (age < 18)

for循环

  var age = 3;
         for (let i = 0; i < 18; i++) {
             console.log(i)
         }
 ​

forEach循环

 var age = [12,13,14,15,16,17,18,19,20,21,22,23,24];
    age.forEach(function (value){
        console.log(value)
    })

for...in

   //for(var index in object){}
 for(var num in age){
     console.log(num);//num为索引
 }
Map和Set

es6的新特性

Map

  var map = new Map([['tom',100],['rousa',80],['brown',70]]);
 var name =  map.get('tom');//通过key找到value
  map.set('lisa',200);//新增与修改
 map.delete('tom')//删除
  console.log(name)
 ​
 map
 Map(4) {'tom' => 100, 'rousa' => 80, 'brown' => 70, 'lisa' => 200}

Set：无序不重复集合

 var set = new Set([1,2,10,4,5,8,7,8,7,10])//set集合可以去重
 set.add(9)//添加
 set.delete(10)//删除
 console.log(set.has(9))//是否包含某个元素
iterator

es6新特性

使用iterator 来遍历迭代Map Set

 //可以通过for of 来遍历数组
 var arr = [3,34,6,7,6]
 for(var num of arr){
     console.log(num)
 }

遍历Map

 var map = new Map([['tom',100],['rousa',80],['brown',70]])
 for (var [key,value] of map){
     console.log(key,value)
 }

遍历Set

 var set  = new Set([5,6,7,9,10])
 for(var num of set){
     console.log(num)
 }

函数

方法：对象（属性，方法）

函数：放在对象外面

定义函数

定义方式一

绝对值函数

 function abs(x){
     if(x>=0){
         return x;
     }else{
         return -x;
     }
 }

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

 var abs = function(x){
    if(x>=0){
         return x;
     }else{
         return -x;
     }
 }//类似于匿名内部类

function(x){...} 这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！

方法一和方法二等效

调用函数

 abs(10)

参数问题：JavaScript 可以传任意个参数，也可以不传递参数

参数传进来是否存在的问题？假设不存在参数，如何规避

 var abs = function(x){
     //手动抛出异常
     if (typeof x !=="number"){
         throw new Error("abs()参数类型错误");
     }
     if(x>=0){
         return x;
     }else{
         return -x;
     }
 }

arguments

arguments是一个JS免费赠送的关键字 代表传递进来的所有参数为数组

作用：利用arguments可以拿到所有的参数，比如：如果函数中只有一个参数，如果传入第二个参数，我们可以通过arguments来拿到第二个参数进行使用

  var abs = function(x){
         console.log("x=>"+x);
         for (var i=0;i<arguments.length;i++){
             console.log(arguments[i]);
         }
      if(arguments.length === 2){
          //另外的方法
      }else if(arguments.length === 3){
          
      }
         if(x>=0){
             return x;
         }else{
             return -x;
         }
     }

问题：arguments包含所有的参数，我们有时候想要使用多余的参数来进行附加操作时，需要排除已有的参数，且已有参数也不固定

rest

以前：

 if(arguments.length > 2){
 for(var i = 2; i < arguments.length; i++){
 //...
 }
 }

ES6引入的新特性，获取除了已经定义的参数之外的所有参数...

 function aaa(a,b,...rest){
     console.log("a=>"+a);
     console.log("b=>"+b);
     console.log(rest);
 }

rest参数只能写在最后面，必须用...标识。

变量的作用域

Java（局部变量，全局变量。类变量）

在JavaScript中，var定义变量实际是有作用域的

假设在函数体中声明，则在函数体外不可以使用 （想实现的话，后面研究闭包）

 function lyc(){
       var x = 1;
       x = x + 1;
 }
 x = x + 2;//  Uncaught ReferenceError: x is not define

如果两个函数使用了相同的变量名只要在函数内部，就不冲突

   'use strict'
 function lyc(){
       var x = 1;
       x = x + 1;
 }
   function lyc1() {
       var x = "A";
       x = x + 1;
   }

内部函数可以访问外部函数的成员，反之则不行

 function lyc(){
         var x = 1;
 //内部函数可以访问外部函数的成员，反之则不行
 function lyc1() {
     var y = x + 1;//2
 }
     var z = y + 1;//Uncaught ReferenceError: y is not defined
 }

假设内部函数变量和外部函数变量重名

 function lyc1() {
     var x = 'A';
     console.log('inner'+x)
 }
     console.log('outer'+x)
     lyc1();
 }

假设在JavaScript中函数查找变量从自身函数开始~，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

提升变量的作用域

 function lyc(){
         var x = 'x' + y;
         console.log(x);
         var y = 'y';
 }

结果： x undefined

说明JavaScript的执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

 function lyc2(){//习惯写法，将所有的变量写在最前面
         var y;
         var x = 'x' + y;
         console.log(x);
          y = 'y';
 }

这个是在JavaScript建立之初就存在的特性，养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护

 function lyc2(){
 var x = 1,
 y = x + 1,
 z,i,a;
 //之后随便用
 }

全局函数

 var x = 1;
 function f(){
 console.log(x)
 }
 f();
 console.log(x);

全局对象 window

 var x = 'xxx'
 window.alert(x);
 alert(window.x);

alert() 这个函数本身也是一个window变量

 var x ='xxx';
 window.alert(x);
 var old_alert = window.alert;
 window.alert = function(){
 ​
 };
 //发现alert()失效了
 window.alert(123);
 //恢复
 window.alert = old_alert;
 window.alert(456);

JavaScript实际上只有一个全局作用域，任何变量（函数也可以被视为变量），假设没有在函数作用范围找到，就会向外查找，如果在全局作用域都没有找到，则报错ReferenceError

规范 ：由于我们所有的全局变量绑定到Window上，如果不同的JS文件使用相同的全局变量，就会冲突->如何减少冲突

 //唯一全局变量
 var lyc = {};
 //定义全局变量
 lyc.name = 'lyc';
 lyc.add = function (a,b){
     return a+b;
 }

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突

局部作用域 let

 function aaa(){
 for(var i = 0; i < 100; i++){
 console.log(i)
 }
 console.log(i+1)//问题：i出了这个作用域还在使用
 }

ES6 let关键字，解决局部作用域冲突问题

 function aaa(){
 for(let i = 0; i < 100; i++){
 console.log(i)
 }
 console.log(i+1)//问题：i出了这个作用域还在使用
 }

建议大家使用let去定义局部作用域的变量

常量 const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量，建议不要修改这样的值

在ES6引入了常量关键字const

 const PI = '3.14';//只读变量
 console.log(PI);
 PI = '123'; //TypeError:Assignment to constant varible
 console.log(PI)
方法

方法就是把函数放在对象的内部，对象只有两个东西：属性，方法

 var lyc = {
     name:'lyc',
     birth:1995,
     age:function (){
         var now = new Date().getFullYear();
         return now-this.birth;
     },
     sex:'男',
     height:1.70,
     weight:60,
     say:function () {
       console.log(this.name+"说：我叫"+this.name+"，今年"+lyc.age()+"岁，身高"+this.height+"米，体重"+this.weight+"kg，性别"+this.sex)
     }
 }

this.代表什么？代表调用这个方法或属性的对象

 function getAge(){
     var now = new Date().getFullYear();
     return now-this.birth;
 }
 var lyc = {
     name:'lyc',
     birth:1995,
     age:getAge,
     sex:'男',
     height:1.70,
     weight:60,
     say:function () {
       console.log(this.name+"说：我叫"+this.name+"，今年"+lyc.age()+"岁，身高"+this.height+"米，体重"+this.weight+"kg，性别"+this.sex)
     }
 }
 //lyc.age() 30
 //getAge() NaN 调用getAge()的是window对象，

this是无法指向的，是默认指向调用它的那个对象

apply

在JS中可以控制this指向

 function getAge(){
     var now = new Date().getFullYear();
     return now-this.birth;
 }
 var lyc = {
     name:'lyc',
     birth:1995,
     age:getAge,
     sex:'男',
     height:1.70,
     weight:60,
     say:function () {
       console.log(this.name+"说：我叫"+this.name+"，今年"+lyc.age()+"岁，身高"+this.height+"米，体重"+this.weight+"kg，性别"+this.sex)
     }
 };
 getAge.apply(lyc)//this,指向了lyc，参数为空

内部对象

标准对象

typeof（）,用来判断对象的类型

 typeof 123
 'number'
 typeof '123'
 'string'
 typeof true
 'boolean'
 typeof NaN
 'number'
 typeof []
 'object'
 typeof {}
 'object'
 typeof Math.abs
 'function'
 typeof undefined
 'undefined'
Date

基本使用

 <script>
   'use strict'
   var now = new Date();//Thu Mar 27 2025 21:56:19 GMT+0800 (中国标准时间)
   now.getDate();//日
   now.getDay();//星期几
   now.getFullYear();//年
   now.getMonth();//月 0~11
   now.getHours();//时
   now.getMinutes();//分
   now.getSeconds();//秒
   now.getTime();//时间戳 全世界统一 1970 1.1 0：00
   console.log(new Date(1743084127335))//时间戳转为时间
 </script>

转换时区

 now  = new Date();
 now.toLocaleString();
 '2025/3/27 22:09:15'
 now.toGMTString();
 'Thu, 27 Mar 2025 14:09:15 GMT'
JSON

json是什么

早期，所有数据传输文件都有XML文件

BSON： 二进制 JSON Binary JSON

JSON（JavaScript Object Notation，JavaScript对象表示法）是基于ECMAScript的一个子集设计的，是一种开放标准的文件格式和数据交换格式，

它易于人阅读和编写，同时也易于机器解析和生成。JSON独立于语言设计，很多编程语言都支持JSON格式的数据交换。

JSON是一种常用的数据格式，在电子数据交换中有多种用途，包括与服务器之间的Web应用程序的数据交换。

其简洁和清晰的层次结构有效地提升了网络传输效率，使其成为理想的数据交换语言。其文件通常使用扩展名.json。

在JavaScript，一切皆为对象。任何JS支持的类型都可以用JSON表示

格式：

  • 对象都用{}

  • 数组用[]

  • 所有的键值对都使用 key : value

JSON字符串和JS对象的转化

 'use strict'
 var User = {
     name: '张三',
     age: 18,
     sex: '男',
     address: '北京',
     hobby: ['打篮球', '看电影', '打游戏'],
     say: function () {
         console.log('我是' + this.name + ',我今年' + this.age + '岁,我是' + this.sex + '生,我住在' + this.address + ',我的爱好有' + this.hobby)
     }
 }
     //对象转化为JSON字符串 参数为对象
       function toJSON(){
    return JSON.stringify(User)
 }
 //'{"name":"张三","age":18,"sex":"男","address":"北京","hobby":["打篮球","看电影","打游戏"]}'
 // JSON字符串转化为对象 参数为JSON字符串
 function toObject(){
     return JSON.parse(toJSON())
 }

JSON字符串和JS对象的区别

 var obj = {a:'hello',b:'hello1'}
 var json  '{'a':'hello','b':'hello1'}'
Ajax

  • 原生的js用法， xhr异步请求

  • jQuery封装好的方法$("#name").ajax("")

  • axios请求

面向对象编程

原型对象

JavaScript Java c#...面向对象；JavaScript有些区别！

类：模板

对象：具体的实例

类是对象的抽象，对象是类的具体表现

在JavaScript中有些许不同

原型：

 var Person = {
     name:"张三",
     age:18,
     sex:"男",
     height:1.70,
     weight:60,
     say:function(){
         console.log(this.name+"说：我叫"+this.name+"，今年"+this.age+"岁，身高"+this.height+"米，体重"+this.weight+"kg，性别")
     }
 };
 var xiaoming = {
     name:"小明",
 };
 //原型对象
 xiaoming._proto_ = Person;
 console.log(Person.say());
 console.log(xiaoming.say());
 console.log(xiaoming);
 var Bird = {
     fly: function (){
         console.log("小鸟在飞");
     }
 }
 // xiaoming._proto_ = Bird;
 // console.log(xiaoming.fly());

class继承

class关键字，ES6引入

1.定义一个类、属性、方法

 class Person{
     constructor(name,age){
         this.name = name;
         this.age = age;
     }
     say(){
         console.log(this.name+"说：我叫"+this.name+"，今年"+this.age+"岁");
     }
 }
 var xiaoming = new Person("小明",10);
 var xiaohong = new Person("小红",20);

2.继承

 class Person{
     constructor(name,age){
         this.name = name;
         this.age = age;
     }
     say(){
         console.log(this.name+"说：我叫"+this.name+"，今年"+this.age+"岁");
     }
 }
 class Student extends Person{
     constructor(name,age,school){
         super(name,age);
         this.school = school;
     }
     study(){
         console.log(this.name+"说：我叫"+this.name+"，今年"+this.age+"岁，我在"+this.school+"学习");
     }
 }
 var xiaoming = new Person("小明",10);
 var xiaohong = new Person("小红",20);
 var xiaogang = new Student("小刚",30,"清华大学");

本质

原型链

_ proto _: 无限循环到Object

操作BOM对象（重点）

B/S

BOM:浏览器对象模型

浏览器介绍

JavaScript 和浏览器的关系

答：是为了让它在浏览器中运行

内核：

  • IE 6~11/Edge

  • Chrome 谷歌

  • Safari 苹果

  • FireFox Linux自带

  • Opera

三方

  • QQ浏览器

  • 360浏览器

window

window代表浏览器窗口

 window.alert("Hello World")
 undefined
 window.innerHeight//内部高度
 714
 window.innerWidth//内部宽度
 312
 window.innerWidth
 428
 window.outerHeight//外部高度

Navigator :导航器（不建议使用）

Navigator：封装了浏览器的信息

 navigator.appName
 'Netscape'
 navigator.appVersion
 '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0'
 navigator.userAgent
 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0'
 navigator.platform
 'Win32'

大多数时候，我们不会使用navigator对象，因为会被人为修改

不建议使用这些属性来判断和编写代码

screen 屏幕尺寸

 screen.width
 1536
 screen.height
 864

location

location：代表当前页面的URL信息

 host: "localhost:63342"
 href:"http://localhost:63342/JavaScript/web/WEB-INF/
 protocol: "http:"
 reload: ƒ reload()//刷新页面
 //设置新的地址
 location.assign("https://blog.csdn.net/m0_73856804spm=1000.2115.3001.5343")

document（内容；DOM）

document： 代表当前页面，HTML DOM文档树

 document.title
 '百度一下，你就知道'
 document.title = '麓殇'

获取具体的文档树节点

 <dl id="app">
     <dt>java</dt>
     <dd>javaSE</dd>
     <dd>javaEE</dd>
 </dl>
 <script>
     var dl = document.getElementById("app");
 </script>

获取cookie

 document.cookie

劫持cookie原理

www.taobao.com

 <script src="aa.js"></script>
 <!--恶意人员通过document.cookie获取cookie，再通过Ajex申上传到他自己的服务器上

服务器端可以设置cookie：httpOnly

history（不建议使用）

代表浏览器的历史记录

 history.back()//网页后退
 history.forward()//网页前进

操作DOM对象（重点）

DOM：文档对象模型

核心

浏览器就是一个DOM树形结构

  • 更新：更新DOM节点

  • 遍历DOM节点：得到DOM节点

  • 删除：删除一个DOM节点

  • 添加：添加一个新的节点

要操作一个DOM节点，就必须获得这个DOM节点

获得DOM节点

 var h1 =  document.getElementsByTagName("h1");
 var p1 =  document.getElementById("p1");
 var p2 =  document.getElementById("p2");
 var father =  document.getElementById("father");
 var children =  father.children;//获取父节点下的所有子节点
  father.firstChild;//获取第一个子节点
  father.lastChild;//获取最后一个子节点
  father.childNodes;//获取所有子节点，包括文本节点
  father.parentNode;//获取父节点
  father.nextSibling;//获取下一个兄弟节点
  father.previousSibling;//获取上一个兄弟节点
  father.nextElementSibling;//获取下一个兄弟节点
  father.previousElementSibling;//获取上一个兄弟节点
  father.firstElementChild;//获取第一个子元素节点
  father.lastElementChild;//获取最后一个子元素节点

原生代码，之后尽量使用jQuery

更新节点

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <div id="app">
 ​
 </div>
 <script>
     var app = document.getElementById('app');
 </script>
 </body>
 </html>

操作文本

  • app.innerText = '456' 修改文本的值

  • app.innerHTML = '<b >3456< /b>' 可以解析HTML文本标签

操作CSS

 app.innerText = '123'//属性使用''包裹
 '123'
 app.style.color = 'red'
 'red'
 app.style.fontSize = '30px'//_ 转 驼峰命名问题
 '30px'
 app.style.padding = '100px'
 document.getElementById('su')
 <input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn">
 var su = document.getElementById('su')
 undefined
 su.style.background = 'black'
 'black'

JavaScript可以直接在网站上动态修改属性

先找到元素的选择器，再通过DOM拿到变量名，在直接修改

删除节点

删除节点的步骤：

  1. 先获取父节点，再通过父节点删除自己

 <div id="father">
     <h1>标题一</h1>
     <p id="p1">p1</p>
     <p id="p2">p2</p></div>
 <script>
 var h1 =  document.getElementsByTagName("h1");
    var p1 =  document.getElementById("p1");
    var p2 =  document.getElementById("p2");
    var father =  document.getElementById("father");
     father.removeChild(p1)
     //1.先找到父节点，在删除子自己
    var father =  p1.parentElement;
     father.removeChild(p1)
     //2.
     father.removeChild(father.children[0])
 </script>

注：删除多个节点时，JavaScript的属性是动态变化的，如数组中的元素删除一次便更新一次，所以，删除节点要注意细节

插入节点

我们获得某个DOM节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素，但如果这个DOM节点已经存在元素，就不能使用innerHTML，因为会被覆盖

追加 append

 <p id="p0">javaScript</p>
 <div id="app">
     <p id="p1">javaEE</p>
     <p id="p2">javaSE</p>
     <p id="p3">javaME</p>
 </div>
 <script>
     var p0 = document.getElementById("p0");
     var app = document.getElementById("app");
     app.appendChild(p0);//追加到后面
 </script>

创建一个新的标签，实现插入

 //通过JS创建一个新的节点
 var p4 = document.createElement("p");
 p4.id = "p4";
 p4.innerText = 'Hello World'
 app.appendChild(p4);
  //通过JS创建一个标签节点
     var myscript = document.createElement("script");\
 //万能用法，可以给任意标签加属性值
     myscript.setAttribute("type","text/javascript");
 ​
     myscript.innerText = "alert('Hello World')";
     app.appendChild(myscript);
 //特例：只要用getElementsByTagNmae（）获取的都是HTMLCollection，需要选择第一个元素
 var mybody = document.getElementsByTagName('body');
     mybody[0].setAttribute("style","background-color:red")
 //创建一个style标签
     var mystyle = document.createElement("style");
     mystyle.setAttribute("type","text/css");
     mystyle.innerText = "body{background-color:green}";
     document.getElementsByTagName('head')[0].appendChild(mystyle)

insertBefore

 var p0 = document.getElementById("p0");
 var app = document.getElementById("app");
 var p1 = document.getElementById("p1");
 var p2 = document.getElementById("p2");
 //要包含的节点.insertBefore(newNode,targetNode),将新节点插在目标结点的前面
 app.insertBefore(p1,p2)

操作表单（验证问题）

表单是什么？ form input

  • 文本框:type = text

  • 下拉框:< select option>

  • 单选框:type = redio

  • 多选框 checkBox

  • 隐藏域 hidden

  • 密码框 password

  • ......

表单的目的：提交信息

 <form action="post">
    <p><span>用户名</span> <input type="text" id="username"></p>
    <p><span>密码</span> <input type="password" id="password"></p>
 <!--    多选框的值，就是定义好的value-->
    <p><span>性别</span>
     <input type="radio" name="sex" value="男">男
     <input type="radio" name="sex" value="女" >女
    </p>
 </form>
 <script>
     var input_name = document.getElementById("username");
     // 获得输入框的值
     input_name.value
     // 设置输入框的值
     input_name.value = "admin"
     var inputs = document.getElementsByTagName("input");
     inputs[3].value
     //对于单选框，多选框等等，获取值，需要使用checked属性
     inputs[2].checked//查看返回的结果，是否为true或者false，如果为true，则表示选中，否则为未选中
     inputs[2].checked = true;//设置选中
 </script>

提交表单

MD5加密算法

 <!--  MD5的工具类-->
   <script src = "https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
 </head>
 <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="click1()">提交</button>
   <script>
 'use strict'
 function click1(){
   var username = document.getElementById("username");
  var password = document.getElementById("password");
  console.log(username.value)
   //MD5算法
   console.log(password.value)
   password.value = md5(password.value)
   console.log(password.value)
 }
   </script>

MD5加密密码，表单优化

   <script src = "https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
 </head>
 <body>
 <!--表单绑定提交事件
 onsubmit= 绑定一个提交检测的函数，true，false
 将这个结果返回给表单，如果返回false，则表单不会提交，如果返回true，则表单会提交,使用onsumbit接收
 如果要拦截表单，则需要返回false，onsubmit=" return click1()
 -->
 <form action="https://www.baidu.com" method="post" onsubmit=" return click1()">
   <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>
   <script>
 'use strict'
 function click1(){
     var username = document.getElementById("username");
     var password = document.getElementById("input-password");
     var md5password = document.getElementById("md5-password");
     md5password.value = md5(password.value);
     //可以检验判断表单内容
     return true;
 }
   </script>

jQuery

jQuery库：里面存在大量的JavaScript函数

CDN(Content Delivery Network) 是指内容分发网络，也称内容传送网络

获取jQuery

在线引入：官网：jquery (v3.7.1) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 铂特优选

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

本地引入：需要自己下载js文件

<script src="lib/jquery-3.7.1.js"></script>

jQuery万能公式：$(selector).action()（重点）

初体会

 <a href="" id="tes-jquery">点我</a>
 <script>
     document.getElementById('tes-jquery')
     //选择器就是CSS的选择器
     $('#tes-jquery').click(function (){
         alert('jquery')
     })

jQuery选择器

原生JS，选择器少，不好记

 //标签
 document.getElementsByTagName()
 //id
 document.getElementById()
 //类
 document.getElementsByClassName()

jQuery

 $('p').click()
 $('#id1').click()
 $('.class').click

文档工具站：

jQuery事件

鼠标事件，键盘事件，其他事件

案例代码：

 <!--要求：获取鼠标当前的一个坐标-->
 mouse：<span id="mouseMove"></span>
 <div id="divMouse">
 在这里移动鼠标试试
 </div>
 <script>
     //当网页元素加载完毕后响应事件
     $(document).ready(function (){
 ​
     })
     //因为此代码常用，所以简化
     $(function (){
         $('#divMouse').mousemove(function (e){
             $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
         })
     })
 </script>
 </body>

操作DOM

节点文本操作

举例

 <body>
 <ul id="ul-list">
     <li class="top-nav">你好</li>
     <li name = "bye">再见</li>
 </ul>
 <script>
   // 获取元素
   $('#ul-list li[name = bye]').text();// 获取元素内容 解释成文本
   $('#ul-list li[name = bye]').text(1234);// 修改元素内容 解释成文本
   $('#ul-list li[name = bye]').html();// 获取元素内容 解释为html
   $('#ul-list li[name = bye]').html('<p> wqbcquc </p>');// 修改元素内容 解释为html
 </script>
 </body>

css的操作

 $('#ul-list li[name = bye]').css({ "color": "#ff0011", "background": "blue" })

元素的显示与隐藏：本质 display : none;

 $('#ul-list li[name = bye]').show()//显示
 $('#ul-list li[name = bye]').hide()//隐藏

建议观看文档：def.isRejected() | jQuery API 3.2 中文文档 | jQuery API 在线手册

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布