Java-前端

最新推荐文章于 2022-12-22 15:37:27 发布

昊94264

最新推荐文章于 2022-12-22 15:37:27 发布

阅读量634

点赞数

分类专栏： Java 文章标签： java html css js

本文链接：https://blog.csdn.net/qq_53693783/article/details/114664830

版权

Java 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

参考与狂神的前端教学，视频可以去B站去查看

1. HTML

1.我的第一个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <!--meta 描述性标签，用来描述网站的一些信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="张三">
    <meta name="description" content="张三学html">
    <title>我的第一个网页</title>
</head>
<body>
Hello World！
</body>
</html>

2. 基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
    <!--标题标签-->
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>

<!--段落标签-->
<p>    两只老虎，两只老虎，</p>
<p>    跑得快，跑得快，</p>
<p>    一只没有耳朵，</p>
<p>    一只没有尾巴，</p>
<p>    真奇怪！真奇怪！。</p>
<p>    两只老虎，两只老虎，</p>
<p>    跑得快，跑得快，</p>
<p>    一只没有耳朵，</p>
<p>    一只没有尾巴，</p>
<p>    真奇怪！真奇怪！</p>

    <!--水平线标签-->
    <hr/>
<!--换行标签-->
    两只老虎，两只老虎，<br/>
    跑得快，跑得快，<br/>
    一只没有耳朵，<br/>
    一只没有尾巴，<br/>
    真奇怪！真奇怪！。<br/>
    两只老虎，两只老虎，<br/>
    跑得快，跑得快，<br/>
    一只没有耳朵，<br/>
    一只没有尾巴，<br/>
    真奇怪！真奇怪！<br/>
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体： <strong>meet you so happy</strong>
斜体： <em>meet you so happy</em>
    <br/>
<!--特殊符号-->

空格： 空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
大于号：&gt;<br/>
小于号：&lt;<br/>
版权符号：&copy;<br/>

</body>
</html>

3. 图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--img学习
    src：图片地址
    相对地址，绝对地址
    ../   : 表示上一级

    alt ：图片没加载出来，或者文件名错误，会显示alt里面的东西
    title：悬停文字，鼠标停留在图片上显示的文字
    width：宽度多少
    height：高度多少
-->
<img src="../Recources/image/1.jpeg" alt="图片" title="悬停文字" width="2000" height="1345">
</body>
</html>

4. 链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>连接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top"></a>

<!--a标签
href:必填，表示要跳转到哪个页面
target:表示窗口在哪里打开，
    _blank  在新标签中打开
    _self 在自己页面中打开（默认的）
-->

<a href="1.%20我的第一个网页.html" target="_blank">点击我跳转到页面一</a><br/>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a><br/>

<a href="1.%20我的第一个网页.html">
    <img src="../Recources/image/1.jpeg" alt="图片" title="悬停文字" width="2000" height="1345">
</a>

<!--锚链接
1. 需要一个锚标记
2. 跳转到标记
#
-->
<a href="#top">回到顶部</a>

<!--功能性链接
    邮件链接：mailto:
    QQ链接：进入qq推广官网
-->
<a href="mailto:1520943758@qq.com">点击联系我</a>
<!--QQ链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1520943758&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1520943758:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
    
</body>
</html>

5. 列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表
应用范围：试卷，问答。。。
-->
<ol>
    <li>Java</li>
    <li>c</li>
    <li>c++</li>
</ol>
<hr/>
<!--无序列表
应用范围：导航，侧边栏。。。
-->
<ul>
    <li>Java</li>
    <li>c</li>
    <li>c++</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容

应用范围：公司网站底部...
-->
<dl>
    <dt>学科</dt>
    <dd>c</dd>
    <dd>c++</dd>
    <dd>Linux</dd>
</dl>

</body>
</html>

6. 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格table
行：tr
列：td
-->
<table border="1px">
    <tr>
        <!--跨列显示 colspan-->
        <td colspan="2">1.1</td>
        <td>1.2</td>
        <td>1.3</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.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

</body>
</html>

7. 媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
controls播放选项
autoplay自动播放选项
-->
<!--
<video src="../Recources/video/kk%202019-06-17%2009-57-50.mp4" controls autoplay></video>
-->
<audio src="../Recources/audio/说好不哭.mp3" controls autoplay></audio>

</body>
</html>

8. 页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
    <header><h2>网页头部</h2></header>

    <section><h2>网页主体</h2></section>
    <nav><h2>导航辅助内容</h2></nav>
    <footer><h2>网页脚部</h2></footer>

</body>
</html>

9. 内联框架iframe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--iframe内联框架
    src：地址
    w-h:宽度和高度
    name
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="1.%20我的第一个网页.html" target="hello">点击跳转</a>

</body>
</html>

10. 学习表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
    <h1>注册</h1>
<!--表单 form
    action：表单提交的位置  可以是网站，也可以是请求处理地址
    method：post、get  提交方式
        get方式提交：我们可以在url中看到我们的提交的信息，不安全的，但是效率高
        post方式提交：比较安全，传输大文件
-->
    <form action="1.%20我的第一个网页.html" method="get">
        <!--文本输入框：input type="text"-->
        <!--
        value="admin" maxlength="8" size="30"
        value:默认初始值
        maxlength：最长能写几个字符
        siza：文本框的长度
        readonly：表示只读，不可修改
        hidden：隐藏域
        disabled：禁用
        placeholder：提示信息
        required：非空判断
        patten：正则表达式验证
        -->
        <p>名字：<input name="username" type="text" placeholder="请输入用户名" required></p>
        <!--密码框：input name="pwd" type="password"-->
        <p>密码：<input name="pwd" type="password" hidden></p>
        <!--单选框标签：
        input type="radio"
        value="boy"：单选框的值
        name：表示组
        checked：默认选中
        disabled：表示禁用
        -->
        <p>性别：
            <input type="radio" value="boy" name="sex" checked disabled/>男
            <input type="radio" value="girl" name="sex"/>女
        </p>
        <!--多选框:input type="checkbox"
        checked：默认选中
        -->
        <p>爱好：
            <input type="checkbox" value="sleep" name="hobby"/>睡觉
            <input type="checkbox" value="code" name="hobby" checked/>敲代码
            <input type="checkbox" value="chat" name="hobby"/>聊天
            <input type="checkbox" value="game" name="hobby"/>游戏
        </p>
        <!--按钮
            input type="button"：普通按钮
            input type="image"：图像按钮
            input type="submit"：提交按钮
            input type="reset"：重置按钮
        -->
        <p>按钮：
        <input type="button" name="btn1" value="点击变长"/>
        <!--<input type="image" src="../Recources/image/1.jpeg">-->
        </p>

        <!--下拉框，列表框
        selected：默认选中
        -->
        <p>国家：
            <select name="列表名称">
                <option value="China" >中国</option>
                <option value="US">美国</option>
                <option value="UK" selected>英国</option>
                <option value="ehuo">俄国</option>
            </select>
        </p>

        <!--文本域 textarea name="textarea"
            cols="50" rows="10" 行和列
        -->
        <p>反馈：
            <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
        </p>

        <!--文件域
        input type="file" name="files"
        -->
        <p>
            <input type="file" name="files">
            <input type="button" value="上传" name="upload">
        </p>

        <!--邮箱验证-->
        <p>邮箱：
            <input type="email" name="email"/>
        </p>
        <!--URL验证-->
        <p>URL：
            <input type="url" name="url"/>
        </p>
        <!--数字验证-->
        <p>商品数量：
            <input type="number" name="number" max="100" step="1"/>
        </p>

        <!--滑块
        input type="range"
        -->
        <p>音量：
        <input type="range" name="voice" min="0" max="100" step="2">
        </p>
        <!--搜索框
        -->
        <p>搜索：
            <input type="search" name="search">
        </p>

        <!--增强鼠标可用性：

        -->
        <p>
            <label for="mark">你点我试试</label>
            <input type="text" id="mark">
        </p>

        <p>正则表达式：常用邮箱验证
            <input type="text" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" name="email">
        </p>
        
        <p>
        <input type="submit">
        <input type="reset" value="清空表单">
        </p>
    </form>
</body>
</html>

2. CSS

1. 基本知识

css的优势
1. 内容和表现分离
2. 网页结构表现统一，可以实现复用
3. 样式十分的丰富
4. 建议使用独立于html的css文件
5. 利用SEO，容易被搜索引擎收录

css的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1{
            color: black;
        }
        /* 导入式：@import url("css/style.css"); 不经常使用*/
    </style>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<!-- 优先级：就近原则-->
<!--行内样式：在标签中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

拓展：外部样式两种写法

链接式：

<!--外部样式-->
<link rel="stylesheet" href="css/style.css">

导入式：

@import是CSS2.1 特有的！

<!--导入式-->
<style>
    @import url("css/style.css");
</style>

2. 选择器

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

2.1 基本选择器

标签选择器：选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器会选择页面上所有的这个标签的元素*/
        h1{
            color: red;
            background: #3cbda6;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>学Java</h1>
<p>容商天下</p>
</body>
</html>

类选择器class：选择所有class属性一致的标签，跨标签 .class{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式  .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .hao{
            color: red;
        }
        .biaoti2{
            color: black;
        }
        .bt3{
            color: blue;
        }
    </style>
</head>
<body>

<h1 class="hao">hao</h1>
<h1 class="biaoti2">标题2</h1>
<h1 class="bt3">标题3</h1>

<p class="bt3">p标签</p>

</body>
</html>

id选择器：全局唯一！ #id名 {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器 :id必须保证全局唯一
            #id名称{
            }
           优先级：
           不遵循就近原则，固定的
           id选择器 > class 选择器 > 标签选择器
        */
        #hao
    </style>

</head>
<body>

    <h1 id="hao">标题一</h1>
    <h1>标题二</h1>
    <h1>标题三</h1>
    <h1>标题四</h1>
    <h1>标题五</h1>

</body>
</html>

优先级：
不遵循就近原则，固定的
id > class> 标签

2.2 层次选择器

后代选择器：在某个元素的后面

/*后代选择器*/
body p{
    background: red;
}

子选择器一代

/*子选择器*/
body>p{
    background: #3cbda6;
}

相邻兄弟选择器

/*兄弟选择器 只有一个，向下延伸*/
.active + p{
    background: blue;
}

通用选择器

/*通用兄弟选择器 当前选中元素的向下的所有的兄弟元素 */
.active~p{
    background: aqua;
}

2.3 结构伪类选择器

伪类：条件

/*ul第一个子元素*/
ul li:first-child{
    background: aqua;
}

/*ul最后一个子元素*/
ul li:last-child{
    background: blue;
}

/*选中p1：定位到父元素，选择当前的第一个元素
选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
*/
p:nth-child(2){
    background: red;
}
/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(2){
    background: gold;
}

2. 4属性选择器

属性名，属性名=属性值（正则）
=表示绝对等于
*=表示包含
^=表示以…开头
$=表示以…结尾
存在id属性的元素 a[]{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            display: block;
            height: 50px;
            width: 50px;
            float:left;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: beige;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性名，属性名=属性值（正则）
        =表示绝对等于
        *=表示包含
        ^=表示以...开头
        $=表示以...结尾
        存在id属性的元素  a[]{}
        */
        /* a[id]{
             background: red;
         }*/

        /*id=first的元素*/
        /* a[id=first]{
             background: aqua;
         }*/

        /*class中有links元素*/
        /* a[class = "links item2 first2"]{
             background: orange;
         }*/
        /*a[class*="links"]{
            background: black ;
        }*/
        /*选中href中以http开头的元素*/
        a[href^="http"]{
            background: orange;
        }
    </style>

</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="/adad/faf" class="links item2 first2" >2</a>
    <a href="qwe123" class="links item3 first3" >3</a>
    <a href="eweqe" class="links item4 first4" >4</a>
    <a href="rrrrr" class="links item5 first5" >5</a>
    <a href="ttt" class="links item6 first6" >6</a>
    <a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>

3. 美化网页元素

3.1 为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .hao{
            font-size: 50px;
        }
    </style>
    
</head>
<body>

学习<span class="hao">Java</span>

</body>
</html>

3.2 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*font-family：字体
        font-size：字体大小
        font-weight：字体的粗细
        color：字体颜色
        */
        body{
            font-family: 楷体;

        }
        h1 {
            font-size: 50px;
            color: red;
        }
        .p1{
            font-weight: lighter;
        }
    </style>

</head>
<body>

<h1>故事介绍</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

</body>
</html>

3.3 文本样式

颜色：color rgb rgba
文本对齐的方式：text-align=center
首行缩进：text-indent:2em
行高：line-height：单行文字上下水平居中 line-height = height
装饰：text-decoration
文本图片水平对齐：vertical-align：middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
       text-align: center;居中对齐
       text-indent: 2em：首行缩进两字符
       height: 300px;
       line-height: 300px;
       行高和块的高度一致，就可以上下居中
       text-decoration: underline;下划线
       text-decoration: line-through;中划线
       text-decoration: overline;上划线
    -->
    <style>
        h1{
            color: red;
            text-align: center;

        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 300px;
            line-height: 300px;
        }
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
            text-decoration: overline;
        }

    </style>

</head>
<body>
<p class="l1">123</p>
<p class="l2">123</p>
<p class="l3">123</p>

<h1>故事介绍</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p class="p3">
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

</body>
</html>

3.4 文本，阴影和超链接伪类

<style>
	a{/*超链接有默认的颜色*/
		text-decoration:none;
		color:#000000;
	}
	a:hover{/*鼠标悬浮的状态*/
		color:orange;
	}
	a:active{/*鼠标按住未释放的状态*/
		color:green
	}
	a:visited{/*点击之后的状态*/
		color:red
	}
</style>

阴影：

/*	第一个参数：表示水平偏移
	第二个参数：表示垂直偏移
	第三个参数：表示模糊半径
	第四个参数：表示颜色
*/
text-shadow:5px 5px 5px 颜色

3.6 列表

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>

#nav{
    width: 300px;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: red;
}

/*ul li */
/*list-style:
    none:去掉圆点
    circle:空心圆
    decimal:数字
    square：正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background: bisque;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.7 背景

背景颜色

背景图片

div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/风景.jpg");
}
.div1{
    background-repeat: repeat-x;
}
.div2{
    background-repeat: repeat-y;
}
.div3{
    background-repeat: no-repeat;
}

3.8 渐变

渐变地址

4. 盒子模型

4.1 什么是盒子模型

margin：外边距
padding：内边距
border：边框

4.2 边框

border：粗细样式颜色

边框的粗细
边框的样式
边框的颜色

<style>
body{/*body总有一个默认为8的外边距，这里把他的外边距给变成0*/
    margin: 0px;
}
#box{
    /*border : 粗细，样式，颜色*/
    width: 300px;
    border: 1px solid red;
}
h2{
    font-size: 16px;
    background-color: red;
    line-height: 30px;
    color: white;
}

form{
    background: orange;
}
div:nth-of-type(1) input{
    border: 3px solid black;
}
div:nth-of-type(2) input{
    border: 3px dashed #251451;
}
div:nth-of-type(3) input{
    border: 3px solid #008c27;
}
</style>

4.3 内外边距

margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/
1234567

盒子的计算方式：
margin+border+padding+内容的大小

总结：
body总有一个默认的外边距 margin:0
常见操作：初始化

margin:0;
padding:0;
text-decoration:none;

4.4 圆角边框

<style>
/*左上，右上，右下，左下。顺时针方向
*/
/*div{!*半圆*!
width: 100px;
height: 50px;
margin: 30px;
background: red;
border-radius: 50px 50px 0 0;
}*/
div{/*扇形*/
    width: 50px;
    height: 50px;
    margin: 30px;
    background: red;
    border-radius: 50px 0 0 0;
}
img{
    border-radius: 500px;
}
</style>

4.5 阴影盒子

div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    box-shadow:10px 10px 100px yellow;
}

img{
    border-radius: 100px;
    box-shadow:10px 10px 100px yellow;
}

5. 浮动

5.1 display

block：块元素
inline：行内元素
inline-block：是块元素，但是可以内联，在一行

这也是一种实现行内元素排列的方式，但是我们很多情况用float

none：消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--block 块元素
        inline 行内元素
        inline-block 是块元素，但是可以内联 ，在一行
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

5.2 float：left/right左右浮动

clear：both //取消浮动

5.3 overflow及父级边框塌陷问题

clear：
right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素
none：

解决塌陷问题方案：
方案一：增加父级元素的高度；
方案二：增加一个空的div标签，清除浮动

<div class = "clear"></div>
<style>
	.clear{
		clear:both;
		margin:0;
		padding:0;
}
</style>
12345678

方案三：在父级元素中增加一个overflow：hidden

overflow:hidden/*隐藏*/
overflow：scoll/*滚动*/
12

方案四：父类添加一个伪类:after

#father:after{
	content:'';
	display:block;
	clear:both;
}
12345

小结：

浮动元素增加空div----》简单、代码尽量避免空div
设置父元素的高度-----》简单，元素假设没有了固定的高度，就会超出
overflow----》简单，下拉的一些场景避免使用
父类添加一个伪类:after（推荐）----》写法稍微复杂，但是没有副作用，推荐使用

5.4 display与float对比

display：方向不可以控制
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

6、定位

6.1 相对定位

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

top:-20px;
left:20px;
bottom:-10px;
right:20px;
1234

练习题：连接卡

6.2 绝对定位-absolute

定位：基于xxx定位，上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;

        }
        #second{
            background-color: green;
            border: 1px dashed #0ece4f;
            position: absolute;
            right:30px;
            top:30px
        }
        #third{
            background-color: red;
            border: 1px dashed #ff1b87;
        }
    </style>
</head>
<body>
<div id = "father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940414243

6.3 固定定位-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: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>
</body>
</html>
123456789101112131415161718192021222324252627282930313233

6.4 z-index

在这里插入图片描述
图层~
z-index：默认是0，最高无限~999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/bg.jpg" alt=""></li>
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-01=01</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>
</body>
</html>
1234567891011121314151617181920
#content{
    width: 380;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid yellow;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top:216px
}
.tipText{
    color: white;
    z-index: 999;
}
.tipBg{
    background: orange;
    opacity: 0.5;/*背景透明度*/
    filter: alpha(opacity=50);
}
123456789101112131415161718192021222324252627282930313233

7 . 动画及视野拓展

狂神说CSS教学视频请点这里

3. JavaScript

1. 快速入门

引入JavaScript

内部标签

 3. 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script标签内，写JavaScript代码-->
    <!--<script>-->
        <!--alert("hello word");-->
    <!--</script>-->

    <!--外部引入-->
    <script src="js/ad.js"></script>
    
    <script type="text/javascript"></script>

</head>
<body>


<!--这也可以存放script代码-->
</body>
</html>

2. 基本语法入门

<script>
    //1. 定义变量   变量类型  变量名=变量值；
    var name="zhangsan";
var score=71;
// 2. 条件控制
if(score>60&&score<70){
    alert("60~70")
}else if (score > 70 && score < 80) {
    alert("70~80");
}else {
    alert("other");
}

//console.log(score)//在浏览器的控制台打印变量 ！ System.out.println();

</script>

3. 数据类型

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

变量

var a
1

number
js不区分小树和整数，Number

123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN	//not a number
Infinity // 表示无限大
123456

字符串
‘abc’ “abc”

布尔值
true，false

逻辑运算

&& 两个都为真，结果为真

|| 一个为真，结果为真

! 	真即假，假即真
12345

比较运算符！！！重要！

=
1，"1"
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）
1234

这是一个JS的缺陷，坚持不要使用 == 比较
须知：

NaN === NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN（NaN）来判断这个数是否是NaN

浮点数问题

console.log((1/3) === (1-2/3))
1

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

Math.abs(1/3-(1-2/3))<0.00000001
1

null 和 undefined

null 空
undefined 未定义

数组
Java的数组必须是相同类型的对象~，JS中不需要这样

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
//第二种定义方法
new Array(1,2,3,4,5,'hello');
1234

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

undefined
1

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

每个属性之间使用逗号隔开，最后一个属性不需要逗号

// Person person = new Person(1,2,3,4,5);

var person = {
	name:'Tom',
	age:3,
	tags:['js','java','web','...']
}
1234567

取对象值

person.name
> "Tom"
person.age
> 3

4. 严格检查模式

Title

### 3. 数据类型

#### 1. 字符串

1、正常字符串我们使用 单引号，或者双引号包裹
2、注意转义字符 \

```java
\'
\n
\t
\u4e2d    \u##### Unicode字符

\x41	Ascall字符
123456
```

3、多行字符串编写

```javascript
//tab 上面 esc下面
        var msg =
            `hello
            world
            你好呀
            nihao
            `
1234567
```

4、模板字符串

```javascript
//tab 上面 esc下面
let name = 'Tom';
let age = 3;
var msg = `你好，${name}`

12345
```

5、字符串长度

```javascript
str.length
1
```

6、字符串的可变性，不可变
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200508110738649.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9oMTk5NQ==,size_16,color_FFFFFF,t_70)
7、大小写转换

```javascript
//注意，这里是方法，不是属性了
student.toUpperCase();
student.toLowerCase();
123
```

8、student.indexof(‘t’)
9、substring，从0开始

```javascript
[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)
123
```

#### 2. 数组

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

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

1、长度

```javascript
arr.length
1
```

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

![给arr.lennth赋值](E:\zah\资料\学习\image-20210119083605128.png)

2、indexOf，通过元素获得下标索引

```javascript
arr.indexOf(2)
1
12
```

字符串的"1"和数字 1 是不同的

![通过元素获得下标索引](E:\zah\资料\学习\image-20210119083451300.png)

**3、slice（）**截取Array的一部分，返回的一个新数组，类似于String中substring

![截取Array的一部分](E:\zah\资料\学习\image-20210119083713196.png)

**4、push()，pop()尾部**

```javascript
push：压入到尾部
pop：弹出尾部的一个元素
```

![push()，pop()尾部](E:\zah\资料\学习\image-20210119084126546.png)

**5、unshift(),shift() 头部**

```javascript
unshift：压入到头部
shift：弹出头部的一个元素
```

![unshift(),shift() 头部](E:\zah\资料\学习\image-20210119085411747.png)

6、排序sort()

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

7、元素反转reverse()

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

**8、concat()**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200508153119816.png)
注意：concat()并没有修改数组，只是会返回一个新的数组

9、连接符join
打印拼接数组，使用特定的字符串连接
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200508153243846.png)
10、多维数组
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200508153447514.png)

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

#### 3. 对象

若干个键值对

```javascript
var 对象名 = {
	属性名：属性值，
	属性名：属性值，
	属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
	name:"Tom",
	age:3,
	email:"123456798@QQ.com",
	score:66
}
```

s中对象，{…}表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！
1、对象赋值

![image-20210119093208585](E:\zah\资料\学习\image-20210119093208585.png)

2、使用一个不存在的对象属性，不会报错！undefined
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200508155917394.png)
3、动态的删减属性，通过delete删除对象的属性
![动态的删减属性](E:\zah\资料\学习\image-20210119093936410.png)
4、动态的添加，直接给新的属性添加值即可
![动态的添加](E:\zah\资料\学习\image-20210119094008098.png)
5、判断属性值是否在这个对象中！xxx in xxx
![判断属性值是否在这个对象中](E:\zah\资料\学习\image-20210119094140843.png)
6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
![判断属性是否是这个对象中](E:\zah\资料\学习\image-20210119094252092.png)

#### 4. 流程控制

if判断
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200508161158507.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9oMTk5NQ==,size_16,color_FFFFFF,t_70)

while循环，避免程序死循环
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200508161549241.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9oMTk5NQ==,size_16,color_FFFFFF,t_70)
for循环
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200508161625832.png)
forEach循环

> ES5.1特性

```javascript
var num=[12,45,2,3,6,442,1,3,155];
num.forEach(function (value) {
    console.log(value)
});
```

for …in-------下标

~~~javascript
var num=[12,45,2,3,6,442,1,3,155];
for ( let index in num){
    console.log(num[index])
}

5. Map和Set

Map

var map=new Map([["tom",6],["jerray",10],["haha",123]]);
var name=map.get("tom");//通过key获取values值
map.set("admin",4);//新增或者修改
map.delete("haha");//删除

Set：无序不重复的集合

set.add(3);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含

6. iterator

遍历数组

//通过for of      /for in是遍历下标的  需要 console.log(arr[x])
var arr=[1,2,4,54,22,4,5];
for (let x of arr){
    console.log(x);
}

遍历Map

var map=new Map([["tom",10],["jerry",6],["haha",5]]);
for (let x of map) {
    console.log(x)
}

遍历Set

var set=new Set([1,5,4,2,4,5,2]);
for (let y of set) {
    console.log(y)
}

4. 函数

1. 定义函数

定义方式一

绝对值函数
在这里插入图片描述
一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

在这里插入图片描述
function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价！

调用函数

abs(10)//10
abs(-10) //10

参数问题：javaScript可以传任意个参数，也可以不传递参数~
参数进来是否存在问题？
假设不存在参数，如何规避？
在这里插入图片描述

arguments

arguments是一个JS免费赠送的关键字；
代表，传递进来的所有参数，是一个数组！
在这里插入图片描述
问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~

rest

以前：
在这里插入图片描述

ES6引入的新特性，获取除了已经定义的参数之外的所有参数~…
在这里插入图片描述
rest参数只能写在最后面，必须用…标识。

2. 变量作用域

在javascript中，var定义变量实际是有作用于的。
假设在函数体重声明，则在函数体外不可以使用~（闭包）

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

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

function qj() {
    var x=1;
    x=x+1;
}
function qj2() {
    var x='A';
    x=x+1;
}

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

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

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

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

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

提升变量的作用域

function qj() {
    var x="x"+y;
    console.log(x);
    var y='y';
}
qj();//xundefined

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

function qj() {
    var y;

    var x="x"+y;
    console.log(x);
    y="y";
}
qj();

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

function ah() {
    var x=1,
        y=x+1,
        z,i,a;//undefined
}

全局变量

//这个是全局变量
var x=1;
function ah() {
   console.log(x);
}
ah();
console.log(x);

全局对象window

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

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

var x='xxx';
window.alert(x);
var old_alert=window.alert;
//old_alert(x);
window.alert=function () {

};
//alert()失效了
window.alert(123);
//恢复alert();
window.alert=old_alert;
window.alert(12333)

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

规范

由于我们的所有变量都会绑定到window上，。如果不同的js文件，使用了相同的全局变量，就会产生冲突—>如何减少这样的冲突？

//唯一全局变量
var hao={};

//定义全局变量
hao.name='zhanganhao';
hao.add=function (a,b) {
    return a+b;
};

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~
jQuery中就是使用的该方法：jQuery.name，简便写法：$()

局部作用域

在这里插入图片描述
ES6的let关键字，解决了局部作用域冲突的问题！

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

常量

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值。
在这里插入图片描述
在ES6引入了常量关键字 const

3. 方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
在这里插入图片描述
this.代表什么？拆开上main的代码看看

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

apply

在js中可以控制this指向
在这里插入图片描述

5. 内部对象

标准对象

在这里插入图片描述

1. Date

基本使用

var now=new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDay();//日
now.getHours();//小时
now.getMinutes();//分
now.getSeconds();//秒

now.getTime();//时间戳  全世界统一  1970.1.1 00：00：00；毫秒数

转换

now = new Date(1611038916840);
 Tue Jan 19 2021 14:48:36 GMT+0800 (中国标准时间)
now.toLocaleString()
"2021/1/19 下午2:48:36"
now.toGMTString()
"Tue, 19 Jan 2021 06:48:36 GMT"

2. JSON

1. JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。
2. 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
3. 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在javascript中，一切皆为对象，任何js支持的类型都可以用JSON表示
格式

对象都用{}
数组都用[]
所有的键值对都是用key:value

JSON字符串和js对象转化

var user={
    name:"hao",
    age:"13",
    sex:"男"
};
//对象转化为JSON字符串{"name":"hao","age":"13","sex":"男"}
var jsonuser=JSON.stringify(user)
//JSON字符串转化为对象 参数为JSON 字符串
var obj=JSON.parse('{"name":"hao","age":"13","sex":"男"}');

JSON和JS对象的区别

var obj={a:'hello',b:'hellob'};
var json='{"a":"hello","b":"hellob"}'

6. 面向对象编程

类：模板
对象：具体实例

在javascript中，需要大家转换一下思维方式！
原型：

var Student={
    name:"hao",
    age:'13',
    sex:'男',
    run:function () {
        console.log(this.name+"run...")
    }
};

var xiaoming={
    name:"xiaoming",
};
//原型对象
xiaoming.__proto__=Student;

var Bird={
    fly:function () {
        console.log(this.name+"fly...")
    }
};
//xiaoming的原型对象变为Bird
xiaoming.__proto__=Bird;

1. class继承

class关键字，是在ES6引入的
1、定义一个类、属性、方法

class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert("hello");
    }
}

var xiaoming=new Student("xiaoming");
var xiaohong=new Student("xiaohong");

继承

<script>

    class Student{
        constructor(name){
            this.name=name;
        }
        hello(){
            alert("hello");
        }
    }

    class xiaoStudent extends Student{
        constructor(name,grade){
            super(name);
            this.grade=grade;
        }
        myGrade(){
            alert("我是一个小学生")
        }
    }
    var xiaoming=new Student("xiaoming");
    var xiaohong=new xiaoStudent("xiaohong",1);

</script>

本质：查看对象原型
在这里插入图片描述

原型链

proto:
在这里插入图片描述

7. 操作BOM对象（重点）

浏览器介绍

javascript和浏览器关系？
BOM：浏览器对象模型

IE6~11
Chrome
Safari
FireFox
Opera

三方

QQ浏览器
360浏览器

window

window代表浏览器窗口
在这里插入图片描述

Navigator（不建议使用）

Navigator封装了浏览器的信息
在这里插入图片描述
大多数时候，我们不会使用navigator对象，因为会被认为修改!
不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

在这里插入图片描述

location(重要)

location代表当前页面的URL信息
在这里插入图片描述

document（内容DOM）

document代表当前的页面，HTML DOM文档树
在这里插入图片描述
获取具体的文档树节点

获取cookie

劫持cookie原理
www.taobao.com

服务器端可以设置cookie为httpOnly

history（不建议使用）

history代表浏览器的历史记录
在这里插入图片描述

8. 操作DOM对象（重点）

DOM：文档对象模型

核心

浏览器网页就是一个Dom树形结构！

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

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

1. 获得DOM节点

这是原生代码，之后我们尽量都使用jQuery();

2. 更新节点

在这里插入图片描述
操作文本

操作css

3. 删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

var self= document.getElementById("p1");//获得自己的节点
var father1=p1.parentElement;//获得p1的父节点
var father2=self.parentElement;//获得p1的父节点

//删除节点是一个动态的过程   建议从后往前删
father1.removeChild(father1.children[2]);
father1.removeChild(father1.children[1]);
father1.removeChild(father1.children[0]);

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。

4. 插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能这么干了！会产生覆盖

追加
在这里插入图片描述

9. 操作表单（验证）

表单是什么？form-----DOM树

文本框----text
下拉框----select
单选框----radio
多选框----checkbox
隐藏域----hidden
密码框----password
…

表单的目的提交信息

获得要提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="man" id="girl">女
    </p>
</form>

<script>
    var input_text=document.getElementById("username");
    var boy_radio=document.getElementById('boy');
    var girl_radio=document.getElementById('girl');

    input_text.value;//可以获得输入框内的值
    input_text.value;//修改输入框内的值

    boy_radio.checked;//可以查看是否被选中
    boy_radio.checked=true//赋值为true，就会自动被选中
</script>


</body>
</html>

练习：

用户名不能为空
用户名必须在6-14位之间
用户名只能有数字和字母组成，不能含有其他符号（正则表达式）
密码和确认密码一致，邮箱地址合法
统一失去焦点验证
错误提示信息统一在span标签中提示，并且要求字体为12号，红色
文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
最终表单中所有项均合法方可提交

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            span{
                font-size: 12px;
                color: red;
            }
        </style>
    </head>
    <body>
        <script>

            window.onload=function () {
                var usernameErrorSpan =document.getElementById("usernameError");
                var usernameElt =document.getElementById("username");
                usernameElt.onblur=function () {
                    //获取用户名
                    var username= usernameElt.value;
                    //去除前后空白
                    username=username.trim();
                    //判断username不是空字符串
                    //获取username的span标签
                    if(username===""){
                        usernameErrorSpan.innerText="用户名不能为空";
                    }else {
                        if (username.length<6||username.length>14){
                            //用户名长度非法
                            usernameErrorSpan.innerText="用户名长度必须为[6-14]之间";
                        }else {
                            var regExp=/^[A-Za-z0-9]+$/;
                            var ok=regExp.test(username);
                            if (ok) {

                            }else{
                                usernameErrorSpan.innerText="用户名字能由字母和数字组成"
                            }
                        }
                    }
                };
                // 给username这个文本框绑定获得焦点事件
                usernameElt.onfocus=function () {
                    //清空非法字符串
                    if (usernameErrorSpan.innerText !=""){
                        usernameElt.value="";
                    }
                    // 清空span
                    usernameErrorSpan.innerText="";
                };

                var pwdErrorSpan=document.getElementById("pwdError");
                var userpwd2Elt=document.getElementById("userpwd2");
                userpwd2Elt.onblur=function () {
                    var userpwdElt=document.getElementById("password");
                    var userpwd2=userpwd2Elt.value;
                    var userpwd=userpwdElt.value;
                    //获取密码和确认密码
                    if (userpwd != userpwd2){
                        pwdErrorSpan.innerText="两次密码不一致";
                    }else {
                        //密码一致
                    }
                };
                //绑定onfocus事件
                userpwd2Elt.onfocus=function () {
                    if (pwdErrorSpan.innerText!=""){
                        userpwd2Elt.value="";
                    }
                    pwdErrorSpan.innerText = "";
                }


                //给email绑定onblur事件
                var emailElt=document.getElementById("email");
                //获取email的span
                var  emailSpan= document.getElementById("emailError");
                emailElt.onblur=function () {
                    //获取email
                    var email=emailElt.value;
                    //编写email的正则表达式
                    var emailRegExp=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                    var ok=emailRegExp.test(email);
                    if ( ok){
                        //合法
                    }else {
                        //不合法
                        emailSpan.innerText="邮箱内容不合法"
                    }
                }
                emailElt.onfocus=function () {
                    if (emailSpan.innerText!="") {
                        emailElt.value="";
                    }
                    emailSpan.innerText="";
                }
                var submitButElt=document.getElementById("submitBut");
                submitButElt.onclick=function () {
                    usernameElt.focus();
                    usernameElt.blur();

                    userpwd2Elt.focus();
                    userpwd2Elt.blur();

                    emailElt.focus();
                    emailElt.blur();

                    //当所有表单项都是合法的时候提交表单
                    if (usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == "") {
                        //提交表单
                        var userFormElt= document.getElementById("userForm");
                        userFormElt.action="#";
                        userFormElt.submit();
                    }
                }



            }
        </script>

        <form id="userForm" action="#" method="get">

            用户名：<input type="text" name="username" id="username"/><span id="usernameError"></span><br/>
            密码：<input type="text" name="userpwd" id="password"/><br/>
            确认密码：<input type="text" id="userpwd2"/><span id="pwdError"></span><br/>
            邮箱：<input type="email" id="email" name="email"><span id="emailError"></span><br/>
            <!--<input type="submit" value="注册">-->
            <input type="button" value="注册" id="submitBut">
            <input type="reset" value="重置">
        </form>
    </body>
</html>

10. jQuery

javaScript和jQuery的关系？

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

获取jQuery

在这里插入图片描述

公式：$(selector).action()

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <a href="" id="test_jquery">点我</a>

        <script>
            $('#test_jquery').click(function () {
                alert("aaa")
            })
        </script>

    </body>
</html>

1. 选择器

//原生js，选择器少，麻烦不好记
//标签
document.getElementByTagName();
//id
document.getElementById();
//class
document.getElementByClassName();

//jQuery css中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click;//class选择器
123456789101112

文档工具站：http://jquery.cuishifeng.cn/

2. 事件

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

mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <script src="lib/jquery-3.4.1.js"></script>
        <style>
            #divMove{
                width:500px;
                height:500px;
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <!--要求：获取鼠标当前的一个坐标-->
        mouse：<span id = "mouseMove"></span>
        <div id = "divMove">
            在这里移动鼠标试试
        </div>
        <script>
        	//当网页元素加载完毕之后，响应事件
            //$(document).ready(function(){})
            $(function(){
                $('#divMove').mousemove(function(e){
                    $('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
                })
            });
        </script>
    </body>
</html>

3. 操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值