HTML5+CSS3+JavaScript基础 学习

HTML.5

/*****************************************

学习网站

飞冰：https://ice.work

源码之家：https://www.mycodes.net/

菜鸟教程：https://www.runoob.com/

W3school:https://www.w3school.com.cn/

廖雪峰的官方网站：https://www.liaoxuefeng.com/wiki/1022910821149312

jQuery学习网站：https://jquery.cuishifeng.cn/

前端要避免重复造轮子

*******************************************/

初识HTML

➢HTML ​ ➢Hyper Text Markup Language (超文本标记语言)

HTML5的优势

➢世界知名浏览器厂商对HTML .5的支持 ​ ➢微软 ​ ➢Google ​ ➢苹果 ​ ➢Opera ​ ➢Mozilla ​ ➢市场的需求 ​ ➢跨平台

W3 C标准

➢W3C ➢World Wide Web Consortium (万维网联盟) ➢成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构 ➢http://www.w3.org/ ➢http://www.chinaw3c.org/

➢W3C标准包括 ➢结构化标准语言(HTML、XML) ➢表现标准语言(CSS) ➢行为标准(DOM、ECMAScript )

 

创建项目-->删除src文件，新建directory(目录)-->新建html文件-->设置里搜索web,更改打开浏览器的路径

image-20200903135457049

HTML注释

快捷键 ：CTRL+/

<!-- 注释 -->

<!-- 注释,DOCTYPE 告诉浏览器默认使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
    <meta charset="UTF-8">
    <!--meta描述性标签,它用来描述我们网站的一-些信息-->
    <!--meta - -般用来做SE0-->
    <meta charset: ="UTF-8">
    <meta name="keywords" content="骑牛西出函谷关">
    <meta name="descripti on" content="这里有我的世界">
​
    <!-- title网页标题-->
   <title>骑牛西出函谷关</title>
</head>
<!--body标签代表网页主体-->
<body>
    hello word!
</body>
</html>

网页基本标签

➢标题标签 <h1></h1> ​ ➢段落标签 <p></p>

➢换行标签 ​ ➢水平线标签 <hr/> ​ ➢字体样式标签<strong></strong> <em></em> ​ ➢注释和特殊符号 &--;

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<p>
​
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
​
<!--段落标签-->
<p>梦后楼台高锁，酒醒帘幕低垂。</p>
<p>去年春恨却来时，落花人独立，微雨燕双飞。</p>
<p>记得小苹初见，两重心字罗衣。</p>
<p>琵琶弦上说相思，当时明月在，曾照彩云归。</p>
​
<!--水平线标签-->
<hr/>
<!--换行标签-->
梦后楼台高锁，酒醒帘幕低垂。<br/>
去年春恨却来时，落花人独立，微雨燕双飞。<br/>
记得小苹初见，两重心字罗衣。<br/>
​
琵琶弦上说相思，当时明月在，曾照彩云归。<br/>
​
<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体： <strong> 这是粗体</strong>
斜体：<em>这是斜体</em>
​
<!--特殊-->
空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;骑牛西出函谷关
<!--
&   ;
-->
​
​
</body>
</html>

image-20200904005326975

 

图像标签

image-20200904003523100

src :图片地址 (必填) 相对地址(推荐使用)，绝对地址 ../ --.上一级目录 alt :图片名字(必填）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
​
<!--img学习
src :图片地址 (必填)
相对地址(推荐使用)，绝对地址
../ --.上一级目录
alt :图片名字(必填)
-->
​
<body>
<img src="../resources/image/桌面.jpg" alt="桌面图片"title="这是鼠标悬浮的提示文字" width="501" height="505">
</body>
</html>

image-20200904005943376

链接标签

image-20200904010354156

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
​
<!--a标签
    href :必填,表示要跳转到那个页面
    target :表示窗口在哪里打开
    _blank 在新标签中打开
    -->
​
<body>
<!--
锚链接，设置一个锚标记，
用name定义名字，然后用#调用
-->
<a name="顶部">顶部</a>
<a href="1.第一个.html"target="_blank">这里跳转到我的第一个网页</a>
<a href="https://www.baidu.com"target="_self">这里跳转到百度</a>
<br/>
<a href="基本标签.html">
    <img src="../resources/image/桌面.jpg" alt="桌面图片"title="这是鼠标悬浮的提示文字" width="501" height="505">
</a>
<p>------------------------------------</p>
<!--
    功能性链接，
    邮件链接 mailto:
-->
<a href="mailto:1845494004@qq.com">点击联系小帅哥</a>
<a href="#顶部">回到顶部</a>
<a href="基本标签.html#网页下端">这里跳转到另一个网页的锚链接处</a>
</body>
</html>

 

image-20200904141259627

行内元素和块元素

◆块元素 ◆无论内容多少，该元素独占- -行 ◆(p、h1-h6...) ◆行内元素 ◆内容撑开宽度,左右都是行内元素的可以在排在一-行 ◆(a.strong.em...)

列表

■什么是列表 ◆列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息 ■列表的分类 ◆无序列表 ◆有序列表 ◆定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
​
<!--
    有序列表.
    应用范围:试卷
    问答
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>
​
<hr/>
​
<!--
    无序列表
    应用范围:导航，
    侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <1i>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>
​
<!--
    自定义列表
    dl:标签
    dt :列表名称
    dd :列表内容
    公司网站底离
-->
<dl >
    <dt>学科 </dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Li nux</dd>
    <dd>C</dd>
    <dt>位置 </dt>
    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>
</dl>
​
​
</body>
</html>

image-20200904150508657

表格

■为什么使用表格 ◆简单通用 ◆结构稳定 ■基本结构 ◆单元格 ◆行 ◆列 ◆跨行 ◆跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>
​
<!--
表格table
行 tr
列 td
-->
​
<table border="1px">
    <tr>
        <!-- colspan 跨列    -->
     <td colspan="3">学生成绩</td>
    </tr>
    <!-- rowspan 跨行    -->
    <tr>
        <td rowspan="2">流尘</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>99</td>
    </tr>
    </tr>
    <!-- rowspan 跨行    -->
    <tr>
        <td rowspan="2">年少</td>
        <td>生物</td>
        <td>100</td>
    </tr>
    <tr>
        <td>地理</td>
        <td>96</td>
    </tr>
</table>
</body>
</html>

image-20200905005615121

视频和音频

■视频元素 ◆video ■音频元素 ◆audio

<!DOCTYPE html>
I<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src :资源路径
controls :控制条
autoplay :自动播放
-->
<video src="../resources/video/片头.mp4" controls autoplay></video>
<audio src="../resources/audio/萤火虫和你.mp3 controls autoplay></audio>
</body>
</html>
​

页面结构分析

image-20200905021023666

iframe内联框架

image-20200905024537045

可以通过直接引用页面地址打开，内联框架可以设置大小，也可以通过定义框架标识名，调用

image-20200905025348458

表单标签 form

■表单的应用 ◆隐藏域 hidden ◆只读 readonly ◆·禁用 disabled

■表单初级验证 常用方式 ◆placeholder 提示信息 ◆required 非空判断 ◆pattern 正则表达式

 

 

image-20200906000222069

image-20200905230105896

常用正则表达式 https://www.jb51.net/tools/regex.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>
​
<!--表单form
    action :表单提交的位置，以是网站，也可以是一个请求处理地址
    method : post , get提交方式
    get方式提交:我们可以在url中看到我们提交的信息，不安全，高效﹐
    post :比较安全，传输大文件.
-->
<form action="1.第一个.html" method="get">
​
​
        <!--文本输入框: input type="text"
        value="123456"默认初始值
        maxlength="g"最长能写几个字符
        size="30"
        文本框的长度
-->
<p>名字:<input type="text" name="username" ></p>
<!--瘀码框: input type="password"-->
<p>密码:<input type="password" name="pwd"></p>
​
​
    <!--单选框标签
    input type="radio"
    value :单选框的值
    name :表示组
    -->
<p>性别:
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
​
    <!--多选框
    input type="checkbox"
    -->
    <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="btni" value="点击变长">
    <!--<input type="image" src="../resources/image/1.jpg">-->
    </p>
​
​
    <!--下拉框，列表框
    -->
    <p>国家:
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="yingdu">印度</option>
        </select>
    </p>
​
​
    <!--文本域
    cols="50"rows="10"
    -->
<p>反馈:
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
​
<!--文件域
input type="file"name="files"
-->
    <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="num" max="100" min="o" step="1">
    </P>
​
    <!--滑块
    input type="range"
    -->
    <p>音量:
    <input type="range" name="voice" min="o" max="100" step="2">
    </p>
​
    <!--搜索框-->
    <p>搜索∶
    <input type="search" name="search">
    </p>
​
    <p>
        <input type="submit" >
        <input type="reset"  value="清口表单">
    </p>
​
    </form>
​
    </body>
    </html>

image-20200906002151056

CSS

1、什么是CSS

如何学习 1.CSS是什么 2.CSS怎么用（快速入门) 3.CSS 选择器(重点＋难点) 4.美化网页(文字，阴影，超链接，列表,渐变....) 5.盒子模型 6.浮动 7.定位 8.网页动画(特效效果)

1.1、什么是CSS

◆Cascading Style Sheet 层叠级联样式表 ◆CSS: 表现（美化网页) ◆字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动...

 

image-20200906204450356

1.2、发展史

cSS1.0 cSS2.0 DIV(块)＋ CSS，HTML与CSS结构分离的思想，网页变得简单，SEO cSS2.1 浮动，定位 cSS3.0 圆角，阴影，动画....._浏览器兼容性~

 

练习格式

image-20200906210208581

1.3 快速入门

style

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <!--规范，<style> 可以编写css的代码，没一个声明，最好使用分号结尾
    语法:
    选择器i
    声明1;
    声明2;
    声明3;
    }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
​
</head>
<body>
    <h1>我是标题</h1>
</body>
</html>

建议使用这种方式

image-20200906211525383

 

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

 

1.4 CSS的三种导入方式

行内样式、内部样式、外部样式 ，对目标的优先级是就近原则。

拓展︰外部样式两种写法 ·链接式:html

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

·导入式: @import是CSS2.1特有的!

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

2、选择器

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

2.1、基本选择器

◆1、标签选择器︰选择一类标签 标签{}

◆2、类选择器class :选择所有class属性一致的标签，跨标签 类名{} ​ ◆3、ld选择器:全局唯一 #id名{}

<title>Title</title>
<style>
/*标签选择器，会选择到页面上所有的这个标签的元素*/
    h1{
        color: #a13d30;
        background: #3cbda6;
        border-radius: 24px;
        }
    p{
        font-size: 80px;
    }
</style>
​
</ head>
<body>
<1>学Java</h1>
<h>学Java</h1>
<p>听狂神说</p>
</body>
</html>
​
<title>Title</title>
<style>
/*类选择器的格式.cLass的名称{}
好处，可以多个标签归类，是同一个class，可以
*/
    .qinjiang{
        color:#3748ff;
    }
​
    .kuangshen{
        color:#a24fff;
}
</style>
​
</head>
<body>
    <h1 class="ginjiang">标题1</h1>
    <h1 class="kuangshen">标题2</h1>
    <h1 class="ginjiang">标题3</h1>
    <p  class= "qinjiang">段落1</p>
</body>
</html>
​
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器: id必须保证全局唯一!
#id名称{}
优先级:
不遵循就近原则，固定的
id选择器>cLass选择器>标签选择器
*/
    #ginjiang{
        color:#ff008a;  
    }
    
    .style1{
        color: #02ff00;
    }
    
    h1{
    color:#2d1dc1;
    }
    
</style>
</ head>
<body>
<h1 class="style1" id="ginjiang">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标额</h1>
</body>
</html>

/*

调试前端可以先在浏览器上尝试效果，再复制代码，通过开发者工具，F12，对网页的东西可以修改

*/

2.2、层次选择器

1、后代选择器:在某个元素的后面 祖爷爷-爷爷-爸爸-你

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

2、子选择器: 一代，儿子

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

3、相邻兄弟选择器:同辈

|/*相邻弟选择器:只有一个，相邻（向下）,建立在类选择器基础上*/
.active + p{
background: #a13d30;
}

4、通用选择器

/*通用兄弟选则器，当前选中元素的向下的所有兄弟元素,建立在类选择器基础上*/
.active~p{
background: #O2ffO0;
}

2.3 结构伪类选择器

/*u1的第一个子元素*/
u1 li:first-child{
	background: #O2ffO0;
}

/*u1的最后一子元素*/
u1 li:last-child{
	background:#ff4832;
}

/*选中p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效!，顺序
*/
p:nth-chi1d(2){
	background:#2700ff;
}

/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(1){
	background: ye1low;
}

2.4、属性选择器（常用)

id + class结合~

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

    <style>
		.demo a{
			float: left;
			display: b1ock;
			height: 50px;
			width: 50Opx;
			border-radius: 10px;
			background: #2700ff;
			text-align: center;
			color: gainsboro;
			text-decoration : none;
			margin-right: 5px;
			font: bold 20px/50px Arial;
        }
        
        /*属性名，属性名=属性值（正则）
		=绝对等于
		*=包含这个元素
		=以这个开头
		$=以这个结尾
		*/
		/*存在id属性的元素		a[]{}*/
		/*a[id]{*/
			/*background: ye1low;*/
		/*}*/
		/*id=first的元素*/
		/*a[id=first]{*/
			/*background: #63ff23;*/
		/*}*/
        
		/*class中有links的元素*/
		/*a[class*="7inks"]{*/
			/*background: ye1low;*/
		/*}*/
        
		/*!*选中href中以http开头的元素*!*/
		/*a[hrefA=http]{*/
			/*background: ye1low;*/
        /*}*/

        alhref$=jpg]1
			background: yel1ow;
        }
        
	</style>
</head>
<body>
    
<p: class="demo">
	<a href="http :/ /www.baidu.com"class="7inks item first" id="first">1</a>
	<a href="http://blog.kuangstudy.com"class="7inks item active" target="_blank"
title="test">2</a>
	<a href="images/123.htm7" class="7inks item">3</a>
	<a href="images/123.png" c1ass="7inks item">4</a>
	<a href="images/123.jpg" class="links item">5</a>
	<a href="abc" class="7inks item">6</a>
	<a href="/a.pdf" class="7inks item">7</a>
	<a href="/abc.pdf" class="7inks item">8</a>
	<a href="abc. doc" class="7inks item">9</a>
	<a href="abcd.doc" class="links item last">10</a>
    
</p>
</body>
</html

image-20200907205350115

=
*=
^=
$=

3、美化网页元素

3.1、为什么要美化网页

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

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

<!DOCTYPE htm7>
chtm1 lang="en">
<head>
meta charset="UTF-8">
<title>Title</title>
<style>
    #title1{
	font-size: 5Opx;
	}
</style>
</head>
<body>
	效迎学习<span id="title1">java</span>
</body>
</htm1>

3.2字体样式

<!--
font-family:字体
font-size:字体大小
font-weight:字体粗细
color :字体颜色
-->
<style>
	body{
		font-fami1y: "Arial Black"，楷体;
		color: #a13d30;
    	}
      h1{
		font-size:5opx;
		}
	.p1{
   		 font-weight: bolder;
    	}  
</sty1e>

3.3、文本样式

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

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

    <!--
       颜色：
            单词
            RGB 0~F
            RGBA A:0~1

       text-align :排版，居中
        text-indent: 2em  段落首行缩进

        行高和块高一致，就可以上下居中
       -->
    <style>
        h1{
            background: #ff3831;
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #ff3837;
            height: 300px;
            line-height: 300px;
        }
        /*中划线*/
        .l1{
            text-decoration: line-through;
        }
        /*上划线*/
        .l2{
            text-decoration: overline;
        }

        /*下划线*/
        .l3{
            text-decoration: underline;
        }

        /*去掉下划线，可以去掉超链接下面的下划线*/
        .l4{
            text-decoration: linen;b
        }
        .a1{
            text-decoration: linen;
        }

        /*
        水平对齐~ 需要一个参照物， a,b
        */
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>

<h1>李白</h1>
<p class="p1">床前明月光，疑似地上霜</p>
<p class="p3">举头望明月，低头思故乡</p>

<p>I Love You!</p>

<p class="l1">螃蟹在剥我的壳</p>
<p class="l2">笔记本在写我</p>
<p class="l3">漫天的我落在枫叶上，雪花上</p>
<p class="l4">而你，在想我</p>
<a href="https:www.baidu.com" target="_blank" class="a1">百度链接</a><br/>
<hr/>
<img src="images/111.png" alt=""> <span>123456</span>
</body>
</html>

image-20200908184931371

3.4 、阴影

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
t#price{
text-shadow:#3cc7f5 10px -10px 2px;
}

image-20200908212113920

image-20200908212338294

3.5、 伪类超链接

正常情况下，a, a:hover

<style>
╱*默认的颜色*/
a{
	text-decoration: none;
	color: #000;
}
/*鼠标悬浮的状态（只需要记住)*/
a: hover{
	color: orange;
	font-size: 50px;
}
/*鼠标按住未释放的状态*/
a: active{
	color: green;
}
/*点击之后的状态*/
a : visited{
	color:#ff008a;
}
</style>

image-20200909193400428

 

 

3.6背景图像应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:500px;
            height: 360px;
            /*盒子：线条宽度，实线，颜色，*/
            border: 1px solid red;
            /*默认是平铺状态*/
            background-image: url("css/111.png");
        }
        .div1 {
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
        .div4{
            background:red;
            background-image:url("css/111.png") ;
            background-repeat: no-repeat;
            background-position: 100px 100px;
            /*颤色，图片，图片位置，平铺方式*/
            /*background: red url("css/111.png" ) 100px 100px no-repeat;*/

        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

</body>
</html>

image-20200909193324075

3.7、渐变属性

CSDN博客（CSS3渐变属性）：https://blog.csdn.net/HU_YEWEN/article/details/90604792

一个开源的渐变网站，可以直接使用里面的渐变色https://www.grabient.com/

image-20200909195237183

background-color:#FFFFFF;
background-image: linear-gradient(115deg，#FFFFFF 0%，#6284FF 50%，#FF0000 100%)
/*用background 也可以*/

4、盒子模型

4.1、什么是盒子模型

image-20200911213504196

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

4.2、边框

1、边框的粗细 ​ 2、边框的样式 ​ 3、边框的颜色

image-20200911215048132

4.3、 内外边距

<!--
 外边距的妙用:居中元素
margin: 0 auto;
-->

<style>
    #boxi{
    width: 300px;
    border:1px solid red;
    margin: 0 auto;
    }
    /*
    顺时针旋转
    margin:e
    margin:e 1px
    margin: 1px2px3px
    */
    h2{
        font-size: 16px;
        background-color:#3cbda6;
        line-height: 30px;
        color: white;
        margin:0 1px 2px 3px;
    }
    form{
        background: #3cbda6;
    }
    input {
        border: 1px solid black;
    }
</style>

盒子的计算方式:你这个元素到底多大?

margin + border+ padding+内容宽度

image-20200911221325833

4.4、圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--
    左上右上右下左下，顺时针方向

    圆圈:
    圆角=半径!
-->


<style>
    div{
        width: 100px;
        height: 50px;
        border: red 1px solid;
        border-radius: 50px 50px 0px 0px;
        margin: 0px;
    }
    img{
        width: 120px;
        height: 120px;
        border-radius:60px 60px 60px 60px;
    }
</style>

<body>
    <div>

    </div>
    <img src="css/111.png" alt="">
</body>
</html>

image-20200911231613083

 

 

 

4.5、阴影

<style>
    img{
        width: 120px;
        height: 120px;
        border-radius:60px 60px 60px 60px;
        /*阴影，坐标位置，范围，颜色*/
        box-shadow: 10px 10px 120px yellow;
        margin:0px auto;
    }
</style>

<body>
<!--
     先用块级元素包裹，确定好宽度，再用display: block;text-align: center 就可以做到居中了
-->
<div style="width: auto;display: block;text-align: center">
    <div >
        <img src="css/111.png" alt="">
    </div>
</div>
</body>

image-20200912113026297

5、浮动

5.1、标准文档流

image-20200912143008531

块级元素:独占一行

 h1~h6	p div	列表...

行内元素:不独占一行

 span	 a 	img		strong...

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

5.2、display

<--!
     block块元素
	 inline:行内心素
	 inline-block是块元素，但是可以内联，在一行!
	 none
-->
<style>
    div{
	width: 100px;
	height:100px;
	border: 1px so1id red;
	disp1ay: none;
}
	span{
		width: 100px;
		height: 100px;
		border: 1px solid red;
		display: inline-block;
}
</style>

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

5.2、 float

1、左右浮动

div{ 
	margin :10px;
	padding: 5px;
}
#father {
	border : 1px#000 solid;/*dashed 虚线，solid 实线*/
}
.layero1 {
	border: 1px #F00 dashed;
	display: in1ine-block;
	float: right;
}
.layer02 {
	border: 1px #00F dashed;
	display: inline-block;
	float: right;
}

5.4、父级边框塌陷的问题

clear

/*
clear: right;右侧不允许有浮动元素
clear: left;左侧不允许有浮动元素
clear: both;两侧不允许有浮动元素
clear: none;
*/

解决方案: 1、增加父级元素的高度~

#father {
			border: 1px #000 solid;
			height: 800px;

}

2、增加一个空的div标签，清除浮动

<div class="clear"></div>
/*通过最下面设置一个空的div标签来清除浮动*/

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

3、overflow

在父级元素中增加一个 overflow: hidden;，可以隐藏溢出的部分，使用overflow:scroll;是滚动框隐藏溢出

4、父类添加一个伪类: after

#father:after{
	content: '';
	display: block;
	clear: both;
}
/*原理类似于增加一个空的div标签，是目前用的最多的方法*/

小结: 1.浮动元素后面增加空div 简单，代码中尽量避免空div 2.设置父元素的高度 简单，元素假设有了固定的高度，就会被限制 3.overflow 简单，下拉的一些场景避免使用 4.父类添加一个伪类: after_(推荐) 写法稍微复杂一点，但是没有副作用，推荐使用

5.5、对比

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

6、 定位

6.1、 相对定位

相对定位: position:relative;

position:relative;/*设置相对定位*/
top: -20px;
left: 20px;
bottom:-10px;
right: 20px;

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

6.2、绝对定位

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

position:absolute;/*设置绝对定位*/
top:120px;
left: 20px;
bottom:10px;
right: 20px;

6.3、固定定位 position: fixed;

固定定位一般用于导航栏或者广告，不会随着页面上下拉动而更改，会一直位于屏幕的固定位置

<style>
body{
	height: 1000px;
	div:nth-of-type(1)i/*绝对定位:相对于浏览器*/
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	right: 0;
	bottom: 0;
}
div:nth-of-type(2){/*fixed,固定定位*/
	width: 5epx;
	height: 50px;
	background: yellow;
	position: fixed;
	right: 0;
	bottom:0;
}
/style>

6.4、z-index以及透明度

这个类似于PS里的图层，z-index：图层级别；

image-20200912165250154

 

 

JavaScript

1、什么是JavaScript

1.1、概述

JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 10天~ 一个合格的后端人员，必须要精通JavaScript

1.2、历史

https://blog.csdn.net/kese7952/article/details/79357868 ECMAScript它可以理解为是JavaScript的一个标准 最新版本已经到es6版本~ 但是大部分浏览器还只停留在支持es5代码上! 开发环境---线上环境，版本不一致

2、快速入门

2.1、引入JavaSciprt

1、内部标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--  可以写在这里  -->
    <!--内部引用，script标签里，写JavaScript代码    -->
    <script>
        /*弹窗效果*/
        alert('hello,word');
    </script><!-- script标签要成对出现 -->
</head>
<body>
<!--  也可以写在这里  -->
</body>
</html>

<!--  也可以写在这里  -->

image-20200913131041213

2、外部标签

html文件

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

    <!--  可以写在这里  -->
    <!-- 外部引入 -->
    <!--注意: script标签必须成对出现-->
    <script src="js/qj.js"></script>
    
    <!-- 不用显示定义type，也默认就是javascript -->
    <script type="text/javascript"></script>

</head>
<body>
<!--  也可以写在这里  -->
</body>
</html>

<!--  也可以写在这里  -->

JavaScript文件

alert('hello,word');/*弹窗*/

2.2、基本语法入门

 <!--Javascript严格区分大小写!-->
    <script>
        // 1．定义变量
        //变量类型变量名=变量值;
        var score = 71;
        // alert(num);
       //2．条件控制
        if (score>60 &&score<70){
            alert("60~70")
        }else if(score>70 &&score<80){
            alert("70~80")
        }e1se
        {
            alert("other")
        }
        //console.1og(score）在浏览器的控制台打印变量! system.out.print1n();
        /*
        asdasdasd
        */

    </script>

 

image-20200913145111698

Elements：查看网站

Console：调试JS console.log()alert,打印出alert,

sources 设置断点，刷新网页，移动程序

Network:抓包

Application: 跑Cookies

2.3、数据类型

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

◆变量

var 王者 = "青铜"
//变量名不能使用数字开头

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

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

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

◆字符串 'abc'"abc”

◆布尔值 true , false

◆逻辑运算

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

|| 一个为真，结果为真

! 真即假，假即真

◆比较符运算

=	赋值
==	等于（类型不一样，值一样，也会判断为true)
===	绝对等于(类型一样，值一样，结果true)

这是一个]S的缺陷，坚持不要使用==比较

◆浮点数问题:

console.1og((1/3) === (1-2/3))
//flase

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

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

◆null和undefined null 空 undefined 未定义

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

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5, 'he1lo',nu17,true];
new Array (1,12,3,4,4,5, 'he11o');

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

undefined

◆对象

对象是大括号，数组是中括号~~ 每个属性之间使用逗号隔开，最后一个不需要添加

//Person person = new Person(1,2,3,4,5）;
var person = {
	name: "qinjiang"，
	age: 3,
	tags: ['js', 'java' , 'web' ,'...']
}

取对象的值

person.name
> "qinjiang"
3person.age
> 3

2.4、严格检查模式 'use strict';

 <!--
    前提:工EDA需要设置支持ES6语法
    'use strict;严格检查模式，预防avaScript的随意性导致产生的一些问题
    必须写在avascript的第一行!
    局部变量建议都使用let去定义~
  -->
    <script>
        'use strict';
        //全局变量
        j = 2;
        
        //局部变量
        let i = 1;
        //ES6let
    </script>

3、数据类型

3.1、字符串

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

var i = 'j'
var i = "jj"

2、注意转义字符\

\'
\n
\t
\u4e2d \u####	unicode字符
\x41 Ascll字符

3、多行字符串编写

//tab 上面esc键下面的反转义字符`
var msg =
	`hello
    wor1d
    你好ya
    你好`

4、模板字符串,

//也是使用了反转义字符，再用${}将其连接到一起
let name = "qinjiang";
let age = 3;
let msg =`你好呀，${name}`

5、字符串长度

console.log(str.length)

6、字符串的不可变性

image-20200913165527483

7、大小写转换

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

8、获取指定的下标

student.indexOf('t')  
// 1

9、 substring

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

3.2 、数组

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

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

1、长度

arr.length

注意:加入给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢 失 2、indexOf，通过元素获得下标索引

arr.indexof(2)  //3
arr.indexof(1)  //2
arr.indexof("1") //6

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

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

image-20200913175414884

4、push()，pop()

push:压入到尾部
pop:弹出尾部的一个元素

image-20200913175318116

5、unshift() , shift()头部

unshift:压入到头部
shift:弹出头部的一个元素

image-20200913175801660

6、 排序sort()

arr = ["a","g","f","b"]
>(4) ["a", "g", "f", "b"]
arr.sort()
>(4) ["a", "b", "f", "g"]

7、数组反转reverse()

arr.sort()
>(4) ["a", "b", "f", "g"]
arr.reverse()
>(4) ["g", "f", "b", "a"]

8、concat()

arr
>(4) ["g", "f", "b", "a"]
arr.concat([1,2,3])
>(7) ["g", "f", "b", "a", 1, 2, 3]
arr
>(4) ["g", "f", "b", "a"]

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

9、连接符join() 打印拼接数组，使用特定的字符串连接,，不更改数组本身，改的是打印结果

arr
>(4) ["g", "f", "b", "a"]
arr.join('-')
>"g-f-b-a"
arr
>(4) ["g", "f", "b", "a"]

10、多维数组

image-20200914115018115

3.3、对象

若干个键值对

var 对象名= {
	属性名:属性值，
	属性名:属性值，
	属性名:属性值
}
//定义了一个person对象，它有四个属性!
var person = {
	name: "kuangshen",
	age: 3,
	email: "24736743@qq.com",
	score: 0
}

Js中对象，{...}表示一个对象，键值对描述属性xXXx: XXXx，多个属性之间使用逗号隔开，最后一个属性不加逗号!

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

1、对象赋值

person .name = "qinjiang"
>"qinjiang"
person . name
>"qinjiang"

2、使用一个不存在的对象属性，不会报错! undefined

person.haha
>undefined

3、动态的删减属性，通过delete删除对象的属性

delete person .name
>true
person

4、动态的添加，直接给新的属性添加值即可

person.haha = "haha"
>"haha"
person

5、判断属性值是否在这个对象中!xxx in xxx!

'age' in person
>true
//继承
'tostring' in person
>true

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

person.hasownProperty('tostring')
>false
person.hasownProperty('age')
>true

3.4、流程控制

if 判断

var age = 3;
if (age>3){//第一个判断
	alert("haha");
}e1se if(age<5) {//第二个判断
	alert("kuwa~");
}else {//否则
	alert("kuwa~");

while循环,注意避免死循环

while(age<100){
	age = age + 1;
	conso1e.log(age)
}

do{
	age = age + 1;
	conso1e.log(age)
}while(age<100)

for 循环

for (let i = o; i < 100 ; i++）{
	console.log(i)
}

forEach 循环

varage = [12,3,12,3,12,3,12,31,23,123];
//函数
age.forEach( function (value) {
consoLe.log(valug)
})

for ...in

//for(var index in object){}
for(var num in age)i
	if (age.hasownProperty(num)){
	console.log("存在")
	console.1og(age[num])
}
)

3.5、Map 和Set

Map

// ES6 Map，类似Python里的字典
// 学生的成绩，学生的名字
// var names = ["tom"I "jack" , "haha"];
// var scores = [100,90,80];
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map. get('tom';//通过key获得value
map . set('admin' ,123456);//新增或修改
map.delete('tom');//删除

image-20200914140103718

=========================================================================================================

Set

var set = new Set([3,1,1,1,1]);//Set 可以去重
set.add(2);  //增加一个2
set.delete(2); //删除2
consol.log(set.has(3)); //  has()判断是否有该元素

image-20200914140354600

3.6、iterator

作业:使用iterator来遍历迭代我们Map，Set ! 遍历数组

//通过for of/forin下标
var arr = [3,4,5]
for (var x of arr){
	console.log(x)
}

遍历map

var map = new Map([["tom",100],L"jack" ,90]，["haha",80]]);
for (let x of map){
	conso1e.log(x)
}

遍历set

var set = new set([5,6,7]）;
for (let x of set） {
	console.log(x)
}

4、函数

4.1、函数定义

定义方法一：

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

一旦执行到return代表函数结束，返回结果! 如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方法二：

var abb =  function(x){
    if(x>=0){
		returnb x;
	}else{
		rebturn -x;
}

function(x){....}.这是一个匿名函数。但是可以把结果赋值给abb，通过abb就可以调用函数! 方式一和方式二等价!

调用函数

abb(2)
>2
>abb(-1)
1

参数有问题可以设置主动抛出异常来规避javascript 因为本身不严谨，就算参数错误也不会报错，只是为nodfine

var abb = function (x) {
    if (typeof  x!== "number"){
        throw 'not a number'
    }
    if(x>0){
        return x;
    }else {
        return -x;
    }
}

image-20200914203740581

arguments

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

使用 arguments.length来确定传递给函数参数的个数，然后使用arguments对象来处理每个参数。

image-20200914210635696

var abs = function (x){
console.1og ("x=>"+x);
for (var i = 0; i<arguments. 1ength;i++){
	console.log(arguments[i]);
}
	if(x>=0){
		return x;
	else{
		return -x;
	}
}

rest

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

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

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

4.2、变量作用域

在javascript中，var定义变量实际是有作用域的。 假设在函数体中声明，则在函数体外不可以使用~（非要想实现的话，后面可以研究一下闭包)

function qj() {
	var x = l;
	x =x +1;
	}

	x= x + 2;//uncaught ReferenceError: x is not defined

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

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

内部函数可以访问外部函数的成员，外部函数不可以访问内部函数

function qj(){
	var x = 1;
}

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

假设，内部函数变量和外部函数的变量，重名！就近原则

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

	console.log( 'outer'+x); //innerA
	qj2()
}
gj()

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

提升变量的作用域

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

结果:x undefined 说明;js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值,所以X 此时是未定义，因为y未赋值;

function qj2( ){
	var y;
	var x = "x"+y;
	console.1og(x);
	y = 'y ';
}

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

function qj2(){
	var x = 1，
	y =x +1，
	z,i,a; //undefined
			//之后随意用
}

全局函数

//全局变量
x= 1;
	function f(){
		console.1og(x);
    }
        f();
console.1og(x);

全局对象window

var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下;

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

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

规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~>如果能够减少冲突?

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

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

let 局部作用域

function aaa(){
	for (var i = 0; i < 100; i++）{
	console.1og(i)
	}
	console.1og(i+1);//问题?i出了这个作用域还可以使用
}

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

function aaa( ){
	for (let i = 0; i < 100; i++）{
	console.log(i)
	}	
	console.log(i+1);//Uncaught ReferenceError: i is not defined
}

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

var PI= '3.14';
console.log(PI);
PI= '213';//可以改变这个值
console.log(PI);

在ES6引入了常量关键字const

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

4.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西∶属性和方法

var kuangshen = {
	name:'秦疆'，
	birth: 2000,
	//方法
	age: function ( ）{
		//今年-出生的年
		var now = new Date(.getFu17Year(;
		return now-this.bitrh;  //this 指向调用它的对象
	}
}
//属性
kuangshen. name
//方法，一定要带()
kuangshen.age()

关于this的指向问题，可以使用apply 解决

 function getAge() {
        //今年-出生的年
        var now = new Date().getFullYear();
        return now-this.birth;
    }
    var shaonian =  {
        name:'流尘',
        birth: 1998,
        age: getAge
    };
    //shaonian.age() ok
    getAge.apply(shaonian,[]);// this，指向了shaonian,参数为空

输出结果

getAge
>ƒ getAge() {
        //今年-出生的年
        var now = new Date().getFullYear();
        return now-this.birth;
    }
getAge()
>NaN      //因为直接调用，没有传入birth值
shaonian.age()
>22
getAge.apply(shaonian,[]);
>22

5、内部对象

标准对象

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

5.1、 Date

基本使用

 var now = new Date();  //Tue Sep 15 2020 10:37:28 GMT+0800 (中国标准时间)
    now.getFullYear(); //年
    now.getMonth(); //月  0~11代表月,获得的值比实际月份小1
    now.getDate(); //日
    now.getDay(); //星期几
    now.getHours(); //时
    now.getMinutes(); //分
    now.getSeconds();//秒
    now.getTime();//时间戳全世界统一1970 1.1 0:00:00  毫秒数    1600137448945
    console.log(new Date(1600137448945)); //VM282:1 Tue Sep 15 2020 10:37:28 GMT+0800 (中国标准时间)

	now.toLocaleString();  //"2020/9/15 上午10:37:28"
	now.toGMTString();     //"Tue, 15 Sep 2020 02:37:28 GMT"

5.2、 JSON

json是什么 算是一种JSON规则的数据吧

早期，所有数据传输习惯使用XML文件!

  • JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。

  • 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。

  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象、任何js支持的类型都可以用SON来表示; number，string...

格式

  • 对象都用{}

  • 数组都用[]

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

    json 和字符串对象转换

 var user = {
        name: "ginjiang",
        age: 3,
        sex: '男'
    }
    //对象转化为json字符串i"name" : "ginjiang","age" :3,"sex":”男"〕
    var jsonUser =JSON.stringify(user);

    //json字符串转化为对象参数为json字符串
    var obj = JSON.parse('{"name" : "ginjiang" , "age":3,"sex":"男"}');

结果

console.log(jsonUser)
> {"name":"ginjiang","age":3,"sex":"男"}  //JSON
undefined
console.log(obj)
> {name: "ginjiang", age: 3, sex: "男"}		//JS对象

 

5.3、Ajax

  • 原生的js写法xhr异步请求

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

  • axios请求

6、面向对象编程

javascript、Java、c#。。。。面向对象; javascript有些区别! ◆类:模板 ,原型对象 ◆对象:具体的实例 在JavaScript这个需要大家换一下思维方式!

6.1、原型对象:

 var Student = {
        name: "流尘",
        age: 3,
        run: function () {
            console.log(this.name + " run. ...");
        }
    };
    var xiaoming = {
         name : "xiaoming"
    };
    //原型对象,此时，小明的原型对象是Student
    xiaoming.__proto__= Student;

    var Bird = {
        fly: function () {
            console.log(this.name + " f1y....");
        }
    } ;
    //小明的原型是Bird
    xiaoming.__proto__ = Bird;

image-20200915141054768

原来老版本的增加方法

function student(name) {   //原本只有一个name方法
		this.name = name;
	}
//给student新增一个方法
student.prototype.he1lo = function ( ){   //在studentd 的 type原型里增加一个hello的方法
	alert('Hell0')
};

6.2、class对象 继承（新版）

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

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

    var student1 = new Student("xiaoming");		//创建对象
    var student2 = new Student("xiaohong");     
======================================
    student1.hello()
	student2.hello()

2、继承

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

    class Xiaostudent extends  Student{   //继承Student
        constructor(name,grade) {    
            super(name);	//创建构造器并继承父类构造器的东西
            this.grade = grade;
        }
        hi(){
            alert("我是小学生")
        }
    }

    var student1 = new Student("xiaoming");
    var student2 = new Xiaostudent("xiaohong");    //__proto__原型还是指向Student
==========================
student2.hi()

image-20200915164452682

原型链

proto

image-20200915165039441

7、 操作BOM对象（重点）

BOM:浏览器对象模型

浏览器介绍

JavaScript和浏览器关系? JavaScript诞生就是为了能够让他在浏览器中运行! BOM:浏览器对象模型

  • IE 6~11

  • Chrome

  • Safari

  • FireFox

三方

  • QQ浏览器

  • 360浏览器

windows 代表浏览器窗口

window.innerHeight
>728
window.innerWidth
>388
window.alert("骑牛西出函谷关")
>undefined
window.outerHeight
>728
window.outerWidth
>1496

Navigator 封装了浏览器信息

navigator.appVersion
>"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3775.400 QQBrowser/10.6.4209.400"
navigator.userAgent
>"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3775.400 QQBrowser/10.6.4209.400"
navigator.platform
>"Win32"

大多数时候，我们不会使用navigator对象，因为会被人为修改! 不建议使用这些属性来判断和编写代码

screen 屏幕

screen.width
>1536 px
screen.height
>864  px

location 代表当前页面的URL信息

host: "www.baidu . com"
href: "https: //www.baidu. com/"
protoco1: "https : "
reload:f reload(//刷新网页
//设置新的地址
location.assign('https://blog.kuangstudy.com/')   //让该网页跳转至https://blog.kuangstudy.com/

image-20200915181053526

document 代表当前页面 HTML DOM文档数

document.title 
>"测试"
document.title = "新测试"
>"新测试"
document.title 
>"新测试"

获取具体的文档数节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
    var dl= document.getElementById( 'app');   //除了选择id，还能选择class，和其他选择器
</script>

image-20200915193614773

获取节点意味着可以动态的修改，控制网页

获取cookie

document.cookie
>"tvfe_boss_uuid=2713bc3dfc789733; pgv_pvid=3196783292; RK=ILQok70dte; ptcz=1b50c5df7b21588c104d6221bb9236298e3c06d24d21e0497d1621ec87d9a60d; pgv_pvi=72551424; pgv_info=ssid=s2233141030; _qpsvr_localtk=0.7818531710897232; pgv_si=s6719836160; uin=o2319500656; skey=@hjFaLA0TM"

image-20200915194742905

history 代表浏览器的历史记录

history.back(//后退
history.forwardo//前进

8、 操作DOM对象

DOM：文档对象模型

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

  • 更新:更新Dom节点

  • 遍历dom节点:得到Dom节点

  • 删除:删除一个Dom节点

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

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

8.1、 获得dom

image-20200919014249373

<div id="father" >
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
	//对应css选择器
	var h1 = document.getElementsByTagName( 'h1' );
	var p1 = document.getElementById( 'p1');
	var p2 = document.getElementsByClassName( 'p2' );
	var father = document.getElementById( ' father' );
	var childrens = father.children;//获取父节点下的所有子节点
	// father.firstChild  节点下的第一个节点
	// father.LastChild   最后一个节点
</script>

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

8.2、 更新节点

<div id="id1">
</div>
<script>
var id1 = document.getElementById( 'id1');
</script>

操作文本

idi.innerText='456'  //修改文本的值
idi1.innerHTML='<strong>123</strong>' //可以解析HTML文本标签

操作JS

id1.style.color = 'ye1low'//属性使用字符串包裹
id1.style.fontsize='20px'; // – 转 驼峰命名问题
id1.style.padding = '2em'

8.3、删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己，只有用id选择器的才可以

father.removeChild(p1)  //在知道父类的情况下，直接调用父类删除
========================================
var father1 = p2.parentElement;  //这是通过parentElement，调出p2的父类，然后再实行想要的删除节点
father1.removeChild(p2)
//删除是一个动态的过程;
father.removechild(father.children[o])
father.removechild(father.children[1]）
father.removechild(father.children[2])

//注意:删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意!,当删除了children[o]，children[2]就成了children[1]，children[1]成了children[o]

8.4、 插入节点

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

追加

<p id="js">avascript</p>
<div id="list">
	<p id="se">avaSE</p>
	<p id="ee">avaEE</p>
	<p id="me">avaME</p>
</div>
<script>
	var js = document.getElementByIs('js');
	var list = document.getElementById('list');
	list.appendChild(js);//追加到后面
</script>

image-20200915212714043

通过js 创建一个新的节点

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


<body >
<p id="js">javascript</p>
<div id="list">
    <p id="se">avaSE</p>
    <p id="ee">avaEE</p>
    <p id="me">avaME</p>
</div>
<script >
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);//追加到后面

    var newP = document.createElement('p');//createElement 属性创建一个 p 标签
    newP.id = 'newP';  //设置里面的值
    newP.innerText = '你好啊，少年';
    list.appendChild(newP)
    //然后再插入和添加进去

    // 通过这个setAttribute属性可以放入任意的值
    var myscript = document.createElement('script');
    myscript.setAttribute('type','text/javascript');
    list.appendChild(myscript)

    var body = document.getElementsByTagName('body')[0];  //通过body 来控制body,在选择器里，除了id选择器，其他的都是数组集合
    body.setAttribute('style','background-color: red');  //方法一
   // body.style.backgroundColor = 'blue';   方法二

    /*可以创建一个Style标签   方法三
    var myStyle= document.createElement('style');
    myStyle.setAttribute( 'type','text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}';
    document.getElementsByTagName('head')[0].appendChild(myStyle)
    */


</script>

<a href="https://www.baidu.com">百度链接</a>
</body>
</html>

insertBefore

var ee = document.getElementById('ee' );
var js = document.getElementByrd('js ');
var list = document.getE7ementByrd(' list');
//要包含的节点.insertBefore(newNode, targetNode)
list.insertBefore(js,ee);   //js 插入在ee 前面

9、操作表单（验证）

9.1、表单是什么 form DOM树

  • 文本框 text

  • 下拉框 <select >

  • 单选框 radio

  • 多选框 checkbox

  • 隐藏域 hidden

  • 密码框 password

  • ......

表单的目的:提交信息

9.2、 获得要提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试3</title>
</head>
<body>
<form action="post">

    <p>
        <span>名字</span><input type="text" id="username">
    </p>

<!--  多选框的值，就是定义好的value  -->
    <p>
        <span>性别</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="girl" id="girl">女
    </p>
</form>

<script>
    var input_text = document.getElementById('username')
     // input_text.value  可以查看输入框的值
     // input_text.value = '123'  //修改输入框的值

    var boy_radio = document.getElementById('boy')
    var girl_radio = document.getElementById('girl')

    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked; //查看返回的结果，是否为true，如果为true，则被选中~
    girl_radio.checked = 'true'  //赋值

</script>
</body>
</html>

9.3、 MD5 加密（一）

MD5 工具类

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

实例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
    <!--MD5 工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.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>
<p>
    <button type="submit" onclick="action1()">提交</button>
</p>
</form>

<script>

    function action1() {
        var userid = document.getElementById('username')
        var psd = document.getElementById('password')

        //MD5 加密算法
        psd.value=md5(psd.value);
        console.log(userid.value);
        console.log(psd.value);

    }
</script>
</body>
</html>

image-20200918200759333

9.4、 MD5加密（二）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
    <!--MD5 工具类 -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>
<!--
表单绑定提交事件
onsubmit=绑定一个提交检测的函数，true.false
将这个结果返回给表单，使用onsubmit接收!
onsubmit="return aaa()"
-->
<form action="https://www.baidu.com" method="post" onsubmit="return action1()">
<p>
    <span>名字:</span><input type="text" id="username" name="username1">
</p>
<p>
    <!--  为了加密，此处name值应该去掉，避免Network获取到 -->
    <span>密码:</span><input type="password" id="input-password"  name="password1">
</p>
 <p>
     <input type="hidden" id = "MD5-password"   name="password2">
 </p>

<p>
    <button type="submit" >提交</button>
</p>
</form>

<script>

    function action1() {
        alert('1');
        var userid = document.getElementById('username');
        var psd = document.getElementById('input-password');
        var MD5psd = document.getElementById('MD5-password');

		//https://blog.csdn.net/acmman/article/details/43908789，函数中修改参数值技巧，可考虑通过函数值嵌套
        //MD5 加密算法
        //psd.value=md5(psd.value);
        MD5psd.value = md5(psd.value);

        //可以校验判断表单内容，true就是通过提交，false，阻止提交
        return true;

    }
</script>
</body>
</html>

10、jQuery

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

10.1、获取

公式:$(selector).action()

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

image-20200919012925544

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
<a href="" id="test-jquery">点我</a>
<script>
    /*  var id =document.getElementById( 'id' );
        id.click(function () {
       		 alert( 'hello,jQuery' );
        })
   */

    //选择器就是css的选择器 $(selector).action()
    $(' #test-jquery').click(function () {
        alert( 'hello,jQuery' );
    })
</script>
</body>
</body>
</html>

10.2、 选择器

工具栈：https://jquery.cuishifeng.cn/

image-20200919014921324

10.3、 事件

鼠标事件、键盘事件

image-20200919121629780

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #divMove{
        width: 500px;
        height: 500px;
        border: 1px solid red;
        }
    </style>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
<!--要求:获取鼠标当前的一个坐标-->
mouse : <span id="mouseMove" ></span>
<div id="divMove">
    在这里移动鼠标试试
</div>
<script>

    //当网页元素加载完毕之后，响应事件
    $(function (){
        //onmousemove 
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
    });
</script>


</body>
</html>

10.3、操作DOM

节点文本操作

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

CSS的操作

$ ( ' #test-u7 1i[name=python]').css(i"color" , "red"})

元素的显示和隐藏 本质：display = none

$C'#test-u7 li[name=python]').show()
$C'#test-ul li[name=python]').hide()

娱乐测试

$ (window).width()
$ (window).height()
$('#test-u7 li[name=python]').toggle();

未来 ajax()

$('#from').ajax()
$.ajax({ ur1: "test.htm7"，context: document.body，success: function(){
	$(this).addc1assq"done");
}});

学习技巧

1、如何巩固JS（看jQuery源码,看游戏源码!) 2、巩固HTML。CSS(扒网站，全部down下来，然后对应修改看效果~)

Layer弹窗组件 Element-ui

posted @ 2020-10-27 22:17  骑牛西出函谷关  阅读(357)  评论(0)  编辑  收藏  举报