StOne'

3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)

Java

第三阶段模块一前端入门(HTML、CSS、JS)
- 任务一 (HTML)
- - 1、HTML 介绍与规范
  - 2、HTML 的使用
  - 3、HTML5新特性
- 任务二 (CSS)
- - 1、CSS介绍
  - 2、CSS与HTML结合方式
  - 3、CSS的使用
  - 4、CSS3新特性
- 任务三 (JavaScript)
- - 1、JavaScript介绍
  - 2、HTML和JavaScript结合方式
  - 3、JavaScript的使用
  - 4、DOM操作
  - 5、BOM操作
- 模块一作业
第三阶段模块二前端高级(jQuery、ES6、Bootstrap)
- 任务四 (jQuery)
- - 1. jQuery介绍
  - - 1.1 jQuery能做什么?
    - 1.2 jQuery的优势
    - 1.3 jQuery下载
  - 2. jQuery的使用
  - - 2.1 基本的语法介绍
    - 2.2 jQuery对象与DOM对象
    - 2.3 选择器
    - - 2.3.1 基本选择器
      - 2.3.2 层次选择器
      - 2.3.3 属性选择器
      - 2.3.4 过滤选择器
    - 2.4 事件
    - - 2.4.1 鼠标事件
      - 2.4.2 键盘事件
      - 2.4.3 表单事件
      - 2.4.4 鼠标悬停复合事件
      - 2.4.5 连续点击复合事件
      - 2.4.6 事件的动态绑定
    - 2.5 元素的隐藏和显示
    - - 2.5.1 改变元素的宽和高（带动画效果）
      - 2.5.2 改变元素的高（拉伸效果）
      - 2.5.3 不改变元素的大小（淡入淡出效果）
      - 2.5.4 链
    - 2.6 DOM和CSS的操作
    - - 2.6.1 属性函数
      - 2.6.2 样式函数
      - 2.6.3 类样式函数
      - 2.6.4 节点操作
    - 2.7 遍历节点
    - - 2.7.1 祖先元素
      - 2.7.2 同辈元素
      - 2.7.3 后代元素
      - 2.7.4 元素的过滤
  - 3. 案例
  - - 3.1 手风琴特效
    - 3.2 购物车结算
- 任务五 (ES6)
- - 1.ECMAScript6 简介
  - - 1.1 ECMAScript 和 JavaScript 的关系
    - 1.2 ES6 与 ECMAScript 2015 的关系
  - 2. 搭建前端环境
  - - 2.1 Node 环境
    - - 2.1.1 什么是Node.js
      - 2.1.2 Node.js有什么用
      - 2.1.3 安装
      - 2.1.4 服务器端应用开发（了解）
    - 2.2 NPM环境
    - - 2.2.1 什么是NPM
      - 2.2.2 NPM工具的安装位置
      - 2.2.3 使用npm管理项目
      - 2.2.4 修改npm镜像和存储地址
      - 2.2.5 npm install命令的使用
  - 3. ES6基本语法
  - - 3.1 let声明变量
    - 3.2 const声明常量
    - 3.3 解构赋值
    - - 3.3.1 数组解构
      - 3.3.2 对象解构
    - 3.4 模板字符串
    - - 3.4.1 定义多行字符串
      - 3.4.2 字符串插入变量和表达式
      - 3.4.3 字符串中调用函数
    - 3.5 声明对象简写
    - 3.6 定义方法简写
    - 3.7 对象拓展运算符
    - - 3.7.1 拷贝对象(深拷贝)
      - 3.7.2 合并对象
    - 3.8 函数的默认参数
    - 3.9 函数的不定参数
    - 3.10 箭头函数
    - 3.11 Promise（了解）
    - 3.12 模块化
    - - 3.12.1 传统的模块化
      - 3.12.2 ES6的模块化
    - 3.13 babel环境
    - - 3.13.1 安装babel客户端环境
      - 3.13.2 安装转码器
    - 3.14 ES6模块化的另一种写法
    - - 3.14.1 as的用法
      - 3.14.2 默认导出
      - 3.14.3 重命名export和import
- 任务六 (Bootstrap)
- - 1.bootstrap简介
  - - 1.1 什么是Bootstrap？
    - 1.2 为什么使用 Bootstrap？
    - 1.3 下载与使用
  - 2.Bootstrap的使用
  - - 2.1 表格
    - - 2.1.1 丰富的标签
      - 2.1.2 好看的类样式
      - 2.1.3 情景色类样式
      - 2.1.4 响应式表格
    - 2.2 表单
    - - 2.2.1 表单布局
      - 2.2.1.1 默认布局
        
        2.2.1.2 内联布局
      - 2.2.2 表单控件
      - 2.2.2.1 输入框
        
        2.2.2.2 文本框
        
        2.2.2.3 复选框
        
        2.2.2.4 复选按钮
        
        2.2.2.5 单选框
        
        2.2.2.6 单选按钮
    - 2.3 按钮
    - 2.4 图片
    - 2.5 下拉菜单组件
    - 2.6 分页组件
    - 2.7 栅格系统
    - 2.8 缩略图组件
    - 2.9 模态框组件
  - 3.案例
  - - 3.1 首页轮播大图
    - 3.2 响应式导航条
- 第三阶段模块二作业

第三阶段模块一前端入门(HTML、CSS、JS)

任务一 (HTML)

– 老孙

1、HTML 介绍与规范

介绍

HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)
专门制作网页的计算机语言
普通的文本就是英文单词，英文字母一样的存在。
超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。
比如：我们都是普通人，但是有些人经过国家的选拔，穿上警服之后，他就被赋予了执法的特殊权利，普通人是没有执法权的。
标记/标签：字母img只是普通的字母，没什么特殊的含义。而被加上尖括号后，在网页的世界中，就具备了显示图片的作用。

使用记事本开发第一个网页

在计算机任意的位置，创建一个空白的记事本
重点：文件的后缀名必须是 “htm” 或 “html”
鼠标右键文件，选择打开方式为"记事本"，输入下面代码

<html>
	<head>
		<title>拉钩有我title>
	head>
	<body>
		必须火！
	body>
html>

保存文件，双击文件会以计算机默认的浏览器运行，你的第一个网页就制作完成了！
注意：
1.标签它代表当前页面是一个HTML
2.标签中可以声明HTML页面的相关信息
3.标签中它主要是用于显示页面信息
4.标签要有开始，有结束，成双成对
4.开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭

5.大多数标签它具有属性,属性值要使用引号引起来。
6.HTML它本身是不区分大小写的。

下载和安装 VSCode

记事本编写网页太难了，我们推荐一款编写网页的神器！

1. 下载地址

https://code.visualstudio.com/

2. 初始中文设置

安装vscode之后，在界面的左侧，选择安装中文插件。
点击安装后，右下角会弹出重启的窗口
重启之后，界面就是中文了。

3. 创建项目

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如: vscode目录然后打开vscode软件，在vscode软件中选择 File -> Open Folder 打开刚才创建的文件夹右键目录，创建子目录lagou-html，在lagou-html目录下创建文件，输入Test1.html在代码编辑区，最上面输入！回车，就是见证奇迹的时刻

4. 运行页面

需要安装插件 “open in browser ”
安装完插件，右键想要运行的页面文件，或者使用快捷键 alt+b
推荐使用chrome谷歌浏览器，精简，速度快。
先安装好chrome浏览器
修改默认的浏览器：首页的设置
添加代码
"open-in-browser.default":"chrome"
保存成功后，使用默认浏览器打开页面就是chrome了，当然你也可以修改成自己喜欢的浏览器，比如火狐等

5. 修改软件主题颜色

文件 -> 首选项 -> 颜色主题
字体大小：文件 -> 首选项 -> 设置 -> 文本编辑器 -> 字体

2、HTML 的使用

文件标签

标签：代表当前书写的是一个HTML文档
标签：存储的本页面的一些重要的信息，它不会显示
标签：有一个子标签它是用于定义页面的标题的</li> <li><body> 标签：书写的内容会显示出来</li> <li><body> 标签的属性 1.text 用于设置文字颜色 2.bgcolor 用于设置页面的背景色 3.background 用于设置页面的背景图片 <a href="http://img.e-com-net.com/image/info8/637a72200d2e4e6ab29ae311a394073a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/637a72200d2e4e6ab29ae311a394073a.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第5张图片" width="650" height="146" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/a2ad96dfa066462eb2b7e898e720075c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a2ad96dfa066462eb2b7e898e720075c.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第6张图片" width="650" height="201" style="border:1px solid black;"></a></li> </ul> 排版标签 1. HTML注释 <ul> <li> <a href="http://img.e-com-net.com/image/info8/0230dfcaa5974cb4afa94341348ae868.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0230dfcaa5974cb4afa94341348ae868.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第7张图片" width="650" height="173" style="border:1px solid black;"></a></li> </ul> 2. 换行标签 <ul> <li> 标签就是一个换行（回车）功能标签，标签中的 / 可有可无的。</li> <li>有/是html语言的标准化，但是html语言是一门不那么严谨的语言</li> </ul> 3. 段落标签 <ul> <li>在标签中的内容,会在开始与结束之间产生一个空白行，并且它会自动换行.</li> <li>常用属性 align 它的作用是设置段落中的内容对齐方式可取值有 left right cente <a href="http://img.e-com-net.com/image/info8/f8ac9147c95145b8ba9efa8480d6d186.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f8ac9147c95145b8ba9efa8480d6d186.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第8张图片" width="650" height="146" style="border:1px solid black;"></a></li> </ul> 4. 水平线标签 <ul> <li><hr>标签会在页面上产生一个水平线</li> <li>对于hr标签它有常用属性: align：可取值有left right center 代表水平线位置 size：代表水平线厚度（粗细） width：代表水平线宽度 color：水平线的颜色 <a href="http://img.e-com-net.com/image/info8/761272596c7f43e7ba6b8f194e11d814.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/761272596c7f43e7ba6b8f194e11d814.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第9张图片" width="650" height="175" style="border:1px solid black;"></a></li> <li>单位：size=“5”，5是默认的单位，为"像素"/“像素点”，像素就是构成计算机图片的最小单位！</li> <li>也可以使用百分比，size=“50%” <a href="http://img.e-com-net.com/image/info8/45c50e9d7c09463e83cd95c6a27e10f1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/45c50e9d7c09463e83cd95c6a27e10f1.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第10张图片" width="650" height="165" style="border:1px solid black;"></a></li> </ul> 5. 分区标签 <ul> <li>div是一个块标签，用来进行布局的 （透明衣柜，乱七八糟的衣服，整洁的放在衣柜里） （块：这一块我站了，后面不允许有其他元素）</li> <li>普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版</li> <li>div与span都是“容器”的作用，具体区别: ▹ div会自动换行，我们也叫这样的标签为块级元素 ▹ span标签它不会自动换行，我们也叫它为行内元素 ▹ div：整体划分区块 ▹ span：局部划分 <a href="http://img.e-com-net.com/image/info8/91013d0ace3b41389bee6154f232e260.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/91013d0ace3b41389bee6154f232e260.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第11张图片" width="650" height="147" style="border:1px solid black;"></a></li> <li>上图，两个div的区别是显而易见的，后面我们再具体学习css语法</li> </ul> 字体标签 1. 字体标签 <ul> <li>标签可以设置字体，字的大小及颜色，常用属性： face:用于设置字体，例如宋体隶书楷体 size:用于设置字的大小（大小默认设置1-7，7最大，想更大，往后学css即可） color:用于设置字的颜色</li> <li>注： 我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。 （红色：分0~255种红色） （绿色：分0~255种绿色） （蓝色：分0~255种蓝色）</li> <li>每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示。如纯红色表示为（255，0，0），十六进制表示为#FF0000。按这种表达方式，理论上我们可以得到256 * 256 * 256 = 16777216种颜色。</li> </ul> <ol> <li>使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为#cc3300 时，可简化成 #c30 这种方式 <code><body bgcolor="#666"></code></li> <li>RGB颜色表示法：RGB（x,y,z）。x、y、z是0 ～ 255之间的整数。rgb字母大小写无所谓 <code><body bgcolor="rgb(11,11,11)"></code></li> </ol> <ul> <li>（在线颜色选择器： http://www.86y.org/code/colorpicker/color.html ） <a href="http://img.e-com-net.com/image/info8/82322bad98154923810b092cc44f6796.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/82322bad98154923810b092cc44f6796.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第12张图片" width="650" height="110" style="border:1px solid black;"></a></li> <li>百度搜索：字魂网，下载一个免费的字体，并安装到计算机中。在我们的网页中显示出来！</li> </ul> 2. 标题标记 <ul> <li>给一段文字起一个标题 <h1> ----- <h6> h1最大 h6最小，它们代表的是标题， 自动换行，字体加粗，标题与标题之间产生一定的距离</li> <li>注意:在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套 <a href="http://img.e-com-net.com/image/info8/9a24853d11c54c1b84239b6378a1f0ca.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9a24853d11c54c1b84239b6378a1f0ca.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第13张图片" width="650" height="279" style="border:1px solid black;"></a></li> </ul> 3. 格式化标签 <ul> <li>：字体加粗</li> <li>：字体倾斜</li> <li><del>：<del>删除线</del></li> <li>：下划线</li> </ul> <a href="http://img.e-com-net.com/image/info8/3f2312c1448d4b0bb7ef38b862c6f2e2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3f2312c1448d4b0bb7ef38b862c6f2e2.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第14张图片" width="650" height="153" style="border:1px solid black;"></a> 列表标记 <ul> <li>ol：有序列表 type=‘A’：字母排序 type=‘I’：罗马排序 start=“3” 序列从几开始</li> <li>ul：无序列表 type=“disc”：默认，实心圆 type=“square”：方块 type=“circle”：空心圆</li> </ul> <a href="http://img.e-com-net.com/image/info8/b00bd24233e147adaf9ce0efad491d60.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b00bd24233e147adaf9ce0efad491d60.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第15张图片" width="650" height="312" style="border:1px solid black;"></a> 图像标签 <ul> <li>它可以让我们在网页引入一张图片，常用属性：</li> </ul> <ol> <li>src 代表的图片的路径</li> <li>width 图片的宽度 px</li> <li>height 图片的高度 px （宽高中只设置一个另外一个等比例变化）</li> <li>border 用于设置图片的边框 px</li> <li>alt 如果图片不可以显示时，默认显示的文本信息</li> <li>title鼠标悬停图片上，默认显示的文本信息</li> <li>align 图片附件文字的对齐方式，可取值有 left：把图像对齐到左边 right：把图像对齐到右边 middle：把图像与中央对齐 top：把图像与顶部对齐 bottom：把图像与底部对齐（默认）</li> </ol> <a href="http://img.e-com-net.com/image/info8/5b40fc165e214352bffb9430ac194805.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5b40fc165e214352bffb9430ac194805.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第16张图片" width="650" height="238" style="border:1px solid black;"></a> 超连接标签 <ul> <li><a>标签,可以实现跳转到其它页面操作.</li> <li>超链接内容不仅可以是文本，也可以是图片等信息</li> <li>常用属性: 1.href 代表的我们要跳转的路径 2.target 这个属性规定在何处打开这个链接文档，可取值： _ blank 在新窗口中打开页面 _ self 默认。在本窗口打开页面</li> </ul> <a href="http://img.e-com-net.com/image/info8/2b51348b874d4071864000a136c02f18.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2b51348b874d4071864000a136c02f18.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第17张图片" width="650" height="148" style="border:1px solid black;"></a> <ul> <li>功能性连接：</li> </ul> <pre><code class="prism language-html">1.发邮件 <a href="mailto:sunguoan@163.com">联系站长</a> 2.QQ聊天窗口 <a href="tencent://message/?uin=19998539&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/> </a> </code></pre> 表格 <ul> <li> <table>：定义一个表格 ○ border：边框，取值是像素为单位 ○ width 代表的表格的宽度 ○ align 代表表格的对齐方式；取值 ▸ left 左对齐表格 ▸ right 右对齐表格 ▸ center 居中对齐表格 ○ cellspacing：单元格间距（通常设置0表示单线表格） </li> <li> <tr>：表格中的行（Table Row） ○ align 代表表格的对齐方式；取值 ▸ left 左对齐内容（默认值） ▸ right 右对齐内容 ▸ center 居中对齐内容（th 元素的默认值） </li> <li> <td>：表格中的数据单元格（Table DataCell） ○ colspan 指示列的合并 ○ rowspan 指示行的合并 </li> </ul> <a href="http://img.e-com-net.com/image/info8/ce39ebe97ba6489ea8e9f239b3b4b7fd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ce39ebe97ba6489ea8e9f239b3b4b7fd.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第18张图片" width="650" height="113" style="border:1px solid black;"></a> <pre><code class="prism language-html"><table border="1" width="400px" align="center" cellspacing="0"> <tr align="center"> <td colspan="3">计划统计表</td> </tr> <tr> <td rowspan="3">收入金额</td> <td>5</td> <td>6</td> </tr> <tr> <td>8</td> <td>9</td> </tr> <tr> <td>11</td> <td>12</td> </tr> </table> </code></pre> 表单标签 <ul> <li>表单可以让我们将录入信息携带到服务器端。</li> <li>简单说，通过表单可以将要提交的数据提交到指定的位置。</li> <li>但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器。</li> <li>常见的登录页面、注册页面都离不开表单的应用</li> </ul> 1. form属性 <ul> <li>action：整个表单提交的目的地（回家的地址）</li> <li>method：表单提交的方式（回家的交通方式） get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录） post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）</li> </ul> 2. 表单中的元素(控件) <ul> <li><input>元素的type属性 ○ text：默认值，普通的文本输入框 • placeholder属性：提示文本 • maxlength属性：最多能输入字符数量 ○ password：密码输入框 ○ checkbox：多选框/复选框 • checked：默认被选中 ○ radio：单选按钮 ○ file：上传文件 ○ reset：重置按钮 ○ submit：提交按钮 ○ button：普通按钮</li> <li><select>：下拉列表/下拉框 ○ <option>：列表中的项 • selected：被选中</li> <li><textarea>：文本域（多行文本框） ○ 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height和 width 属性。</li> <li><button>：按钮 ○ 在form表单中，作用和submit一样 ○ 不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）</li> </ul> <pre><code class="prism language-html"><form action="baidu" method="GET"> <p>帐号：<input name="a" type="text" placeholder="请输入帐号..." maxlength="5" ></p> <p>密码：<input name="b" type="password"></p> <p>爱好： <input name="hobby" type="checkbox"> 抽烟 <input name="hobby" type="checkbox" checked="checked"> 喝酒 <input name="hobby" type="checkbox"> 烫头 <input name="hobby" type="checkbox"> 泡澡 </p> <p>性别： <input type="radio" name="sex"> 男 <input type="radio" name="sex" checked="checked"> 女 </p> <p>身份： <input type="radio" name="role"> ceo <input type="radio" name="role"> cto <input type="radio" name="role"> coo <input type="radio" name="role" checked="checked"> ufo </p> <p>头像： <input type="file"> </p> <p>血型： <select> <option>A型</option> <option>B型</option> <option>C型</option> <option selected="selected">O型</option> </select> </p> <p>个人简介： <textarea cols="10" rows="5"></textarea> </p> <p> <input type="reset" value="清空"> <input type="submit" value="提交"> <input type="button" value="取消"> <button>保存</button> </p> </form> <button>测试</button> </code></pre> <ul> <li>注意事项： 1.所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区识别多个元素之间的不同） 2.单选框要想可以一次只选择一个，要具有相同的name值 3.所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值</li> </ul> 框架标签 <ul> <li>通过<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。（下图是经典的：121）</li> <li>注意，框架标签和body标签不共存。“有你没我，有我没你”</li> </ul> <a href="http://img.e-com-net.com/image/info8/810864bf018448e6923d472977da458a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/810864bf018448e6923d472977da458a.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第19张图片" width="650" height="322" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <frameset rows="10%,*,13%"> <frame src="top.html"></frame> <frameset cols="15%,*"> <frame src="left.html"></frame> <frame src="right.html"></frame> </frameset> <frame src="foot.html"></frame> </frameset> </html> </code></pre> <ul> <li>top.html、left.html、right.html、foot.html 四个页面内容一样，稍微改下文字而已，以top.html为例</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <h1>顶部导航区域</h1> </body> </html> </code></pre> 其它标签与特殊字符 1. <meta>标签 <ul> <li><meta>标签必须写在<head>标签之间.</li> </ul> <pre><code class="prism language-html"><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </code></pre> <ol> <li>charset=“UTF-8” 当前页面的字符编码 gbk：中文简体</li> <li>name=“viewport” content=“width=device-width, initial-scale=1.0” 这里的名字是 viewport （显示窗口） 数据是文本内容 content="width=device-width, initial-scale=1.0"也就是显示窗口宽度是客户端的屏幕宽度（就是满屏！），显示的文字和图形的初始比例是1.0（针对移动设备的设置）</li> <li>http-equiv=“X-UA-Compatible” content=“ie=edge” 每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染</li> </ol> <ul> <li>通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面</li> </ul> <pre><code class="prism language-html"><meta http-equiv="refresh" content="5; url=http://www.lagou.com"> </code></pre> <ul> <li>注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径。</li> </ul> 2. <link>标签 <ul> <li>后面我们会使用link标签来导入css</li> <li>注意:link标签也必须写在<head>标签中。</li> </ul> 3. 特殊字符 <a href="http://img.e-com-net.com/image/info8/d1cbf6ab746c4d6ebd75e62fd2364c9f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d1cbf6ab746c4d6ebd75e62fd2364c9f.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第20张图片" width="650" height="388" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/72413af064ee4e1bb417940fe626031a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/72413af064ee4e1bb417940fe626031a.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第21张图片" width="650" height="359" style="border:1px solid black;"></a> <h3>3、HTML5新特性</h3> HTML4与HTML5的区别 <ul> <li>H5包含H4 <a href="http://img.e-com-net.com/image/info8/02b2f46e21de4ad0afa51f1ea474ecee.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/02b2f46e21de4ad0afa51f1ea474ecee.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第22张图片" width="650" height="133" style="border:1px solid black;"></a></li> </ul> <ol> <li>大小写不敏感 (1) 标签 (2) 属性 (3) 属性的值</li> </ol> <pre><code class="prism language-html"><inPUT tYPe="pasSWord"/> </code></pre> <ol start="2"> <li>引号可省略</li> </ol> <pre><code class="prism language-html"><input type="password"> <input type=password> </code></pre> <ol start="3"> <li>省略了结尾标签 说是省略，其实运行起来，查看源代码，html是自动帮我们补全了</li> </ol> <pre><code class="prism language-html"><p>哈哈哈哈哈哈哈 <p>哈哈哈哈哈哈哈 </code></pre> 新增语义化标签 <ul> <li>html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此</li> <li>新增许多语义化标签，让div“见名知意”（是div只是换了个名） ▹ section标签：表示页面中的内容区域，部分，页面的主体部分 ▹ article标签：文章 ▹ aside标签：文章内容之外的，标题 ▹ header标签：头部，页眉，页面的顶部 ▹ hgroup标签：内容与标题的组合 ▹ nav标签：导航 ▹ figure标签：图文并茂 ▹ foot：页脚，页面的底部</li> </ul> <a href="http://img.e-com-net.com/image/info8/932aafc318c445d3a0e43e0f227d999b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/932aafc318c445d3a0e43e0f227d999b.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第23张图片" width="650" height="198" style="border:1px solid black;"></a> 媒体标签 <ul> <li>想在网页上播放视频，就要使用，属性有： ▹ src：媒体资源文件的位置 ▹ controls：控制面板 ▹ autoplay：自动播放（谷歌失效，360浏览器可以） ▹ loop：循环播放</li> </ul> <pre><code class="prism language-html"><video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video> </code></pre> 新增表单控件 <ul> <li>表单的控件更加丰富了 ○ <input>，修改type属性： ▸ color：调色板 ▸ date：日历 ▸ month：月历 ▸ week：周历 ▸ number：数值域 ▹ min：最小值（默认值是1） ▹ max：最大值（默认值无上限） ▹ step：递增量 ▸ range：滑块 ▸ search：搜索框（带×号，可一键删除框中内容） ○ 进度条<progress/> ○ 高亮 ○ 联想输入框<datalist> （模糊查询） ▸ 选项<option></li> </ul> <h2> 任务二 (CSS)</h2> <h3> 1、CSS介绍</h3> 什么是CSS？ <a href="http://img.e-com-net.com/image/info8/930de3a4676b410d962703c6ad3aed04.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/930de3a4676b410d962703c6ad3aed04.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第24张图片" width="650" height="319" style="border:1px solid black;"></a> <ul> <li>CSS是指层叠样式表 cascading style sheets</li> <li>通过CSS可以让我们定义HTML元素如何显示。</li> <li>CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。</li> <li>通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。</li> <li>(html创造楼骨架，css设计装修)</li> </ul> <h3> 2、CSS与HTML结合方式</h3> 第一种方式内联/行内样式 <ul> <li>就是在我们的HTML标签上通过style属性来引用CSS代码。</li> <li>优点:简单方便</li> <li>缺点:只能对一个标签进行修饰。</li> </ul> <a href="http://img.e-com-net.com/image/info8/73a2ad448a3e41a993773b95ac801326.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/73a2ad448a3e41a993773b95ac801326.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第25张图片" width="650" height="111" style="border:1px solid black;"></a> 第二种方式内部样式表 <ul> <li>我们通过<style>标签来声明我们的CSS. 通常<style>标签我们推荐写在head和body之间，也就是“脖子”的位置</li> <li>优点：可以通过多个标签进行统一的样式设置</li> <li>缺点：它只能在本页面上进行修饰</li> <li>语法：选择器 {属性:值;属性:值} ▹ 选择器：你要修饰的目标(我们班有10个同学，你要给张三化妆，这个选择器就应该是张三) ▹ 属性：画口红 ▹ 值：红色口红</li> </ul> <a href="http://img.e-com-net.com/image/info8/549da69036d54855a586479e09291259.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/549da69036d54855a586479e09291259.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第26张图片" width="650" height="187" style="border:1px solid black;"></a> 第三种方式外部样式表 <ul> <li>我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css</li> <li>在项目根目录下，创建css目录，在css目录中创建css文件 css01.css</li> <li>在<head>中使用<link>标签引用外部的css文件 ▹ href=‘路径’ ▹ rel=‘stylesheet’</li> </ul> <a href="http://img.e-com-net.com/image/info8/780a491bb28c4c71a667f2b58969fc3f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/780a491bb28c4c71a667f2b58969fc3f.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第27张图片" width="650" height="236" style="border:1px solid black;"></a> <ul> <li>还可以使用另一种引入css文件的方式：</li> </ul> <pre><code class="prism language-html"><style> @import 'css/css01.css' </style> </code></pre> <ul> <li>关于外部导入css使用与@import的区别? 1.加载顺序不同 @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。 如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面； 2.@import方式导入css样式，它是不支持javascript的动态修改的。而link支持。(link对javascript的支持更加亲切，import对javascript就不太友好)</li> <li>三种样式表的优先级：满足就近原则 内联 > 内部 > 外部</li> </ul> <h3> 3、CSS的使用</h3> css中选择器 1. 元素(标签)选择器 <ul> <li>它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称.</li> </ul> <a href="http://img.e-com-net.com/image/info8/98009f6468b3405ea9159d2cf14a6183.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/98009f6468b3405ea9159d2cf14a6183.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第28张图片" width="650" height="296" style="border:1px solid black;"></a> 2. 类选择器 <ul> <li>类选择器在使用时使用"."来描述，它描述的是元素上的class属性值</li> </ul> <a href="http://img.e-com-net.com/image/info8/82d4d6094268493cbd8cdd2a25d79ad4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/82d4d6094268493cbd8cdd2a25d79ad4.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第29张图片" width="650" height="312" style="border:1px solid black;"></a> 3. id选择器 <ul> <li>它只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值。</li> <li>id选择器，比类选择器更具有唯一性</li> </ul> <a href="http://img.e-com-net.com/image/info8/c0c905277af941529d01c3669c4b27f7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c0c905277af941529d01c3669c4b27f7.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第30张图片" width="650" height="259" style="border:1px solid black;"></a> 4. 选择器组 <ul> <li>逗号表示，谁和谁。</li> <li>例如，我有手机，你有手机，他也有手机，一条一条写太麻烦，就可以合并编写</li> </ul> <pre><code>我,你,他{ 手机 } </code></pre> <a href="http://img.e-com-net.com/image/info8/e60e36a3ba834f44b07cd2e4791d56a2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e60e36a3ba834f44b07cd2e4791d56a2.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第31张图片" width="650" height="284" style="border:1px solid black;"></a> 5. 派生选择器 <ul> <li>就是子类选择器</li> <li>子代：父子关系（隔代不管） div>p：（子p抚养（孙p不抚养））div的子集元素被选中，只读取一级</li> <li>后代：父子孙，曾孙，从孙… div p：（子孙p都抚养）div下的p标签都被选中，忽略层级</li> </ul> <a href="http://img.e-com-net.com/image/info8/ab2e101956db425abb5dcd22afc566db.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ab2e101956db425abb5dcd22afc566db.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第32张图片" width="650" height="263" style="border:1px solid black;"></a> 6. CSS伪类 <ul> <li>CSS伪类可对css的选择器添加一些特殊效果</li> <li>伪类属性列表： ▹ :active 向被激活的元素添加样式。 ▹ :hover 当鼠标悬浮在元素上方时，向元素添加样式。 ▹ :link 向未被访问的链接添加样式。 ▹ :visited 向已被访问的链接添加样式。 ▹ :first-child 向元素的第一个子元素添加样式。</li> <li>超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha</li> </ul> <pre><code class="prism language-css">a:link { color: #FF0000} /* 未访问的链接 */ a:visited { color: #00FF00} /* 已访问的链接 */ a:hover { color: #FF00FF} /* 鼠标移动到链接上 */ a:active { color: #0000FF} /* 选定的链接 */ </code></pre> <a href="http://img.e-com-net.com/image/info8/42519fbd8a3c4cfc916f55051883f09d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/42519fbd8a3c4cfc916f55051883f09d.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第33张图片" width="650" height="248" style="border:1px solid black;"></a> CSS基本属性 1. 文本属性 <ul> <li>指定字体：font-family : value;</li> <li>字体大小：font-size : value; ▹ px：像素 ▹ em：倍数</li> <li>字体加粗：font-weight : normal/bold;</li> <li>文本颜色：color : value;</li> <li>文本排列：text-align : left/right/center;</li> <li>文字修饰：text-decoration : none/underline;</li> <li>行高：line-height : value;</li> <li>首行文本缩进：text-indent : value （2em）;</li> </ul> <a href="http://img.e-com-net.com/image/info8/7a9f1c29f3ba47b0b1a670156b29a72b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7a9f1c29f3ba47b0b1a670156b29a72b.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第34张图片" width="650" height="128" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/28b937485c23477a8686eeaddb3ae5a0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/28b937485c23477a8686eeaddb3ae5a0.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第35张图片" width="650" height="221" style="border:1px solid black;"></a> 2. 背景属性 <ul> <li>CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。</li> <li>background-color 设置元素的背景颜色。</li> <li>background-image 把图像设置为背景。</li> </ul> <pre><code class="prism language-css">background-image: url('img/1.jpg'); </code></pre> <ul> <li>background-repeat 设置背景图像的墙纸效果，是否及如何重复 ▹ repeat：在垂直方向和水平方向重复，为重复值 ▹ repeat-x：仅在水平方向重复 ▹ repeat-y：仅在垂直方向重复 ▹ no-repeat：仅显示一次</li> <li>background-position 设置背景图像的起始位置</li> <li>1：控制水平方向 x轴：正值，向右移动；负值，向左移动</li> <li>2：控制垂直方向 y轴：正值，向下移动；负值，向上移动</li> </ul> <pre><code class="prism language-css">/* 图片向左移动50px，向下移动100px （可以为负值） */ background-position:50px 100px; </code></pre> <ul> <li>background-attachment 背景图像是否固定或者随着页面的其余部分滚动 ▹ 默认值是 scroll：默认情况下，背景会随文档滚动 ▹ 可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像</li> </ul> <pre><code class="prism language-css">background-attachment: fixed </code></pre> 3. 列表属性 <ul> <li>CSS列表属性作用如下： ▹ 设置不同的列表项标记为有序列表 ▹ 设置不同的列表项标记为无序列表 ▹ 设置列表项标记为图像</li> <li>有两种类型的列表： ▹ 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等） ▹ 有序列表 - 列表项的标记有数字或字母</li> <li>使用CSS，可以列出进一步的样式，并可用图像作列表项标记。 ▹ none：无标记。（去除标记） ▹ disc：默认。标记是实心圆。 ▹ circle：标记是空心圆。 ▹ square：标记是实心方块。 ▹ decimal：标记是数字。 ▹ decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。) ▹ lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。) ▹ upper-roman：大写罗马数字(I, II, III, IV, V, 等。) ▹ lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。) ▹ upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)</li> </ul> <a href="http://img.e-com-net.com/image/info8/0c2145817ef2400bbf4dbdd1891adf9e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0c2145817ef2400bbf4dbdd1891adf9e.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第36张图片" width="650" height="309" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/3036e9b4942945d6ad0bba84a47bcb71.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3036e9b4942945d6ad0bba84a47bcb71.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第37张图片" width="650" height="343" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> li{ list-style-type: none; background-color: black; color: white; text-align: center; width: 150px; float: left; /* li水平方向显示 */ line-height: 40px; font-size: 1.3em; cursor: pointer; } li:hover{ background-color: orange; line-height: 50px; } </style> <body> <ul> <li>罗马大陆</li> <li>烦人修仙传</li> <li>拉钩教育</li> </ul> </body> </html> </code></pre> 4. 边框属性 <ul> <li>CSS边框属性允许你指定一个元素边框的样式和颜色。</li> </ul> <a href="http://img.e-com-net.com/image/info8/4b2d40a208484a75948db6de05a3c2f7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4b2d40a208484a75948db6de05a3c2f7.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第38张图片" width="650" height="123" style="border:1px solid black;"></a> <pre><code class="prism language-css"><style> div{ border-width: 20px; border-color: green; border-style: outset; } </style> <body> <div>hello</div> </body> </code></pre> <ul> <li>border-style取值：</li> </ul> <a href="http://img.e-com-net.com/image/info8/d039bd6e95464002a3dd63efc93c5c2c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d039bd6e95464002a3dd63efc93c5c2c.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第39张图片" width="650" height="261" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> div{ width: 400px; height: 40px; margin: 10px; /*div之间产生10像素的距离*/ } .a{ /* 设置四个边 */ border-width: 2px; border-color: red; border-style: solid; border-right-color: green; /*设置右边框的颜色*/ border-bottom-style: dashed; /*设置下边框的样子*/ } .b1{ border: 10px solid red; } .b2{ border: 10px dotted red; } .b3{ border: 10px dashed red; } .b4{ border: 10px double red; } .b5{ border: 10px groove red; } .b6{ border: 10px ridge red; } .b7{ border: 10px inset red; } .b8{ border: 10px outset red; } </style> <body> <div class='a'></div> <div class='b1'>实心线</div> <div class='b2'>点线</div> <div class='b3'>虚线</div> <div class='b4'>双线</div> <div class='b5'>3D凹槽</div> <div class='b6'>3D脊边框</div> <div class='b7'></div> <div class='b8'></div> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/2fef40a04c7c4e538b99d66903ed1cc7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2fef40a04c7c4e538b99d66903ed1cc7.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第40张图片" width="650" height="327" style="border:1px solid black;"></a> 5. 轮廓属性 <ul> <li>轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。</li> <li>轮廓和边框的区别： ▹ 边框 (border) 可以是围绕元素内容和内边距的一条或多条线； ▹ 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。</li> <li>CSS outline 属性规定元素轮廓的样式、颜色和宽度。</li> </ul> <a href="http://img.e-com-net.com/image/info8/f49cdd6cf5074a4b861523c028d499b1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f49cdd6cf5074a4b861523c028d499b1.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第41张图片" width="650" height="145" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/c98cfcf398cd40cd91f8c43e008d550e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c98cfcf398cd40cd91f8c43e008d550e.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第42张图片" width="650" height="197" style="border:1px solid black;"></a> 6. 盒子模型 <ul> <li>所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。</li> <li>CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</li> <li>盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。</li> <li>下面的图片说明了盒子模型(Box Model)：</li> </ul> <a href="http://img.e-com-net.com/image/info8/3d464ce32620405c8dbd1d4132bd8e70.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3d464ce32620405c8dbd1d4132bd8e70.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第43张图片" width="650" height="467" style="border:1px solid black;"></a> <ul> <li>margin(外边距) - 盒子与盒子之间的距离</li> <li>border(边框) - 盒子的保护壳</li> <li>padding(内边距/填充) - 内填充，盒子边与内容之间的距离</li> <li>content(内容) - 盒子的内容，显示的文本或图像</li> </ul> <a href="http://img.e-com-net.com/image/info8/7109967743174c889cdb911f427d8c9f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7109967743174c889cdb911f427d8c9f.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第44张图片" width="650" height="236" style="border:1px solid black;"></a> CSS定位 <ul> <li>块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高 <a href="http://img.e-com-net.com/image/info8/d9c1efbfaf0f43a488e625c561d44e55.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d9c1efbfaf0f43a488e625c561d44e55.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第45张图片" width="650" height="301" style="border:1px solid black;"></a></li> <li>行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高 <a href="http://img.e-com-net.com/image/info8/bc7f2177cab349f292ce1f082abb8239.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bc7f2177cab349f292ce1f082abb8239.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第46张图片" width="650" height="310" style="border:1px solid black;"></a></li> <li>行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高 <a href="http://img.e-com-net.com/image/info8/facd91122dd948698405a9269403a58d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/facd91122dd948698405a9269403a58d.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第47张图片" width="650" height="246" style="border:1px solid black;"></a></li> </ul> 2. 浮动定位 <ul> <li>让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。</li> <li>float取值： ▹ none ：不浮动 ▹ left：贴着左边浮动 ▹ right：贴着右边浮动 <a href="http://img.e-com-net.com/image/info8/65562b058ba2422d83adfef91097b963.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/65562b058ba2422d83adfef91097b963.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第48张图片" width="650" height="454" style="border:1px solid black;"></a></li> </ul> 3. 相对定位 <ul> <li>和原来的位置进行比较，进行移动定位（偏移） <a href="http://img.e-com-net.com/image/info8/ae71239050d1452a8af625e5e5ca1d3d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ae71239050d1452a8af625e5e5ca1d3d.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第49张图片" width="650" height="536" style="border:1px solid black;"></a></li> </ul> 4. 绝对定位 <ul> <li>本元素与已定位的祖先元素的距离 ▹ 如果父级元素定位了，就以父级为参照物； ▹ 如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。 ▹ 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。</li> </ul> <pre><code class="prism language-html"><div class="yeye"> <div class="father"> <div class="a">1</div> <div class="b">2</div> <div class="c">3</div> </div> </div> </code></pre> <ul> <li>以父节点作为参照物 <a href="http://img.e-com-net.com/image/info8/692340ab2dba411ebb193e8d78471f5d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/692340ab2dba411ebb193e8d78471f5d.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第50张图片" width="650" height="539" style="border:1px solid black;"></a></li> <li>以爷爷节点作为参照物 <a href="http://img.e-com-net.com/image/info8/23f43a4f01ea47c1a92f3b951348d417.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/23f43a4f01ea47c1a92f3b951348d417.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第51张图片" width="650" height="526" style="border:1px solid black;"></a></li> </ul> 5. 固定定位 <ul> <li>将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动 <a href="http://img.e-com-net.com/image/info8/11565b847c344283a6aa092c02077649.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/11565b847c344283a6aa092c02077649.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第52张图片" width="650" height="302" style="border:1px solid black;"></a></li> </ul> 6. z-index <ul> <li>如果有重叠元素，使用z轴属性，定义上下层次。 <a href="http://img.e-com-net.com/image/info8/1ecedec602a340888f1f4431433deaff.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1ecedec602a340888f1f4431433deaff.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第53张图片" width="650" height="405" style="border:1px solid black;"></a></li> <li>注意： ▹ z轴属性，要配合相对或绝对定位来使用。 ▹ z值没有额定数值（整型就可以，具体用数字几，悉听尊便）</li> </ul> <h3> 4、CSS3新特性</h3> 圆角 <ul> <li>border-radius：左上右上右下左下;</li> <li>border-radius：四个角;</li> <li>border-radius：50%; 圆形</li> </ul> <a href="http://img.e-com-net.com/image/info8/69fc74975d404aff8caf937f1988572e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/69fc74975d404aff8caf937f1988572e.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第54张图片" width="650" height="156" style="border:1px solid black;"></a> 盒子阴影 <ul> <li>box-shadow：1 2 3 4 5; 1：水平偏移 2：垂直偏移 3：模糊半径 4：扩张半径 5：颜色 <a href="http://img.e-com-net.com/image/info8/adc04242a98c4e158950f9a90fd25047.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/adc04242a98c4e158950f9a90fd25047.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第55张图片" width="650" height="201" style="border:1px solid black;"></a></li> </ul> 渐变 1. 线性渐变 <pre><code class="prism language-css">background:linear-gradient([方向/角度]，颜色列表)； </code></pre> <pre><code class="prism language-html"><style> div{ width: 200px; height: 60px; margin: 10px; } .a1 { background: linear-gradient(red,black); } .a2 { background: linear-gradient(red,black,pink, green); } .a3 { background: linear-gradient(to left,red,black); } .a4 { background: linear-gradient(to top left,red,black); } .a5 { background: linear-gradient(30deg,red,black); } </style> <body> <div class="a1"></div> <div class="a2"></div> <div class="a3"></div> <div class="a4"></div> <div class="a5"></div> </body> </code></pre> <a href="http://img.e-com-net.com/image/info8/fb733a59b50a4825ad5b535e9ea6010a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fb733a59b50a4825ad5b535e9ea6010a.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第56张图片" width="650" height="187" style="border:1px solid black;"></a> 2. 径向渐变 <ul> <li>以圆心向外发散</li> </ul> <pre><code class="prism language-css">background: radial-gradient(颜色列表); </code></pre> <pre><code class="prism language-html"><style> div { width: 200px; height: 200px; margin: 10px; } .a1 { background: radial-gradient(red, black); } .a2 { background: radial-gradient(red, black, pink, green); } .a3 { border-radius: 50%; background: radial-gradient(red, black); } </style> <body> <div class="a1"></div> <div class="a2"></div> <div class="a3"></div> </body> </code></pre> <a href="http://img.e-com-net.com/image/info8/afc9d1aea45f4c70800065e1583525eb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/afc9d1aea45f4c70800065e1583525eb.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第57张图片" width="650" height="333" style="border:1px solid black;"></a> 背景 1. 背景位置 <ul> <li>background-origin：指定了背景图像的位置区域 ▹ border-box : 背景贴边框的边 ▹ padding-box : 背景贴内边框的边 ▹ content-box : 背景贴内容的边</li> </ul> <pre><code class="prism language-html"><style> div { background: url("img/1.jpg") no-repeat; width: 200px; height: 80px; margin: 20px; border: 10px dashed black; padding: 20px; } .a { background-origin: border-box; } .b { background-origin: padding-box; } .c { background-origin: content-box; } </style> <body> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </code></pre> <a href="http://img.e-com-net.com/image/info8/eceb105854e84575b403873ecd585edb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eceb105854e84575b403873ecd585edb.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第58张图片" width="650" height="311" style="border:1px solid black;"></a> 2. 背景裁切 <ul> <li>background-clip: ▹ border-box 边框开切 ▹ padding-box 内边距开切 ▹ content-box 内容开切</li> </ul> <pre><code class="prism language-html"><style> div { width: 200px; height: 80px; border: 10px dashed red; background-color: darkcyan; margin: 20px; padding: 20px; } .a { background-clip: border-box; } .b { background-clip: padding-box; } .c { background-clip: content-box; } </style> <body> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </code></pre> <a href="http://img.e-com-net.com/image/info8/1bf652920f0d45bbae327760eb647542.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1bf652920f0d45bbae327760eb647542.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第59张图片" width="650" height="317" style="border:1px solid black;"></a> 3. 背景大小 <ul> <li>background-size: ▹ cover 缩放成完全覆盖背景区域最小大小 ▹ contain 缩放成完全适应背景区域最大大小</li> </ul> <pre><code class="prism language-html"><style> div { background: url("img/1.jpg") no-repeat; width: 200px; height: 100px; border: 2px solid red; margin: 20px; } .a { background-size: cover; /* 完全覆盖 */ } .b { background-size: contain; /* 完全适应 */ } </style> <body> <div class="a"></div> <div class="b"></div> </body> </code></pre> <a href="http://img.e-com-net.com/image/info8/145e58d4e8bf491dad44068f0a430ad8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/145e58d4e8bf491dad44068f0a430ad8.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第60张图片" width="650" height="208" style="border:1px solid black;"></a> 过渡动画 1. 过渡 <ul> <li>从一个状态到另一个状态，中间的“缓慢”过程； 缺点是，控制不了中间某个时间点。 transition｛1 2 3 4｝</li> </ul> <ol> <li>过渡或动画模拟的css属性</li> <li>完成过渡所使用的时间（2s内完成）</li> <li>过渡函数。。。 <a href="http://img.e-com-net.com/image/info8/29eb7655620743f88555f4c557158c1f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/29eb7655620743f88555f4c557158c1f.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第61张图片" width="650" height="156" style="border:1px solid black;"></a></li> <li>过渡开始出现的延迟时间 <code>transition: width 2s ease 1s;</code> 目前，css3只开发出部分的过渡属性，下图所示： <a href="http://img.e-com-net.com/image/info8/16656e4f19dd4ce2947fc671851d493f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/16656e4f19dd4ce2947fc671851d493f.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第62张图片" width="650" height="353" style="border:1px solid black;"></a></li> </ol> <pre><code class="prism language-html"><style> div{ width: 100px; height: 50px; border: 2px solid red; } .a{ transition: width 2s linear 1s; /*1秒过后，div在2秒内匀速缓慢的变宽*/ } div:hover{ width: 300px;} /*触发div变宽*/ </style> <body> <div class="a">Hello,拉勾</div> </body> </code></pre> 2. 动画 <ul> <li>从一个状态到另一个状态，过程中每个时间点都可以控制。</li> <li>关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }</li> <li>动画属性：animation{ 1 , 2 , 3 , 4 , 5 } 1：动画帧 2：执行时间 3：过渡函数 4：动画执行的延迟（可省略） 5：动画执行的次数</li> <li>需求1：一个元素从左向右移动，3秒内执行2次</li> </ul> <pre><code class="prism language-html"><style> div{ width: 700px; border: 1px solid red; } @keyframes x{ from{ margin-left: 0px;} to{ margin-left: 550px;} } img{ animation: x 3s linear 2; } </style> <body> <div> <img src="img/cat.gif"> </div> </body> </code></pre> <ul> <li>需求2：一个元素从左向右移动，3秒内执行完成。无限次交替执行 infinite：无限次 alternate：来回执行（交替，一去一回）</li> </ul> <pre><code class="prism language-html"><style> .wai{ width: 600px; height: 100px; border: 2px solid red; } .nei{ width: 40px; height: 80px; margin: 5px; background: red; } .nei{ animation: x 3s linear infinite alternate; } @keyframes x{ 0%{ margin-left: 0px; } 25%{ background: yellowgreen; } 50%{ background: goldenrod; } 75%{ background: palevioletred;} 100%{ background: coral; margin-left: 550px; } } </style> <body> <div class="wai"> <div class="nei"></div> </div> </body> </code></pre> <h2> 任务三 (JavaScript)</h2> <h3> 1、JavaScript介绍</h3> <ul> <li>虽然是java作为前缀，但java和javascript的关系，就像老婆和老婆饼之间的关系，没有一毛钱关系！</li> <li>网景公司在Netscape2.0首先推出了JavaScript</li> <li>JavaScript 的正式名称是 “ECMAScript”，此标准由 ECMA 组织发展和维护，简称“js”</li> <li>JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为</li> <li>JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。</li> </ul> js的特点 <ul> <li>可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序（后面会学习不用浏览器也能运行）</li> <li>解释执行：事先不编译，逐行执行</li> <li>基于对象：内置大量现成对象（不需要new）</li> <li>适宜： ▹ 客户端数据计算（客户端可以做到的事加减乘除让客户端做，就不给服务器加负担了） ▹ 客户端表单合法性验证（密码是否为8位数，客户端判断完之后发给服务端） ▹ 浏览器事件的触发 ▹ 网页特殊显示效果制作（网页游戏）</li> </ul> js的组成 <ul> <li>ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准</li> <li>DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。</li> <li>BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。 ▹ 弹出新的浏览器窗口 ▹ 移动、关闭浏览器窗口以及调整窗口大小 ▹ 提供 Web 浏览器详细信息的定位对象 ▹ 提供用户屏幕分辨率详细信息的屏幕对象 ▹ 对 cookie 的支持 ▹ IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而实现ajax局部刷新技术</li> </ul> <h3> 2、HTML和JavaScript结合方式</h3> <ul> <li>使用js的三种方式</li> </ul> 行内脚本 <ol> <li>点击按钮（触发）</li> <li>弹框（具体的操作）</li> </ol> <pre><code class="prism language-html"><button onclick="alert('弹框测试')">点我一下</button>  <h2 onclick="alert('hello');">点我试试</h2> </code></pre> 内部脚本 <ol> <li>使用</li> <li>标准是写在head和body之间（脖子位置），但其实只要写在html文件内部就可以，无论什么位置 <html>外，内部，都可以。</li> </ol> <pre><code class="prism language-html"><body> <script> alert("弹框"); </script> </body> </code></pre> 外部脚本 <ol> <li>在项目根目录下创建一个目录js</li> <li>在js目录中创建一个文件，后缀名是.js</li> <li>在html页面中，使用</li> </ol> <pre><code class="prism language-html"><script src="js/xx.js"></script> </code></pre> <ul> <li>以上使用脚本的三种方式的优先级，谁在上，谁先执行。因为是解释性语言。</li> </ul> <h3> 3、JavaScript的使用</h3> 变量 <ul> <li>因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var</li> <li>声明变量： var x ; var x,y;</li> <li>数值类型：number ▹ 不区分整型数值和浮点型数值 ▹ 所有数字都采用 64 位浮点格式存储，类似于double 格式</li> <li>字符串：string ▹ 首尾由单引号或双引号括起 <code>var aa="欢迎来到\"JavaScript世界";</code></li> <li>布尔类型： ▹ 仅有两个值：true和false也代表1和0 ▹ 实际运算中true=1,false=0</li> </ul> 1. 自动类型转换 <pre><code>数字 + 字符串：数字转换为字符串 10+’a’ -> 10a 数字 + 布尔值：true转换为1，false转换为0 true+5->6 字符串 + 布尔值：布尔值转换为字符串true或false true+’a’->truea 布尔值 + 布尔值：布尔值转换为数值1或0 true+true->2 </code></pre> 2. 数据类型转换函数 <ul> <li>parseInt：强制转换成整数 ▹ 如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字） ▹ 例如：parseInt(“6.32”)=6</li> <li>parseFloat：强制转换成浮点数 ▹ 如果不能转换，则返回 NaN ▹ 例如：parseFloat(“6.32”)=6.32</li> <li>typeof：查询数值当前类型，返回 string / number / boolean / object ▹ 例如：typeof(“test”+3)==“string”</li> </ul> 3. null 与 undefined <ul> <li>null 在程序中代表“无值”或者“无对象” ▹ 可以通过给一个变量赋值 null 来清除变量的内容</li> <li>undefined ▹ 声明了变量但从未赋值或者对象属性不存在</li> </ul> 4. 算术运算 <ul> <li>加(＋)、减(－)、乘( * ) 、除( / ) 、余数( % ) ▹ - 可以表示减号，也可以表示负号，如：x = -y ▹ + 可以表示加法，也可以用于字符串的连接</li> <li>递增( ++ ) 、递减( – ) ▹ i++ 相当于 i=i+1 ▹ i-- 相当于 i=i-1</li> </ul> 5. 关系运算 <ul> <li>严格相等：=== ▹ 类型相同 ▹ 数值相同</li> <li>非严格相等：!==</li> </ul> <pre><code class="prism language-javascript">var a = "10"; var b = 10; if (a == b) alert("equal"); if (a === b) alert("same"); </code></pre> 6. 逻辑运算 <ul> <li> 逻辑非（!）、逻辑与（&&）、逻辑或（||） </li> <li> 逻辑运算的操作数均为 boolean 表达式 <a href="http://img.e-com-net.com/image/info8/fec2a32b4ebd441bacc36cc93841eb3d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fec2a32b4ebd441bacc36cc93841eb3d.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第63张图片" width="650" height="174" style="border:1px solid black;"></a> </li> <li> 我要吃两碗拉面或者10个包子才能吃饱！问题是，我只吃两碗面，饱了！我只吃10个包子，饱了 </li> <li> 我要吃两碗拉面并且10个包子才能吃饱！问题是，我只吃两碗面，没饱！我只吃10个包子，没饱， </li> </ul> 7. 控制语句 <pre><code class="prism language-javascript">if（关系表达式） { // 语句块 1 }else { // 语句块 2 } </code></pre> <pre><code class="prism language-javascript">if (表达式1) { // 语句1; }else if (表达式2){ // 语句2; }else if (表达式3){ // 语句3; } else{ // 语句4; } </code></pre> <pre><code class="prism language-javascript">switch (表达式) { case 值1: // 语句1; break; case 值2: // 语句2; break; default: // 语句4; } </code></pre> <pre><code class="prism language-javascript">for (var i=1 ; i<=5 ; i++){ alert(i); } </code></pre> <pre><code class="prism language-javascript">while (条件){ // 语句1; ... } </code></pre> 常用字符串API <ul> <li>length:获取字符串的长度（字符串中字符的个数）属性，没有小括号</li> </ul> <pre><code class="prism language-javascript">var str = "hello"; console.log( str.length ); </code></pre> <ul> <li>toUpperCase/toLowerCase :转大小写</li> </ul> <pre><code class="prism language-javascript">var name = "AngierSun"; console.log( "大写："+name.toUpperCase() ); console.log( "小写："+name.toLowerCase() ); </code></pre> <ul> <li>charAt(下标) ：返回某个下标上的字符</li> </ul> <pre><code class="prism language-javascript">var str1 = "javascript网页教程"; var str2 = str1.charAt(12); // 下标12上的字符 console.log(str2); //教 var str3 = str1.charCodeAt(12); console.log(str3); //25945:（汉字“教”在unicode编码中的编号） </code></pre> <ul> <li>indexof(字符)：查找字符串中字符出现的首次下标</li> <li>lastIndexof(字符)：查找字符串中字符最后一次出现的下标</li> </ul> <pre><code class="prism language-javascript">var str1 = "javascript网页教程"; var str2 = str1.indexOf("a"); console.log(str2); // 1 , a字符在str1中第一次出现的下标 var str3 = str1.lastIndexOf("a"); //3,a字符在str1中最后一次出现的下标 console.log(str3); </code></pre> <ul> <li>substring(开始,结束)：截取字符串中一部分（结束是不包含的）</li> </ul> <pre><code class="prism language-javascript">var str1 = "abcdefgh"; var str2 = str1.substring(2,4); console.log(str2); //cd，从2开始（包含），4结束（不包含） </code></pre> <ul> <li>replace(旧的,新的)：将字符串中的旧字符替换成新字符</li> </ul> <pre><code class="prism language-javascript">var str1 = "abcde"; var str2 = str1.replace("cd","XXX"); console.log(str2); // abXXXe，将str1中的cd替换成XXX </code></pre> <ul> <li>split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型</li> </ul> <pre><code class="prism language-javascript">var str1 = "一,二,三,四,五"; var arr = str1.split(","); // 将str1 以逗号进行分割，分割成N份，所以返回的结果一定是数组结构 console.log( "共分割成："+arr.length+"份" ); console.log( "第三份是：" + arr[2] ); // 三 </code></pre> 数组 1. 创建数组 <pre><code class="prism language-javascript">var arr1 = new Array(); </code></pre> 2. 初始化数组的三种方式 <pre><code class="prism language-javascript">// 第一种 var arr1 = new Array(); arr1[0] = 110; arr1[1] = 119; arr1[2] = 120; // 第二种 var arr1 = new Array(10,"a",true); // 第三种 var arr1 = [10,"a",true]; for (var i = 0; i < arr1.length; i++) { console.log(arr1[i]); } </code></pre> 3. 数组的常用方法 <ul> <li>tostring()：将数组转换成字符串</li> </ul> <pre><code class="prism language-javascript">var arr = [1,2,3,4]; console.log("类型为：" + typeof( arr ) ); var str = arr.toString(); // 将数组转换成字符串 console.log( str +",类型为：" + typeof( str ) ); </code></pre> <ul> <li>join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。</li> </ul> <pre><code class="prism language-javascript">var arr = [1,2,3,4]; var str = arr.join("-"); // 将数组中每个元素用-进行连接，并形成一个全新的字符串 console.log( str +",类型为：" + typeof( str ) ); </code></pre> <ul> <li>concat(新元素)：将原来的数组连接新元素，原数组不变。</li> </ul> <pre><code class="prism language-javascript">var arr = [1,2,3,4]; var arrnew = arr.concat(5,6); // 在arr数组的后面添加新的元素，形成一个新数组，但是原数组是不变的 console.log( arrnew +",类型为：" + typeof( arrnew ) ); console.log("原数组：" + arr); </code></pre> <ul> <li>slice(开始，结束)：在数组中提取一部分，形成新的数组。 ▹ 1,2,3,4,5 slice(2,4) 结果：3,4</li> </ul> <pre><code class="prism language-javascript">var arr = ['a','b','c','d','e','f','g','h']; var arrnew = arr.slice( 2,4 ); // 在arr数组中截取，从2开始（包含），4结束（不包含） console.log( arrnew ); // cd </code></pre> <ul> <li>reverse()：数组的反转（倒序）</li> </ul> <pre><code class="prism language-javascript">var arr = [31,12,111,444]; console.log( arr.toString() ); arr.reverse(); // 将数组中的元素倒置 console.log( arr.toString() ); </code></pre> <ul> <li>sort()：数组排序 ▹ arr.sort() 字符排序 ▹ arr.sort(func) 数值排序</li> </ul> <pre><code class="prism language-javascript">var arr = [31,12,111,444]; arr.sort(); // 字符排序（不会按照字面量的大小） console.log( arr ); </code></pre> <pre><code class="prism language-javascript">var arr = [31,12,111,444]; arr.sort( laosun ); // 数字排序（会按照字面量的大小） console.log( arr ); // 定义排序函数 function laosun(a,b){ return a-b; } </code></pre> Math数学对象 <ul> <li>Math 对象用于执行数学任务</li> <li>没有构造函数 Math()</li> <li>无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法</li> </ul> <a href="http://img.e-com-net.com/image/info8/b3204cd74899490c8b7bb50e1b9f9f3e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b3204cd74899490c8b7bb50e1b9f9f3e.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第64张图片" width="650" height="480" style="border:1px solid black;"></a> <pre><code class="prism language-javascript">// 返回0-9之间任意一个随机数字 var i = Math.random() * 10; var j = Math.floor(i); console.log(j); </code></pre> Number对象 <ul> <li>Number.toFixed(2); 自带四舍五入技能</li> </ul> <pre><code class="prism language-javascript">var n = new Number( 12.345 ); var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入 console.log( n1 ); var x = new Number( 12.3 ); var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐 console.log( n2 ); </code></pre> 正则表达式 <ul> <li>对字符串执行模式匹配的强大工具</li> </ul> <pre><code class="prism language-javascript">var reg1 = /^\d{3,6}$/; // 匹配纯数字3-6个 var reg2 = new RegExp(“^\\d{ 3,6}$"); </code></pre> <a href="http://img.e-com-net.com/image/info8/b150744da8d74d578cd85c70c5081caa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b150744da8d74d578cd85c70c5081caa.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第65张图片" width="650" height="736" style="border:1px solid black;"></a> <pre><code class="prism language-javascript">// 方式1 var age = "18"; // 判断：1-3位纯数字 var reg = /^\d{1,3}$/; // 以/^开始，中间写正则内容，以$/结束 var b = reg.test(age); // 验证age变量的是否符合reg的匹配 if (b == true) { console.log("验证通过！"); } else { console.log("格式错误"); } // 方式2 var name = "abc123"; // 大小写字母和数字的组合（特殊字符不能出现）, 5~8位 var reg = new RegExp("^[a-zA-Z0-9]{5,8}$"); // 以^开始，中间写正则内容，以$结束 if (reg.test(name)) { console.log("验证通过！"); } else { console.log("格式错误"); } </code></pre> 日期对象 <pre><code class="prism language-javascript">var time = new Date(); console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间) var year = time.getFullYear(); // 年份 var month = time.getMonth() + 1; //月份从0开始，11结束，所以国内习惯要+1 var day = time.getDate(); // 几号 var hour = time.getHours(); // 几点 var mm = time.getMinutes(); // 分钟 var s = time.getSeconds(); //秒 var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒 var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒"; console.log( timestr ); </code></pre> 函数 <ul> <li>使用关键字 function 定义函数</li> </ul> <pre><code class="prism language-javascript">function 函数名( 形参列表 ){ // 函数体 return 返回值; } </code></pre> <ul> <li>函数声明后不会立即执行，会在我们需要的时候调用到，才会执行。</li> <li>注意： ▹ 形参：一定不要带数据类型 ▹ 分号;是用来分隔可执行JavaScript语句。由于函数声明不是一个可执行语句，所以不以分号结束。</li> </ul> 1. 无返回值 <pre><code class="prism language-javascript">function qiuhe(a, b) { var he = a + b; console.log("两数之和：" + he); } qiuhe(3,4); </code></pre> 2. 有返回值 <pre><code class="prism language-javascript">function qiuhe(a, b) { var he = a + b; return "两数之和：" + he; } var s = qiuhe(3,4); console.log( s ); </code></pre> 3. 参数对象 <ul> <li>在函数内部，调用参数列表的属性</li> </ul> <pre><code class="prism language-javascript">function func(a,b,c){ console.log( arguments.length ); // 获得参数的个数 console.log( arguments[1] ); // 获得下标为1的参数 } </code></pre> 4. 构造函数 <ul> <li>函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义</li> </ul> <pre><code class="prism language-javascript">var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); console.log(x); </code></pre> <ul> <li>注：上述函数以分号结尾，因为它是一个执行语句。</li> </ul> 5. 匿名函数 <ul> <li>没有名称的函数</li> </ul> <pre><code class="prism language-javascript">var fn = function(a, b) { // 没有名字的函数，应该用一个变量来接收 return a * 10 + b; }; console.log( fn(3, 4) ); </code></pre> 6. 全局函数 <ul> <li>isNaN：检查其参数是否是非数字值</li> </ul> <pre><code class="prism language-javascript">console.log( isNaN( 123 ) ); // 数字，false console.log( isNaN( "hello" ) ); // 非数字，true console.log( isNaN( 4-1 ) ); // 数字，false console.log( isNaN( 123 ) ); // 数字，false console.log( isNaN( -10 ) ); // 数字，false console.log( isNaN( "123" ) ); // 数字，false console.log( isNaN( "1a23" ) ); // 非数字，true </code></pre> <ul> <li>eval：用来转换字符串中的运算</li> </ul> <pre><code class="prism language-javascript">var str = "1+3"; console.log( str ); // 1+3 , +会认定为一种字符符号而已，没有加法的作用 console.log( eval( str ) ); // 让字符串中的运算符号生效 </code></pre> <ul> <li>encodeURI 与 decodeURI</li> </ul> <pre><code class="prism language-javascript">var name = "拉勾网"; console.log( "转码前：" + name ); name = encodeURI(name); console.log( "转码后：" + name ); name = decodeURI(name); console.log( "解码后：" + name ); </code></pre> 7. 闭包 <ol> <li>闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。</li> <li>闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理； 简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据的安全唯一性</li> </ol> <ul> <li>想了解闭包，首先要了解什么是全局变量，什么是局部变量</li> </ul> <pre><code class="prism language-javascript"> a = 10; // 全局变量，声明的时候可以不使用var function test1(){ b = 20; // 不适用var声明的变量，就是全局变量 var c = 30; // 用var声明，并且在函数的内部。这样的变量叫做局部变量，有效范围只能 在其声明的函数内部 console.log(c); } function test2(){ console.log(c); //c is not defined (c变量没有定义) } test1(); test2(); </code></pre> <ul> <li>需求：统计方法执行了多少次</li> </ul> <pre><code class="prism language-javascript"> var count = 0; // 总次数 function test1(){ count++; // 自增+1 } test1(); test1(); test1(); console.log( count ); </code></pre> <ul> <li>谁都可以访问count，所以count变量并不安全，因为是全局变量。</li> <li>如何才能安全呢？将count声明为局部变量</li> </ul> <pre><code class="prism language-javascript"> function test1(){ var count = 0; //局部变量 return count++; //外部无法访问count，只能通过return才能将count变量返回，并输出 } test1(); test1(); test1(); console.log( test1() ); // 每次调用方法，首先就是将变量还原为0 </code></pre> <ul> <li>结果一直是0，因为每次调用test1()，方法体的第一句代码就是还原，无论曾经的值是多少。</li> <li>突发奇想，如果在test1()函数里面，再嵌套一个函数，js是支持函数嵌套的</li> </ul> <pre><code class="prism language-javascript"> function test1(){ var count = 0; //局部变量 function jia(){ return count++; } jia(); return count; } test1(); test1(); test1(); console.log( test1() ); // 每次调用方法，首先就是将变量还原为0 </code></pre> <ul> <li>如果每次只调用test1()里面的jia()就好了。ok，闭包帮你解决此问题！</li> </ul> <pre><code class="prism language-javascript">function test1(){ var count = 0; //局部变量 function jia(){ return count+=1; } return jia; } var fn = test1(); // fn => function jia(){return count+=1; } fn(); fn(); console.log( fn() ); // 每次调用方法，首先就是将变量还原为0 </code></pre> <ul> <li>闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。</li> <li>直观的说就是形成一个不销毁的栈环境。 ▹ 闭包的优点：方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题 ▹ 闭包的缺点：因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造成内存泄露，内存消耗很大</li> </ul> 弹框输出 <ul> <li>普通弹框 alert(“hello，拉勾”);</li> <li>控制台日志输出 console.log(“谷歌浏览器按F12进入控制台”);</li> <li>页面输出 document.write("<h2>我爱你中国"); 将<h2>元素输出到中</li> <li>确认框 confirm(“确定删除吗？”);</li> </ul> <pre><code class="prism language-javascript">var b = confirm("确定删除吗？"); if(b){ document.write( "<h1>删除成功！</h1>" ); }else{ document.write( "<h1>你取消了操作</h1>" ); } </code></pre> <ul> <li>输入框 prompt(“请输入姓名：”);</li> </ul> <pre><code class="prism language-javascript">var name = prompt("请输入你的名字："); document.write( "<h1>大名："+name+"！</h1>" ); </code></pre> <h3> 4、DOM操作</h3> <ul> <li>在一个html页面中，会使用很多标签来规划制作页面。</li> <li>每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素</li> <li>如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一片叶子，应该怎么做？</li> <li>“顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一片叶子都不是难事了</li> <li>叶子和大树的一些启发，工程师们开会讨论就定了这个理论**“文档对象模型”**，</li> <li>文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了 ▹ 在节点树中，顶端节点就是根节点（root） ▹ 每个节点都有父节点（除了根节点） ▹ 任何一个节点都可以拥有任意数量的子节点 ▹ 同胞是拥有相同父节点的节点</li> </ul> <pre><code class="prism language-html"><html> <head> <meta charset="utf-8"> <title>DOM 教程</title> </head> <body> <h1>第一节：HTML DOM</h1> <p>Hello world!</p> </body> </html> </code></pre> <ul> <li>从上面的 HTML 中： ▹ <html> 节点没有父节点；它是根节点 ▹ <head> 和 <body> 的父节点是 <html> 节点 ▹ 文本节点 “Hello world!” 的父节点是 节点</li> <li>并且： ▹ <html> 节点拥有两个子节点：<head> 和 <body> ▹ <head> 节点拥有两个子节点：<meta> 与 <title> 节点 ▹ <title> 节点也拥有一个子节点：文本节点 “DOM 教程”<h1> 和 节点是同胞节点，同时也是<body> 的子节点</li> <li>并且： ▹ <head> 元素是 <html> 元素的首个子节点 ▹ <body> 元素是 <html> 元素的最后一个子节点 ▹ <h1> 元素是 <body> 元素的首个子节点 ▹ 元素是 <body> 元素的最后一个子节点</li> <li>js为我们提供了很多种方法来实现在页面找查找某个元素节点</li> </ul> DOM访问 <a href="http://img.e-com-net.com/image/info8/7a49cb16f63f46c8a6d18fccda6a1069.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7a49cb16f63f46c8a6d18fccda6a1069.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第66张图片" width="650" height="218" style="border:1px solid black;"></a> <ul> <li>getElementById：通过id属性获得元素节点对象 ▹ 案例：当帐号为空时，阻止表单提交</li> </ul> <pre><code class="prism language-html"><body> <form action="xxx" onsubmit="return login()"> <p>帐号：<input id="username"/></p> <p>电话：<input id="phone"/></p> <p><button>登录</button></p> </form> <script> function login() { var name = document.getElementById("username").value ; if(name == ""){ alert("帐号不能为空！"); return false; // 阻止表单的提交 } return true; // 放行，让表单提交 } </script> </body> </code></pre> <ul> <li>getElementsByName：通过name属性获得元素节点对象集 ▹ 案例：购物车全选效果</li> </ul> <a href="http://img.e-com-net.com/image/info8/0f97278861bd4392a1ff1710aaecd2d9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0f97278861bd4392a1ff1710aaecd2d9.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第67张图片" width="650" height="361" style="border:1px solid black;"></a> <pre><code class="prism language-html"><body> <h2>我的购物车</h2> <table border="1" cellspacing="0"> <tr> <td><input type="checkbox" onchange="quan(this)" /> 全选</td> <td>名称</td> <td>单价</td> </tr> <tr> <td><input type="checkbox" name="one" />1</td> <td>功能性饮料-尖叫</td> <td>4.0</td> </tr> <tr> <td><input type="checkbox" name="one" />2</td> <td>火腿肠</td> <td>2.0</td> </tr> <tr> <td><input type="checkbox" name="one" />3</td> <td>包子</td> <td>1.5</td> </tr> </table> <p> <button>提交订单</button> </p> <script> function quan(all) { var arr = document.getElementsByName("one"); for (var i = 0; i < arr.length; i++) { arr[i].checked = all.checked; // 将全选框的状态，赋值给每一个复选框 } } </script> </body> </code></pre> <ul> <li>getElementsByTagName：通过标签名称获得元素节点对象集 ▹ 案例：表格隔行变色</li> </ul> <pre><code class="prism language-html"><body> <table border="1" cellspacing="0"> <tr> <td><input type="checkbox" onchange="quan(this)" /> 全选</td> <td>名称</td> <td>单价</td> </tr> <tr> <td><input type="checkbox" name="one" />1</td> <td>功能性饮料-尖叫</td> <td>4.0</td> </tr> <tr> <td><input type="checkbox" name="one" />2</td> <td>火腿肠</td> <td>2.0</td> </tr> <tr> <td><input type="checkbox" name="one" />3</td> <td>包子</td> <td>1.5</td> </table> <script> var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象集合 for (var i = 0; i < rows.length; i++) { if(i % 2 == 1){ // 奇数 rows[i].style.backgroundColor = "pink"; } } </script> </body> </code></pre> DOM修改 <ul> <li>修改 HTML DOM 意味着许多不同的方面： ▹ 改变 HTML 内容 ▹ 改变 CSS 样式 ▹ 改变 HTML 属性 ▹ 创建新的 HTML 元素 ▹ 删除已有的 HTML 元素 ▹ 改变事件（处理程序）</li> </ul> <ol> <li>改变一个 <h2> 元素的 HTML 内容 :</li> </ol> <pre><code class="prism language-html"><body> <button onclick="test()">点我试试</button> <script> function test(){ document.getElementById("hello").innerHTML = "走哇，喝点去~！"; } </script> <h2 id="hello">你好！</h2> </body> </code></pre> <ol start="2"> <li>改变一个<h2>的 HTML 样式</li> </ol> <pre><code class="prism language-html"><body> <button onclick="chou()">你瞅啥</button> <script> function chou(){ document.getElementById("hello").style.color = "red"; document.getElementById("hello").style.fontFamily = "华文彩云"; } </script> <h2 id="hello">你好！</h2> </body> </code></pre> 1. 添加节点 <ul> <li>点击按钮，在页面中创建一张图片</li> </ul> <pre><code class="prism language-html"><body> <button onclick="add()">添加</button> <div></div> <script> function add(){ var img = document.createElement("img"); // <img> img.setAttribute("src","../lagou-html/img/cat.gif"); // <img src="../lagou-html/img/cat.gif"> img.setAttribute("title","小猫咪"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪"> img.setAttribute("id","cat"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪" id="cat"> var divs = document.getElementsByTagName("div"); divs[0].appendChild(img); } </script> </body> </code></pre> 2. 删除节点 <ul> <li>点击按钮，把上面刚创建的图片从页面上删除</li> </ul> <pre><code class="prism language-html"><body> <button onclick="add()">添加</button> <button onclick="del()">删除</button> <div> </div> <script> function add(){ 。。。略。。。 } function del(){ var img = document.getElementById("cat"); img.parentNode.removeChild(img); // 必须通过父节点，才能删除子节点 } </script> </body> </code></pre> 3. 替换节点 <ul> <li>点击按钮，把上面刚创建的图片替换成另一张</li> </ul> <pre><code class="prism language-html"><body> <button onclick="add()">添加</button> <button onclick="del()">删除</button> <button onclick="rep()">替换</button> <div> </div> <script> function add(){ 。。。略。。。 } function del(){ 。。。略。。。 } function rep(){ var imgold = document.getElementById("cat"); // 通过修改元素的属性，做的替换 // img.setAttribute("src","../lagou-html/img/2.jpg"); var imgnew = document.createElement("img"); imgnew.setAttribute("src","../lagou-html/img/1.jpg"); imgold.parentNode.replaceChild( imgnew, imgold ); } </script> </body> </code></pre> 事件 <ul> <li>js捕获某个动作而做出的反馈</li> <li>HTML 事件的例子： ▹ 当用户点击鼠标时 ▹ 当网页已加载时 ▹ 当图片已加载时 ▹ 当鼠标移动到元素上时 ▹ 当输入字段被改变时 ▹ 当 HTML 表单被提交时 ▹ 当用户触发按键时</li> </ul> 1. 窗口事件 (Window Events) <ul> <li>仅在 body 和 frameset 元素中有效。 ▹ onload 当文档被载入时执行脚本</li> </ul> <pre><code class="prism language-html"><body onload="test()"> <script> function test() { document.write("哈哈哈哈"); } </script> </body> </code></pre> <a href="http://img.e-com-net.com/image/info8/442756c8ac9c4dfdb975542e3e0dcb12.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/442756c8ac9c4dfdb975542e3e0dcb12.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第68张图片" width="650" height="178" style="border:1px solid black;"></a> 2. 表单元素事件 (Form Element Events) <ul> <li>仅在表单元素中有效。 ▹ onblur 当元素失去焦点时执行脚本 ▹ onfocus 当元素获得焦点时执行脚本(被激活)</li> </ul> <img src="http://img.e-com-net.com/image/info8/808d088237b14c8a8915e8f0caedc813.jpg" alt="在这里插入图片描述" width="0" height="0"> <pre><code class="prism language-html"><body> <script> function a() { console.log("获得焦点==被激活"); } function b() { console.log("失去焦点"); } </script> <form action=""> <p>帐号：<input onfocus="a()" onblur="b()" /></p> <p>密码：<input /></p> </form> </body> </code></pre> 3. 鼠标事件 (Mouse Events) <ul> <li>onclick 当鼠标被单击时执行脚本</li> <li>ondblclick 当鼠标被双击时执行脚本</li> <li>onmouseout 当鼠标指针移出某元素时执行脚本</li> <li>onmouseover 当鼠标指针悬停于某元素之上时执行脚本 <a href="http://img.e-com-net.com/image/info8/2b319e0af2384cc8b421176d198ceacf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2b319e0af2384cc8b421176d198ceacf.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第69张图片" width="650" height="123" style="border:1px solid black;"></a></li> </ul> <pre><code class="prism language-html"><style> img{ width: 30%; border: 5px solid white; } </style> <body> <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" onclick="dan()"> <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" ondblclick="shuang()"> <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" > <script> function dan(){ alert("点了一下"); } function shuang(){ alert("连续快读点两下"); } function shang(img){ img.style.border = "5px solid red"; } function xia(img){ img.style.border = "5px solid white"; } </script> </body> </code></pre> 4. 键盘事件 <ul> <li>onkeydown 按下去</li> <li>onkeyup 弹上来</li> </ul> <pre><code class="prism language-html"><script> // window: 当前浏览器窗口 window.onkeydown = function(){ // event：事件源（按键） // console.log( "按键编码："+event.keyCode ); if(event.keyCode == "13"){ // 回车键 alert("登录成功！"); } } window.onkeyup = function(){ console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则触发 } </script> </code></pre> 5. 事件冒泡 <ul> <li>创建两个div，一个大一些，一个小一些</li> </ul> <pre><code class="prism language-html"><style> #father { width: 200px; height: 200px; background: black; padding: 10px; } #child { width: 100px; height: 100px; background: greenyellow; } </style> <body> <div id="father"> <div id="child"></div> </div> <script> // 代码不重要，重要是知道这个事件发生，是正常现象 document.getElementById("father").addEventListener("click", function() { alert("父级元素的事件被触发：" + this.id); }); document.getElementById("child").addEventListener("click", function(e) { e.stopPropagation() //取消事件的冒泡机制 alert("子级元素的事件被触发：" + this.id); }); </script> </body> </code></pre> <ul> <li>先子，后父。事件的触发顺序自内向外，这就是事件冒泡；</li> </ul> <a href="http://img.e-com-net.com/image/info8/3f54bd22203b4da8a4e6f35276e8dfde.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3f54bd22203b4da8a4e6f35276e8dfde.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第70张图片" width="650" height="147" style="border:1px solid black;"></a> 6. 事件捕获 <ul> <li>还是刚才创建两个div，一个大一些，一个小一些</li> </ul> <pre><code class="prism language-html"><style> #father { width: 200px; height: 200px; background: black; padding: 10px; } #child { width: 100px; height: 100px; background: greenyellow; } </style> <body> <div id="father"> <div id="child"></div> </div> <script> document.getElementById("father").addEventListener("click",function(){ alert("父级：" + this.id); },true); document.getElementById("child").addEventListener("click",function(){ alert("子级：" + this.id); },true); </script> </body> </code></pre> <ul> <li>先父,后子。事件触发顺序变更为自外向内，这就是事件捕获；</li> </ul> <a href="http://img.e-com-net.com/image/info8/ff8890ee825b47feb64ed9dd3f7656ab.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ff8890ee825b47feb64ed9dd3f7656ab.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第71张图片" width="650" height="143" style="border:1px solid black;"></a> 面向对象OOP <ul> <li>使用Object创建通用对象</li> </ul> <pre><code class="prism language-javascript">var user = new Object(); user.name = "吕布"; user.age = 21; user.say = function(){ console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！"); } user.say(); var dog = new Object(); dog.nickname = "屎尿多"; dog.wang = function(){ console.log("我饿了，我要拆家了！"); } dog.wang(); </code></pre> <ul> <li>使用构造函数</li> </ul> <pre><code class="prism language-javascript">function userinfo(name , age){ this.name = name; this.age = age; this.say = function(){ console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！"); } } var user = new userinfo("詹姆斯",35); user.say(); </code></pre> <ul> <li>使用直接量</li> </ul> <pre><code class="prism language-javascript">var user = { username : "孙悟空", age : 527, say : function(){ console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！"); } }; user.say(); </code></pre> JSON <ul> <li>大家在互联网上来回传递数据，如果没有一个统一的格式，解析起来的难度很大（每个人的编码喜好不一样）</li> <li>JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。</li> <li>易于人阅读和编写，同时也易于机器解析和生成</li> </ul> <pre><code>{ 属性1：值1，属性2：值2，。。。。 } </code></pre> <pre><code class="prism language-html"><script> var json1 = { username: "吕布", age: 31 }; console.log("姓名：" + json1.username + "，年龄：" + json1.age + "岁"); // json数组 var josnarr = [{ name: "貂蝉", age: 18 }, { name: "小乔", age: 17 }]; console.log("貂蝉" + josnarr[0].age + "岁了"); console.log("小乔" + josnarr[1].age + "岁了"); // 复杂的json对象 var long = { name: "赵云", sex: "男", hobby: ["玉兰白龙驹", "龙胆亮银枪", "青釭剑"] }; console.log(long.name + "的主攻武器：" + long.hobby[1]); </script> </code></pre> <h3> 5、BOM操作</h3> <ul> <li>就是javascript对浏览器的一些常规操作的方法 (B:browser)</li> </ul> window对象 <a href="http://img.e-com-net.com/image/info8/578173d070194eda8e8ac6e6ad96c759.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/578173d070194eda8e8ac6e6ad96c759.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第72张图片" width="650" height="412" style="border:1px solid black;"></a> <pre><code class="prism language-html"><button onclick="kai()">极速入职</button> <script> function kai(){ window.open("http://lagou.com" , "拉勾网" , "width=500,height=300,left=400"); // window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); // IE才生效 } </script> </code></pre> 1. screen屏幕对象 <ul> <li>我想知道我的电脑屏幕多大？实际上，得到的就是分辨率</li> </ul> <pre><code class="prism language-html"><body> <button onclick="kai()">求大小</button> </body> <script> function kai() { alert(window.screen.width + "|" + window.screen.height); } </script> </code></pre> 2. location定位 <ul> <li>包含有关当前 URL 的信息，通常用来做页面跳转</li> </ul> <pre><code class="prism language-html"><button onclick="test()">测试</button> <script> function test(){ console.log( "当前页面的URL路径地址："+ location.href ); location.reload(); // 重新加载当前页面（刷新） location.href = "http://lagou.com"; // 跳转页面 } </script> </code></pre> 3. history浏览器历史 <ul> <li>history对象会记录浏览器的痕迹</li> <li>a.html</li> </ul> <pre><code class="prism language-html"><a href="b.html">去b页面</a> </code></pre> <ul> <li>b.html</li> </ul> <pre><code class="prism language-html"><button onclick="hui()">返回</button> <script> function hui(){ //history.go(-1); //上一级页面 history.back(); // 与go(-1)是等价的 } </script> </code></pre> 4. navigator 导航（了解） <ul> <li>window.navigator 对象包含有关访问者浏览器的信息;</li> </ul> <pre><code class="prism language-html"><script> var str = ""; str += "浏览器的代号："+ navigator.appCodeName +""; str += "浏览器的名称："+ navigator.appName+""; str += "浏览器的版本："+ navigator.appVersion+""; str += "硬件平台："+ navigator.platform+""; str += "用户代理："+ navigator.userAgent +""; str += "启用Cookies："+navigator.cookieEnabled+""; document.write(str); </script> </code></pre> 5. 存储对象 <ul> <li> 用起来和我们在java中map很相似，都是键值对的方式存数据 </li> <li> 本地存储 localStorage </li> </ul> <pre><code class="prism language-html">在关闭窗口或标签页之后将会删除这些数据 - 保存数据 localStorage.setItem("name","curry"); - 提取数据 localStorage.getItem("name"); - 删除数据 localStorage.removeItem("name"); - 多样化操作 // 三种方式保存数据 localStorage["a"] = 1; localStorage.b = 2; localStorage.setItem("c",3); // 查看数据类型 console.log( typeof localStorage["a"] ) console.log( typeof localStorage["b"] ) console.log( typeof localStorage["c"] ) // 第一种方式读取 var a = localStorage.a; console.log(a); // 第二种方式读取 var b = localStorage["b"]; console.log(b); // 第三种方式读取 var c = localStorage.getItem("c"); console.log(c); </code></pre> <ul> <li>会话存储 sessionStorage</li> </ul> <pre><code class="prism language-html">会话，就是保持浏览器别关闭。关闭浏览就等于结束了一次会话。开启浏览器就意味着创建了一次会话。 - 保存数据 sessionStorage.setItem("name", "klay"); - 提取数据 var lastname = sessionStorage.getItem("name"); - 删除指定键的数据 sessionStorage.removeItem("name"); - 删除所有数据 sessionStorage.clear(); - 案例：记录点击了几下按钮 <button onclick="dian()">点我</button> <h3 id="result"></h3> <script> function dian(){ if( sessionStorage.getItem("clickCount") ){ sessionStorage.setItem("clickCount", Number(sessionStorage.getItem("clickCount")) + 1); }else{ sessionStorage.setItem("clickCount", 1); } document.getElementById("result").innerHTML = "已经点击了"+ sessionStorage.getItem("clickCount") +"次！" } </script> </code></pre> 计时操作 1. 周期性定时器 setInterval <ul> <li>setInterval(1,2)：周期性触发代码exp （常用） 1：执行语句（函数） 2：时间周期，单位为毫秒</li> <li>案例：闪烁的字体（1秒1变色）</li> </ul> <pre><code class="prism language-html"><body> <h1 id="title">拉勾网：极速入职</h1> <script> var colors = ["red","blue","yellow","pink","orange","black"]; var i = 0; function bian(){ document.getElementById("title").style.color = colors[i++]; if(i == colors.length){ i = 0; // 颜色重新开始 } } setInterval(bian,100); // 每隔0.1秒，执行一次bian函数 </script> </body> </code></pre> <ul> <li>案例：在闪烁字体的基础上扩展，闪烁的电子时钟</li> </ul> <pre><code class="prism language-html"><body> <h1 id="title"></h1> <script> var colors = ["red","blue","yellow","pink","orange","black"]; var i = 0; function bian(){ document.getElementById("title").style.color = colors[i++]; if(i == colors.length){ i = 0; // 颜色重新开始 } } function time(){ var d = new Date(); var str = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"号"+d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒"; document.getElementById("title").innerHTML = str; } setInterval(bian,100); // 每隔1秒，执行一次变色函数bian setInterval(time,1000); // 每隔1秒，执行一次时间函数time </script> </body> </code></pre> 2. 停止定时器 clearInterval <ul> <li>案例：模拟年会抽奖</li> </ul> <pre><code class="prism language-html"><body> <img id="tu" src="../lagou-html/img/1.jpg" width="50%" /> <br /> <button onclick="begin()">开始</button> <button onclick="stop()">停止</button> <script> var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]; function begin() { timer = setInterval(bian, 100); // 没有使用var，所以timer是全局变量 } function stop() { clearInterval(timer); // 停止定时器 } function bian() { var i = Math.floor(Math.random() * arr.length); // 0-4 document.getElementById("tu").src = "../lagou-html/img/" + arr[i]; } </script> </body> </code></pre> 3. 一次性定时器 setTimeout <ul> <li>相当于延迟的效果，只执行一次</li> </ul> <pre><code class="prism language-html"><script> function bian(){ document.body.style.backgroundColor = "red"; } //3秒之后调用 setTimeout(bian,3000); </script> </code></pre> <h2> 模块一作业</h2> <ol> <li>编写一个注册用户信息页面，需求如下： ▹表单中包括：用户名，密码，性别，学历（本科，专科），自我介绍； ▹输入完用户名后校验只能是"admin"，否则弹框提示错误 ▹点击提交执行后执行事件，把自我介绍的内容弹框提示出来；</li> <li>使用html+css完成效果图（素材见课件） <a href="http://img.e-com-net.com/image/info8/79b6caaffe90455585137f3c954374d0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/79b6caaffe90455585137f3c954374d0.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第73张图片" width="650" height="414" style="border:1px solid black;"></a></li> </ol> <h1>第三阶段模块二前端高级(jQuery、ES6、Bootstrap)</h1> <h2>任务四 (jQuery)</h2> <h3>1. jQuery介绍</h3> <ul> <li>jQuery由美国人John Resig（约翰·莱西格）于2006年创建</li> <li>jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装</li> <li>它的设计思想是write less,do more</li> <li>实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码</li> </ul> <pre><code class="prism language-javascript">$("tr:even").css("background-color","#ccc"); </code></pre> <a href="http://img.e-com-net.com/image/info8/adfda7a984134f619041d83d6345d3b0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/adfda7a984134f619041d83d6345d3b0.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第74张图片" width="501" height="148" style="border:1px solid black;"></a> <h4>1.1 jQuery能做什么?</h4> <ul> <li>访问和操作DOM元素</li> <li>控制页面样式</li> <li>对页面事件进行处理</li> <li>扩展新的jQuery插件</li> <li>与Ajax技术完美结合</li> </ul> jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率 其实，jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩，而jQuery也是对JavaScript的高度压缩库 <h4>1.2 jQuery的优势</h4> <ul> <li>体积小，压缩后只有100KB左右</li> <li>强大的选择器</li> <li>出色的DOM封装</li> <li>可靠的事件处理机制</li> <li>出色的浏览器兼容性</li> </ul> <h4>1.3 jQuery下载</h4> 进入jQuery官网：http://jQuery.com <a href="http://img.e-com-net.com/image/info8/ad7e5c91e78e45068b7e64373117f406.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ad7e5c91e78e45068b7e64373117f406.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第75张图片" width="650" height="226" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/c99051ec97b949d580e3f17e4ce119c1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c99051ec97b949d580e3f17e4ce119c1.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第76张图片" width="650" height="189" style="border:1px solid black;"></a> 我们使用压缩版就可以。体积更小，内容已经通过算法进行压缩，不会浪费资源空间！ 而开发版就针对修改jQuery源码的专业前端开发者的。 <h3>2. jQuery的使用</h3> jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突 在页面中使用传统引入js文件的方式引入即可。 <pre><code class="prism language-html"><script src="js/jquery-3.4.1.min.js"></script> </code></pre> <h4>2.1 基本的语法介绍</h4> <pre><code class="prism language-html"><script> $(selector).action(); </script> </code></pre> <ul> <li>说明： 工厂函数 $() ：将DOM对象转化为jQuery对象 选择器 selector：获取需要操作的DOM 元素（没错，用法基本上和css一致） 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”</li> <li>例如：</li> </ul> <pre><code class="prism language-html"><body> <p>hello</p> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> alert( $("p").text() ); </script> </code></pre> <h4>2.2 jQuery对象与DOM对象</h4> <ul> <li>DOM对象和jQuery对象分别拥有一套独立的方法，不能混用</li> </ul> <pre><code class="prism language-javascript">$("#title").html(); // 等同于 document.getELementById("title").innerHTML; </code></pre> <ul> <li>想混用，要转换 DOM对象转jQuery对象 jQuery对象转DOM对象</li> </ul> <pre><code class="prism language-javascript">//DOM对象转jQuery对象 var a = document.getElementById("name"); // a是DOM对象 var b = $(a); // b是jQuery对象 //jQuery对象转DOM对象 var a = $("#name"); // a是jQuery对象 var b = jqObject.get(0); // b是DOM对象 </code></pre> <h4>2.3 选择器</h4> <h5>2.3.1 基本选择器</h5> 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器 <table> <thead> <tr> <th align="left">名称</th> <th align="left">语法构成</th> <th align="left">描述</th> <th align="left">示例</th> </tr> </thead> <tbody> <tr> <td align="left">标签选择器</td> <td align="left">element</td> <td align="left">根据给定的标签名匹配元素</td> <td align="left">$(“h2” )选取所有h2元素</td> </tr> <tr> <td align="left">类选择器</td> <td align="left">.class</td> <td align="left">根据给定的class匹配元素</td> <td align="left">$(" .title")选取所有class为title的元素</td> </tr> <tr> <td align="left">ID选择器</td> <td align="left">#id</td> <td align="left">根据给定的id匹配元素</td> <td align="left">$(" #title")选取id为title的元素</td> </tr> <tr> <td align="left">并集选择器</td> <td align="left">selector1,selector2,…,selectorN</td> <td align="left">将每一个选择器匹配的元素合并后一起返回</td> <td align="left">$(“div,p,.title” )选取所有div、p和拥有class为title的元素</td> </tr> <tr> <td align="left">交集选择器</td> <td align="left">element.class或element#id</td> <td align="left">匹配指定class或id的某元素或元素集合</td> <td align="left">$(“h2.title”)选取所有拥有class为title的h2元素</td> </tr> </tbody> </table> <pre><code class="prism language-html"><p>中国</p> <p>武汉</p> <p class="jy">加油</p> <p id="wan">祖国万岁</p> <h3 class="jy">祖国万岁</h3> <script src="js/jquery-3.4.1.min.js"></script> <script> //$("p").css("color","red"); // 标签选择器，获得所有的p //$(".jy").css("color","red"); //类选择器 //$("#wan").css("color","red"); //ID选择器,更具备唯一性 //$(".jy,#wan").css("color","red"); // 并集选择器，.jy和#wan $("h3.jy").css("color","red"); // 交集选择器，既是h3标签，又拥有.jy的元素 </script> </code></pre> <h5>2.3.2 层次选择器</h5> <table> <thead> <tr> <th align="left">名称</th> <th align="left">语法构成</th> <th align="left">描述</th> <th align="left">示例</th> </tr> </thead> <tbody> <tr> <td align="left">后代选择器</td> <td align="left">ancestor descendant</td> <td align="left">选取ancestor元素里的所有descendant（后代）元素</td> <td align="left">$("#menu span" )选取#menu下的元素</td> </tr> <tr> <td align="left">子选择器</td> <td align="left">parent>child</td> <td align="left">选取parent元素下的child（子）元素</td> <td align="left">$(" #menu>span" )选取#menu的子元素</td> </tr> <tr> <td align="left">相邻元素选择器</td> <td align="left">prev+next</td> <td align="left">选取紧邻prev元素之后的next元素</td> <td align="left">$(" h2+dl " )选取紧邻 元素之后的同辈元素</td> </tr> <tr> <td align="left">同辈元素选择器</td> <td align="left">prev~sibings</td> <td align="left">选取prev元素之后的所有siblings元素</td> <td align="left">$(" h2~dl " )选取 元素之后所有的同辈元素</td> </tr> </tbody> </table> <pre><code class="prism language-html"><h3>000</h3> <div id="x"> 111 <p>p1</p> <div> <p>p2</p> </div> </div> <h3>222</h3> <h3>333</h3> <script src="js/jquery-3.4.1.min.js"></script> <script> //$("#x p").css("color","red"); // 后代选择器，忽略层级 //$("#x>p").css("color","red"); // 子代选择器，只负责子级 //$("#x+h3").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟h3 $("#x~h3").css("color","red"); // 同辈元素选择器，下面的所有兄弟h3 </script> </code></pre> <h5>2.3.3 属性选择器</h5> <table> <thead> <tr> <th align="left">名称</th> <th align="left">语法构成</th> <th align="left">描述</th> <th align="left">示例</th> </tr> </thead> <tbody> <tr> <td align="left">属性选择器</td> <td align="left">[attribute]</td> <td align="left">选取包含给定属性的元素</td> <td align="left">$(" [href]" )选取含有href属性的元素</td> </tr> <tr> <td align="left"></td> <td align="left">[attribute=value]</td> <td align="left">选取等于给定属性是某个特定值的元素</td> <td align="left">$(" [href =’#’]" )选取href属性值为“#”的元素</td> </tr> <tr> <td align="left"></td> <td align="left">[attribute !=value]</td> <td align="left">选取不等于给定属性是某个特定值的元素</td> <td align="left">$(" [href !=’#’]" )选取href属性值不为“#”的元素</td> </tr> <tr> <td align="left"></td> <td align="left">[attribute^=value]</td> <td align="left">选取给定属性是以某些特定值开始的元素</td> <td align="left">$(" [href^=‘en’]" )选取href属性值以en开头的元素</td> </tr> <tr> <td align="left"></td> <td align="left">[attribute$=value]</td> <td align="left">选取给定属性是以某些特定值结尾的元素</td> <td align="left">$(" [href$=’.jpg’]" )选取href属性值以.jpg结尾的元素</td> </tr> <tr> <td align="left"></td> <td align="left">[attribute*=value]</td> <td align="left">选取给定属性是以包含某些值的元素</td> <td align="left">$(" [href* =‘txt’]" )选取href属性值中含有txt的元素</td> </tr> <tr> <td align="left"></td> <td align="left">[s1] [s2] [sN]</td> <td align="left">选取满足多个条件的复合属性的元素</td> <td align="left">$(“li[id][title=新闻]” )选取含有id和title属性为新闻的 <ul> <li>元素</li> </ul></td> </tr> </tbody> </table> <pre><code class="prism language-html"><a href="www.lagou.com">拉勾网</a> <a href="www.sina.com.cn">新浪网</a> <a href="http://www.163.com">网易</a> <p href="x">哈哈1</p> <p href="x" title="x">哈哈2</p> <script src="js/jquery-3.4.1.min.js"></script> <script> //$("[href]").css("color","red"); // 选取拥有href属性的元素 //$("[href='x']").css("color","red"); // 选取拥有href=x的元素 //$("a[href!='x']").css("color","red"); // 选取a标签中href不等于x的元素 //$("[href^='www']").css("color","red"); // 选取href属性以www开头的元素 //$("[href$='com']").css("color","red"); // 选取href属性以com结尾的元素 //$("[href*='a']").css("color","red"); // 选取href属性包含a的元素 $("p[href][title='x']").css("color","red"); // 选取拥有href属性和title属性，并且title=x的p元素 </script> </code></pre> <h5>2.3.4 过滤选择器</h5> <table> <thead> <tr> <th align="left">语法构成</th> <th align="left">描述</th> <th align="left">示例</th> </tr> </thead> <tbody> <tr> <td align="left">:first</td> <td align="left">选取第一个元素</td> <td align="left">$(" li:first" )选取所有元素中的第一个元素</td> </tr> <tr> <td align="left">:last</td> <td align="left">选取最后一个元素</td> <td align="left">$(" li:last" )选取所有元素中的最后一个元素</td> </tr> <tr> <td align="left">:even</td> <td align="left">选取索引是偶数的所有元素（index从0开始）</td> <td align="left">$(" li:even" )选取索引是偶数的所有元素</td> </tr> <tr> <td align="left">:odd</td> <td align="left">选取索引是奇数的所有元素（index从0开始）</td> <td align="left">$(" li:odd" )选取索引是奇数的所有元素</td> </tr> <tr> <td align="left">:eq(index)</td> <td align="left">选取索引等于index的元素（index从0开始）</td> <td align="left">$(“li:eq(1)” )选取索引等于1的元素</td> </tr> <tr> <td align="left">:gt(index)</td> <td align="left">选取索引大于index的元素（index从0开始）</td> <td align="left">$(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）</td> </tr> <tr> <td align="left">:lt(index)</td> <td align="left">选取索引小于index的元素（index从0开始）</td> <td align="left">$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）</td> </tr> </tbody> </table> <pre><code class="prism language-html"><h2 id="h2#x">修仙小说</h2> <ul> <li>凡人修仙传</li> <li>遮天</li> <li>神墓</li> <li>残袍</li> <li>大主宰</li> </ul> <script src="js/jquery-3.4.1.min.js"></script> <script> //$("li:first").css("color","red"); // 第一个li //$("li:last").css("color","red"); // 最后一个li //$("li:even").css("color","red"); // 偶数行的li //$("li:odd").css("color","red"); // 奇数行的li //$("li:eq(2)").css("color","red"); // 下标为2的li //$("li:gt(1)").css("color","red"); // 下标大于1的li //$("li:lt(2)").css("color","red"); // 下标小于2的li $("#h2\\#x").css("color","red"); // 使用转义符 </script> </code></pre> <h4>2.4 事件</h4> <h5>2.4.1 鼠标事件</h5> 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有： <table> <thead> <tr> <th align="left">方法</th> <th align="left">描述</th> <th align="left">执行时机</th> </tr> </thead> <tbody> <tr> <td align="left">click( )</td> <td align="left">触发或将函数绑定到指定元素的click事件</td> <td align="left">单击鼠标时</td> </tr> <tr> <td align="left">mouseover( )</td> <td align="left">触发或将函数绑定到指定元素的mouse over事件</td> <td align="left">鼠标移过时</td> </tr> <tr> <td align="left">mouseout( )</td> <td align="left">触发或将函数绑定到指定元素的mouse out事件</td> <td align="left">鼠标移出时</td> </tr> </tbody> </table> <pre><code class="prism language-html"><img src="img/1.jpg" width="300"> <img src="img/1.jpg" width="300"> <img src="img/1.jpg" width="300"> <script src="js/jquery-3.4.1.min.js"></script> <script> $("img").click( function(){ //点击一下，换照片 $(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头 } ); $("img").mouseover( function(){ //移动到元素上 $(this).css( "border","2px solid red" ); } ); $("img").mouseout( function(){ //离开元素 $(this).css( "border","2px solid white" ); } ); </script> </code></pre> <h5>2.4.2 键盘事件</h5> 用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有： <table> <thead> <tr> <th align="left">方法</th> <th align="left">描述</th> <th align="left">执行时机</th> </tr> </thead> <tbody> <tr> <td align="left">keydown( )</td> <td align="left">触发或将函数绑定到指定元素的keydown事件</td> <td align="left">按下键盘时</td> </tr> <tr> <td align="left">keyup( )</td> <td align="left">触发或将函数绑定到指定元素的keyup事件</td> <td align="left">释放按键时</td> </tr> </tbody> </table> <pre><code class="prism language-html"><input> <h3></h3> <script src="js/jquery-3.4.1.min.js"></script> <script> $("input").keyup( function(){ var str = $(this).val(); // 获取框中的值 $("h3").text( str ); // 将h3元素中的文本内容更改为str } ); </script> </code></pre> <a href="http://img.e-com-net.com/image/info8/d79122867065489785ddc618e6d7b21d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d79122867065489785ddc618e6d7b21d.jpg" alt="在这里插入图片描述" width="650" height="47"></a> <h5>2.4.3 表单事件</h5> <ul> <li>当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：</li> </ul> <table> <thead> <tr> <th align="left">方法</th> <th align="left">描述</th> <th align="left">执行时机</th> </tr> </thead> <tbody> <tr> <td align="left">focus( )</td> <td align="left">触发或将函数绑定到指定元素的focus事件</td> <td align="left">获得焦点</td> </tr> <tr> <td align="left">blur( )</td> <td align="left">触发或将函数绑定到指定元素的blur事件</td> <td align="left">失去焦点</td> </tr> </tbody> </table> <pre><code class="prism language-html"><form action=""> <p>帐号: <input id="a" value="请输入帐号..."> </p> <p>电话: <input id="b"> </p> </form> <script src="js/jquery-3.4.1.min.js"></script> <script> //获得焦点（激活/点击一下） $("#a").focus(function(){ $(this).val(""); }); //失去焦点（未激活/未点击） $("#a").blur(function(){ $(this).val("请输入帐号..."); }); </script> </code></pre> <h5>2.4.4 鼠标悬停复合事件</h5> hover()方法相当于mouseover与mouseout事件的组合 <pre><code class="prism language-html"><img src="img/3.jpg" width="400"> <script src="js/jquery-3.4.1.min.js"></script> <script> $("img").hover( function(){ $(this).css("border","5px solid red"); }, function(){ $(this).css("border","5px solid white"); } ); </script> </code></pre> <h5>2.4.5 连续点击复合事件</h5> toggle()除了可以模拟鼠标的连续单击事件 <pre><code class="prism language-html"><h2>修仙小说</h2> <ul> <li>凡人修仙传</li> <li>遮天</li> <li>神墓</li> <li>残袍</li> <li>大主宰</li> </ul> <script src="js/jquery-3.4.1.min.js"></script> <script> $("h2").click(function(){ $("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换 }); </script> </code></pre> <h5>2.4.6 事件的动态绑定</h5> 对dom元素绑定事件的另一种写法 <ul> <li>绑定一个事件</li> </ul> <pre><code class="prism language-javascript">$(".del").on('click', function() { alert('hello'); }) </code></pre> <ul> <li>绑定多个事件</li> </ul> <pre><code class="prism language-javascript">$(".del").on('click mouseover', function() { alert('hello'); }) </code></pre> <h4>2.5 元素的隐藏和显示</h4> <h5>2.5.1 改变元素的宽和高（带动画效果）</h5> <ul> <li>show( speed )：显示</li> <li>hide( speed )：隐藏</li> <li>toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示</li> </ul> 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒 <pre><code class="prism language-html"><style> div{ width: 200px; height: 200px; background-color: black; } </style> <body> <button id="btn1">显示</button> <button id="btn2">隐藏</button> <button id="btn3">切换</button> <div></div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("#btn2").click(function(){ //fast:快速的 //slow:缓慢的 //毫秒：自定义 $("div").hide(2000); }); $("#btn1").click(function(){ $("div").show('slow'); }); $("#btn3").click(function(){ $("div").toggle(1000); }); </script> </body> </code></pre> <h5>2.5.2 改变元素的高（拉伸效果）</h5> <ul> <li>slideDown( speed ) ：显示</li> <li>slideUp( speed )：隐藏</li> <li>slideToggle( speed )等价于slideDown+slideUp</li> </ul> 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒 <pre><code class="prism language-html"><script> $("#btn2").click(function(){ $("div").slideUp(1000); //向上收缩 }); $("#btn1").click(function(){ $("div").slideDown(1000); //向下伸展 }); $("#btn3").click(function(){ $("div").slideToggle(1000); //切换 }); </script> </code></pre> <h5>2.5.3 不改变元素的大小（淡入淡出效果）</h5> <ul> <li>fadeIn( speed ) 显示</li> <li>fadeOut( speed ) 隐藏</li> <li>fadeToggle( speed ) 等价于fadeIn+fadeOut动画</li> <li>fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）</li> </ul> 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒 <pre><code class="prism language-html"><script> $("#btn2").click(function(){ $("div").fadeOut(1000); // 隐藏：淡出我的视线 }); $("#btn1").click(function(){ $("div").fadeIn(1000); // 显示：映入眼帘 }); $("#btn3").click(function(){ $("div").fadeToggle(1000); // 切换 }); $("#btn4").click(function(){ $("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度 }); </script> </code></pre> <h5>2.5.4 链</h5> <ul> <li>链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起；</li> <li>例如：点击一次按钮，让div完成4个指定动作 1. 背景变粉 2. 字体变绿 3. 收缩 4. 拉伸</li> </ul> <pre><code class="prism language-html"><style> div{ width: 200px; height: 200px; background-color: black; color:white; font-size: 3em; } </style> <body> <button>试试</button> <div>hello</div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ $("div").css("backgroundcolor","pink").css("color","green").slideUp(1000).slideDown(1000); }); </script> </body> </code></pre> <h4>2.6 DOM和CSS的操作</h4> <h5>2.6.1 属性函数</h5> <ul> <li>attr( “属性” ); 获得元素的属性值 ○ attr( “属性” , “新值” ); 修改元素的属性值 ○ attr( 样式参数 ) ：样式参数可以写成json格式</li> </ul> <pre><code class="prism language-html"><body> <button id="btn1">点我试试</button> <hr> <img src="img/1.jpg" title="美女大图" width="300"> <script src="js/jquery-3.4.1.min.js"></script> <script> $("#btn1").click(function(){ $("img").attr("src","img/2.jpg"); $("img").attr("title","高清无码"); $("img").attr( { width:"200",height:"200"} ); }); </script> </body> </code></pre> <ul> <li>val() ; 获得表单元素中的value值 ○ val(“x”) 修改表单元素中的value值</li> <li>html(); 获得元素中的内容（标签+文本） ○ html(“x”) 修改元素中的内容（标签+文本）</li> <li>text(); 获得元素中的文本 ○ text(“x”) 修改元素中的文本（包括标签）</li> </ul> <pre><code class="prism language-html"><button>试试</button> <hr> <input id="username"> <div> <h1><i>中国加油！</i></h1> </div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ //alert($("input").val()); //input框中的值 //$("input").val("哈哈哈"); //修改input框中的值 //alert( $("div").html() ); //获得div中的内容（包含标签信息） //alert( $("div").text() ); //获得div中的内容（不包含标签信息，只包含文本内容） $("div").text("祖国万岁！"); //修改div中的内容（全部内容都覆盖） }); </script> </code></pre> <h5>2.6.2 样式函数</h5> <ul> <li>css( “属性”); 获得该属性值</li> <li>css( “属性”,“值”); 设置属性的值</li> <li>css( { json} ); 设置多个属性的值</li> </ul> <pre><code class="prism language-html"><style> div{ width: 150px; height: 150px; background-color: #000; } </style> <body> <button>试试</button> <hr> <div></div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ //var w = $("div").css("width"); // 获取css属性，width的值 //1.一个键值对 //$("div").css("background-color","pink"); //2.链式编程 //$("div").css("background-color","pink").css("borderradius","50%"); //3.json为参数 $("div").css({ opacity:"0.4", background:"orange", borderRadius:"50%" } ); }); </script> </body> </code></pre> <ul> <li>width(); 获得元素的宽度</li> <li>width( number ); 修改元素的宽度</li> <li>height(); 获得元素的高度</li> <li>height( number ); 修改元素的高度</li> </ul> <pre><code class="prism language-html"><style> div{ width: 150px; height: 150px; background-color: #000; } </style> <body> <button>试试</button> <hr> <div></div> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ var w = $("div").width(); // （无参）获取宽度 var h = $("div").height();// （无参）获取高度 // alert("宽:"+w+"px，高:"+h+"px"); $("div").width("300"); // （传参）修改宽度 $("div").height("300"); //（传参）修改高度 }); </script> </body> </code></pre> <h5>2.6.3 类样式函数</h5> <ul> <li>addClass(); 为元素添加类样式</li> <li>removeClass(); 将元素的类样式移除</li> <li>toggleClass(); 样式的切换（有->无，无->有）</li> </ul> <pre><code class="prism language-html"><style> div{ width: 100px; height: 100px; background-color: #000; } .a{ background: palevioletred; border-radius: 50%; } .b{ border:5px dashed darkcyan; opacity: 0.6; } .cn{ background: #000; color:#FFF; font-family: 字魂49号-逍遥行书; } </style> <body> <button id="btn1">试试</button> <button id="btn2">取消透明度</button> <button id="btn3">样式切换</button> <hr> <div></div> <h1>中华人民共和国，万岁！</h1> <script src="js/jquery-3.4.1.min.js"></script> <script> $("#btn1").click(function(){ // $("div").addClass("a"); $("div").addClass("a b"); }); $("#btn2").click(function(){ $("div").removeClass("b"); }); $("#btn3").click(function(){ $("h1").toggleClass("cn"); }); </script> </body> </code></pre> <h5>2.6.4 节点操作</h5> <ul> <li>创建节点 ○ 工厂函数$()用于获取或创建节点</li> <li>插入节点 ○ 插入子节点</li> </ul> <table> <thead> <tr> <th align="left">语法</th> <th align="left">功能</th> </tr> </thead> <tbody> <tr> <td align="left">append(content)</td> <td align="left">$(A).append(B)表示将B追加到A中，如：$(“ul”).append($newNode1);</td> </tr> <tr> <td align="left">appendTo(content)</td> <td align="left">$(A).appendTo(B)表示把A追加到B中，如：$newNode1.appendTo(“ul”);</td> </tr> <tr> <td align="left">prepend(content)</td> <td align="left">$(A). prepend (B)表示将B前置插入到A中，如：$(“ul”). prepend($newNode1);</td> </tr> <tr> <td align="left">prependTo(content)</td> <td align="left">$(A). prependTo (B)表示将A前置插入到B中，如：$newNode1.prependTo (“ul”);</td> </tr> </tbody> </table> <ul> <li>插入同辈节点</li> </ul> <table> <thead> <tr> <th align="left">语法</th> <th align="left">功能</th> </tr> </thead> <tbody> <tr> <td align="left">after(content)</td> <td align="left">$(A).after (B)表示将B插入到A之后，如：$(“ul”).after($newNode1);</td> </tr> <tr> <td align="left">insertAfter(content)</td> <td align="left">$(A). insertAfter (B)表示将A插入到B之后，如：$newNode1.insertAfter(“ul”);</td> </tr> <tr> <td align="left">before(content)</td> <td align="left">$(A). before (B)表示将B插入至A之前，如：$(“ul”).before($newNode1);</td> </tr> <tr> <td align="left">insertBefore(content)</td> <td align="left">$(A). insertBefore (B)表示将A插入到B之前，如：$newNode1.insertBefore(“ul”);</td> </tr> </tbody> </table> <ul> <li>替换节点 ○ replaceWith() ○ replaceAll()</li> <li>复制节点 ○ clone()</li> <li>删除节点 ○ remove()删除整个节点 ○ empty()清空节点内容</li> </ul> <pre><code class="prism language-html"><input> <button id="test">测试</button> <ul> <li>金瓶梅</li> <li>貂蝉往事</li> <li>东京热不热</li> </ul> <script src="js/jquery-3.4.1.min.js"></script> <script> $("#test").click(function(){ var bookname = $("input").val(); var newli = $("<li>"+bookname+"</li>"); //通过工厂函数，创建新的li节点 /*添加子节点*/ //$("ul").append(newli); // newli添加到ul后面 //newli.appendTo("ul"); // newli添加到ul后面 //$("ul").prepend(newli); // newli添加到ul前面 //newli.prependTo("ul"); /*添加同辈节点*/ //$("li:last").after( newli ); // newli添加到最后的li的后面 //newli.insertAfter("li:last"); //$("li:last").before(newli); //newli添加到最后的li的前面 //newli.insertBefore("li:last"); /*替换节点*/ //$("li:eq(1)").replaceWith(newli); // 将第二个li替换成newli //newli.replaceAll( "li:eq(1)" ); /*复制节点*/ //$("li:first").clone().insertAfter("li:last"); // 复制第一个li，并插入到最后一个li的后面 /*删除节点*/ //$("li:eq(1)").empty(); // 清空了节点上的文本（节点并没有消失） $("li:eq(1)").remove(); //删除节点 }); </script> </code></pre> <h4>2.7 遍历节点</h4> <h5>2.7.1 祖先元素</h5> 用于向上遍历 DOM 树的方法 <ul> <li>parent() 返回被选元素的直接父元素，仅仅是上一级（找爸爸）</li> <li>parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分</li> </ul> <pre><code class="prism language-html"><p><button>测试</button></p> <ul> <li>a</li> <li> <b>b</b> </li> <li>c</li> </ul> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ //var x = $("b").parent().html(); // 找爸爸 //var x = $("b").parents("ul").html(); // 找祖宗 ul //var x = $("b").parents("body").html(); // 找祖宗 body alert( x ); }); </script> </code></pre> <h5>2.7.2 同辈元素</h5> <ul> <li>next() 获取紧邻匹配元素之后的元素</li> <li>prev() 获取紧邻匹配元素之前的元素</li> <li>siblings( ) 获取位于匹配元素前面和后面的所有同辈元素</li> <li>siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素中，选择的</li> </ul> <pre><code class="prism language-html"><button>测试</button> <p>p1</p> <ul> <li>a</li> <li> <b>b</b> </li> <li>c</li> </ul> <p>p2</p> <p id="x">p3</p> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ //var x = $("ul").next().text(); // 紧邻的下一个元素 //var x = $("ul").prev().text(); // 紧邻的上一个元素 //var x = $("ul").siblings("#x").text(); // 所有的兄弟中，id=x的 var arr = $("ul").siblings(); // ul的所有兄弟,1个button，3个p，2个script for(var i = 0 ;i< arr.length ;i++){ alert(arr[i]); } }); </script> </code></pre> <h5>2.7.3 后代元素</h5> 后代是子、孙、曾孙等等 <ul> <li>children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”</li> </ul> <pre><code class="prism language-html"><button>测试</button> <ul> <li>a</li> <li>b</li> <li>c</li> </ul> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ //var x = $("ul").children().text(); //所有子节点：abc var x = $("ul").children("li:first").text(); //ul中的第一个子节点 alert(x); }); </script> </code></pre> <ul> <li>find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。</li> </ul> <pre><code class="prism language-html"><button>测试</button> <ul> <li>盘古</li> <li>蚩尤</li> <li>刑天 <p>龚工</p> </li> <h3>祝融</h3> </ul> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ //var x = $("ul").find("p").text(); //在ul中查找p元素，忽略层级 //var x = $("ul").find("h3").text(); //在ul中查找h3元素，忽略层级 var x = $("ul").find().text(); // 找什么？不知道！ alert(x); }); </script> </code></pre> <h5>2.7.4 元素的过滤</h5> <ul> <li>first()：过滤第一个元素</li> <li>last()：过滤最后一个元素</li> <li>eq(index)：过滤到下标为index的元素</li> <li>not()：除了什么之外的元素</li> <li>is()：返回布尔，判断是不是这种元素</li> </ul> <pre><code class="prism language-html"><button>测试</button> <ul> <li>盘古</li> <li>蚩尤</li> <li>刑天</li> </ul> <script src="js/jquery-3.4.1.min.js"></script> <script> $("button").click(function(){ //var x = $("li").first().text(); // 第一个li //var x = $("li").last().text(); // 最后一个li //var x = $("li").eq(1).text(); // 下标为1的li //var x = $("li").not("li:eq(1)").text(); // 除了下标为1的其余所有li var x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ul alert(x); }); </script> </code></pre> <h3>3. 案例</h3> <h4>3.1 手风琴特效</h4> <pre><code class="prism language-html"><style> dd{ display: none; /*隐藏元素*/ } </style> <body> <nav> <header>拉勾网</header> <ul> <li> <dl> <dt>求职</dt> <dd>1.简历</dd> <dd>2.面试</dd> <dd>3.入职</dd> </dl> </li> <li> <dl> <dt>教育</dt> <dd>1.看视频</dd> <dd>2.做作业</dd> <dd>3.24小时在线辅导</dd> </dl> </li> <li> <dl> <dt>3W创业</dt> <dd>1.帮助小企业</dd> <dd>2.头脑风暴</dd> <dd>3.赚钱啦</dd> </dl> </li> </ul> </nav> <script src="js/jquery-3.4.1.min.js"></script> <script> $("nav dt").click(function(){ //所有的dd全部都闭合上，除了自己的兄弟 $("dd").not( $(this).siblings() ).slideUp(500); // 自己的兄弟进行切换，显示闭合上，闭合的显示出来 $(this).siblings().slideToggle(500); }); </script> </body> </code></pre> <h4>3.2 购物车结算</h4> <a href="http://img.e-com-net.com/image/info8/9fdcc7ed71fe4221ad37711d843a9e6a.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/9fdcc7ed71fe4221ad37711d843a9e6a.png" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第77张图片" width="522" height="167" style="border:1px solid black;"></a> <pre><code class="prism language-html"><style> .jian,.jia{ border:1px solid #999; display: inline-block; /*超链接a是行内元素，只能转换成行内块元素，才能改变宽和高*/ width: 20px; height: 20px; text-align: center; text-decoration: none; } </style> <body> <table border="1" cellspacing="0" width="400"> <tr> <td>商品编号</td> <td>名称</td> <td>单价</td> <td>数量</td> <td>总价</td> </tr> <tr> <td>1</td> <td>炸香肠</td> <td>3</td> <td> <a href="#" class="jian">-</a> <span>1</span> <a href="#" class="jia">+</a> </td> <td>3</td> </tr> <tr> <td>2</td> <td>王八</td> <td>10</td> <td> <a href="#" class="jian">-</a> <span>1</span> <a href="#" class="jia">+</a> </td> <td>10</td> </tr> <tr> <td>3</td> <td>恐龙</td> <td>1000</td> <td> <a href="#" class="jian">-</a> <span>1</span> <a href="#" class="jia">+</a> </td> <td>1000</td> </tr> </table> <p style="width: 400px; text-align: right;"> 总价：<b style="color:red;">111</b> <button>提交订单</button> </p> </body> </code></pre> <pre><code class="prism language-javascript">$(".jia").on('click',function(){ var i = $(this).prev().text(); //获得原来的商品数量 var price = $(this).parent().prev().text(); //获取单价 i++; price = price*i; $(this).prev().text(i);//现在的商品数量 $(this).parent().next().text(price);//现在总价 // console.log(price); getTotal() }); $(".jian").on('click',function(){ var i = $(this).next().text(); var price = $(this).parent().prev().text(); i--; if(i==0){ //询问用户数量已经是0了，是否删除该商品 if(confirm('数量已经是0了，是否删除该商品?')){ //删除 $(this).parents('tr').remove(); } } else { price = price*i; $(this).next().text(i); $(this).parent().next().text(price); console.log(i); } getTotal() }); // 计算所有商品的总价方法1 // function getTotal(){ // // var arr = $('tr').not('tr:first').find('td:last'); // var arr = $('tr:not(tr:first)').find('td:last'); // var sum = 0; // for(var i=0; i<arr.length; i++){ // // sum += parseInt($(arr[i]).text()); // sum += Number($(arr[i]).text()); // } // $('b:last').text(sum); // console.log(); // } // 计算所有商品的总价方法2 function getTotal(){ // var arr = $('tr').not('tr:first').find('td:last'); var sum = 0; var arr = $('tr:not(tr:first)').find('td:last').each(function(){ //直接遍历 sum += Number($(this).text()); }); $('b:last').text(sum); // console.log(); } </code></pre> <h2>任务五 (ES6)</h2> <h3>1.ECMAScript6 简介</h3> <ul> <li>ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。</li> <li>它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言</li> </ul> <h4>1.1 ECMAScript 和 JavaScript 的关系</h4> <ul> <li>要讲清楚这个问题，需要回顾历史。</li> <li>1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织ECMA，希望这种语言能够成为国际标准</li> <li>ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。</li> <li>因此，ECMAScript （宪法）和 JavaScript（律师）的关系是，前者是后者的规格，后者是前者的一种实现</li> </ul> <h4>1.2 ES6 与 ECMAScript 2015 的关系</h4> <ul> <li>2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指JavaScript 语言的下一个版本。</li> <li>ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017 等等</li> </ul> <h3>2. 搭建前端环境</h3> <h4>2.1 Node 环境</h4> <h5>2.1.1 什么是Node.js</h5> <ul> <li>简单的说 Node.js 就是运行在服务端的 JavaScript。</li> <li>JavaScript程序，必须要依赖浏览器才能运行！没有浏览器怎么办？OK，nodejs帮你解决</li> <li>Node.js是脱离浏览器环境运行的JavaScript程序，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。</li> </ul> <h5>2.1.2 Node.js有什么用</h5> <ul> <li>如果你是前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那Node.js是一个非常好的选择。</li> <li>Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。</li> <li>当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。</li> </ul> <h5>2.1.3 安装</h5> 下载 <ul> <li>官网：https://nodejs.org/en/</li> <li>中文网：http://nodejs.cn/</li> <li>LTS：长期支持版本</li> <li>Current：最新版</li> <li>安装：Windows下双击点击安装——>Next——>finish</li> <li>注意： <ul> <li>node-v14.5.0-x64.msi 最新版本，如果是win7系统的话，可能安装不了。</li> <li>如果是win7系统，安装node-v10.14.2-x64.msi这个版本</li> </ul> </li> </ul> 查看版本 <ul> <li>在dos窗口中执行命令查看版本号 <code>node -v</code></li> </ul> 创建文件夹 lagou-node <ul> <li>用vscode打开目录，其目录下创建 hello.js <code>console.log("hello,nodejs");</code></li> <li>打开命令行终端：Ctrl + Shift + y 输入命令 <code>node hello.js</code></li> <li>第一次运行，可能会报错！ <a href="http://img.e-com-net.com/image/info8/dae78e09779a413d824c251908d0542f.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/dae78e09779a413d824c251908d0542f.png" alt="在这里插入图片描述" width="378" height="77"></a></li> <li>兼容性的问题，以管理员身份运行即可 <a href="http://img.e-com-net.com/image/info8/c19dc0fe998c42c598b4fa420e14db2e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c19dc0fe998c42c598b4fa420e14db2e.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第78张图片" width="459" height="137" style="border:1px solid black;"></a></li> <li>这样，没有使用浏览器，我们也可以运行js程序了 <a href="http://img.e-com-net.com/image/info8/8978a3cf6e1f486587e611a00a91dc6d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/8978a3cf6e1f486587e611a00a91dc6d.png" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第79张图片" width="328" height="111" style="border:1px solid black;"></a></li> </ul> <h5>2.1.4 服务器端应用开发（了解）</h5> <ul> <li>创建 node-server.js</li> </ul> <pre><code class="prism language-javascript">const http = require("http"); // node中自带的require引入方法，http也是node中自带的服务对象 http.createServer( function(request,response){ // 发出http请求的头部信息 // http的状态码：200；OK // 请求的内容类型：text/plain response.writeHead(200,{ "Content-Type": "text/plain"}); //响应的数据 "hello,welcome！" ,此时，并不支持中文（以后一定会解决！） response.end("hello,welcome!"); } ).listen(8888); // 监听端口 console.log("服务器已启动，请访问 http://127.0.0.1:8888"); </code></pre> <ul> <li>服务器启动成功后，在浏览器中输入：http://localhost:8888/ 查看webserver成功运行，并输出html页面</li> <li>停止服务：ctrl + c</li> </ul> <h4>2.2 NPM环境</h4> <h5>2.2.1 什么是NPM</h5> <ul> <li>NPM全称Node Package Manager，是Node.js包管理工具</li> <li>是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是Node.js的包管理工具，相当于前端的Maven</li> <li>如果一个项目需要引用很多第三方的js文件，比如地图，报表等，文件杂而乱，自己去网上下载，到处是广告和病毒</li> <li>那么，我们就想办法，把这些js文件统一放在一个仓库里，大家谁需要，谁就去仓库中拿过来，方便多了</li> <li>npm就是这个仓库系统，如果你需要某个js文件，那就去远程仓库中下载，放在本地磁盘中，进而引用到我们的项目中</li> <li>管理前端工程 so easy！</li> </ul> <h5>2.2.2 NPM工具的安装位置</h5> <ul> <li>node的环境在安装的过程中，npm工具就已经安装好了。</li> <li>Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules</li> <li>在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明 Node.js已经集成了npm工具</li> </ul> <pre><code class="prism language-bash">#在命令提示符输入 npm -v 可查看当前npm版本 npm -v </code></pre> <h5>2.2.3 使用npm管理项目</h5> 项目初始化 <ul> <li>全新创建一个目录，作为项目目录，使用dos命令进入此目录，输入命令</li> </ul> <pre><code class="prism language-bash">npm init # 接下来是一堆项目信息等待着你输入，如果使用默认值或你不知道怎么填写，则直接回车即可。 # package name: 你的项目名字叫啥 # version: 版本号 # description: 对项目的描述 # entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件） # test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js） # git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地 址了） # keywirds：项目关键字（我也不知道有啥用，所以我就不写了） # author: 作者的名字（也就是你叫啥名字） # license: 发行项目需要的证书（这里也就自己玩玩，就不写了） </code></pre> <ul> <li>最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml</li> <li>我们之后也可以根据需要进行修改。</li> <li>上述初始化一个项目也太麻烦了，要那么多输入和回车。想简单点，一切都按照默认值初始化即可，ok，安排</li> </ul> <pre><code class="prism language-bash">npm init -y </code></pre> <h5>2.2.4 修改npm镜像和存储地址</h5> <ul> <li>NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。</li> <li>这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。</li> <li>设置镜像和存储地址：</li> </ul> <pre><code class="prism language-bash">#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载 npm config set registry https://registry.npm.taobao.org #设置npm下载包时保存在本地的地址（建议英文目录） npm config set prefix "E:\\repo_npm" #查看npm配置信息 npm config list </code></pre> <h5>2.2.5 npm install命令的使用</h5> <pre><code class="prism language-bash">npm install jquery </code></pre> <ul> <li>使用 npm install 安装依赖包的最新版</li> <li>模块安装的位置：项目目录\node_modules</li> <li>安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本</li> <li>同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <a href="http://img.e-com-net.com/image/info8/e6fe9cfd4d6343378657eae1b299b0da.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e6fe9cfd4d6343378657eae1b299b0da.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第80张图片" width="530" height="218" style="border:1px solid black;"></a></li> <li>jQuery版本有很多，上述命令下载的什么版本的？最新版</li> <li>如果我的项目使用1.9.1版本进行开发的，通过npm安装的3.5.1版本太新，会导致项目失效，如何安装指定版本库？</li> </ul> <pre><code class="prism language-bash">npm install jquery@1.9.1 </code></pre> <h3>3. ES6基本语法</h3> <ul> <li>ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。</li> <li>本部分只学习前端开发中ES6的必要知识，方便后面项目开发中对代码的理解。</li> </ul> <h4>3.1 let声明变量</h4> <ul> <li>与我们的JavaScript中var声明变量有什么区别？</li> </ul> <ol> <li>作用域不同</li> </ol> <pre><code class="prism language-javascript">{ var a = 0; // var声明的变量是全局变量 let b = 0; // let声明的变量是局部变量 } console.log(a); console.log(b); //b is not defined：b没有定义 </code></pre> <ol start="2"> <li>声明次数不同</li> </ol> <pre><code class="prism language-javascript">// var可以声明多次 // let只能声明一次 var m = 1; var m = 2; let n = 3; let n = 4; //SyntaxError: Identifier 'n' has already been declared（语法错误：n已 经声明过了） console.log(m); console.log(n); </code></pre> <ol start="3"> <li>声明与使用顺序不同</li> </ol> <pre><code class="prism language-javascript">// var 声明的变量会全局存储 // let 声明的变量只能在执行后才存储 console.log( x ); //没有报错，输出：undefined var x = "苹果"; console.log(y); //y is not defined（y没有定义） let y = "香蕉"; </code></pre> <h4>3.2 const声明常量</h4> <ul> <li>const 声明常量,为只读变量</li> </ul> <ol> <li>一旦声明之后，其值是不允许改变的</li> <li>一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错误，声明常量丢失了初始化）</li> </ol> <pre><code class="prism language-javascript">const PI = 3.14; PI = 3.1415; //Assignment to constant variable.（声明的是常量） console.log( PI ); </code></pre> <h4>3.3 解构赋值</h4> <ul> <li>解构赋值是对赋值运算符的扩展</li> <li>它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。</li> <li>解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取</li> <li>在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。</li> </ul> <h5>3.3.1 数组解构</h5> <pre><code class="prism language-javascript">var arr = [1,2,3]; // 传统的js let a = arr[0]; let b = arr[1]; let c = arr[2]; console.log(a,b,c); //es6的解构 var [x,y,z] = arr; console.log(x,y,z); </code></pre> <h5>3.3.2 对象解构</h5> <pre><code class="prism language-javascript">var user = { username : "吕布", weapon:"方天画戟", horse:"赤兔马" }; // 传统的js let mingzi = user.username; let wuqi = user.weapon; let zuoji = user.horse; console.log("姓名:"+mingzi+",武器:"+wuqi+",坐骑:"+zuoji); //es6的解构 let { username,weapon,horse} = user; // 注意：解构的变量名必须是对象中的属性 console.log("姓名:"+username+",武器:"+weapon+",坐骑:"+horse); </code></pre> <h4>3.4 模板字符串</h4> <ul> <li>模板字符串相当于加强版的字符串</li> <li>用反引号 `,除了作为普通字符串，还可以用来定义多行字符串</li> <li>还可以在字符串中加入变量和表达式。</li> </ul> <h5>3.4.1 定义多行字符串</h5> <ul> <li>再见了，\n</li> </ul> <pre><code class="prism language-javascript">let str = `hello, 你俩在哪呢？心情不好，出来喝点啊！`; console.log(str); </code></pre> <h5>3.4.2 字符串插入变量和表达式</h5> <ul> <li>再见了，字符串的拼接用 +</li> </ul> <pre><code class="prism language-javascript">let name = `吕布`; let age = 24; // 传统的拼接字符串 var info1 = "我叫:"+ name +",我今年"+age+"岁！"; console.log(info1); // es6的拼接字符串 var info2 = `我叫:${ name},我明年${ age+1}岁！`; console.log(info2); </code></pre> <h5>3.4.3 字符串中调用函数</h5> <ul> <li>还能这么玩</li> </ul> <pre><code class="prism language-javascript">function test(){ return "吃喝玩乐"; } let str = `悲催的人生，从${ test()}开始`; console.log( str ); </code></pre> <h4>3.5 声明对象简写</h4> <ul> <li>定义对象的时候，可以用变量名作为属性名</li> </ul> <pre><code class="prism language-javascript">let name = `吕布`; let age = 28; //传统 let user1 = { name : name, age : age }; console.log(user1); //es6新语法中的简写 let user2 = { name,age}; console.log(user2); </code></pre> <h4>3.6 定义方法简写</h4> <pre><code class="prism language-javascript">// 传统 let user1 = { say : function(){ console.log("大家好！"); } }; user1.say(); //es6，直接声明函数 let user2 = { say(){ console.log("大家好啊！"); } }; user2.say(); </code></pre> <h4>3.7 对象拓展运算符</h4> <ul> <li>拓展运算符 {…} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象</li> </ul> <h5>3.7.1 拷贝对象(深拷贝)</h5> <ul> <li>科幻电影中的一滴血，就可以制作出一个完全一模一样的克隆人</li> </ul> <pre><code class="prism language-javascript">let user1 = { name:"项羽", age:34 }; let user2 = { ...user1}; // 深拷贝（克隆） console.log(user1); console.log(user2); </code></pre> <h5>3.7.2 合并对象</h5> <ul> <li>吞噬合并（两个对象合并成一个对象）</li> </ul> <pre><code class="prism language-javascript">let user1 = { name:"项羽", age:34 }; let user2 = { head:"诸葛亮"}; let user = { ...user1,...user2}; console.log( user ); </code></pre> <h4>3.8 函数的默认参数</h4> <ul> <li>形参处已声明，但不传入实参会怎样？</li> </ul> <pre><code class="prism language-javascript">function test(name , age = 18){ console.log(`我叫${ name}，我今年${ age}岁`); } test("吕布",33); //我叫吕布，我今年33岁 test("貂蝉"); //我叫貂蝉，我今年18岁 test("关羽",null); //我叫关羽，我今年null岁 test("马超",""); //我叫马超，我今年岁 test("张飞",undefined); //我叫张飞，我今年18岁 </code></pre> <h4>3.9 函数的不定参数</h4> <ul> <li>定义方法时，不确定有几个参数？</li> </ul> <pre><code class="prism language-javascript">function test( ...arg ){ console.log(`传入了${ arg.length}个参数`); for(var i = 0 ;i<arg.length;i++){ console.log(arg[i]); } } test(1); test(1,2); test(1,2,3,4,5,6); test(); test("郭","嘉",28); </code></pre> <h4>3.10 箭头函数</h4> <ul> <li>箭头函数提供了一种更加简洁的函数书写方式。基本语法是：参数 => 函数体</li> </ul> <pre><code class="prism language-javascript">// 传统 var f1 = function(a){ return a*10; } console.log( f1(10) ); // es6 var f2 = a=>a*10; console.log( f2(20) ); // 当箭头函数一个参数时，（）可以省略 // 当箭头函数没有参数或者有多个参数，要用（）括起来 // 当箭头函数的函数体有多行语句，用｛｝括起来，表示代码块 // 当只有一条语句，并且需要返回时，可以省略｛｝，结果会自动返回 var f3 = (a,b) => { let sum = a+b; return sum; } console.log( f3(3,7) ); // 可以将f3进行简化 var f4 = (a,b) => a + b; console.log( f3(11,22) ); </code></pre> <h4>3.11 Promise（了解）</h4> <ul> <li>用来解决回调函数的嵌套噩梦（后面学习ajax才能更好的理解）</li> <li>我们回顾一下嵌套噩梦： ○ 你和我打架，我打不过你，我说：你在这等着，我找我哥来揍你！ ○ “哥，我被老王打了，你帮我揍他！”，“行，我先把饭做完，你先去找刘备，把刘备找来，我和刘备再一起帮你报仇！” ○ “刘备，我被老王打了，我哥叫我来找你，一起帮我报仇！”，“没问题，兄弟，我去交电话费，你去找我二弟关羽，他打架厉害，把他叫来，我们一起更有把握！” ○ “关羽，我被人打了，我哥叫我找刘备，刘备让我来找你，一起帮我报仇！”，“没问题，兄弟，我有点事，你先去找我三弟张飞，把张飞找来，我这边就办完事了，我们一起帮你报仇去！” ○ “张飞，我让老王打了，谁谁谁，哎，反正关羽让我找你，你跟我走，一起帮我报仇去！”，“行啊，老铁，我一会从老丈人回来就去找你，你去把我二哥的儿子关平找来，正好打一架让这小子练练胆。找到了我们一起帮你报仇！” ○ 。。。 ○ 满嘴的兄弟情深，一个拖一个，就是不想帮我报仇</li> <li>使用promise解决掐架找人的噩梦 ○ “哥，老王打我！”，“走，但老王厉害，我们去找刘备一起帮你报仇！” ○ “刘备，走着，我们一起揍老王去”，“没问题！”，“二弟，过来，有人欺负我们，去揍他！” ○ 。。。找人过程中，都是立刻跟着走，没人拖！ ○ 最终，我们108人一起找到了老王！！！！</li> <li>找到一个人成功后，再继续找下一个人。逐渐形成了“队伍”</li> <li>组建队伍的过程中，如果找某个人失败了，则“队伍”失败</li> <li>其实有点类似“击鼓传花”的游戏，一个成功拿到花之后，才能传递给下一个人。依次类推！</li> </ul> <pre><code class="prism language-javascript">setTimeout(()=>{ console.log(1); setTimeout(()=>{ console.log(2); setTimeout(()=>{ console.log(3); setTimeout(()=>{ console.log(4); },1000); },1000); },1000); },1000); </code></pre> <ul> <li>使用promise</li> </ul> <pre><code class="prism language-javascript">next = n => //Promise的构造函数接收一个参数，是函数， //并且传入两个参数：resolve(异步操作执行成功后的回调函数)，reject(异步操作执行失败后的回调函数) new Promise(function(resolve, reject) { setTimeout(function() { resolve(n); }, 1000); }); next(1) .then(res => { // 成功 console.log(res); return next(2); //在then方法中调用的next方法，一定要用return ，否则不会通过resolve把数据往下传递 }) .then(res => { console.log(res); return next(3); }) .then(res => { console.log(res); }) .catch(() => { //处理失败：catch方法的第二个参数是失败的回调 console.log("出错啦！"); }); </code></pre> <h4>3.12 模块化</h4> <ul> <li>如果在a.js文件中定义了5个方法，现在b.js文件中想使用a中的5个方法，怎么办？</li> <li>java语言的做法是import引入之后，就能使用了。es6的模块化，就是这个过程</li> <li>将一个js文件声明成一个模块导出之后，另一个js文件才能引入这个模块</li> <li>每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。</li> </ul> <h5>3.12.1 传统的模块化</h5> <ul> <li>创建user.js文件</li> </ul> <pre><code class="prism language-javascript">function addUser(name){ return `保存${ name}成功！`; } function removeUser(id){ return `删除${ id}号用户！`; } // 声明模块并导出 // module.exports={ // save:addUser, // delete:removeUser // } // 声明模块导出的简写 module.exports={ addUser, removeUser } </code></pre> <ul> <li>test.js</li> </ul> <pre><code class="prism language-javascript">let user = require("./user.js"); //引入user模块 console.log( user ); let result1 = user.addUser("吕布"); let result2 = user.removeUser(101); console.log(result1); console.log(result2); </code></pre> <h5>3.12.2 ES6的模块化</h5> <ul> <li>user.js</li> </ul> <pre><code class="prism language-javascript">let name = "老孙"; let age = 66; let fn = function(){ return `我是${ name}!我今年${ age}岁了！`; } // 声明模块并导出 export{ name, age, fn } </code></pre> <ul> <li>test.js</li> </ul> <pre><code class="prism language-javascript">import { name,age,fn} from "./user.js" console.log(name); console.log(age); console.log(fn); </code></pre> <ul> <li>运行test.js，报错：SyntaxError: Unexpected token { （语法错误，在标记{的位置）</li> <li>原因是node.js并不支持es6的import语法，我们需要将es6转换降级为es5！</li> </ul> <h4>3.13 babel环境</h4> <ul> <li>babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有的环境中执行。</li> <li>这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持</li> </ul> <h5>3.13.1 安装babel客户端环境</h5> <ul> <li>创建新目录 lagou-babel，在终端中打开，运行命令：</li> </ul> <pre><code class="prism language-bash">npm install --global babel-cli </code></pre> <ul> <li>查看版本</li> </ul> <pre><code class="prism language-bash">babel --version </code></pre> <ul> <li>如果报错1：（win7系统中）</li> <li>‘babel’ 不是内部或外部命令，也不是可运行的程序或批处理文件。（babel命令在当前系统中不被认可） ○ 由于babel是通过npm安装，所以babel会默认安装到 E:\repo_npm（C:\Windows\System32\cmd.exe） ○ 在 E:\repo_npm 这个目录下，进入dos命令，执行 babel --version，如果是成功的，说明babel已经安装成功 ○ 但是在vscode的终端中打不开，那么只可能是两个原因： ▸ 环境变量没有配置 ▹ 系统环境变量中 path中加入 ;E:\repo_npm; ▹ 在任意位置进入dos窗口，babel --version可以了，说明环境变量配置成功 ▸ vscode关掉，重新以“管理员身份运行 ”</li> <li>如果报错2：（win10系统中） <a href="http://img.e-com-net.com/image/info8/fd5337315e8c4a14b292f439ded21216.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fd5337315e8c4a14b292f439ded21216.jpg" alt="在这里插入图片描述" width="650" height="68"></a></li> <li>windows10默认禁止运行有危险的脚本，修改一下系统策略就好了</li> <li>开始菜单-> Windows PowerShell (切记要以管理员身份运行)，输入代码</li> </ul> <pre><code class="prism language-bash">set-ExecutionPolicy RemoteSigned </code></pre> <a href="http://img.e-com-net.com/image/info8/5f199616421646778959de1209ca918f.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/5f199616421646778959de1209ca918f.png" alt="在这里插入图片描述" width="712" height="99"></a> <ul> <li>现在，就可以看版本号了。</li> </ul> <h5>3.13.2 安装转码器</h5> <ol> <li>创建lagou-babel专属目录，在其中初始化项目</li> </ol> <pre><code class="prism language-bash">npm init -y </code></pre> <ol start="2"> <li>创建babel配置文件 .babelrc ，并输入代码配置：</li> </ol> <pre><code class="prism language-javascript">{ "presets": ["es2015"], "plugins": [] } </code></pre> <ol start="3"> <li>安装转码器</li> </ol> <pre><code class="prism language-bash">npm install --save-dev babel-preset-es2015 </code></pre> <ol start="4"> <li>转码 创建dist目录，用来存放转码后的文件</li> </ol> <pre><code class="prism language-bash">babel user.js --out-file .\dist\user.js 或 babel user.js -o .\dist\user.js </code></pre> <ol start="5"> <li>运行转码后的文件</li> </ol> <pre><code class="prism language-bash">node .\dist\test.js </code></pre> <h4>3.14 ES6模块化的另一种写法</h4> <h5>3.14.1 as的用法</h5> <ul> <li>user.js：如果你不想暴露模块当中的变量名字，可以通过as来进行重命名的操作:</li> </ul> <pre><code class="prism language-javascript">let name = "老孙"; let age = 66; let fn = function(){ return `我是${ name}!我今年${ age}岁了！`; } // 声明模块并导出 export{ name as a, // 将属性重命名 age as b, fn as c } </code></pre> <ul> <li>test.js</li> </ul> <pre><code class="prism language-javascript">import { a,b,c} from "./user.js"; console.log(a); console.log(b); console.log(c()); </code></pre> <ul> <li>也可以接收整个模块</li> <li>test.js</li> </ul> <pre><code class="prism language-javascript">import * as info from "./user.js"; // 通过*来批量接收，用as来指定接收的对象名字 console.log(info.a); console.log(info.b); console.log(info.c()); </code></pre> <h5>3.14.2 默认导出</h5> <ul> <li>可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出</li> </ul> <pre><code class="prism language-javascript">/*****************导出****************************/ export default{ name:"老孙", eat(){ return "吃点啥！"; } } /*****************导入****************************/ import p from "./person.js"; console.log( p.name, p.eat() ); </code></pre> <h5>3.14.3 重命名export和import</h5> <ul> <li>如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，</li> <li>为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：</li> </ul> <pre><code class="prism language-javascript">/*******************student1.js**************************/ export let name = "我是来自student1.js"; /*******************student2.js************************/ export let name = "我是来自student2.js"; /*******************test_student.js************************/ import { name as name1} from './student1.js'; import { name as name2} from './student2.js'; console.log( name1 ); // 我是来自student1.js console.log( name2 ); // 我是来自student2.js </code></pre> <h2>任务六 (Bootstrap)</h2> <h3>1.bootstrap简介</h3> <h4>1.1 什么是Bootstrap？</h4> <ul> <li>Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。</li> <li>Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。</li> </ul> <h4>1.2 为什么使用 Bootstrap？</h4> <ul> <li>移动设备优先：自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式。 ○ 不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。 ○ 也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</li> <li>浏览器支持：所有的主流浏览器都支持 Bootstrap。</li> <li>容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。</li> <li>响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。</li> <li>它为开发人员创建接口提供了一个简洁统一的解决方案。</li> <li>它包含了功能强大的内置组件，易于定制。</li> <li>它还提供了基于 Web 的定制。</li> <li>它是开源的。</li> </ul> <h4>1.3 下载与使用</h4> <ul> <li>中文官网：https://www.bootcss.com/</li> <li>英文官网：http://getbootstrap.com <a href="http://img.e-com-net.com/image/info8/9b3c44018b5640109a76945b4e0532d3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9b3c44018b5640109a76945b4e0532d3.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第81张图片" width="650" height="259" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/832ef31eb0de4bc78153555b53845015.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/832ef31eb0de4bc78153555b53845015.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第82张图片" width="650" height="251" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/12970c86055c4d9fae2886c7dc17ad6d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/12970c86055c4d9fae2886c7dc17ad6d.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第83张图片" width="650" height="293" style="border:1px solid black;"></a></li> <li>下载好的，压缩包解压出来。就得到了bootstrap的资源文件了。</li> <li>分别是css、js、font字体，全部放在项目的根目录即可</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link href="css/bootstrap.min.css" rel="stylesheet" /> <title>拉勾有我-必须火</title> </head> <body style="padding:100px;"> <h1>Hello, Bootstrap!</h1>  <button class="btn btn-primary">学习充电</button> <button class="btn btn-success">极速入职</button> </body> </html> </code></pre> <h3>2.Bootstrap的使用</h3> <h4>2.1 表格</h4> <ul> <li>和之前的表格相比，标签更丰富更加语义化，效果更佳美观</li> </ul> <h5>2.1.1 丰富的标签</h5> <ul> <li><table> 为表格添加基础样式</li> <li><thead> 表格标题行的容器元素（<tr>）</li> <li><tbody> 表格主体中的表格行的容器元素（<tr>）</li> <li><tr> 表格行</li> <li><td> 默认的表格单元格。</li> <li><th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用。</li> <li><caption> 关于表格存储内容的描述或总结。</li> </ul> <h5>2.1.2 好看的类样式</h5> <ul> <li>.table 为任意 <table> 添加基本样式 (只有横向分隔线)</li> <li>.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色</li> <li>.table-bordered 为所有表格的单元格添加边框</li> <li>.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示</li> <li>.table-condensed 让表格更加紧凑</li> </ul> <h5>2.1.3 情景色类样式</h5> <ul> <li>适合应用在<th>、<tr>，<td></li> <li>.active 激活效果（悬停颜色）</li> <li>.success 表示成功或积极的动作</li> <li>.info 表示普通的提示信息或动作</li> <li>.warning 表示警告或需要用户注意</li> <li>.danger 表示危险或潜在的带来的负面影响的动作</li> </ul> <h5>2.1.4 响应式表格</h5> <ul> <li>表格的父元素设置响应式，小于768px，出现边框</li> </ul> <pre><code class="prism language-html"><table class="table table-responsive"> <caption>经营产品大全</caption> <thead> <tr> <th>产品</th> <th>付款日期</th> <th>状态</th> </tr> </thead> <tbody> <tr class="info"> <td>产品1</td> <td>2020-1-1</td> <td>待发货</td> </tr> <tr class="active"> <td>产品2</td> <td>2020-1-2</td> <td>已发货</td> </tr> <tr class="success"> <td>产品3</td> <td>2020-1-3</td> <td>未付款</td> </tr> <tr class="warning"> <td>产品4</td> <td>2020-1-4</td> <td>已退货</td> </tr> <tr class="danger"> <td>产品5</td> <td>2020-1-5</td> <td>已退款</td> </tr> </tbody> </table> </code></pre> <h4>2.2 表单</h4> <h5>2.2.1 表单布局</h5> <h6>2.2.1.1 默认布局</h6> <a href="http://img.e-com-net.com/image/info8/b5b61f9362c2475e87bf807bac935a8f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b5b61f9362c2475e87bf807bac935a8f.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第84张图片" width="650" height="210" style="border:1px solid black;"></a> <pre><code class="prism language-html"><body style="padding:100px;"> <form> <div class="form-group"> <label>邮箱</label> <input type="email" class="form-control" placeholder="请输入邮箱"> </div> <div class="form-group"> <label>密码</label> <input type="passowd" class="form-control" placeholder="请输入密码"> </div> <div class="form-group"> <button class="btn btn-primary">提交</button> </div> </form> </body> </code></pre> <h6>2.2.1.2 内联布局</h6> <ul> <li>让所有表单元素居于一行</li> <li>注意：当小于768px时,会自动还原成移动端样式. <img src="http://img.e-com-net.com/image/info8/d450c7e0f1f0431e9f4d09422b609cd6.jpg" alt="在这里插入图片描述" width="0" height="0"></li> </ul> <pre><code class="prism language-html"><form class="form-inline"> </code></pre> <h5>2.2.2 表单控件</h5> <h6>2.2.2.1 输入框</h6> <a href="http://img.e-com-net.com/image/info8/0bdc0f6fb1294b06a1007c6edec56680.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/0bdc0f6fb1294b06a1007c6edec56680.png" alt="在这里插入图片描述" width="662" height="95"></a> <pre><code class="prism language-html"><form> <div class="form-group"> <label for="">输入框</label> <input type="text" class="form-control" placeholder="请输入文本..."> </div> </form> </code></pre> <h6>2.2.2.2 文本框</h6> <a href="http://img.e-com-net.com/image/info8/56f69ab42e954bcf9bc81af7ace22076.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/56f69ab42e954bcf9bc81af7ace22076.png" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第85张图片" width="652" height="173" style="border:1px solid black;"></a> <pre><code class="prism language-html"><div class="form-group"> <label for="">文本框</label> <textarea class="form-control" cols="30" rows="5"></textarea> </div> </code></pre> <h6>2.2.2.3 复选框</h6> <ul> <li>checkbox 默认</li> <li>checkbox-inline 内联 <a href="http://img.e-com-net.com/image/info8/8237525c091442a9955980a572d7cf9a.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/8237525c091442a9955980a572d7cf9a.png" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第86张图片" width="476" height="147" style="border:1px solid black;"></a></li> </ul> <pre><code class="prism language-html"><div class="checkbox"> <label> <input type="checkbox"> 抽烟 </label> </div> <div class="checkbox"> <label> <input type="checkbox"> 喝酒 </label> </div> <hr> <div class="checkbox-inline"> <label> <input type="checkbox"> 洗澡 </label> </div> <div class="checkbox-inline"> <label> <input type="checkbox"> 烫头 </label> </div> </code></pre> <h6>2.2.2.4 复选按钮</h6> <a href="http://img.e-com-net.com/image/info8/bf8dd56cf0cc4ebf81309a1090f590b7.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/bf8dd56cf0cc4ebf81309a1090f590b7.png" alt="在这里插入图片描述" width="238" height="67"></a> <pre><code class="prism language-html"><form> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="checkbox"> 音乐 </label> <label class="btn btn-primary"> <input type="checkbox"> 体育 </label> <label class="btn btn-primary"> <input type="checkbox"> 美术 </label> <label class="btn btn-primary"> <input type="checkbox"> 电脑 </label> </div> </form> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </code></pre> <h6>2.2.2.5 单选框</h6> <a href="http://img.e-com-net.com/image/info8/60dfc209c56145ec926dc29f1559fe2a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/60dfc209c56145ec926dc29f1559fe2a.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第87张图片" width="452" height="153" style="border:1px solid black;"></a> <pre><code class="prism language-html"><label class="radio"> <input type="radio" name="sex"> 男 </label> <label class="radio"> <input type="radio" name="sex"> 女 </label> <hr> <label class="radio-inline"> <input type="radio" name="gender"> 耕 </label> <label class="radio-inline"> <input type="radio" name="gender"> 织 </label> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </code></pre> <h6>2.2.2.6 单选按钮</h6> <a href="http://img.e-com-net.com/image/info8/218e708bf16a4b00be427eb46f8cb139.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/218e708bf16a4b00be427eb46f8cb139.jpg" alt="在这里插入图片描述" width="111" height="64"></a> <pre><code class="prism language-html"><div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="gender"> 男 </label> <label class="btn btn-primary"> <input type="radio" name="gender"> 女 </label> </div> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </code></pre> <h4>2.3 按钮</h4> <img src="http://img.e-com-net.com/image/info8/48b62bfade484996b39703b767777cdd.jpg" alt="在这里插入图片描述" width="0" height="0"> <pre><code class="prism language-html"><button class="btn btn-default">默认按钮</button> <button class="btn btn-primary">主要按钮</button> <button class="btn btn-success">成功按钮</button> <button class="btn btn-info">信息按钮</button> <button class="btn btn-warning">警告按钮</button> <button class="btn btn-danger">危险按钮</button> <button class="btn btn-link">连接按钮</button> </code></pre> <ul> <li>按钮大小 <a href="http://img.e-com-net.com/image/info8/c3c5247a430849bc98cc1d62794d2b00.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c3c5247a430849bc98cc1d62794d2b00.png" alt="在这里插入图片描述" width="719" height="72"></a></li> </ul> <pre><code class="prism language-html"><button class="btn btn-primary btn-lg">超大按钮（高清大屏台式机）</button> <button class="btn btn-primary">大按钮（笔记本屏幕）</button> <button class="btn btn-primary btn-sm">小按钮（平板电脑）</button> <button class="btn btn-primary btn-xs">超小按钮（手机）</button> </code></pre> <ul> <li>按钮状态 ○ 激活状态：按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）; ○ 禁用状态：当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变; <a href="http://img.e-com-net.com/image/info8/9a4b7a46c5b741b19375a44947983a51.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9a4b7a46c5b741b19375a44947983a51.jpg" alt="在这里插入图片描述" width="363" height="81"></a></li> </ul> <pre><code class="prism language-html"><button class="btn btn-default">默认按钮</button> <button class="btn btn-default active">激活按钮</button> <button class="btn btn-default" disabled>禁用按钮</button> </code></pre> <h4>2.4 图片</h4> <ul> <li>.img-rounded：添加 border-radius:6px 来获得图片圆角。</li> <li>.img-circle：添加 border-radius:50% 来让整个图片变成圆形。</li> <li>.img-thumbnail：添加一些内边距（padding）和一个灰色的边框 <a href="http://img.e-com-net.com/image/info8/9755ab3db50d43a6bc86658f996219a0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9755ab3db50d43a6bc86658f996219a0.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第88张图片" width="650" height="132" style="border:1px solid black;"></a></li> </ul> <pre><code class="prism language-html"><img src="img/1.jpg" class="img-rounded" width="33%"> <img src="img/1.jpg" class="img-circle" width="33%"> <img src="img/1.jpg" class="img-thumbnail" width="33%"> </code></pre> <ul> <li>响应式图片</li> </ul> <pre><code class="prism language-html"><img src="img/1.jpg" class="img-responsive"> </code></pre> <h4>2.5 下拉菜单组件</h4> <a href="http://img.e-com-net.com/image/info8/b6cdc0a86f804bf1b145796611a3cdbf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b6cdc0a86f804bf1b145796611a3cdbf.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第89张图片" width="208" height="167" style="border:1px solid black;"></a> <pre><code class="prism language-html"><div class="dropdown"> <button class="btn btn-primary" data-toggle="dropdown">拉勾教育 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">前沿技术</a></li> <li><a href="#">名师制作</a></li> <li><a href="#">24小时导师</a></li> </ul> </div> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </code></pre> <ul> <li>用法的关键核心</li> </ul> <ol> <li>外围容器使用 class="dropdown"包裹</li> <li>内部点击按钮事件绑定 data-toggle=“dropdown”</li> <li>菜单元素使用 class=“dropdown-menu”</li> </ol> <h4>2.6 分页组件</h4> <a href="http://img.e-com-net.com/image/info8/a9a707de48d3468eab12ef84c353020d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a9a707de48d3468eab12ef84c353020d.png" alt="在这里插入图片描述" width="208" height="63"></a> <pre><code class="prism language-html"><ul class="pagination"> <li class="previous"> <a href="#"> « </a> </li> <li class="active"> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li class="next"> <a href="#">»</a> </li> </ul> </code></pre> <a href="http://img.e-com-net.com/image/info8/81a54fa9f8f14b0388b34e04db35b1d6.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/81a54fa9f8f14b0388b34e04db35b1d6.png" alt="在这里插入图片描述" width="358" height="68"></a> <pre><code class="prism language-html"><ul class="pager"> </code></pre> <h4>2.7 栅格系统</h4> <ul> <li>bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子</li> <li>当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果 <a href="http://img.e-com-net.com/image/info8/d8647ae7bb034416877be306450c8a18.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/d8647ae7bb034416877be306450c8a18.png" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第90张图片" width="692" height="251" style="border:1px solid black;"></a></li> <li>显示屏幕的扩大和缩小. 实现如下效果 <a href="http://img.e-com-net.com/image/info8/8e2c285f3be248e8b7efc228f5d02aa9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8e2c285f3be248e8b7efc228f5d02aa9.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第91张图片" width="522" height="325" style="border:1px solid black;"></a></li> </ul> <pre><code class="prism language-html"><style> .a{ height: 50px; border: 1px solid black; background-color: #eeeeee; } </style> <body> <div class="container"> <div class="row">     <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> <div class="col-lg-3 col-md-4 col-sm-6 a">x</div> </div> </div> </body> </code></pre> <h4>2.8 缩略图组件</h4> <ul> <li>配合响应式的栅格系统 <a href="http://img.e-com-net.com/image/info8/45e999e02dcc4e7d8448a19a841e6552.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/45e999e02dcc4e7d8448a19a841e6552.jpg" alt="在这里插入图片描述" width="650" height="95"></a> <a href="http://img.e-com-net.com/image/info8/e46a98e3dad54669bcc46dc8330372f2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e46a98e3dad54669bcc46dc8330372f2.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第92张图片" width="650" height="373" style="border:1px solid black;"></a></li> </ul> <pre><code class="prism language-html"><div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="img/2.jpg"> </div> </div>  <div class="col-lg-3 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="img/2.jpg"> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="img/2.jpg"> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="img/2.jpg"> </div> </div> </div> </div> </code></pre> <ul> <li>自定义内容 <a href="http://img.e-com-net.com/image/info8/41c1c702728c4f709757dc26aef6fcdf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/41c1c702728c4f709757dc26aef6fcdf.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第93张图片" width="650" height="176" style="border:1px solid black;"></a></li> </ul> <pre><code class="prism language-html"><div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="img/2.jpg"> <div class="caption"> <h3>视频标题</h3> <p>视频介绍，美女众多...</p> <p> <a href="#" class="btn btn-primary">试看</a> <a href="#" class="btn btn-warning">购买</a> </p> </div> </div> </div>  </div> </div> </code></pre> <h4>2.9 模态框组件</h4> <a href="http://img.e-com-net.com/image/info8/66ba716e3d9a4330a7a97cb0eea94174.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/66ba716e3d9a4330a7a97cb0eea94174.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第94张图片" width="650" height="181" style="border:1px solid black;"></a> <ul> <li>data-toggle=“modal” 触发类型:模态框modal</li> <li>data-target="#myModal" 触发的节点</li> <li>data-backdrop=“static” 点击黑灰色背景，不会关闭模态框</li> </ul> <pre><code class="prism language-html"><button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框</button>  <div class="modal" id="myModal" data-backdrop="static">  <div class="modal-dialog">  <div class="modal-content">  <div class="modal-header"> <button class="close" data-dismiss="modal"> <span>×</span> </button> <h4 class="modal-title">友情提示</h4> </div>  <div class="modal-body"> 服务器错误，请稍后再试！ <hr> <img src="img/1.jpg" width="200px"> <hr> <input type="text"> </div>  <div class="modal-footer"> <button class="btn btn-info">确定</button> <button class="btn btn-default" data-dismiss="modal">取消</button> </div> </div> </div> </div> </code></pre> <h3>3.案例</h3> <h4>3.1 首页轮播大图</h4> <ol> <li>大小屏幕自动适应,扩大缩小浏览器</li> <li>滚动数字区点击左右切换图片</li> <li>左右区域点击切换</li> <li>默认5秒钟自动切换下一张</li> <li>最后一张,回到第一张</li> </ol> <pre><code class="prism language-html"><div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#myCarousel"></li> <li data-slide-to="1" data-target="#myCarousel"></li> <li data-slide-to="2" data-target="#myCarousel"></li> </ol>  <div class="carousel-inner"> <div class="item active"> <img src="img/1.jpg"> </div> <div class="item"> <img src="img/2.jpg"> </div> <div class="item"> <img src="img/3.jpg"> </div> </div>  <a href="#myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#myCarousel" data-slide="next" class="carousel-control right"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </code></pre> <ul> <li>data 属性解释：</li> </ul> <ol> <li>data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；</li> <li>data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to=“2” 将把滑动块移动到一个特定的索引，索引从 0 开始计数。</li> <li>data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放</li> </ol> <h4>3.2 响应式导航条</h4> <a href="http://img.e-com-net.com/image/info8/586592525def4affaa8ddab2ff631c4b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/586592525def4affaa8ddab2ff631c4b.jpg" alt="在这里插入图片描述" width="650" height="67"></a> <img src="http://img.e-com-net.com/image/info8/cf307d79f2d6476589ce022f223c4207.jpg" alt="在这里插入图片描述" width="0" height="0"> <img src="http://img.e-com-net.com/image/info8/f2de1a232ae64da6bac6cb59a97f7fbd.jpg" alt="在这里插入图片描述" width="0" height="0"> <pre><code class="prism language-html"> <div class="navbar navbar-default">  <div class="container">  <div class="navbar-header"> <a href="#" class="navbar-brand">老孙科技股份有限公司</a>   <button class="navbar-toggle" data-toggle="collapse" datatarget="#nav"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div>  <div id="nav" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"> <a href="#"> <span class="glyphicon glyphicon-home"></span> 主页</a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-camera"></span> 产品</a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-tint"></span>竞争</a> </li> <li> <a href="#"> <span class="glyphicon glyphicon-earphone"></span> 联系我们</a> </li> </ul> </div> </div> </div> </code></pre> <h2>第三阶段模块二作业</h2> 编程题： <ol> <li>根据如图需求，实现用户的CRUD： <a href="http://img.e-com-net.com/image/info8/f62e171e71ec40ef9005e985ffe07a7c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f62e171e71ec40ef9005e985ffe07a7c.jpg" alt="3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)_第95张图片" width="650" height="174" style="border:1px solid black;"></a></li> </ol> <ul> <li> 当页面加载完成功后显示用户列表； </li> <li> 用户新增； </li> <li> 选中"序号"才能用户编辑或者删除； </li> <li> 可以根据用户工号和名称查询（不考虑模糊查询、使用完整的工号和名称） </li> </ul> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1356387421863882752"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(JAVA,html,css,javascript)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> good2know <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950228031117258752.htm" title="深入解析JVM工作原理：从字节码到机器指令的全过程" target="_blank">深入解析JVM工作原理：从字节码到机器指令的全过程</a> <div>一、JVM概述Java虚拟机(JVM)是Java平台的核心组件，它实现了Java"一次编写，到处运行"的理念。JVM是一个抽象的计算机器，它有自己的指令集和运行时内存管理机制。JVM的主要职责：加载：读取.class文件并验证其正确性存储：管理内存分配和垃圾回收执行：解释或编译字节码为机器指令安全：提供沙箱环境限制恶意代码二、JVM架构详解JVM由三个主要子系统组成：1.类加载子系统类加载过程分为</div> </li> <li><a href="/article/1950226517397139456.htm" title="JVM 内存模型深度解析：原子性、可见性与有序性的实现" target="_blank">JVM 内存模型深度解析：原子性、可见性与有序性的实现</a> 练习时长两年半的程序员小胡 <a class="tag" taget="_blank" href="/search/JVM/1.htm">JVM</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%89%96%E6%9E%90%EF%BC%9A%E4%BB%8E%E9%9D%A2%E8%AF%95%E8%80%83%E7%82%B9%E5%88%B0%E7%94%9F%E4%BA%A7%E5%AE%9E%E8%B7%B5/1.htm">深度剖析：从面试考点到生产实践</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98%E6%A8%A1%E5%9E%8B/1.htm">内存模型</a> <div>在了解了JVM的基础架构和类加载机制后，我们需要进一步探索Java程序在多线程环境下的内存交互规则。JVM内存模型（JavaMemoryModel，JMM）定义了线程和主内存之间的抽象关系，它通过规范共享变量的访问方式，解决了多线程并发时的数据一致性问题。本文将从内存模型的核心目标出发，详解原子性、可见性、有序性的实现机制，以及volatile、synchronized等关键字在其中的作用。一、J</div> </li> <li><a href="/article/1950225785054883840.htm" title="Java | 多线程经典问题 - 售票" target="_blank">Java | 多线程经典问题 - 售票</a> Ada54 <div>一、售票需求1）同一个票池2）多个窗口卖票，不能出售同一张票二、售票问题代码实现（线程与进程小总结，请戳：Java|线程和进程，创建线程）step1：定义SaleWindow类实现Runnable接口，覆盖run方法step2：实例化SaleWindow对象，创建Thread对象，将SaleWindow作为参数传给Thread类的构造函数，然后通过Thread.start()方法启动线程step3</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950224616647618560.htm" title="JAVA接口机结构解析" target="_blank">JAVA接口机结构解析</a> 秃狼 <a class="tag" taget="_blank" href="/search/SpringBoot/1.htm">SpringBoot</a><a class="tag" taget="_blank" href="/search/%E5%85%AB%E8%82%A1%E6%96%87/1.htm">八股文</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>什么是接口机在Java项目中，接口机通常指用于与外部系统进行数据交互的中间层，负责处理请求和响应的转换、协议适配、数据格式转换等任务。接口机的结构我们的接口机的结构分为两个大部分，外部接口机和内部接口机，在业务的调度上也是通过mq来实现的，只要的目的就是为了解耦合和做差异化。在接口机中主要的方法就是定时任务，消息的发送和消费，其他平台调用接口机只能提供外部接口机的方法进行调用，外部接口机可以提供消</div> </li> <li><a href="/article/1950223497875746816.htm" title="最新阿里四面面试真题46道：面试技巧+核心问题+面试心得" target="_blank">最新阿里四面面试真题46道：面试技巧+核心问题+面试心得</a> 风平浪静如码 <div>前言做技术的有一种资历，叫做通过了阿里的面试。这些阿里Java相关问题，都是之前通过不断优秀人才的铺垫总结的，先自己弄懂了再去阿里面试，不然就是去丢脸，被虐。希望对大家帮助，祝面试成功，有个更好的职业规划。一，阿里常见技术面1、微信红包怎么实现。2、海量数据分析。3、测试职位问的线程安全和非线程安全。4、HTTP2.0、thrift。5、面试电话沟通可能先让自我介绍。6、分布式事务一致性。7、ni</div> </li> <li><a href="/article/1950218946015719424.htm" title="图论算法经典题目解析：DFS、BFS与拓扑排序实战" target="_blank">图论算法经典题目解析：DFS、BFS与拓扑排序实战</a> 周童學 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.htm">数据结构与算法</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E4%BC%98%E5%85%88/1.htm">深度优先</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%AE%BA/1.htm">图论</a> <div>图论算法经典题目解析：DFS、BFS与拓扑排序实战图论问题是算法面试中的高频考点，本博客将通过四道LeetCode经典题目（均来自"Top100Liked"题库），深入讲解图论的核心算法思想和实现技巧。涵盖DFS、BFS、拓扑排序和前缀树等知识点，每道题配有Java实现和易错点分析。1.岛屿数量(DFS遍历)问题描述给定一个由'1'(陆地)和'0'(水)组成的二维网格，计算岛屿的数量。岛屿由水平或</div> </li> <li><a href="/article/1950218818781507584.htm" title="【异常】使用 LiteFlow 框架时，提示错误ChainDuplicateException: [chain name duplicate] chainName=categoryChallenge" target="_blank">【异常】使用 LiteFlow 框架时，提示错误ChainDuplicateException: [chain name duplicate] chainName=categoryChallenge</a> 本本本添哥 <a class="tag" taget="_blank" href="/search/002/1.htm">002</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91%E8%83%BD%E5%8A%9B/1.htm">进阶开发能力</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>一、报错内容Causedby:com.yomahub.liteflow.exception.ChainDuplicateException:[chainnameduplicate]chainName=categoryChallengeatcom.yomahub.liteflow.parser.helper.ParserHelper.lambda$null$0(ParserHelper.java:1</div> </li> <li><a href="/article/1950218314064130048.htm" title="Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)" target="_blank">Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)</a> bug菌¹ <a class="tag" taget="_blank" href="/search/Java%E5%AE%9E%E6%88%98%28%E8%BF%9B%E9%98%B6%E7%89%88%29/1.htm">Java实战(进阶版)</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Java%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8/1.htm">Java零基础入门</a><a class="tag" taget="_blank" href="/search/Java%E5%B9%B6%E5%8F%91/1.htm">Java并发</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B%E7%AF%87/1.htm">多线程篇</a> <div>本文收录于「Java进阶实战」专栏，专业攻坚指数级提升，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！环境说明：Windows10+IntelliJIDEA2021.3.2+Jdk1.8本文目录前言摘要正文何为线程池？为什么需要线程池？线程池的好处线程池使用场景如何创建线程池？线程池的常见配置源码解析案例分享案例代码演示案例运行</div> </li> <li><a href="/article/1950217936077647872.htm" title="Java 队列" target="_blank">Java 队列</a> tryxr <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E9%98%9F%E5%88%97/1.htm">队列</a> <div>队列一般用什么哪种结构实现队列的特性数据入队列时一定是从尾部插入吗数据出队列时一定是从头部删除吗队列的基本运算有什么队列支持随机访问吗队列的英文表示什么是队列队列从哪进、从哪出队列的进出顺序队列是用哪种结构实现的Queue和Deque有什么区别Queue接口的方法Queue中的add与offer的区别offer、poll、peek的模拟实现如何利用链表实现队列如何利用顺序表实现队列什么叫做双端队列</div> </li> <li><a href="/article/1950215540215705600.htm" title="JVM 内存分配与回收策略：从对象创建到内存释放的全流程" target="_blank">JVM 内存分配与回收策略：从对象创建到内存释放的全流程</a> <div>在JVM的运行机制中，内存分配与回收策略是连接对象生命周期与垃圾收集器的桥梁。它决定了对象在堆内存中的创建位置、存活过程中的区域迁移，以及最终被回收的时机。合理的内存分配策略能减少GC频率、降低停顿时间，是优化Java应用性能的核心环节。本文将系统解析JVM的内存分配规则、对象晋升机制，以及实战中的内存优化技巧。一、对象优先在Eden区分配：新生代的“临时缓冲区”大多数情况下，Java对象在新生代</div> </li> <li><a href="/article/1950214964396486656.htm" title="js操作样式" target="_blank">js操作样式</a> 郝加升 <div>DOM样式属性和方法：指定的元素，它的style有这么几个属性和方法：cssText：通过这个属性可以访问到元素的特性style设置的属性，并且可以直接赋值设置。removeProperty（属性名称）：从样式中删除给定属性。setProperty（属性名称，值，权重）：可以通过这个方法设置给定样式的同时设置其权重，可以传入”important”或者一个空字符串。获取计算后样式：window.ge</div> </li> <li><a href="/article/1950214657335685120.htm" title="代码随想录算法训练营第三十五天" target="_blank">代码随想录算法训练营第三十五天</a> <div>01背包问题二维题目链接01背包问题二维题解importjava.util.Scanner;publicclassMain{publicstaticvoidmain(String[]args){Scannersc=newScanner(System.in);intM=sc.nextInt();intN=sc.nextInt();int[]space=newint[M];int[]value=new</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> 小馋喵知识杂货铺 <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> weixin_39607620 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950201094361640960.htm" title="人工智能应用研究快讯 2021-11-30" target="_blank">人工智能应用研究快讯 2021-11-30</a> 峰谷皆平 <div>[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin</div> </li> <li><a href="/article/1950200667587014656.htm" title="学C++的五大惊人好处" target="_blank">学C++的五大惊人好处</a> <div>为什么要学c++学c++有什么用学习c++的好处有1.中考可以加分2.高考可能直接录取3.就业广且工资高4.在未来30--50年c++一定是一个很受欢迎的职业5.c++成功的例子deepsick等AI智能C++语言兼备编程效率和编译运行效率的语言C++语言是C语言功能增强版,在c语言的基础上添加了面向对象编程和泛型编程的支持既继承了C语言高效，简洁，快速和可移植的传统,又具备类似Java、Go等其</div> </li> <li><a href="/article/1950198522972270592.htm" title="Java8 Stream流的sorted()的排序【正序、倒序、多字段排序】" target="_blank">Java8 Stream流的sorted()的排序【正序、倒序、多字段排序】</a> Tony666688888 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>针对集合排序，java8可以用Stream流的sorted()进行排序。示例Bean以下我们会使用这个Bean来做示例。publicclassOrder{privateStringweight;privateDoubleprice;privateStringdateStr;//忽略getter、setter、构造方法、toString}字段排序首先是比较器Comparator，形式如下：Compa</div> </li> <li><a href="/article/1950195876991397888.htm" title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a> TIM老师 <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a> <div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a> <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950194728943284224.htm" title="java实习生40多天有感" target="_blank">java实习生40多天有感</a> 别拿爱情当饭吃 <div>从5月15日开始，我开始第一步步入社会，我今年大三，在一家上市互联网公司做一名实习生，主要做java后端开发。开始的时候，觉得公司的环境挺不错的，不过因为公司在CBD，所以隔壁的午饭和晚饭都要20+RMB，而且还吃不饱，这让我感觉挺郁闷的。一到下午，我就会犯困（因为饿）。因此，我又不得不买一些干粮在公司屯着。关于技术，有一个比较大的项目在需求调研当中，我们做实习生，就是辅助项目经理，测试功能，并且</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> 浪子神剑 <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div> </li> <li><a href="/article/1950187223672483840.htm" title="GDP经济社会人文民生栅格数据下载网站汇总" target="_blank">GDP经济社会人文民生栅格数据下载网站汇总</a> 疯狂学习GIS <div> 本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文</div> </li> <li><a href="/article/1950183016382918656.htm" title="大学生入门：初识方法及其易踩坑的点" target="_blank">大学生入门：初识方法及其易踩坑的点</a> <div>在java学习过程中，我们不难发现有很多重复使用的功能代码块，每次使用如果都要重新写一遍，岂不是很麻烦，就算是“cv”大法，感觉也不是很方便，那么，有什么办法可以解决这个问题呢？方法！java中，一段可重用的，用于执行特定功能的代码块叫做方法，它可以接收参数、返回结果，并且可以被多次使用。一、方法的基本结构[修饰符]返回值类型方法名([参数列表])[throws异常类型]{//方法体}[throw</div> </li> <li><a href="/article/1950181126731526144.htm" title="[Ljava.lang.Object; cannot be cast to [Ljava.lang.String;" target="_blank">[Ljava.lang.Object; cannot be cast to [Ljava.lang.String;</a> 这些不会的 <div>解释：这个错误是很常见的错误，错误的提示已经很清楚了就是java的Object数组不能转换成为String[]数组，这就说明你要转换的数组它本身是Object类型的数组，但是你却非要把它转换为String类的数组，这当然是错误的。示例：[java]viewplaincopypackagecom.dada;importjava.util.ArrayList;importjava.util.List;</div> </li> <li><a href="/article/1950180497007112192.htm" title="【MySQL】MySQL数据库如何改名" target="_blank">【MySQL】MySQL数据库如何改名</a> 武昌库里写JAVA <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://</div> </li> <li><a href="/article/1950180118609588224.htm" title="HikariCP调试日志深度解析：生产环境故障排查完全指南" target="_blank">HikariCP调试日志深度解析：生产环境故障排查完全指南</a> <div>HikariCP调试日志深度解析：生产环境故障排查完全指南更新时间：2025年7月4日|作者：资深架构师|适用版本：HikariCP5.x+|难度等级：中高级前言在生产环境中，数据库连接池往往是系统性能的关键瓶颈。HikariCP作为当前最流行的Java连接池，其调试日志包含了丰富的运行时信息，能够帮助我们快速定位和解决各种连接池相关问题。本文将深入解析HikariCP的日志体系，提供一套完整的故</div> </li> <li><a href="/article/1950179866523529216.htm" title="大学社团管理系统（11831）" target="_blank">大学社团管理系统（11831）</a> codercode2022 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cloud/1.htm">cloud</a><a class="tag" taget="_blank" href="/search/sentinel/1.htm">sentinel</a><a class="tag" taget="_blank" href="/search/java-rocketmq/1.htm">java-rocketmq</a> <div>有需要的同学，源代码和配套文档领取，加文章最下方的名片哦一、项目演示项目演示视频二、资料介绍完整源代码（前后端源代码+SQL脚本）配套文档（LW+PPT+开题报告）远程调试控屏包运行三、技术介绍Java语言SSM框架SpringBoot框架Vue框架JSP页面Mysql数据库IDEA/Eclipse开发四、项目截图有需要的同学，源代码和配套文档领取，加文章最下方的名片哦!</div> </li> <li><a href="/article/1950178809030438912.htm" title="今年校招竞争真激烈" target="_blank">今年校招竞争真激烈</a> 12_05 <div>程序员满大街，都要找不到工作了。即使人工智能满大街，我也后悔当初没学机器学习，后悔当初没学Java。C++真难找工作。难道毕了业就失业吗？好担心！</div> </li> <li><a href="/article/21.htm" title="矩阵求逆（JAVA）利用伴随矩阵" target="_blank">矩阵求逆（JAVA）利用伴随矩阵</a> qiuwanchi <a class="tag" taget="_blank" href="/search/%E5%88%A9%E7%94%A8%E4%BC%B4%E9%9A%8F%E7%9F%A9%E9%98%B5%E6%B1%82%E9%80%86%E7%9F%A9%E9%98%B5/1.htm">利用伴随矩阵求逆矩阵</a> <div>package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(利用伴随矩阵) * @author 邱万迟 </div> </li> <li><a href="/article/148.htm" title="单例（Singleton）模式" target="_blank">单例（Singleton）模式</a> aoyouzi <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%BC%8F/1.htm">模式</a><a class="tag" taget="_blank" href="/search/Singleton/1.htm">Singleton</a> <div>3.1 概述如果要保证系统里一个类最多只能存在一个实例时，我们就需要单例模式。这种情况在我们应用中经常碰到，例如缓存池，数据库连接池，线程池，一些应用服务实例等。在多线程环境中，为了保证实例的唯一性其实并不简单，这章将和读者一起探讨如何实现单例模式。 3.2</div> </li> <li><a href="/article/275.htm" title="[开源与自主研发]就算可以轻易获得外部技术支持,自己也必须研发" target="_blank">[开源与自主研发]就算可以轻易获得外部技术支持,自己也必须研发</a> comsci <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a> <div> 现在国内有大量的信息技术产品，都是通过盗版，免费下载，开源，附送等方式从国外的开发者那里获得的。。。。。。虽然这种情况带来了国内信息产业的短暂繁荣，也促进了电子商务和互联网产业的快速发展，但是实际上，我们应该清醒的看到，这些产业的核心力量是被国外的</div> </li> <li><a href="/article/402.htm" title="页面有两个frame,怎样点击一个的链接改变另一个的内容" target="_blank">页面有两个frame,怎样点击一个的链接改变另一个的内容</a> Array_06 <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/XHTML/1.htm">XHTML</a> <div><a src="地址" targets="这里写你要操作的Frame的名字" />搜索然后你点击连接以后你的新页面就会显示在你设置的Frame名字的框那里 targerts="",就是你要填写目标的显示页面位置 ===================== 例如： <frame src=&</div> </li> <li><a href="/article/529.htm" title="Struts2实现单个/多个文件上传和下载" target="_blank">Struts2实现单个/多个文件上传和下载</a> oloz <a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/1.htm">文件上传</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>struts2单文件上传：步骤01:jsp页面  　　<form action="fileUplo</div> </li> <li><a href="/article/656.htm" title="推荐10个在线logo设计网站" target="_blank">推荐10个在线logo设计网站</a> 362217990 <a class="tag" taget="_blank" href="/search/logo/1.htm">logo</a> <div>在线设计Logo网站。 1、http://flickr.nosv.org（这个太简单） 2、http://www.logomaker.com/?source=1.5770.1 3、http://www.simwebsol.com/ImageTool 4、http://www.logogenerator.com/logo.php?nal=1&tpl_catlist[]=2 5、ht</div> </li> <li><a href="/article/783.htm" title="jsp上传文件" target="_blank">jsp上传文件</a> 香水浓 <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/fileupload/1.htm">fileupload</a> <div>1. jsp上传 Notice： 1. form表单 method 属性必须设置为 POST 方法，不能使用 GET 方法 2. form表单 enctype 属性需要设置为 multipart/form-data 3. form表单 action 属性需要设置为提交到后台处理文件上传的jsp文件地址或者servlet地址。例如 uploadFile.jsp 程序文件用来处理上传的文</div> </li> <li><a href="/article/910.htm" title="我的架构经验系列文章 - 前端架构" target="_blank">我的架构经验系列文章 - 前端架构</a> agevs <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/jQuer/1.htm">jQuer</a> <div>框架层面：近几年前端发展很快，前端之所以叫前端因为前端是已经可以独立成为一种职业了，js也不再是十年前的玩具了，以前富客户端RIA的应用可能会用flash/flex或是silverlight，现在可以使用js来完成大部分的功能，因此js作为一门前端的支撑语言也不仅仅是进行的简单的编码，越来越多框架性的东西出现了。越来越多的开发模式转变为后端只是吐json的数据源，而前端做所有UI的事情。MVCMV</div> </li> <li><a href="/article/1037.htm" title="android ksoap2 中把XML(DataSet) 当做参数传递" target="_blank">android ksoap2 中把XML(DataSet) 当做参数传递</a> aijuans <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>我的android app中需要发送webservice ，于是我使用了 ksop2 进行发送，在测试过程中不是很顺利,不能正常工作.我的web service 请求格式如下 [html] view plain copy <Envelope xmlns="http://schemas.</div> </li> <li><a href="/article/1164.htm" title="使用Spring进行统一日志管理 + 统一异常管理" target="_blank">使用Spring进行统一日志管理 + 统一异常管理</a> baalwolf <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>统一日志和异常管理配置好后，SSH项目中，代码以往散落的log.info() 和 try..catch..finally 再也不见踪影！统一日志异常实现类： [java] view plain copy package com.pilelot.web.util; impor</div> </li> <li><a href="/article/1291.htm" title="Android SDK 国内镜像" target="_blank">Android SDK 国内镜像</a> BigBird2012 <a class="tag" taget="_blank" href="/search/android+sdk/1.htm">android sdk</a> <div>一、镜像地址： 1、东软信息学院的 Android SDK 镜像，比配置代理下载快多了。配置地址， http://mirrors.neusoft.edu.cn/configurations.we#android 2、北京化工大学的： IPV4:ubuntu.buct.edu.cn IPV4:ubuntu.buct.cn IPV6:ubuntu.buct6.edu.cn </div> </li> <li><a href="/article/1418.htm" title="HTML无害化和Sanitize模块" target="_blank">HTML无害化和Sanitize模块</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Linky/1.htm">Linky</a><a class="tag" taget="_blank" href="/search/Sanitize/1.htm">Sanitize</a> <div>一.ng-bind-html、ng-bind-html-unsafe AngularJS非常注重安全方面的问题，它会尽一切可能把大多数攻击手段最小化。其中一个攻击手段是向你的web页面里注入不安全的HTML，然后利用它触发跨站攻击或者注入攻击。考虑这样一个例子，假设我们有一个变量存</div> </li> <li><a href="/article/1545.htm" title="[Maven学习笔记二]Maven命令" target="_blank">[Maven学习笔记二]Maven命令</a> bit1129 <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>mvn compile compile编译命令将src/main/java和src/main/resources中的代码和配置文件编译到target/classes中，不会对src/test/java中的测试类进行编译 MVN编译使用 maven-resources-plugin:2.6:resources maven-compiler-plugin:2.5.1:compile &nbs</div> </li> <li><a href="/article/1672.htm" title="【Java命令二】jhat" target="_blank">【Java命令二】jhat</a> bit1129 <a class="tag" taget="_blank" href="/search/Java%E5%91%BD%E4%BB%A4/1.htm">Java命令</a> <div>jhat用于分析使用jmap dump的文件，，可以将堆中的对象以html的形式显示出来，包括对象的数量，大小等等，并支持对象查询语言。 jhat默认开启监听端口7000的HTTP服务，jhat是Java Heap Analysis Tool的缩写 1. 用法： [hadoop@hadoop bin]$ jhat -help Usage: jhat [-stack <bool&g</div> </li> <li><a href="/article/1799.htm" title="JBoss 5.1.0 GA:Error installing to Instantiated: name=AttachmentStore state=Desc" target="_blank">JBoss 5.1.0 GA:Error installing to Instantiated: name=AttachmentStore state=Desc</a> ronin47 <div>进到类似目录 server/default/conf/bootstrap，打开文件 profile.xml找到： Xml代码<bean name="AttachmentStore" class="org.jboss.system.server.profileservice.repository.AbstractAtta</div> </li> <li><a href="/article/1926.htm" title="写给初学者的6条网页设计安全配色指南" target="_blank">写给初学者的6条网页设计安全配色指南</a> brotherlamp <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/ui%E8%87%AA%E5%AD%A6/1.htm">ui自学</a><a class="tag" taget="_blank" href="/search/ui%E8%A7%86%E9%A2%91/1.htm">ui视频</a><a class="tag" taget="_blank" href="/search/ui%E6%95%99%E7%A8%8B/1.htm">ui教程</a><a class="tag" taget="_blank" href="/search/ui%E8%B5%84%E6%96%99/1.htm">ui资料</a> <div>网页设计中最基本的原则之一是，不管你花多长时间创造一个华丽的设计，其最终的角色都是这场秀中真正的明星——内容的衬托我仍然清楚地记得我最早的一次美术课，那时我还是一个小小的、对凡事都充满渴望的孩子，我摆放出一大堆漂亮的彩色颜料。我仍然记得当我第一次看到原色与另一种颜色混合变成第二种颜色时的那种兴奋，并且我想，既然两种颜色能创造出一种全新的美丽色彩，那所有颜色</div> </li> <li><a href="/article/2053.htm" title="有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。写一个函数实现。复杂度是什么。" target="_blank">有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。写一个函数实现。复杂度是什么。</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div> import java.util.Random; import java.util.Set; import java.util.TreeSet; /** * http://weibo.com/1915548291/z7HtOF4sx * #面试题#有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。 * 写一个函数实现。复杂度是什么</div> </li> <li><a href="/article/2180.htm" title="struts2获得request、session、application方式" target="_blank">struts2获得request、session、application方式</a> chiangfai <a class="tag" taget="_blank" href="/search/application/1.htm">application</a> <div>1、与Servlet API解耦的访问方式。 a.Struts2对HttpServletRequest、HttpSession、ServletContext进行了封装，构造了三个Map对象来替代这三种对象要获取这三个Map对象，使用ActionContext类。 -----> package pro.action; import java.util.Map; imp</div> </li> <li><a href="/article/2307.htm" title="改变python的默认语言设置" target="_blank">改变python的默认语言设置</a> chenchao051 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div> import sys sys.getdefaultencoding() 可以测试出默认语言，要改变的话，需要在python lib的site-packages文件夹下新建： sitecustomize.py，这个文件比较特殊，会在python启动时来加载，所以就可以在里面写上： import sys sys.setdefaultencoding('utf-8') &n</div> </li> <li><a href="/article/2434.htm" title="mysql导入数据load data infile用法" target="_blank">mysql导入数据load data infile用法</a> daizj <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E5%85%A5%E6%95%B0%E6%8D%AE/1.htm">导入数据</a> <div>我们常常导入数据！mysql有一个高效导入方法，那就是load data infile 下面来看案例说明基本语法： load data [low_priority] [local] infile 'file_name txt' [replace | ignore] into table tbl_name [fields [terminated by't'] [OPTI</div> </li> <li><a href="/article/2561.htm" title="phpexcel导入excel表到数据库简单入门示例" target="_blank">phpexcel导入excel表到数据库简单入门示例</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a> <div> 跟导出相对应的，同一个数据表，也是将phpexcel类放在class目录下，将Excel表格中的内容读取出来放到数据库中 <?php error_reporting(E_ALL); set_time_limit(0); ?> <html> <head> <meta http-equiv="Content-Type" </div> </li> <li><a href="/article/2688.htm" title="22岁到72岁的男人对女人的要求" target="_blank">22岁到72岁的男人对女人的要求</a> dcj3sjt126com <div>22岁男人对女人的要求是：一，美丽，二，性感，三，有份具品味的职业，四，极有耐性，善解人意，五，该聪明的时候聪明，六，作小鸟依人状时尽量自然，七，怎样穿都好看，八，懂得适当地撒娇，九，虽作惊喜反应，但看起来自然，十，上了床就是个无条件荡妇。 32岁的男人对女人的要求，略作修定，是：一，入得厨房，进得睡房，二，不必服侍皇太后，三，不介意浪漫蜡烛配盒饭，四，听多过说，五，不再傻笑，六，懂得独</div> </li> <li><a href="/article/2815.htm" title="Spring和HIbernate对DDM设计的支持" target="_blank">Spring和HIbernate对DDM设计的支持</a> e200702084 <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/%E9%A2%86%E5%9F%9F%E6%A8%A1%E5%9E%8B/1.htm">领域模型</a> <div>A：数据访问对象 DAO和资源库在领域驱动设计中都很重要。DAO是关系型数据库和应用之间的契约。它封装了Web应用中的数据库CRUD操作细节。另一方面，资源库是一个独立的抽象，它与DAO进行交互，并提供到领域模型的“业务接口”。资源库使用领域的通用语言，处理所有必要的DAO，并使用领域理解的语言提供对领域模型的数据访问服务。</div> </li> <li><a href="/article/2942.htm" title="NoSql 数据库的特性比较" target="_blank">NoSql 数据库的特性比较</a> geeksun <a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a> <div>Redis 是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。目前由VMware主持开发工作。 1. 数据模型作为Key-value型数据库，Redis也提供了键（Key）和值（Value）的映射关系。除了常规的数值或字符串，Redis的键值还可以是以下形式之一： Lists （列表） Sets</div> </li> <li><a href="/article/3069.htm" title="使用 Nginx Upload Module 实现上传文件功能" target="_blank">使用 Nginx Upload Module 实现上传文件功能</a> hongtoushizi <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>转载自： http://www.tuicool.com/wx/aUrAzm 普通网站在实现文件上传功能的时候，一般是使用Python，Java等后端程序实现，比较麻烦。Nginx有一个Upload模块，可以非常简单的实现文件上传功能。此模块的原理是先把用户上传的文件保存到临时文件，然后在交由后台页面处理，并且把文件的原名，上传后的名称，文件类型，文件大小set到页面。下</div> </li> <li><a href="/article/3196.htm" title="spring-boot-web-ui及thymeleaf基本使用" target="_blank">spring-boot-web-ui及thymeleaf基本使用</a> jishiweili <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/thymeleaf/1.htm">thymeleaf</a> <div>视图控制层代码demo如下： @Controller @RequestMapping("/") public class MessageController { private final MessageRepository messageRepository; @Autowired public MessageController(Mes</div> </li> <li><a href="/article/3323.htm" title="数据源架构模式之活动记录" target="_blank">数据源架构模式之活动记录</a> home198979 <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8%E8%AE%B0%E5%BD%95/1.htm">活动记录</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%98%A0%E5%B0%84/1.htm">数据映射</a> <div>hello!架构一、概念活动记录（Active Record）：一个对象，它包装数据库表或视图中某一行，封装数据库访问，并在这些数据上增加了领域逻辑。对象既有数据又有行为。活动记录使用直截了当的方法，把数据访问逻辑置于领域对象中。二、实现简单活动记录活动记录在php许多框架中都有应用，如cakephp。 <?php /** * 行数据入口类 *</div> </li> <li><a href="/article/3450.htm" title="Linux Shell脚本之自动修改IP" target="_blank">Linux Shell脚本之自动修改IP</a> pda158 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/Debian/1.htm">Debian</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>作为一名 Linux SA，日常运维中很多地方都会用到脚本，而服务器的ip一般采用静态ip或者MAC绑定，当然后者比较操作起来相对繁琐，而前者我们可以设置主机名、ip信息、网关等配置。修改成特定的主机名在维护和管理方面也比较方便。如下脚本用途为：修改ip和主机名等相关信息，可以根据实际需求修改，举一反三！ #!/bin/sh #auto Change ip netmask ga</div> </li> <li><a href="/article/3577.htm" title="开发环境搭建" target="_blank">开发环境搭建</a> 独浮云 <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div> 最近在开发过程中，经常出现MyEclipse内存溢出等错误，需要重启的情况，好麻烦。对于一般的JAVA+TOMCAT项目开发，其实没有必要使用重量级的MyEclipse，使用eclipse就足够了。尤其是开发机器硬件配置一般的人。 &n</div> </li> <li><a href="/article/3704.htm" title="操作日期和时间的工具类" target="_blank">操作日期和时间的工具类</a> vipbooks <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7%E7%B1%BB/1.htm">工具类</a> <div> 大家好啊，好久没有来这里发文章了，今天来逛逛，分享一篇刚写不久的操作日期和时间的工具类，希望对大家有所帮助。 /* * @(#)DataFormatUtils.java 2010-10-10 * * Copyright 2010 BianJing,All rights reserved. */ package test; impor</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

3. 前端技术 (HTML、CSS、JS、jQuery、ES6、Bootstrap)

Java

第三阶段 模块一 前端入门(HTML、CSS、JS)

任务一 (HTML)

1、HTML 介绍与规范

2、HTML 的使用

第三阶段模块一前端入门(HTML、CSS、JS)