20024-13.python前端

于 2024-04-16 11:30:28 发布
阅读量336 收藏 10
点赞数 4
分类专栏： Python3 web前端 文章标签： 前端 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itwangyang520/article/details/137818557
版权

第1章 、Web的基本概念

软件开发的架构

  • 目前我们了解的涉及到两个程序之间通讯的应用大致可以分为两种：
    • 第一种是应用类：qq、微信、网盘、优酷这一类是属于需要安装的桌面应用
    • 第二种是web类：比如百度、知乎、博客园等使用浏览器访问就可以直接使用的应用
  • 这些应用的本质其实都是两个程序之间的通讯。而这两个分类又对应了两个软件开发的架构：
    • C/S架构
    • B/S架构
C/S架构
  • C/S即：Client与Server ，中文意思：客户端与服务器端架构。
    • 学习网络编程就是要通过网络来访问另一台计算的数据,这样必然需要至少两台计算机,一台计算机上放着要分享的数据和用于分享数据的程序,另一台计算机上运行访问数据的程序,
    • 我们把提供数据的一方称之为服务器(Server),把访问数据的一方称为客户端(Client)
    • 比如：电脑上要看视频就需要装看视频的程序.例如腾讯视频,它就是客户端程序,腾讯公司的机房里运行着腾讯视频的服务器程序,所以它也是C/S构架的程序

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

B/S架构

  • B/S即：Browser与Server,中文意思：浏览器端与服务器端架构。

  • Browser浏览器，其实也是一种Client客户端，只是这个客户端不需要大家去安装什么应用程序，只需在浏览器上通过HTTP请求服务器端相关的资源（网页资源）即可。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.3、HTTP协议

1.3.1 、http协议简介

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于万维网（WWW:World Wide Web ）服务器与本地浏览器之间传输超文本的传送协议。

超文本：超文本就是指“含有指向其他资源链接”内容的文本。大概就是，不仅仅是文字，还有多媒体：视频、图片、动画等。

HTTP于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。HTTP协议工作于客户端-服务端（B/S）架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。

1.3.2、 http协议特性

基于请求－响应模式

HTTP协议规定,请求从客户端发出,最后服务器端响应该请求并返回。换句话说,肯定是先从客户端开始建立通信的,服务器端在没有 接收到请求之前不会发送响应

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.3.3、http请求协议与响应协议

http协议包含由浏览器发送数据到服务器需要遵循的请求协议与服务器发送数据到浏览器需要遵循的响应协议。用于HTTP协议交互的信息被称为HTTP报文。请求端(客户端)的HTTP报文叫做请求报文,响应端(服务器端)的叫做响应报文。HTTP报文本身是由多行数据构成的字文本。

(1) 请求协议

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

请求方式: get与post请求

  • GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditBook?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的请求体中.
  • GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有大小限制，且携带的请求数据不可以明文方式连接在url中。
(2) 响应协议

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

响应状态码：状态码指的是是当客户端向服务器端发送请求时, 返回的请求 结果。借助状态码,用户可以知道服务器端是正常受理了请求,还是出现了什么问题错误 。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

第2章 、HTML

了解了web相关基本概念以后，我们开始正式接触网页开发，网页开发的基础是HTML，所以，本章内容主要是学会如何新建一个 HTML 页面和熟记HTML文档的基本结构和主要标签。

2.1、 HTML概述

  • HTML，即超文本标记语言（HyperText Markup Language ]），也可叫做web页面。扩展名是 .html 或是 .htm 。

  • HTML，是一种用来制作网页的标准标记语言。超文本，指的就是超出普通文本范畴的文档，可以包含文本、图片、视频、音频、链接等元素。

  • HTML 不是一种编程语言，而是一种写给网页浏览器、具有描述性的标记语言。

也就是说：使用HTML语言描述的文件，需要通过网页浏览器显示出效果。用户在访问网页时，是把服务器的HTML文档下载 到本地客户设备中，然后通过本地客户设备的浏览器将文档按顺序解释渲染成对应的网页效果。

网页本身是一种文本文件，通过在文本文件中添加各种各样的标记标签，可以告诉浏览器如何显示标记中的代表的内容，如：HTML中有的标签可以告诉浏览器要把字体放大，就像word一样，也有的标签可以告诉浏览器显示指定的图片，还有的标签可以告诉浏览器把内容居中或者倾斜等等。

每一个HTML标签代表的意义都不一样。同样，他们在浏览器中表现出来的外观也是不一样的。

2.2、 HTML结构和标签格式

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

1、<!DOCTYPE html> 告诉浏览器使用什么样的解析器来解析html文档

2、<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。

3、元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。

4、<title></title>定义网页标题，在浏览器标题栏显示。

5、<body></body>之间的文本是可见的网页主体内容

6、<meta charset="UTF-8"> 声明编码方式用utf8

2.3、标签的语法

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

1、HTML标签是由尖括号包围的特定关键词

2、标签分为闭合和自闭合两种标签

3、HTML不区分大小写

4、标签可以有若干个属性,也可以不带属性,比如就不带任何属性

2.4、基本标签

  • 标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
  • 段落标签
<p>大家好，我是段落1。</p>
<p>大家好，我是段落2。</p>
<p>大家好，我是段落3。</p>
  • 换行标签
<p>大家好，我是段落标签p。我按了enter一下
换行了</p>

<p>大家好，我是段落标签p。我按了enter一下<br/> 换行了</p>
  • 文本格式化标签

HTML提供了一系列的用于格式化文本的标签，可以让我们输出不同外观的元素，比如粗体和斜体字。如果需要在网页中，需要让某些文本内容展示的效果丰富点，可以使用以下的标签来进行格式化。

<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />
  • 特殊符号
&nbsp;

标签大致可分为两类

  • 块级标签(block) – 独占一行
  • 内联标签(inline) – 按文本内容占位
  • div和span标签
<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现

块级元素与行内元素的区别：所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。

2.5、超链接标签

2.5.1、超链接基本使用

超链接是浏览者和服务器的交互的主要手段，也叫超级链接或a链接，是网页中指向一个目标的连接关系，这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。

超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的，用户通过点击超链接可以从一个网页跳转到另一个网页。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。例如,在阅读某个网站时，遇到一个不认识的英文，你只要在这个单词上单击一下，即可跳转到它的翻译页面中，看完单词的解释后点一下返回按钮，又可继续阅读，这就是超链接的常见用途。还有经常到购物网站中去，我们都是在百度搜索，然后点击对应的搜索项进入到对应的购物网站的，这也是超链接的作用。超链接的属性：

属性值描述
href网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如：F:\html\index.html ]规定链接的跳转目标
title百度链接的提示信息
target_blank [ 在新建窗口中打开网页 ] _self [ 默认值，覆盖自身窗口打开网页 ]与前面四项固定值不同，framename是泛指，并不是这个值，这点将在后面框架部分内容中详细介绍，这里可以暂时先略过

1、href是超链接最重要的属性，规定了用户点击链接以后的跳转目标，这个目标可以是 网络连接，也可以是本地连接。

2、网络链接指的是依靠网络来进行关联的地址，一般在地址前面是以 http://或者https://这样开头的，如果没有网络，则用户点击了超链接也无法访问对应的目标。

3、本地链接指的是本地计算机的地址，一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的，不需要经过网络。

4、如果href的值留空，则默认是跳转到当前页面，也就是刷新当前页面。

2.5.2、锚点应用

锚点( anchor )是超链接的一种应用，也叫命名锚记，锚点可以像一个定位器一样，可以实现页面内的链接跳转，运用相当普遍。例如，我们有一个网页，由于内容太多，导致页面很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。又例如，我们页面中，有个链接需要跳转到另一个页面的中间或者脚部去，这时候也可以运用上锚点技术来解决这个问题。

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title>锚点的使用</title>
  </head>
  <body>
  <a href="#i1">第一章</a>
  <a href="#i2">第二章</a>
  <a href="#i3">第三章</a>

   <div id="i1">
      <p>第一章内容</p>
  </div>
   <div id="i2">
      <p>第二章内容</p>
  </div>
  <div id="i3">
     <p> 第三章内容</p>
  </div>
  </body>
</html>

2.6、img标签

在HTML中，图像由标签定义的，它可以用来加载图片到html网页中显示。网页开发过程中，有三种图片格式被广泛应用到web里，分别是 jpg、png、gif。

img标签的属性：

/*
src属性：
    指定图像的URL地址，是英文source的简写，表示引入资源。
    src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
    如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。

alt属性：指定图像无法显示时的替换文本。当图像显示错误时，在图像位置上显示alt的值。如上所示，就是谷歌浏览器中，引入图像失败后，显示了替换文本。

width属性： 指定引入图片的显示宽度。
height属性：指定引入图片的显示高度。
border属性：指定引入图片的边框宽度，默认为0。
title属性：悬浮图片上的提示文字
*/

点击图片跳转可以配合a标签使用

<a><img src="" alt=""></a>

2.7、列表标签

  <ul type="square">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
  </ul>

  <ol start="100">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
  </ol>

2.8、表格标签

在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样，都是有行有列的。HTML使用tr标签定义行，使用td标签定义列。

语法：

<table border="1">
  <tr>
    <td>单元格的内容</td>
    ……
  </tr>
  ……
</table>

1、<table>和</table>表示一个表格的开始和结束。一组<table>...</table>表示一个表格。

2、border用于设置整个表格的边框宽度，默认为0，表示不显示边框。

3、<tr>和</tr>表示表格中的一行的开始和结束。一组<tr>...</tr>，一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。

4、<td>和</td>表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了。

table属性

属性值描述
widthpx、%规定表格的宽度。
heightpx、%规定表格的高度。
alignleft、center、right规定表格相对周围元素的对齐方式。
bgcolorrgb(x,x,x)、#xxxxxx、colorname规定表格的背景颜色。
backgroundurl规定表格的背景图片。
borderpx规定表格边框的宽度。
cellpaddingpx、%规定单元格边框与其内容之间的空白。
cellspacingpx、%规定单元格之间的空隙。

td属性

表格中除了行元素以外，还有单元格，单元格的属性和行的属性类似。td和th都是单元格。

属性值描述
heightpx、%规定单元格的高度。
widthpx、%规定单元格的宽度。
alignleft、center、right规定单元格内容的对齐方式。
valigntop、middle、bottom规定单元格内容的垂直对齐方式。
bgcolorrgb(x,x,x)、#xxxxxx、colorname规定单元格的背景颜色。
backgroundurl规定单元格的背景图片。
rowspannumber规定单元格合并的行数
colspannumber规定单元格合并的列数
<html>
<head>
    <title>i am title</title>
    <meta charset="utf-8">
</head>
<body>
    <table border=1px width="700" height="500">
        <tr>
            <td colspan="2">1</td>
            <td rowspan="2">3</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>
</html>

2.9、表单标签

表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.

表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后，就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分：

  • 表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。

  • 表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。

  • 表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上。

在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性：

属性值描述
action访问服务器地址服务器端表单处理程序的URL地址
methodpost、get[默认值]表单数据的提交方法
target参考超链接的target属性表单数据提交时URL的打开方式
enctypeapplication/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送]表单提交数据时的编码方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="post">
        <label>用户名：</label>
        <input type="text" name="username"/><br/>
        <label>密码：</label>
        <input type="password" name="password"/><br/>
        <label>爱好：</label>
<!--        value属性就是提交给服务器的内容，服务器根据该内容就是到用户选择的是哪一项-->
        <input type="checkbox" name="hobby" value="lanqiu">篮球
        <input type="checkbox" name="hobby" value="zuqiu">足球
        <input type="checkbox" name="hobby" value="qumao">羽毛球
        <input type="checkbox" name="hobby" value="gaoer">高尔夫
        <br/>
        <label>性别：</label>
<!--        单选框的name属性值必须一样，否则无法实现单选-->
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女
        <br/>
        <label>生日：</label>
        <input type="date" name="birthday"><br>
        <label>籍贯：</label>
        <select name="jiguan">
            <option>请选择籍贯</option>
            <option value="hebei">河北</option>
            <option value="anhui">安徽</option>
            <option value="liaoning">辽宁</option>
        </select>
        <br>
        <label>自我介绍：</label>
        <textarea cols="30" rows="10" placeholder="请描述" name="self"></textarea>
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
</body>
</html>

  • 文件上传:必须将文件的二进制形式的数据提交给服务器

  • <form action="#" method="post" enctype="multipart/form-data">
    <input type="file">
    <input type="submit" value="上传文件">
</form>

2.10、多媒体标签

视频标签：

<video src="路径" controls  autoplay width="300px"></video>

标签属性：
  autoplay属性控制是否网页加载自动播放　　

  controls 是否显示播放控件，默认不显示

  loop 属性用于控制循环次数，如果值为正整数，则播放指定的次数，如果是 loop 或者是 loop = -1，则无线循环播放。

  width 属性设置播放窗口宽度

  height 属性设置播放窗口高度

  由于版权等原因，不同的浏览器可支持播放的格式是不一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <video src="https://video.pearvideo.com/mp4/adshort/20211029/cont-1744852-15789500_adpkg-ad_hd.mp4" controls  autoplay width="600px"></video>

</body>
</html>

音频标签：

<audio src="路径"  autoplay="autoplay" controls="true" loop=2></audio>
标签属性：
	autoplay属性控制是否网页加载自动播放
  controls 是否显示播放控件，默认不显示
  loop 属性用于控制循环次数，如果值为正整数，则播放指定的次数，如果是 loop 或者是 loop = -1，则无线循环播放。
  由于版权等原因，不同的浏览器可支持播放的格式是不一样的


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <audio src="https://video.pearvideo.com/mp4/adshort/20211029/cont-1744852-15789500_adpkg-ad_hd.mp4" controls  autoplay width="600px"></audio>

</body>
</html>

第3章 、CSS

CSS中文译作“层叠样式表”或者是“级联样式表”，是用于控制网页外观处理并允许将网页的表现与内容分离的一种标记性语言，CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)，是Web网页开发技术的重要组成部分。

那么接下来，继续看下，使用CSS有什么好处吧。

  • 使用CSS样式可以有效地对页面进行布局，更加灵活多样。

  • 使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确控制，同时对它们的修改和控制变得更加快捷，更加强大。

  • 站点中所有的网页风格都使用一个CSS文件进行统一控制，达到一改全改。还可以快速切换主题，我们可以把HTML比作是骨架，CSS是衣服。同一个HTML骨架结构，不同CSS样式，所得到的美化布局效果不同。

  • CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等。

  • CSS可以将网页的表现与结构分离，使页面载入得更快,更利于维护，这也是我们的最终目的。

CSS基本语法:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

CSS的基本语法由选择器、属性、属性的值组成，如果选择器有多个属性，由分号隔开。

注意，这里的代码都是英文格式，例如花括号、冒号和分号。

3.1、CSS的引入方式

CSS样式有三种不同的使用方式，分别是行内样式，嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。

  • 行内样式

行内样式，就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式，因为那样不利于后期维护。

<div style="color: white;background-color: #369;text-align: center">行内设置</div>
  • 嵌入式

嵌入式，是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊，单独的样式时，可以使用该模式。

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
     <title>锚点的使用</title>
      <meta charset="utf8">

      <style>
          div{
              color: white;
              background-color: #369;
              text-align: center
          }
      </style>
  </head>
  <body>
  
  <div> 嵌入式</div>

  </body>
</html>
  • 链接式

链接式，就是把CSS样式写在HTML文档的外部，一个后缀为 .css 的外部样式表中，然后使用时在head标签中，使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时，外部样式表是最理想的选择。在使用外部样式表的情况下，我们可以通过改变一个文件来改变这所有页面的外观。

common.css

div{
      color: white;
      background-color: #369;
      text-align: center
}

html文件

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
     <title>锚点的使用</title>
      <meta charset="utf8">

      <link rel="stylesheet" href="common.css">
  </head>
  <body>

  <div>链接式</div>
  
  </body>
</html>

3.2、CSS的选择器

3.2.1、基本选择器

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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

    <style>
           #i1{
               color: red;
           }

           .c1{
               color: red;
           }
           .c2{
               font-size: 32px;
           }

    </style>


</head>
<body>

<div id="i1">item1</div>
<div id="i2">item2</div>
<div id="i3">item3</div>

<div class="c1 c2">item4</div>
<div class="c1">item5</div>
<div class="c1">item6</div>

</body>
</html>

3.3、CSS的属性操作

3.3.1、文本属性

  • font-style（字体样式风格）
/*
属性值：
normal：设置字体样式为正体。默认值。 
italic：设置字体样式为斜体。这是选择字体库中的斜体字。
oblique：设置字体样式为斜体。人为的使文字倾斜，而不是去使用字体库的斜体字。
*/
  • font-weight（字体粗细）
/*
属性值：
normal：设置字体为正常字体。相当于数字值400
bold：设置字体为粗体。相当于数字值700。
bolder：设置字体为比父级元素字体更粗的字体。
lighter：设置字体为比父级元素字体更细的字体。
number：用数字表示字体粗细。从小到大，越来约粗，取值范围：100、200、300、400、500、600、700、800、900。
注意：
font-weight的常用值有两个normal和bold，其他的值在浏览器中的支持并不好。
*/
  • font-size（字体大小）
/*
font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素（ px ）、字符（ em，默认1em等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定 ）。
字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，新版已经修复。*/
  • color（字体颜色）
// 可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。

 <style>
        .c1{
            color: red;
        }
        .c1{
            color: #369;
        }
        .c1{
            color: RGB(0,0,255);
        }
</style>
  • text-align（文本对齐方式）
/*
text-align属性可以设置文本内容的水平对齐方式。属性值常用的有
左对齐left、居中对齐center、右对齐right。justify 实现两端对齐文本效果。
*/

  • vertical-align

    vertical-align 属性设置元素的垂直对齐方式。

3.3.2、背景属性

  • background-color（背景颜色）

页面的背景颜色有四种属性值表示，分别是transparent（透明），RGB十进制颜色表示，十六进制颜色表示和颜色单词表示。

属性使用：

/*
background-color: transparent;   // 透明 
background-color: rgb(255,0,0); //  红色背景 
background-color: #ff0000;  //  红色背景
background-color: red;    // 红色背景 
*/
  • background-image（背景图片）

background-image可以引入一张图片作为元素的背景图像。默认情况下，background-image放置在元素的左上角，并在垂直和水平方向重复平铺。

语法：

// background-image: url('图片地址')

当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。 所以当背景图片没有被加载到，或者不能完全铺满元素时，就会显示背景颜色。

  • background-repeat（背景平铺方式）

CSS中，当使用图像作为背景了以后，都是默认把整个页面平铺满的，但是有时候在很多场合下面，页面并不需要这种默认的效果，而可能需要背景图像只显示一次，或者只按照指定方式进行平铺的时候，可以使用background-repeat来进行设置。

background-repeat专门用于设置背景图像的平铺方式，一般有四个值，默认是repeat（平铺），no-repeat（不平铺），repeat-x（X轴平铺），repeat-y（Y轴平铺）。

  • background（背景样式缩写）

多个不同背景样式属性也是可以同时缩写的，背景样式的缩写属性的顺序是不固定的，可以任意编排。

语法：

// background: 背景颜色  背景图片  背景平铺方式  背景定位;

3.3.3、边框属性

  • border-style（边框风格）

定义边框的风格，值可以有

/*
none：没有边框，当border的值为none的时候，系统将会忽略[border-color]
hidden：隐藏边框，低版本浏览器不支持。
dotted：点状边框。
dashed：虚线边框。
solid：实线边框。
double：双实线边框，两条单线与其间隔的和等于border-width值。
*/

border-style的值可以缩写的：

/*
只有一个值的时候表示同时控制上下左右的边框风格。
只有两个值的时候表示分别控制上下、左右的边框风格。
有三个值的时候表示分别控制上、左右、下的边框风格。
有四个只的时候表示分别控制上、右、下、左的边框风格。
*/

border-style还可以单独指定不同方向：

/*
border-top-style		设置上边的边框风格
border-bottom-style	     设置下边的边框风格
border-left-style		设置左边的边框风格
border-right-style		设置右边的边框风格
*/
  • border-width（边框宽度）

使用border-width可以定义边框的厚度，值可以是medium中等，thin薄，thick厚和指定数值的宽度。 同时，border-width也可以进行缩写：

/*
只有一个值的时候表示同时控制上下左右的边框宽度。
只有两个值的时候表示分别控制上下、左右的边框宽度。
有三个值的时候表示分别控制上、左右、下的边框宽度。
有四个只的时候表示分别控制上、右、下、左的边框宽度。
*/

border-width也可以单独指定不同方向：

/*
border-top-width		设置上边的边框宽度
border-bottom-width	    设置下边的边框宽度
border-left-width		设置左边的边框宽度
border-right-width		设置右边的边框宽度
*/
  • border-color（边框颜色）

定义边框的颜色，值表示的方式可以是十六进制，RGB十进制和单词表示法。

同上，border-color的缩写：

/*
只有一个值的时候表示同时控制上下左右的边框颜色。
只有两个值的时候表示分别控制上下、左右的边框颜色。
有三个值的时候表示分别控制上、左右、下的边框颜色。
有四个只的时候表示分别控制上、右、下、左的边框颜色。
*/

border-color也可以单独指定不同方向：

/*
border-top-color		设置上边的边框颜色
border-bottom-color	设置下边的边框颜色
border-left-color		设置左边的边框颜色
border-right-color		设置右边的边框颜色
*/
  • 边框样式缩写

还可以把边框风格，边框宽度，边框颜色进行组合在一起，进行缩写：语法：

// border: 边框宽度 边框样式 边框颜色;

注意，border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样式。

3.3.6、盒子模型（重点）

盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。HTML页面上的每个元素都可以看成一个个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • padding（内边距及其缩写）

内边距，也叫“内补白”，表示页面中元素的边框与内容的距离。内边距的值不能是负值。

内边距可以设置多个值：

/*
当padding只有一个值的时候表示同时控制上下左右的内边距。
当padding只有两个值的时候表示分别控制上下、左右的内边距。
当padding有三个值的时候表示分别控制上、左右、下的内边距。
当padding有四个只的时候表示分别控制上、右、下、左的内边距。
*/

内边距也可以进行单独设置：

/*
padding-top 			设置上边的外边距
padding-bottom 		设置下边的外边距
padding-left			设置左边的外边距
padding-right			设置右边的外边距
*/
  • margin（外边距及其缩写）

外边距，也叫“外补白”，表示页面中元素与元素之间的距离。外边距越大，两者的距离就越远，反之，如果外边距越小，则元素之间的距离就越近，外边距的值可以是正数，也可以是负值。

margin也可以像padding一样设置多个值和单独方向设置，用法一样。

1、在网页的开发过程中，需要让一个元素相对于父级元素作水平居中时，可以借助margin的auto的特性来实现。

​ 使用margin让元素自身居中： margin: xpx auto;

2、浏览器的默认边距清零

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .c1{
           width: 100%;
           height: 600px;
           border: 1px solid red;

       }

       .c2{
           width: 50%;
           height: 40px;
           background-color: rebeccapurple;
           margin: 10px auto;
       }
    </style>
</head>
<body>

<div class="c1">
    <div class="c2"></div>
    <div class="c2"></div>
</div>
</body>
</html>

边距案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 80%;
            /*auto使得.c1定位到的标签对其父标签(body)居中显示*/
            /*100px使得.c1定位到的标签对其父标签(body)外边距为100px*/
            margin: 100px auto;
            border: solid;
        }
        li{
            /*使得li标签行内显示（横向显示）*/
            display: inline-block;
            margin: 10px;
        }
        /*层级选择器定位,定位到符合层级关系的a标签*/
        .c1 .J_categoryList li a {
            font-size: 16px;
            color: #333;
            padding: 20px;
            border: 1px solid red;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="c1">
      <ul class="J_categoryList">
          <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>
    </div>
</body>
</html>

3.3.7、float属性（重点）

  • 流动布局(默认形式)

流动模型（Flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。

在正常情况下，HTML元素都会根据文档流来分布网页内容的。

文档流有2大特征：

① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置。

② 行内元素会随着浏览器从左往右水平分布，一行多个的形式占据页面位置。行内元素摆放满一行以后才会到下一行继续排列。

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title></title>
    <style>
    div{ border: 1px solid #f00; margin: 4px; }
    .d3{ width: 100px; }
    </style>
  </head>
  <body>
    <div>d1</div>
    <div>d2</div>
    <div class="d3">
      <span>span1</span>
      <a>a1</a>
      <a>a2</a>
      <span>span2</span>
    </div>
  </body>
</html>
  • 浮动模型

如果把网站看成一个平面，那么页面的元素就是这个平面上的盒子（盒子从上到下从左到右排列）。而浮动就是把盒子从平面上抬高一个平面，就像是从一楼拿到了二楼。

当一个元素被设置浮动后，将具有以下特性：

1．任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。

1，行内元素
行内元素最常用的是span，特征：
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行

2，块状元素
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下

3，行内块状元素特征：
(1)自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右

2．在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。

3．如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。

4．浮动元素只能浮动至左侧或者右侧。

5．浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素。

让元素向右浮动

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
页面中有三个div元素，分别是d1，d2，d3。接下来，我们借助它们来了解float属性的使用。

① 把d1浮动到右边（浮动模型特性2）。

<!DOCTYPE HTML>
  <html lang="en-US">
    <head>
      <title>向右浮动</title>
      <style>
      div{ width: 50px;height: 50px;border: 1px solid #ff0000; margin: 4px; }
      .d1{ float: right; }
      </style>
    </head>
    <body>
      <div class="d1">d1</div>
      <div class="d2">d2</div>
      <div class="d3">d3</div>
		</body>
  </html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

从上面可以看到 d1本来的是位于d2和d3的上方，设置浮动样式以后，d1被浮到了右边，而它本来的位置，因为没有元素占据，所以，d2跑了上去，d3也跑到了d2原来的位置。最终，导致了我们看到的整个页面发生了变化，d1还是在第一行，但是到了右边实现，而d2则在d1原来的位置了。d3也占据了d2原来的位置。

② 把d2浮动到右边。把浮动样式的选择符改成d2即可（浮动模型特性2）。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

从上面可以看到 d2本来的是位于d1和d3之间，设置浮动样式以后，d2被浮到了右边，而它本来的位置，因为没有元素占据，所以，d3跑了上去。最终，导致了我们看到的页面，d1因为是在d2浮动之前就已经排列好位置了，所以还在原来的位置，但是d2和d3位于同一行了。

③ 把d3浮动到右边。把浮动样式的选择符改成d3即可。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

从上面可以看到，设置浮动样式以后，d3被浮到了右边，d1和d2因为是在d3浮动之前就已经排列好位置了，所以还在原来的位置，只有d3跑到了右边。

让元素向左浮动

我们依然接着d1，d2和d3来进行样式演示。为了更加清晰演示的效果，所以，我们先把d1，d2，d3的边框分别改成红绿蓝，各自不同的颜色。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

①d1向左浮动。为演示效果明显，把d2的宽度改成100像素。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

从上图可以看到，d1还是浮起来了，然后d2往上占据d1原来的位置，和d1在同一行重合，d3占据了d2原来的位置。文本内容会围绕在浮动元素的周围。上图代码如下：

  <!DOCTYPE HTML>
  <html lang="en-US">
    <head>
      <title>向左浮动</title>
      <style>
      div { width: 50px;height: 50px; margin: 4px; }
      .d1 { border: 1px solid #ff0000; float: left; }
      .d2 { border: 1px solid #00ff00; width: 100px; }
      .d3 { border: 1px solid #0000ff; }
      </style>
    </head>
    <body>
      <div class="d1">d1</div>
      <div class="d2">d2</div>
      <div class="d3">d3</div>
    </body>
  </html>

②d1，d2向左浮动。外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

上图可以看到，d1和d2全部浮左以后，又在同一层面上了，两者都变成了行内块状元素，所以，从左往右排列。而d3因为前面两个元素的浮动，所以，d3往前排列，跑到了原来d1浮动前的位置。

③ 三个元素全部向左浮动

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

上图可以看到，三者全部向左浮动了，所以，三个行内块状元素，逐个从左往右排列起来。

清除浮动

网页布局中，最常用的布局便是浮动模型。但是浮动了以后就会破坏原有的文档流，使页面产生不必要的改动，所以我们一般在浮动了以后，达到目的了，就紧接着清除浮动。

​ 在主流浏览器（如Firefox）下，如果一个标签没有设置height，元素的高度默认为auto，且其子标签中有浮动元素时，在这种情况下父标签元素的高度不能自动伸长以适应内容的高度，使得子标签溢出到容器外面而影响（甚至破坏）布局的情况，叫“浮动溢出”，为了防止这个现象的出现而进行的CSS处理操作，CSS里面叫“清除浮动”。

 <!--子标签无浮动：无浮动溢出-->
 <!DOCTYPE HTML>
  <html lang="en-US">
    <head>
      <title>无浮动溢出</title>
      <style>
      .main { width: 600px; padding: 5px; border: 1px solid #ff0000; }
      .left { width: 150px; height: 200px; border: 1px solid #ff0000; float: left; }
      .right { width: 250px; height: 200px; border: 1px solid #0000ff; float: right; }
      </style>
    </head>
    <body>
      <div class="main">
          main
        <div class="left">left</div>
        <div class="right">right</div>
      </div>
    </body>
  </html>



  <!--子标签有浮动：出现浮动溢出-->
 <!DOCTYPE HTML>
 <html lang="en-US">
   <head>
     <title>浮动溢出</title>
     <style>
     .main { width: 600px; padding: 5px; border: 1px solid #ff0000; }
     .left { width: 150px; height: 200px; border: 1px solid #ff0000; float: left; }
     .right { width: 250px; height: 200px; border: 1px solid #0000ff; float: right; }
     </style>
   </head>
   <body>
     <div class="main">
         main
       <div class="left">left</div>
       <div class="right">right</div>
     </div>
   </body>
 </html>

清除浮动的方法常用的有很多，我们主要介绍以下2种：

clear: both;

在父元素的结束标签之前加上添加一个具有clear属性的标签来进行清除浮动。

clear是css中专用于清除浮动的，常用的属性值有以下几个：

值描述
left在左侧不允许浮动元素。
right在右侧不允许浮动元素。
both在左右两侧均不允许浮动元素。
none默认值。允许浮动元素出现在两侧。
 <!DOCTYPE HTML>
 <html lang="en-US">
   <head>
     <title>使用clear：both；清除浮动</title>
     <style>
     .main { width: 600px; padding: 5px; border: 1px solid #ff0000;}
     .left { width: 150px; height: 200px; border: 1px solid #ff0000; float: left; }
     .right { width: 250px; height: 200px; border: 1px solid #0000ff; float: right; }
     .clear { clear: both; }
     </style>
   </head>
   <body>
     <div class="main">
       <div class="left">left</div>
       <div class="right">right</div>
       <div class="clear"></div>
     </div>
</body>
 </html>

因为left和right两个都浮动了，所以，要清除浮动就需要在两者的父元素的结束标记之前，加上一个带有clear属性的子元素。

overflow: hidden;

给父元素加上溢出隐藏属性来进行清除浮动。

 <!DOCTYPE HTML>
  <html lang="en-US">
    <head>
      <title>浮动溢出</title>
      <style>
      .main { width: 600px; padding: 5px; border: 1px solid #ff0000; overflow: hidden; }
      .left { width: 150px; height: 200px; border: 1px solid #ff0000; float: left; }
      .right { width: 250px; height: 200px; border: 1px solid #0000ff; float: right; }
      </style>
    </head>
    <body>
      <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
      </div>
    </body>
  </html>

综合练习：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用定位与浮动完成一个三列经典布局</title>
    <style>
      /* 初始化  常用套路*/
      * {
        margin: 0;
        padding: 0;
      }
      li {
        /*list-style: none;*/
	    display: inline-block;
      }
      a {
        text-decoration: none;
        /* a标签的下划线去掉 */
        color: #666;
      }
      /* 页眉与页脚 */
      .header,
      .footer {
        height: 40px;
        background-color: lightblue;
      }
      /* 页眉与页脚 中间区域*/
      .content {
        width: 960px;
        margin: auto;
      }
      .content > ul > li {
        float: left;
        line-height: 40px;
        padding: 0 15px;
      }
	  /*hover:选择鼠标指针浮动在其上的元素，并设置其样式*/
      .content > ul > li:hover {
        background-color: gold;
        font-size: 20px;
      }
      /* 页脚样式 */
      .content > p {
        text-align: center;
        line-height: 40px;
      }
      /* 主体用定位 */
      .container {
        width: 960px;
        margin: 10px auto;
        /* 防止浮动元素的高度塌陷 */
        overflow: auto;
      }
      .container > .left {
        width: 200px;
        background-color: lightgreen;
        height: 600px;
        float: left;
      }
      .container > .right {
        width: 200px;
        background-color: lightgreen;
        height: 600px;
        float: right;
      }
      .container > .main {
        background-color: wheat;
        height: 600px;
        width: 540px;
        float: left;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 页眉 -->
    <div class="header">
      <div class="content">
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">会员管理</a></li>
          <li><a href="">购物车</a></li>
        </ul>
      </div>
    </div>
    <!-- 主体 -->
    <div class="container">
      <div class="left">左侧栏</div>
      <div class="main">中间内容区</div>
      <div class="right">右侧栏</div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <div class="content">
        <p>XX电商服务有限公司&copy;|备案号：粤ICP：*****335454***55</p>
      </div>
    </div>
  </body>
</html>

第4章 、JavaScript

4.1、JavaScript 的历史

4.1.1、JavaScript 的历史

1992年底，美国国家超级电脑应用中心（NCSA）开始开发一个独立的浏览器，叫做Mosaic。这是人类历史上第一个浏览器，从此网页可以在图形界面的窗口浏览。但是该浏览器还没有面向大众的普通用户。

1994年10月，NCSA的一个主要程序员Jim Clark，成立了一家Netscape通信公司。这家公司的方向，就是在Mosaic的基础上，开发面向普通用户的新一代的浏览器Netscape Navigator。

1994年12月，Navigator发布了1.0版，市场份额一举超过90%。

Netscape 公司很快发现，Navigator浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为，因为当时，网速很慢而且上网费很贵，有些操作不宜在服务器端完成。比如，如果用户忘记填写“用户名”，就点了“发送”按钮，到服务器再发现这一点就有点太晚了，最好能在用户发出数据之前，就告诉用户“请填写用户名”。这就需要在网页中嵌入小程序，让浏览器检查每一栏是否都填写了。

管理层对这种浏览器脚本语言的设想是：功能不需要太强，语法较为简单，容易学习。

1995年5月，Netscape 公司只用了10天，就设计完成了这种语言的第一版。

Netscape 公司的这种浏览器脚本语言，最初名字叫做 Mocha，1995年9月改为LiveScript。12月，Netscape公司与Sun公司（Java语言的发明者和所有者）达成协议，后者允许将这种语言叫做JavaScript。这样一来，Netscape公司可以借助Java语言的声势，而Sun公司则将自己的影响力扩展到了浏览器，索引并不是因为JavaScript本身与Java语言有多么深的关系才叫做javaScript。

1996年3月，Navigator 2.0 浏览器正式内置了 JavaScript 脚本语言，也就是可以直接在浏览器中运行JavaScript 脚本语言。

JS的作用：简单来说可以处理前端的一些简单的业务逻辑和用户行为、网页事件的触发和监听。

4.2、JS的引入方式

1 直接编写
    <script>
        console.log('hello yuan')
    </script>
2 导入文件
    <script src="hello.js"></script>

4.3、JS基本语法

js是一门弱类型的编程语言,属于基于对象和基于原型的脚本语言.

  • 变量
格式:
	  // 方式1 先声明再赋值
	  var 变量名;   // 声明的变量如果没有进行赋值,或者没有被定义的变量,值默认是undefined
      变量名 = 变量值;

	  // 方式2 声明并赋值
      var 变量名 = 变量值;

    // 方式3 一行可以声明多个变量.并且可以是不同类型
    var name="yuan", age=20, job="lecturer";

1、声明变量时 可以不用var. 如果不用var 那么它是全局变量

2、变量命名,首字符只能是字母,下划线,$美元符 三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写

  • 注释
// 单行注释

 /*
   多行注释
 */
  • 语句分隔符
var a = 1;   // 分号和换行符作为语句分隔符号
var b = 2;
console.log(a,b);

4.4、JS 基本数据类型

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.4.1、数字类型

JavaScript 没有整型和浮点型，只有一种数字类型，即number类型。

var x = 10;
var y = 3.14;
console.log(x,typeof x);  // 10 "number"
console.log(y,typeof y);  // 3.14 "number"

4.4.2、字符串

字符串创建(两种方式)

  • 变量 = “字符串”
  • 字串对象名称 = new String (字符串)
var str1="hello world";
var str1= new String("hello word");


// 字符串对象的操作
var str = "hello"; // 这就是字符串对象
console.log(str);

// 字符串对象内置属性
// length 计算字符串的长度
console.log( str.length );

// 字符串对象内置方法
// toUpperCase();  字母大写转换
// toLowerCase();  字母小写转换

console.log( str.toUpperCase() );
console.log( str.toLowerCase() );

// indexOf 获取指定字符在字符串中第一次出现的索引位置
// 字符串也有下标,也可以使用中括号来提取字符串的指定字符
console.log(str[1]); // e
console.log( str.indexOf("e") ); // 1

// match  正则匹配
// js中也存在正则,正则的使用符号和python里面是一样的
//语法：/正则表达式主体/修饰符(可选)
//修饰符：
	//i:执行对大小写不敏感的匹配。
	//g:执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

var str = "我的电话是: 13312345678,你的电话: 13512345678";
var ret = str.match(/\d{11}/g); // 匹配,提取数据
console.log(ret);

// replace  正则替换
var str = "我的电话是: 13512345678";
var ret = str.replace(/(\d{3})\d{4}(\d{4})/,"$1****$2"); // 正则 的 捕获模式  $1$2表示的正则中第一个和第二个小括号捕获的内容
console.log(ret);
// search  正则查找,如果查找不到,则返回-1
var str = "hello";
var ret = str.search(/l/);
console.log(ret);

// 切片,当前方法支持使用负数代表倒数下标
// slice(开始下标)   从开始位置切到最后
// slice(开始下标,结束下标)  从开始下标切到指定位置之前
var str = "helloworld";
var ret = str.slice(3,6); // 开区间,不包含结束下标的内容
console.log(ret); // low
var ret = str.slice(5);
console.log(ret); // world
var ret = str.slice(2,-1);
console.log(ret); // lloworl


// split   正则分割,经常用于把字符串转换成数组
var str = "广东-深圳-南山";
var ret = str.split("-");
console.log( ret );

// substr  截取
var str = "hello world";
var ret = str.substr(0,3);
console.log(ret); // hel

// trim    移除字符串首尾空白
var password = "    ge llo   ";
var ret = password.trim();
console.log(password.length); // 13
console.log(ret.length);  // 6

4.4.3、布尔值

1、Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
2、Boolean值主要用于JavaScript的控制语句

console.log(true);
console.log(false);
console.log(typeof true);
console.log(true == 1);
console.log(true + 1);
console.log(false + 1);

4.4.4、空值（Undefined和Null）

  • undefined类型

undefined类型只有一个值，即 undefined。

(1) 当声明的变量未初始化时，该变量的默认值是 undefined。

(2)当函数无明确返回值时，返回的也是值 undefined;

  • null类型

另一种只有一个值的类型是 null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 js 把它们定义为相等的。

尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

4.4.5、类型转换

js中,类型转换有2种.一种就是强制转换,一种就是自动转换.

因为js是一门弱类型的脚本语言,所以变量会在运算符的运行要求,有时候根据运算符的要求,进行自动转换的.

  • 强制转换
 // 1. 转换数据为数值类型
// parseInt     把数据转换成整数
// parseFloat   把数据转换成小数
var box1 = "100";     // 转换会成功
var ret = parseInt(box1);
console.log(box1);
console.log(ret);
//
var box2 = "3.14";
console.log( parseFloat(box2) ); // 3.14
// 对于转换数值,如果转换失败的话,则结果为 NaN ,是 Not a Number ,但是NaN的类型也是number类型

// 2. 转换数据为字符串
  // 变量.toString()
  // String(数据)
var box4 = 3.14;
var ret = box4.toString();
console.log(ret);
  • 自动转换
// 所谓的自动转换,其实弱类型中的变量会根据当前代码的需要,进行类型的自动隐式转化
var box1 = 1 + true;
// true 转换成数值,是1, false转换成数值,是0
console.log(box1); // 2

var box2 = 1 + "200";
console.log(box2); 
// ‘1200’ 原因是,程序中+的含义有2种,第一: 两边数值相加, 第二: 两边字符串拼接.但是在js中运算符的优先级中, 字符串拼接的优先级要高于正数    
// 值的加减乘除,所以解析器优先使用了+号作为了字符串的拼接符号了,因为程序就需要+号两边都是字符串才能完成运算操作,因此1变成字符串了。最终的结果就是 "1" +"200"

var box3 = 1 - "200";
console.log(box3); // -199;因为-号中表示的就是左边的数值减去右边的数值,因此程序就会要求"200"是数值,因此内部偷偷的转换了一下

4.4.6、原始值和引用值

// 初始值类型
var a = "yuan";
var b = a;
a = "alvin";
console.log(a);//alvin
console.log(b);//yuan

// 对象类型
var arr1=[1,2];
arr2 = arr1;
arr1.push(3);
console.log(arr1)// [1,2,3]
console.log(arr2);//[1,2,3]

arr1=[4,5];
console.log(arr1);//[4,5]
console.log(arr2);//[1,2,3]

4.5、运算符

  • 运算符
/*
//算术运算符
   +   数值相加
   -   数值相减
   *   数值相乘
   /   数值相除
   %   数值求余
   **  数值求幂
   a++ 变量被使用后自增1   
   ++a 变量被使用前自增1   
   b-- 变量被使用后自减1   
   --b 变量被使用前自减1   
   
//赋值运算符
   =
   +=
   -=
   *=
   /=
   %=
   **=

//比较运算符,比较的结果要么是true, 要么是false
	>   大于
	<   小于
	>=  大于或者等于
	<=  小于或者等于
	!=  不等于[计算数值]
	==  等于[计算]

  !== 不全等[不仅判断数值,还会判断类型是否一致]
	=== 全等[不仅判断数值,还会判断类型是否一致]

//逻辑运算符
  &&   并且  and    两边的运算结果为true,最终结果才是true
  ||   或者  or     两边的运算结果为false,最终结果才是false
  !    非    not    运算符的结果如果是true,则最终结果是false ,反之亦然.
 

//条件运算符[三目运算符]
	 条件?true:false
	 例如:
	      var age = 12;
        var ret = age>=18?"成年":"未成年"; 
        console.log(ret);
 */

4.6、流程控制语句

编程语言的流程控制分为三种：

  • 顺序结构(从上向下顺序执行)
  • 分支结构
  • 循环结构

之前我们学习的方式就是顺序执行，即代码的执行从上到下，一行行分别执行。

例如：


console.log("星期一");
console.log("星期二");
console.log("星期三");

4.6.1、分支结构

  • if 分支语句
 if(条件){
     // 条件为true时,执行的代码
   }
   
   if(条件){
     // 条件为true时,执行的代码
   }else{
     // 条件为false时,执行的代码
   }
   
   if(条件1){
     // 条件1为true时,执行的代码
   }else if(条件2){
     // 条件2为true时,执行的代码
   
   }....
   
   }else{
     // 上述条件都不成立的时候,执行的代码
   }
  • switch语句
switch(条件){
      case 结果1:
           满足条件执行的结果是结果1时,执行这里的代码..
           break;
      case 结果2:
      	   满足条件执行的结果是结果2时,执行这里的代码..
      	   break;
      .....
      default:
           条件和上述所有结果都不相等时,则执行这里的代码
   }

1、switch比if else更为简洁

2、执行效率更高。switch…case会生成一个跳转表来指示实际的case分支的地址，而这个跳转表的索引号与switch变量的值是相等的。从而，switch…case不用像if…else那样遍历条件分支直到命中条件，而只需访问对应索引号的表项从而到达定位分支的目的。

3、到底使用哪一个选择语句，代码环境有关，如果是范围取值，则使用if else语句更为快捷；如果是确定取值，则使用switch是更优方案。

4.6.2、循环语句

  • while循环
   while(循环的条件){
      // 循环条件为true的时候,会执行这里的代码
   }

循环案例：

 var count = 0
 while (count<10){
     console.log(count);
     count++;
 }
  • for循环
   
   // 循环三要素
   for(1.声明循环的开始; 2.条件; 4. 循环的计数){
      // 3. 循环条件为true的时候,会执行这里的代码
   }
   
   for(循环的成员下标 in 被循环的数据){
      // 当被循环的数据一直没有执行到最后下标,都会不断执行这里的代码
   }

循环案例：

// 方式1
for (var i = 0;i<10;i++){
	console.log(i)
}

// 方式2
var arr = [111,222,333]
for (var i in arr){
    console.log(i,arr[i])
}
  • 退出循环（break和continue）
 for (var i = 0;i<100;i++){
           if (i===88){
               continue  // 退出当次循环
               // break  // 退出当前整个循环
           }
           console.log(i)
       }

作业：

（1）计算1+2+3+…+100=？

（2）求20的阶乘值

4.7、数组对象

  • 创建数组
创建方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

创建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);
  • 数组方法
var arr = ["A","B","C","D"];
// 内置属性
console.log( arr.length );
// 获取指定下标的成员
console.log( arr[3] ); // D
console.log( arr[arr.length-1] ); // 最后一个成员

// (1) pop()  出栈,删除最后一个成员作为返回值
var arr = [1,2,3,4,5];
var ret = arr.pop();
console.log(arr); // [1, 2, 3, 4]
console.log(ret); // 5


// (2) push() 入栈,给数组后面追加成员
var arr = [1,2,3,4,5];
arr.push("a");
console.log(arr); // [1, 2, 3, 4, 5, "a"]


// (3) shift是将数组的第一个元素删除
var arr = [1,2,3,4,5];
arr.shift()
console.log(arr); // [2, 3, 4, 5]

// (4) unshift是将value值插入到数组的开始
var arr = [1,2,3,4,5];
arr.unshift("yuan")
console.log(arr); // ["yuan",1,2, 3, 4, 5]


// (5) reverse() 反转排列
var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]

// (6) slice(开始下标,结束下标)  切片,开区间
var arr = [1,2,3,4,5];
console.log(arr.slice(1,3));


// (7) concat() 把2个或者多个数组合并
var arr1 = [1,2,3];
var arr2 = [4,5,7];
var ret = arr1.concat(arr2);
console.log( ret );


// (8) join()  把数组的每一个成员按照指定的符号进行拼接成字符串
var str = "广东-深圳-南山";
var arr = str.split("-");
console.log( arr ); // ["广东", "深圳", "南山"];

var arr1 = ["广东", "深圳", "南山"];
var str1 = arr1.join("-");
console.log( str1 ); // 广东-深圳-南山
  • 遍历数组
 var arr = [12,23,34]
 for (var i in arr){
       console.log(i,arr[i])
 }

4.8、Object对象

8.1、object对象的基本操作

Object 的实例不具备多少功能，但对于在应用程序中存储和传输数据而言，它们确实是非常理想的选择。
创建 Object 实例的方式有两种。

var person = new Object();
person.name = "alvin";
person.age = 18;

另一种方式是使用对象字面量表示法。对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。下面这个例子就使用了对象字面量语法定义了与前面那个例子中相同的person 对象：

var person = {
                name : "alvin",
                age : 18,
  							say: function(){
                      alert(123);
                  }
             };
  • object可以通过. 和 []来访问。
console.log(person["age"]);
console.log(person.age)
  • object可以通过for循环遍历
 for (var attr in person){
           console.log(attr,person[attr]);
      }

8.2、json序列化和反序列化

JSON：JavaScript 对象表示法，是一种轻量级的数据交换格式。易于人阅读和编写。

// json是一种数据格式, 语法一般是{}或者[]包含起来
// 内部成员以英文逗号隔开,最后一个成员不能使用逗号!
// 可以是键值对,也可以是列表成员
// json中的成员如果是键值对,则键名必须是字符串.而json中的字符串必须使用双引号圈起来
// json数据也可以保存到文件中,一般以".json"结尾.


{
   "name": "xiaoming",
	 "age":12
}

[1,2,3,4]

{
   "name": "xiaoming",
	 "age":22,
   "sex": true,
   "son": {
      "name":"xiaohuihui",
      "age": 2
   },
   "lve": ["篮球","唱","跳"]
}

js中也支持序列化和反序列化的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // js对象,因为这种声明的对象格式很像json,所以也叫json对象
    var data = {
        name: "xiaoming",
        age: 22,
        say: function(){
            alert(123);
        }
    };

    // 把对象转换成json字符串
    var ret = JSON.stringify(data);
    console.log(ret ); // {"name":"xiaoming","age":22}

    // 把json字符串转换成json对象
    var str = `{"name":"xiaoming","age":22}`;
    var ret = JSON.parse(str);
    console.log(ret);
</script>
</body>
</html>

4.9、Date对象

  • 创建Date对象
//方法1：不指定参数
var nowd1=new Date(); //获取当前时间
console.log(nowd1.toLocaleString( ));
//方法2：参数为日期字符串
var d2=new Date("2004/3/20 11:12");
console.log(d2.toLocaleString( ));
var d3=new Date("04/03/20 11:12");
console.log(d3.toLocaleString( ));
  • 获取时间信息
获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒

4.10、Math对象

// Math对象的内置方法
// abs(x)  返回数值的绝对值
var num = -10;
console.log( Math.abs(num) ); // 10

// ceil(x)  向上取整
var num = 10.3;
console.log( Math.ceil(num) ); // 11

// floor(x) 向下取整
var num = 10.3;
console.log( Math.floor(num) ); // 10

// max(x,y,z,...,n)
console.log( Math.max(3,56,3) ); // 56
// min(x,y,z,...,n)


// random()  生成0-1随机数
console.log( Math.random() );

// 生成0-10之间的数值
console.log( Math.random() * 10 );

// round(x) 四舍五入
// 生成0-10之间的整数
console.log( Math.round( Math.random() * 10 ) );

4.11、Function 对象

函数在程序中代表的就是一段具有功能性的代码，可以让我们的程序编程更加具有结构性和提升程序的复用性,也能让代码变得更加灵活强大

4.11.1、声明函数

/*
// 函数的定义方式1
function 函数名 (参数){
    函数体;
    return 返回值;
}
功能说明：
    可以使用变量、常量或表达式作为函数调用的参数
    函数由关键字function定义
    函数名的定义规则与标识符一致，大小写是敏感的
    返回值必须使用return
    
//  函数的定义方式2
    
用 Function 类直接创建函数的语法如下：
var 函数名 = new Function("参数1","参数n","function_body");

虽然由于字符串的关系，第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型*/

4.11.2、函数调用

    //f(); --->OK
    function f(){
        console.log("hello")

    }
    f() //----->OK

不同于python，js代码在运行时，会分为两大部分———检查装载 和 执行阶段。

  • 检查装载阶段：会先检测代码的语法错误，进行变量、函数的声明
  • 执行阶段：变量的赋值、函数的调用等，都属于执行阶段。

4.11.3、函数参数

（1） 参数基本使用

// 位置参数
function add(a,b){

    console.log(a);
    console.log(b);
}
add(1,2)
add(1,2,3)
add(1)


// 默认参数
function stu_info(name,gender="male"){
    console.log("姓名："+name+" 性别："+gender)
}

stu_info("yuan")

4.11.4、函数返回值

在函数体内，使用 return 语句可以设置函数的返回值。一旦执行 return 语句，将停止函数的运行，并运算和返回 return 后面的表达式的值。如果函数不包含 return 语句，则执行完函数体内每条语句后，返回 undefined 值。

function add(x,y) {
          return x+y
      }

var ret = add(2,5);
console.log(ret)

1、在函数体内可以包含多条 return 语句，但是仅能执行一条 return 语句

2、函数的参数没有限制，但是返回值只能是一个；如果要输出多个值，可以通过数组或对象进行设计。

4.11.5、函数作用域

作用域是JavaScript最重要的概念之一。

JavaScript中，变量的作用域有全局作用域和局部作用域两种。

// 局部变量,是在函数内部声明,它的生命周期在当前函数被调用的时候, 当函数调用完毕以后,则内存中自动销毁当前变量
// 全局变量,是在函数外部声明,它的生命周期在当前文件中被声明以后就保存在内存中,直到当前文件执行完毕以后,才会被内存销毁掉

首先熟悉下var

    var name = "yuan"; // 声明一个全局变量 name并赋值”yuan“
    name = "张三";  // 对已经存在的变量name重新赋值 ”张三“
    console.log(name);

    var  gender = "male"
    var  gender = "female" // 原内存释放与新内存开辟，指针指向新开辟的内存
    console.log(gender)

作用域案例：

 var num = 10; // 在函数外部声明的变量, 全局变量
function func(){
  //千万不要再函数内部存在和全局变量同名的变量
  num = 20; // 函数内部直接使用变量,则默认调用了全局的变量,
}
func();
console.log("全局num：",num);

4.11.6、匿名函数

匿名函数，即没有变量名的函数。在实际开发中使用的频率非常高！也是学好JS的重点。

      // 匿名函数赋值变量
       var foo = function () {
           console.log("这是一个匿名函数！")
       };
			

      // 匿名函数的自执行
      (function (x,y) {
           console.log(x+y);
       })(2,3)


     // 匿名函数作为一个高阶函数使用
     function bar() {

        return function () {
            console.log("inner函数！")
        }
    }
    bar()()

4.12、BOM对象

BOM:Broswer object model,即浏览器提供我们开发者在javascript用于操作浏览器的对象。

4.12.1、window对象

  • 窗口方法
// BOM  Browser object model 浏览器对象模型

// window是js中最大的一个对象.整个浏览器窗口出现的所有东西都是window对象的内容.
console.log( window );

// alert()  弹出一个警告框
window.alert("hello");

//confirm  弹出一个确认框,点击确认,返回true, 点击取消,返回false
var ret = confirm("您确认要删除当前文件么?");
console.log( ret  );

// 弹出一个消息输入框,当点击确认以后,则返回可以接收到用户在输入框填写的内容.如果点击取消,则返回null
var ret = prompt("请输入一个内容","默认值");
console.log( ret );

// close() 关闭当前浏览器窗口
window.close();

//打开一个新的浏览器窗口
window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px");
  • 定时方法

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。而setTimeout是在指定的毫秒数后调用code一次。


// 设置循环定时器
var ID = window.setInterval(code,millisec)   // 每millisec毫秒执行一次code
// 取消循环定时器
window.clearInterval(ID);

// 设置单次定时器
var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次
// 取消单次定时器
window.clearTimeout(ID);

其中，code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔，以毫秒计。

显示时间案例：

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


</head>
<body>

<input id="ID1" type="text" >
<button onclick="begin()">开始</button>
<button onclick="end()">停止</button>

<script>
    function showTime(){
           var nowd2=new Date().toLocaleString();
           var temp=document.getElementById("ID1");
           temp.value=nowd2;

    }
    var ID;
    function begin(){
        if (ID==undefined){
             showTime();
             ID=setInterval(showTime,1000);
        }
    }
    function end(){
        clearInterval(ID);
        ID=undefined;
    }

</script>

</body>
</html>

4.12.2、Location ( 地址栏)对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">查看Location对象</button>
<button onclick="func2()">跳转到百度</button>
<button onclick="func3()">F5</button>
<script>
    function func1(){
        
        console.log( `协议=>${location.protocol}` );
        console.log( `端口=>${location.port}` );
        console.log( `主机地址=>${location.hostname}` );
        console.log( `域名:端口=>${location.host}` );
        console.log( `路径=>${location.pathname}` );
        console.log( `查询字符串=>${location.search}` );
        console.log(`完整的地址信息=>${location.href}`);
    }
    

    function func2(){
        location.href="http://www.baidu.com"; // 页面跳转
        //location.assign("http://www.baidu.com"); // 页面跳转
    }

    function func3(){
        location.reload(); // 刷新页面
    }
</script>
</body>
</html>

4.13、DOM对象(JS核心)

DOM document Object Model 文档对象模型

// 整个html文档,会保存一个文档对象document
// console.log( document ); // 获取当前文档的对象

4.13.1、查找标签

  • 直接查找标签
document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")
//返回dom对象，就是标签对象或者数组
  • CSS选择器查找
document.querySelector("css选择器")  //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组

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


<div id="i1">DIV1</div>

<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>


<div class="outer">
    <div class="c1">item</div>
</div>


<div class="c2">
    <div class="c3">
        <ul class="c4">
            <li class="c5" id="i2">111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
</div>

<script>

   // 直接查找
   var ele = document.getElementById("i1");  // ele就是一个dom对象
   console.log(ele);

   var eles = document.getElementsByClassName("c1"); // eles是一个数组 [dom1,dom2,...]
   console.log(eles);

   var eles2 = document.getElementsByTagName("div"); // eles2是一个数组 [dom1,dom2,...]
   console.log(eles2);

  //定位outer下的c1对应的标签
   var outer = document.getElementsByClassName("outer")[0];
   var te = outer.getElementsByClassName("c1");
   console.log(te);

    // css选择器
		//层级定位(空格可以表示一个或多个层级)
    var dom = document.querySelector(".c2 .c3 .c5");
    console.log(":::",dom);
		//层级定位
    var doms = document.querySelectorAll("ul li");
    console.log(":::",doms);
    
</script>

</body>
</html>

4.13.2、绑定事件

  • 静态绑定 ：直接把事件写在标签元素中

<div id="div" onclick="foo()">click</div>

<script>
    function foo(){           
        console.log("foo函数");   
    }
</script>
  • 动态绑定：在js中通过代码获取元素对象,然后给这个对象进行后续绑定
<p id="i1">试一试!</p>

<script>

    var ele=document.getElementById("i1");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>

一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码

多个标签绑定事件

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>


<script>

    var eles = document.querySelectorAll("ul li");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick = function (){
            console.log(this.innerHTML)
        }
    }

</script>

  • 在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

    • 单独使用 this，则它指向全局(Global)对象。在浏览器中，window 就是该全局对象为 [object Window]:

    • var x = this;

    • 在函数中，函数的所属者/调用者默认绑定到 this 上。

    • function myFunction() {
  return this;
}

    • 对象方法中的this就是对象本身

    • var person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;
  }
};

    • 事件中的this就是接收事件的 HTML 标签

    • <button onclick="this.style.display='none'">
点我后我就消失了
</button>

4.13.3、操作标签

  • 文本操作
<div class="c1">
  <span>click</span>
</div>

<script>

    var ele =document.querySelector(".c1");

    ele.onclick = function (){
        // 查看标签文本
        console.log(this.innerHTML)
        console.log(this.innerText)
    }

    ele.ondblclick = function (){
        // 设置标签文本
        this.innerHTML = "<a href='#'>yuan</a>"
        //this.innerText = "<a href='#'>yuan</a>"
    }


</script>
  • value操作
    <input type="text" id="i1" value="yuan">
    <textarea name="" id="i2" cols="30" rows="10"></textarea>
    <select  id="i3">
        <option value="hebei">河北省</option>
        <option value="hubei">湖北省</option>
        <option value="guangdong">广东省</option>
    </select>
	  <button onclick="getData()">点击</button>

<script>
		function getData(){
      	var ele1 =document.getElementById("i1");
      	console.log(ele1.value);
      	var ele2 =document.getElementById("i2");
    		console.log(ele2.value);
      	var ele3 =document.getElementById("i3");
    		console.log(ele3.value);
      
      
    }

</script>
  • css样式操作
<p id="i1">Hello world!</p>

<script>
    var ele = document.getElementById("i1");
    ele.onclick = function (){
        this.style.color = "red"
    }
</script>
  • 节点操作
// 创建节点：
document.createElement("标签名")
// 插入节点
somenode.appendChild(newnode)             // 追加一个子节点（作为最后的子节点）
somenode.insertBefore(newnode,某个节点)   // 把增加的节点放到某个节点的前边
// 删除节点
somenode.removeChild()：获得要删除的元素，通过父元素调用删除
//替换节点：替换somenode节点下的childNode子节点为newnode节点
somenode.replaceChild(newnode, childNode);

案例：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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


<button class="add_btn">添加节点</button>
<button class="del_btn">删除节点</button>
<button class="replace_btn">替换节点</button>
<div class="c1">
    <h3>hello JS!</h3>
    <h3 class="c2">hello world</h3>
</div>


<script>

    var add_btn = document.querySelector(".add_btn");
    var del_btn = document.querySelector(".del_btn");
    var replace_btn = document.querySelector(".replace_btn");

    var c1 = document.querySelector(".c1");
    var c2 = document.querySelector(".c2");
    
    add_btn.onclick = function () {
        // 创建节点
        var ele = document.createElement("img");  // <img>
        ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg"     
        // 添加节点
        // c1.appendChild(ele);
        c1.insertBefore(ele, c2)
    };

    del_btn.onclick = function () {
        // 删除子节点
        c1.removeChild(c2);
    };
  
    replace_btn.onclick = function () {
        // 创建替换节点
        var ele = document.createElement("img");  // <img>
        ele.src = "https://img2.baidu.com/it/u=1613029778,1507777131&fm=26&fmt=auto&gp=0.jpg"
        // 替换节点
        c1.replaceChild(ele, c2);

    }
</script>

</body>
</html>

4.13.4、常用事件

  • onload事件：页面加载后立即执行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script>
       window.onload = function (){
            ele = document.getElementById("i1")
            console.log(ele.innerHTML);
       }
    </script>
    
</head>
<body>

<div id="i1">yuan</div>

</body>
</html>
  • onsubmit事件：onsubmit 事件在提交表单时发生，可以校验表单提交的信息
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<form action="" id="i1">
     用户名：<input type="text" id='u'>
     密码：  <input type="password" id='p'>
    <input type="submit">
</form>


<script>

     var ele = document.getElementById("i1");
     var user = document.getElementById("u");
     var pwd = documentgetElementById("p")
     ele.onsubmit = function (e){
           console.log(user.value);
           console.log(pwd.value);
					 if(user.value.length > 3){
               window.alert("too long......")
           }
           return false;    // 终止事件执行
      
     }

</script>
</body>
</html>
  • onchange事件：当元素的值发生改变时，会发生 onchange 事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<select name="provonce" id="s1">
    <option value="hebei">请选择省份</option>
    <option value="hubei">湖北省</option>
    <option value="hunan">湖南省</option>
    <option value="hebei">河北省</option>
</select>

<select name="provonce" id="s2">
    <option value="hebei">请选择城市</option>

</select>

<script>

   var  data={"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","荆州"],"hebei":["石家庄","保定","张家口"]};
   console.log(data);
   var ele =  document.getElementById("s1");
   var ele2 =  document.getElementById("s2");
   ele.onchange=function () {
       console.log(this.value);
       var citys = data[this.value];
       console.log(citys);
       // 清空操作下拉选项
       ele2.options.length=1;
       // 创建标签
       for (var i=0;i<citys.length;i++){
           var option =  document.createElement("option"); // </option></option>
           option.innerHTML=citys[i];
           ele2.appendChild(option)
       }
   }

</script>

</body>
</html>
  • onmouse事件：鼠标指针触碰和离开事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container{
            width: 300px;
        }
        #title{
            cursor: pointer;
            background: #ccc;
        }
       #list{
           display: none;
           background:#fff;
       }

        #list div{
            line-height: 50px;
        }
        #list  .item1{
            background-color: green;
        }

         #list  .item2{
            background-color: rebeccapurple;
        }

         #list  .item3{
            background-color: lemonchiffon;
        }


    </style>
</head>
<body>
<div id="container">
        <div id="title">使用了mouse事件↓</div>
        <div id="list">
                <div class="item1">第一行</div>
                <div class="item2">第二行</div>
                <div class="item3">第三行</div>
        </div>
</div>
<script>

// 1.只有在鼠标指针放在被选元素时，才会触发 onmouseover 事件

// 2.只有在鼠标指针离开被选元素时，才会触发 onmouseleave 事件。

   var container=document.getElementById("container");
   var title=document.getElementById("title");
   var list=document.getElementById("list");
   title.onmouseover=function(){
       list.style.display="block";
   };

   container.onmouseleave=function(){  
       list.style.display="none";
   };

</script>
</body>
</html>
  • onblur和onfocus事件
<input type="text" class="c1">
<script>
    var ele = document.querySelector(".c1");

    // 获取焦点事件
    ele.onfocus = function () {
        console.log("in")
    };

    // 失去焦点事件
    ele.onblur = function () {
        console.log("out")
    }

</script>

第5章 、jQuery

5.1、jQuery介绍

  • jQuery是什么

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理等功能。

jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

  • jQuery的版本

目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构

  • jQuery的引入

根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地

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

5.2、jQuery的选择器

5.2.1、直接查找

  • 基本选择器
/*
#id         # id选择符 
element     # 元素选择符
.class      # class选择符  
selector1, selector2, selectorN   # 同时获取多个元素的选择符 

jQ选择器：

$("#id")   == document.getElementById('id')
$(".class")  
$("element")  
$(".class,p,div")
*/

5.3、jQuery的事件绑定

/*
用法:
	直接通过事件名来进行调用
  $().事件名(匿名函数)
  	 
*/

案例：

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

</head>
<body>
    <div id="d1">i am div tag</div>
    <input type="text" id="t">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $('#d1').click(function () {
        window.alert('点击了div标签！')
    })

    $('#t').blur(function () {
        window.alert('写完了吗？')
    })
</script>
</html>


#container{
        width: 300px;
    }
    #title{
        cursor: pointer;
        background: #ccc;
    }
   #list{
       display: none;
       background:#fff;
   }

    #list div{
        line-height: 50px;
    }
    #list  .item1{
        background-color: green;
    }

     #list  .item2{
        background-color: rebeccapurple;
    }

     #list  .item3{
        background-color: lemonchiffon;
    }


</style>
使用了mouse事件↓
第一行
第二行
第三行

// 1.只有在鼠标指针放在被选元素时，才会触发 onmouseover 事件

// 2.只有在鼠标指针离开被选元素时，才会触发 onmouseleave 事件。

var container=document.getElementById(“container”);
var title=document.getElementById(“title”);
var list=document.getElementById(“list”);
title.οnmοuseοver=function(){
list.style.display=“block”;
};

container.οnmοuseleave=function(){
list.style.display=“none”;
};

```
  • onblur和onfocus事件
<input type="text" class="c1">
<script>
    var ele = document.querySelector(".c1");

    // 获取焦点事件
    ele.onfocus = function () {
        console.log("in")
    };

    // 失去焦点事件
    ele.onblur = function () {
        console.log("out")
    }

</script>

第5章 、jQuery

5.1、jQuery介绍

  • jQuery是什么

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理等功能。

jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

  • jQuery的版本

目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构

  • jQuery的引入

根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地

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

5.2、jQuery的选择器

5.2.1、直接查找

  • 基本选择器
/*
#id         # id选择符 
element     # 元素选择符
.class      # class选择符  
selector1, selector2, selectorN   # 同时获取多个元素的选择符 

jQ选择器：

$("#id")   == document.getElementById('id')
$(".class")  
$("element")  
$(".class,p,div")
*/

5.3、jQuery的事件绑定

/*
用法:
	直接通过事件名来进行调用
  $().事件名(匿名函数)
  	 
*/

案例：

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

</head>
<body>
    <div id="d1">i am div tag</div>
    <input type="text" id="t">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $('#d1').click(function () {
        window.alert('点击了div标签！')
    })

    $('#t').blur(function () {
        window.alert('写完了吗？')
    })
</script>
</html>

itwangyang520
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python新闻网站项目-9.Django前端HTML功能
Mr数据杨
02-25 3万+
我的第一个 Django开发项目，虽然完整代码已经经过时间的流失已经遗失，还是当时有记笔记的习惯，留存至今。基于基于Python基于Scrapy+Gerapy+NLP+Django搭建的新闻整套系统框架结构，都是使用现成的框架及算法等内容进行组合构建的整套系统。
vscode-setting-python.zip
04-04
vscode配置python。 vscode 前端，go， python开发的一些配置。
Python自动化--1.Python环境安装-linux
weixin_55985097的博客
04-10 3702
首先是Python可以说是Linux运维工程师首选的编程语言，而且Python在自动化运维方面深入人心，受到了大家的追捧和较为广泛的应用。
Python新闻网站项目-8.Django前端Web部署
热门推荐
Mr数据杨
02-25 3万+
我的第一个 Django开发项目，虽然完整代码已经经过时间的流失已经遗失，还是当时有记笔记的习惯，留存至今。基于基于Python基于Scrapy+Gerapy+NLP+Django搭建的新闻整套系统框架结构，都是使用现成的框架及算法等内容进行组合构建的整套系统。
已解决Using cached python-dateutil-2.8.2 py2.py3-none-any.whl (247 KB)
努力让自己发光，对的人才能迎着光而来
05-14 8999
已解决Collecting pandas ==2.0.1 Using cached pandas-2.0.1-cp39-cp39 win amd64.whl (10.7MB) Collecting python dateutil>-2.8.2 (from pandas 2.0.1) Using cached python-dateutil-2.8.2 py2.py3-none-any.whl (247 KB) ERROR: Could not install packages due to an 0SErr
Python网站导航项目-4.前端渲染模板
Mr数据杨
02-14 1万+
每每用到别人的导航网站会充斥的各种的广告，以及很多无用的内容，用起来真的很烦人。由于本人开发的项目比较多并且服务器资源有限，因此会有先择性的开发部分系统进行展示，如果网页打不开私信联系我进行项目启动。
已解决Cannot open D:\Soft\Python36\Scripts\pip3-script.py
努力让自己发光，对的人才能迎着光而来
03-30 1万+
已解决Cannot open D:\Soft\Python36\Scripts\pip3-script.py
Python3 flask-socketio 整合vue
可控的事情要谨慎，不可控的事情要乐观。
06-10 2780
python3 flask-socketio 整合vue
Python个人主页项目-4.前端渲染模板
Mr数据杨
02-15 1万+
学习Python已经6年有余，从事的行业数据分析师，算法工程师、爬虫工程师、目前准备正式入行全栈，先做一个个人的博客系统，用来记录日常工作的每一天，也是为自己做一个展示自己的空间。同时也为大家提供一套开源的个人主页搭建模板给大家使用。由于本人开发的项目比较多并且服务器资源有限，因此会有先择性的开发部分系统进行展示，如果网页打不开私信联系我进行项目启动。网站的内容随着我个人的实际情况会有所修改。
NPM 相关命令，报错 node-gyp... 的解决方法
sinat_36112136的博客
06-10 7194
'node-gyp-build' is not recognized as an internal or external command, operable program or batch file. npm ERR! gyp verb `which` failed Error: not found: python2
已解决paddlepaddle 1.8.5 requires opencv-python＜=4.2.0.32, but you have opencv-python 4.3.0.38 which is
努力让自己发光，对的人才能迎着光而来
02-07 7963
报错信息：ERROR: pip’s dependency resolver does not currently take into account all the packages that are installed. This behaviour is the source of the following dependency conflicts. paddlepaddle 1.8.5 requires opencv-python
Python库 | edge_tts-2.0.3-py3-none-any.whl
02-26
python库。 资源全名：edge_tts-2.0.3-py3-none-any.whl
python-learning.zip
最新发布
06-20
13.进程和线程.md 14.网络编程入门和网络应用开发.md 15.图像和办公文档处理.md 16-20.Python语言进阶.md 21-30.Web前端概述.md 31-35.玩转Linux操作系统.md 36.关系型数据库和MySQL概述md 37.SQL详解md38深入MySQL....
Python库 | spidy_web_crawler-1.5.3.1-py3-none-any.whl
02-20
python库，解压后可用。 资源全名：spidy_web_crawler-1.5.3.1-py3-none-any.whl
Python库 | rst2html5-tools-0.2.1.tar.gz
03-10
python库。 资源全名：rst2html5-tools-0.2.1.tar.gz
2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index".
itwangyang520的博客
05-04 6122
1.在写循环的时候遇见这个的 1.原因： index的值不能有空格，并且要为字符串类型 2.解决方法:加toString()这个方法
gulp -version出现Local version: Unknown 解决
itwangyang520的博客
06-07 5585
1.问题 2. 输入cnpm install --save-dev gulp 没有cnpm ，先安装cnpm 输入npm install -g cnpm --registry=https://registry.npm.taobao.org 3. 输入是否安装OK gulp --version
Chrome等浏览器下出现net::ERR_BLOCKED_BY_CLIENT的解决办法
itwangyang520的博客
03-20 4782
今天开发遇见了离奇的错误： 当我们在做开发时，调试页面图片会出现部分图片无法正常显示，并且确认图片的地址正确； 按F12 Debug查看报错原因，提示net::ERR_BLOCKED_BY_CLIENT错误，但当我们点击图片地址发现，图片地址并无错误； 遇到这类情况，一般都是浏览器安装的某个第三方扩展程序已阻止对此网页的访问，例如下图： 解决办法： 当我们查看浏览器...
2020年-web前端-最新-最全-最快的面试咨询-面试真题-面试常考题
itwangyang520的博客
04-19 3795
HTML 面试知识点总结 本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1. DOCTYPE 的作用是什么？ 2. 标准模式与兼容模式各有什么区别？ 3. HTML5 为什么只需要写 ，而不需要引入 DTD？ 4. SGML 、 HTML 、XML 和 XHTML 的区别？ 5. DTD 介绍 6. 行内元素定义 7. 块级元素定义 ...
root@localhost:/etc/netplan# cat netconf.yaml network: ethernets: fm1-mac3: addresses: - 172.20.50.23/16 gateway4: 172.20.1.254 nameservers: addresses: - 114.114.114.114 fm1-mac10: addresses: - 192.169.11.103/16 fm1-mac10: addresses: - 192.169.11.104/16 这个是我服务器中的netconf.yaml文件，目前服务器中python和apache已经安装好了，我现在的需求是想在前端修改netconf.yaml文件中的ip配置，然后为了防止其他人修改错误，文件中的除了ip其他地方是不允许修改的。 前端需要展示出netconf.yaml文件，并且直接在这个文件上修改，这个代码该怎么用python写呢？
06-06
你可以使用 Flask 框架来实现这个功能。首先，你需要在 Flask 中创建一个路由，用于展示和修改 `netconf.yaml` 文件。路由的代码如下： ```python from flask import Flask, render_template, request app = Flask(__name__) @app.route("/") def index(): with open("/etc/netplan/netconf.yaml", "r") as f: content = f.read() return render_template("index.html", content=content) @app.route("/save", methods=["POST"]) def save(): ip1 = request.form.get("ip1") ip2 = request.form.get("ip2") with open("/etc/netplan/netconf.yaml", "r") as f: content = f.read() content = content.replace("172.20.50.23/16", ip1).replace("192.169.11.103/16", ip2).replace("192.169.11.104/16", ip2) with open("/etc/netplan/netconf.yaml", "w") as f: f.write(content) return "保存成功！" ``` 以上代码中，`index()` 函数用于展示 `netconf.yaml` 文件的内容，`save()` 函数用于保存用户修改后的内容。其中，`index.html` 是一个模板文件，用于展示 `netconf.yaml` 文件的内容和表单，代码如下： ```html <!DOCTYPE html> <html> <head> <title>netconf.yaml</title> </head> <body> <h1>netconf.yaml</h1> <form action="/save" method="POST"> <textarea name="content" rows="20" cols="80">{{ content }}</textarea><br> <label>IP1:</label><input type="text" name="ip1" value="172.20.50.23/16"><br> <label>IP2:</label><input type="text" name="ip2" value="192.169.11.103/16"><br> <input type="submit" value="保存"> </form> </body> </html> ``` 以上代码中，表单中的文本框用于输入修改后的 IP 地址，用户修改后点击保存按钮即可将修改后的内容保存到 `netconf.yaml` 文件中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值