Java
- 第三阶段 模块一 前端入门(HTML、CSS、JS)
- 第三阶段 模块二 前端高级(jQuery、ES6、Bootstrap)
-
- 任务四 (jQuery)
- 任务五 (ES6)
- 任务六 (Bootstrap)
- 第三阶段模块二作业
第三阶段 模块一 前端入门(HTML、CSS、JS)
任务一 (HTML)
– 老孙
1、HTML 介绍与规范
介绍
- HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)
专门制作网页的计算机语言
普通的文本就是英文单词,英文字母一样的存在。 - 超文本的意思是有一些单词或字母,在网页浏览器的世界中被赋予了特殊的权利。
- 比如:我们都是普通人,但是有些人经过国家的选拔,穿上警服之后,他就被赋予了执法的特殊权利,普通人是没有执法权的。
- 标记/标签:字母img只是普通的字母,没什么特殊的含义。而<img>被加上尖括号后,在网页的世界中,就具备了显示图片的作用。
使用记事本开发第一个网页
- 在计算机任意的位置,创建一个空白的记事本
重点:文件的后缀名必须是 “htm” 或 “html”
鼠标右键文件,选择打开方式为"记事本",输入下面代码
<html>
<head>
<title>拉钩有我</title>
</head>
<body>
必须火!
</body>
</html>
- 保存文件,双击文件会以计算机默认的浏览器运行,你的第一个网页就制作完成了!
- 注意:
1.<html>标签它代表当前页面是一个HTML
2.<head>标签中可以声明HTML页面的相关信息
3.<body>标签中它主要是用于显示页面信息
4.标签要有开始,有结束,成双成对
4.开始标签与结束标签中的内容是标签的内容,如果没有标签内容,可以让标签自关闭<br/>
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> 标签: 代表当前书写的是一个HTML文档
- <head> 标签:存储的本页面的一些重要的信息,它不会显示
- <head> 标签:有一个子标签<title>它是用于定义页面的标题的
- <body> 标签:书写的内容会显示出来
- <body> 标签的属性
1.text 用于设置文字颜色
2.bgcolor 用于设置页面的背景色
3.background 用于设置页面的背景图片
排版标签
1. HTML注释
- <!---->
2. 换行标签
- <br/> 标签就是一个换行(回车)功能标签,标签中的 / 可有可无的。
- 有/是html语言的标准化,但是html语言是一门不那么严谨的语言
3. 段落标签
- 在<p>标签中的内容,会在开始与结束之间产生一个空白行,并且它会自动换行.
- 常用属性 align 它的作用是设置段落中的内容对齐方式 可取值有 left right cente
4. 水平线标签
- <hr>标签会在页面上产生一个水平线
- 对于hr标签它有常用属性:
align:可取值有left right center 代表水平线位置
size:代表水平线厚度(粗细)
width:代表水平线宽度
color:水平线的颜色
- 单位:size=“5”,5是默认的单位,为"像素"/“像素点”,像素就是构成计算机图片的最小单位!
- 也可以使用百分比,size=“50%”
5. 分区标签
- div是一个块标签,用来进行布局的
(透明衣柜,乱七八糟的衣服,整洁的放在衣柜里)
(块:这一块我站了,后面不允许有其他元素) - 普通的div并没有什么效果,肉眼也看不见,但div与CSS结合,就会更好对页面进行排版
- div与span都是“容器”的作用,具体区别:
▹ div会自动换行,我们也叫这样的标签为块级元素
▹ span标签它不会自动换行,我们也叫它为行内元素
▹ div:整体划分区块
▹ span:局部划分
- 上图,两个div的区别是显而易见的,后面我们再具体学习css语法
字体标签
1. 字体标签
- <font>标签可以设置字体,字的大小及颜色,常用属性:
face:用于设置字体,例如 宋体 隶书 楷体
size:用于设置字的大小(大小默认设置1-7,7最大,想更大,往后学css即可)
color:用于设置字的颜色 - 注:
我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。
(红色:分0~255种红色)
(绿色:分0~255种绿色)
(蓝色:分0~255种蓝色) - 每一种颜色的饱和度和透明度都是可以变化的,用0~255的数值来表示。如纯红色表示为(255,0,0),十六进制表示为#FF0000。按这种表达方式,理论上我们可以得到256 * 256 * 256 = 16777216种颜色。
- 使用十六进制方式,取值范围 #000000 ~ #FFFFFF (黑色到白色)。当颜色值为#cc3300 时,可简化成 #c30 这种方式
<body bgcolor="#666">
- RGB颜色表示法:RGB(x,y,z)。x、y、z是0 ~ 255之间的整数。rgb字母大小写无所谓
<body bgcolor="rgb(11,11,11)">
- (在线颜色选择器: http://www.86y.org/code/colorpicker/color.html )
- 百度搜索:字魂网,下载一个免费的字体,并安装到计算机中。在我们的网页中显示出来!
2. 标题标记
- 给一段文字起一个标题
<h1> ----- <h6>
h1最大 h6最小,它们代表的是标题,
自动换行,字体加粗,标题与标题之间产生一定的距离 - 注意:在HTML中允许标签进行嵌套的,但是一般都包裹嵌套,而不可以进行交叉嵌套
3. 格式化标签
- <b>:字体加粗
- <i>:字体倾斜
- <del>:
删除线 - <u>:下划线
列表标记
- ol:有序列表
type=‘A’:字母排序
type=‘I’:罗马排序
start=“3” 序列从几开始 - ul:无序列表
type=“disc”:默认,实心圆
type=“square”:方块
type=“circle”:空心圆
图像标签
- 它可以让我们在网页引入一张图片,常用属性:
- src 代表的图片的路径
- width 图片的宽度 px
- height 图片的高度 px
(宽高中只设置一个另外一个等比例变化) - border 用于设置图片的边框 px
- alt 如果图片不可以显示时,默认显示的文本信息
- title鼠标悬停图片上,默认显示的文本信息
- align 图片附件文字的对齐方式,可取值有
left:把图像对齐到左边
right:把图像对齐到右边
middle:把图像与中央对齐
top:把图像与顶部对齐
bottom:把图像与底部对齐(默认)
超连接标签
- <a>标签,可以实现跳转到其它页面操作.
- 超链接内容不仅可以是文本,也可以是图片等信息
- 常用属性:
1.href 代表的我们要跳转的路径
2.target 这个属性规定在何处打开这个链接文档,可取值:
_ blank 在新窗口中打开页面
_ self 默认。在本窗口打开页面
- 功能性连接:
1.发邮件
<a href="mailto:[email protected]">联系站长</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>
表格
-
<table>:定义一个表格
○ border:边框,取值是像素为单位
○ width 代表的表格的宽度
○ align 代表表格的对齐方式;取值
▸ left 左对齐表格
▸ right 右对齐表格
▸ center 居中对齐表格
○ cellspacing:单元格间距(通常设置0表示单线表格) -
<tr>:表格中的行 (Table Row)
○ align 代表表格的对齐方式;取值
▸ left 左对齐内容(默认值)
▸ right 右对齐内容
▸ center 居中对齐内容(th 元素的默认值) -
<td>:表格中的数据单元格 (Table DataCell)
○ colspan 指示列的合并
○ rowspan 指示行的合并
<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>
表单标签
- 表单可以让我们将录入信息携带到服务器端。
- 简单说,通过表单可以将要提交的数据提交到指定的位置。
- 但一个一个的提交,不方便。表单正好解决了这个问题,将所有的数据形成一个整体,一起提交给服务器。
- 常见的 登录页面、注册页面 都离不开表单的应用
1. form属性
- action:整个表单提交的目的地(回家的地址)
- method:表单提交的方式(回家的交通方式)
get:提交时,传输数据量少(传递普通文字信息,传递照片会失败),明文提交(在浏览器的url后面会显示提交的数据,不适合用于登录)
post:提交时,传输数据量大(传递文字和图片都行),密文提交(浏览器的url后面看不到提交的数据)
2. 表单中的元素(控件)
- <input>元素的type属性
○ text:默认值,普通的文本输入框
• placeholder属性:提示文本
• maxlength属性:最多能输入字符数量
○ password:密码输入框
○ checkbox:多选框/复选框
• checked:默认被选中
○ radio:单选按钮
○ file:上传文件
○ reset:重置按钮
○ submit:提交按钮
○ button:普通按钮 - <select>:下拉列表/下拉框
○ <option>:列表中的项
• selected:被选中 - <textarea>:文本域(多行文本框)
○ 可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的height和 width 属性。 - <button>:按钮
○ 在form表单中,作用和submit一样
○ 不在form表单中,就是普通按钮(配合后期的javascript,可扩展性更高)
<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>
- 注意事项:
1.所有表单中的元素都要具有名称(否则提交到服务器之后,服务器无法区识别多个元素之间的不同)
2.单选框要想可以一次只选择一个,要具有相同的name值
3.所有的复选框以组为单位,组内的每个复选框都应该具有相同的name值
框架标签
- 通过<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为:用多个页面拼装成一个页面。(下图是经典的:121)
- 注意,框架标签和body标签不共存。“有你没我,有我没你”
<!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>
- top.html、left.html、right.html、foot.html 四个页面内容一样,稍微改下文字而已,以top.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>
其它标签与特殊字符
1. <meta>标签
- <meta>标签必须写在<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">
- charset=“UTF-8”
当前页面的字符编码
gbk:中文简体 - name=“viewport” content=“width=device-width, initial-scale=1.0”
这里的名字是 viewport (显示窗口)
数据是文本内容 content="width=device-width, initial-scale=1.0"也就是显示窗口宽度是客户端的屏幕宽度(就是 满屏 !),显示的文字和图形的初始比例是1.0(针对移动设备的设置) - http-equiv=“X-UA-Compatible” content=“ie=edge”
每个电脑内置的IE版本是不一样的,为了兼容所有的版本以最高级模式渲染文档,也就是任何IE版本都以当前版本所支持的最高级标准模式渲染
- 通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面
<meta http-equiv="refresh" content="5; url=http://www.lagou.com">
- 注意:在html中如果跳转的互联网上的网站资源,那么我们在书写路径时,一定要带协议的路径。
2. <link>标签
- 后面我们会使用link标签来导入css
- 注意:link标签也必须写在<head>标签中。
3. 特殊字符
3、HTML5新特性
HTML4与HTML5的区别
- H5包含H4
- 大小写不敏感
(1) 标签
(2) 属性
(3) 属性的值
<inPUT tYPe="pasSWord"/>
- 引号可省略
<input type="password">
<input type=password>
- 省略了结尾标签
说是省略,其实运行起来,查看源代码,html是自动帮我们补全了
<p>哈哈哈哈哈哈哈
<p>哈哈哈哈哈哈哈
新增语义化标签
- html4中,所有的容器标签95%都会使用div,div过多的话,很难区分彼此
- 新增许多语义化标签,让div“见名知意”(是div只是换了个名)
▹ section标签:表示页面中的内容区域,部分,页面的主体部分
▹ article标签:文章
▹ aside标签:文章内容之外的,标题
▹ header标签:头部,页眉,页面的顶部
▹ hgroup标签:内容与标题的组合
▹ nav标签:导航
▹ figure标签:图文并茂
▹ foot:页脚,页面的底部
媒体标签
- 想在网页上播放视频,就要使用,属性有:
▹ src:媒体资源文件的位置
▹ controls:控制面板
▹ autoplay:自动播放(谷歌失效,360浏览器可以)
▹ loop:循环播放
<video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video>
新增表单控件
- 表单的控件更加丰富了
○ <input>,修改type属性:
▸ color:调色板
▸ date:日历
▸ month:月历
▸ week:周历
▸ number:数值域
▹ min:最小值(默认值是1)
▹ max:最大值(默认值无上限)
▹ step:递增量
▸ range:滑块
▸ search:搜索框(带×号,可一键删除框中内容)
○ 进度条<progress/>
○ 高亮<mark>
○ 联想输入框<datalist> (模糊查询)
▸ 选项<option>
任务二 (CSS)
1、CSS介绍
什么是CSS?
- CSS是指层叠样式表 cascading style sheets
- 通过CSS可以让我们定义HTML元素如何显示。
- CSS可以让我们原本HTML不能描述的效果,通过CSS描述出来。
- 通过CSS描述我们的html页面,可以让我们的页面更加漂亮,可以提高工作效率。
- (html创造楼骨架,css设计装修)
2、CSS与HTML结合方式
第一种方式 内联/行内样式
- 就是在我们的HTML标签上通过style属性来引用CSS代码。
- 优点:简单方便
- 缺点:只能对一个标签进行修饰。
第二种方式 内部样式表
- 我们通过<style>标签来声明我们的CSS. 通常<style>标签我们推荐写在head和body之间,也就是“脖子”的位置
- 优点:可以通过多个标签进行统一的样式设置
- 缺点:它只能在本页面上进行修饰
- 语法:选择器 {属性:值;属性:值}
▹ 选择器:你要修饰的目标(我们班有10个同学,你要给张三化妆,这个选择器就应该是张三)
▹ 属性:画口红
▹ 值:红色口红
第三种方式 外部样式表
- 我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css
- 在项目根目录下,创建css目录,在css目录中创建css文件 css01.css
- 在<head>中使用<link>标签引用外部的css文件
▹ href=‘路径’
▹ rel=‘stylesheet’
- 还可以使用另一种引入css文件的方式:
<style>
@import 'css/css01.css'
</style>
- 关于外部导入css使用与@import的区别?
1.加载顺序不同
@import方式导入会先加载html,然后才导入css样式,那么如果网络条件不好,就会先看到没有修饰的页面,然后才看到修饰后的页面。
如果使用link方式,它会先加载样式表,也就是说,我们看到的直接就是修饰的页面;
2.@import方式导入css样式,它是不支持javascript的动态修改的。而link支持。(link对javascript的支持更加亲切,import对javascript就不太友好) - 三种样式表的优先级:满足就近原则
内联 > 内部 > 外部
3、CSS的使用
css中选择器
1. 元素(标签)选择器
- 它可以对页面上相同的标签进行统一的设置,它描述的就是标签的名称.
2. 类选择器
- 类选择器在使用时使用"."来描述,它描述的是元素上的class属性值
3. id选择器
- 它只能选择一个元素,使用 “#” 引入,引用的是元素的id属性值。
- id选择器,比类选择器更具有唯一性
4. 选择器组
- 逗号表示,谁和谁。
- 例如,我有手机,你有手机,他也有手机,一条一条写太麻烦,就可以合并编写
我,你,他{
手机
}
5. 派生选择器
- 就是子类选择器
- 子代:父子关系(隔代不管)
div>p:(子p抚养(孙p不抚养))div的子集元素被选中,只读取一级 - 后代:父子孙,曾孙,从孙…
div p:(子孙p都抚养)div下的p标签都被选中,忽略层级
6. CSS伪类
- CSS伪类可对css的选择器添加一些特殊效果
- 伪类属性列表:
▹ :active 向被激活的元素添加样式。
▹ :hover 当鼠标悬浮在元素上方时,向元素添加样式。
▹ :link 向未被访问的链接添加样式。
▹ :visited 向已被访问的链接添加样式。
▹ :first-child 向元素的第一个子元素添加样式。 - 超链接的伪类:要遵守使用顺序,爱恨原则 LoVeHAte,lvha
a:link {
color: #FF0000} /* 未访问的链接 */
a:visited {
color: #00FF00} /* 已访问的链接 */
a:hover {
color: #FF00FF} /* 鼠标移动到链接上 */
a:active {
color: #0000FF} /* 选定的链接 */
CSS基本属性
1. 文本属性
- 指定字体:font-family : value;
- 字体大小:font-size : value;
▹ px:像素
▹ em:倍数 - 字体加粗:font-weight : normal/bold;
- 文本颜色:color : value;
- 文本排列:text-align : left/right/center;
- 文字修饰:text-decoration : none/underline;
- 行高:line-height : value;
- 首行文本缩进:text-indent : value (2em);
2. 背景属性
- CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。
- background-color 设置元素的背景颜色。
- background-image 把图像设置为背景。
background-image: url('img/1.jpg');
- background-repeat 设置背景图像的墙纸效果,是否及如何重复
▹ repeat:在垂直方向和水平方向重复,为重复值
▹ repeat-x:仅在水平方向重复
▹ repeat-y:仅在垂直方向重复
▹ no-repeat:仅显示一次 - background-position 设置背景图像的起始位置
- 1:控制水平方向 x轴: 正值,向右移动; 负值,向左移动
- 2:控制垂直方向 y轴: 正值,向下移动; 负值,向上移动
/* 图片向左移动50px,向下移动100px (可以为负值) */
background-position:50px 100px;
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动
▹ 默认值是 scroll:默认情况下,背景会随文档滚动
▹ 可取值为 fixed:背景图像固定,并不会随着页面的其余部分滚动,常用于实现称为水印的图像
background-attachment: fixed
3. 列表属性
- CSS列表属性作用如下:
▹ 设置不同的列表项标记为有序列表
▹ 设置不同的列表项标记为无序列表
▹ 设置列表项标记为图像 - 有两种类型的列表:
▹ 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
▹ 有序列表 - 列表项的标记有数字或字母 - 使用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,等。)
<!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>
4. 边框属性
- CSS边框属性允许你指定一个元素边框的样式和颜色。
<style>
div{
border-width: 20px;
border-color: green;
border-style: outset;
}
</style>
<body>
<div>hello</div>
</body>
- border-style取值:
<!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>
5. 轮廓属性
- 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
- 轮廓和边框的区别:
▹ 边框 (border) 可以是围绕元素内容和内边距的一条或多条线;
▹ 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 - CSS outline 属性规定元素轮廓的样式、颜色和宽度。
6. 盒子模型
- 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
- CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
- 盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- 下面的图片说明了盒子模型(Box Model):
- margin(外边距) - 盒子与盒子之间的距离
- border(边框) - 盒子的保护壳
- padding(内边距/填充) - 内填充,盒子边与内容之间的距离
- content(内容) - 盒子的内容,显示的文本或图像
CSS定位
- 块级元素:h1~h6,p, div 等,自上而下,垂直排列(自动换行);可以改变宽高
- 行内元素:a,b,span,等,从左向右,水平排列(不会换行);不能改变宽高
- 行内块元素:input,img等,从左向右,水平排列(自动换行);可以改变宽高
2. 浮动定位
- 让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性(独自占一行)。
- float取值:
▹ none :不浮动
▹ left:贴着左边 浮动
▹ right:贴着右边 浮动
3. 相对定位
- 和原来的位置进行比较,进行移动定位(偏移)
4. 绝对定位
- 本元素与已定位的祖先元素的距离
▹ 如果父级元素定位了,就以父级为参照物;
▹ 如果父级没定位,找爷爷级,爷爷定位了,以爷爷为参照物。
▹ 如果爷爷没定位,继续向上找,都没定位的话,body是最终选择。
<div class="yeye">
<div class="father">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</div>
</div>
- 以父节点作为参照物
- 以爷爷节点作为参照物
5. 固定定位
- 将元素的内容固定在页面的某个位置,当用户向下滚动页面时元素框并不随着移动
6. z-index
- 如果有重叠元素,使用z轴属性,定义上下层次。
- 注意:
▹ z轴属性,要配合相对或绝对定位来使用。
▹ z值没有额定数值(整型就可以,具体用数字几,悉听尊便)
4、CSS3新特性
圆角
- border-radius:左上 右上 右下 左下;
- border-radius:四个角;
- border-radius:50%; 圆形
盒子阴影
- box-shadow:1 2 3 4 5;
1:水平偏移
2:垂直偏移
3:模糊半径
4:扩张半径
5:颜色
渐变
1. 线性渐变
background:linear-gradient([方向/角度],颜色列表);
<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>
2. 径向渐变
- 以圆心向外发散
background: radial-gradient(颜色列表);
<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>
背景
1. 背景位置
- background-origin:指定了背景图像的位置区域
▹ border-box : 背景贴边框的边
▹ padding-box : 背景贴内边框的边
▹ content-box : 背景贴内容的边
<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>
2. 背景裁切
- background-clip:
▹ border-box 边框开切
▹ padding-box 内边距开切
▹ content-box 内容开切
<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>
3. 背景大小
- background-size:
▹ cover 缩放成完全覆盖背景区域最小大小
▹ contain 缩放成完全适应背景区域最大大小
<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>
过渡动画
1. 过渡
- 从一个状态到另一个状态,中间的“缓慢”过程;
缺点是,控制不了中间某个时间点。
transition{1 2 3 4}
- 过渡或动画模拟的css属性
- 完成过渡所使用的时间(2s内完成)
- 过渡函数。。。
- 过渡开始出现的延迟时间
transition: width 2s ease 1s;
目前,css3只开发出部分的过渡属性,下图所示:
<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>
2. 动画
- 从一个状态到另一个状态,过程中每个时间点都可以控制。
- 关键帧:@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }
- 动画属性:animation{ 1 , 2 , 3 , 4 , 5 }
1:动画帧
2:执行时间
3:过渡函数
4:动画执行的延迟(可省略)
5:动画执行的次数 - 需求1:一个 元素从左向右移动,3秒内执行2次
<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>
- 需求2:一个 元素从左向右移动,3秒内执行完成。无限次交替执行
infinite:无限次
alternate:来回执行(交替,一去一回)
<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>
任务三 (JavaScript)
1、JavaScript介绍
- 虽然是java作为前缀,但java和javascript的关系,就像老婆和老婆饼之间的关系,没有一毛钱关系!
- 网景公司在Netscape2.0首先推出了JavaScript
- JavaScript 的正式名称是 “ECMAScript”,此标准由 ECMA 组织发展和维护,简称“js”
- JavaScript 是一种网页编程技术,用来向 HTML 页面添加交互行为
- JavaScript 是一种基于对象和事件驱动的解释性脚本语言,直接嵌入 HTML 页面,由浏览器解释执行代码,不进行预编译。
js的特点
- 可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序 (后面会学习不用浏览器也能运行)
- 解释执行:事先不编译,逐行执行
- 基于对象:内置大量现成对象(不需要new)
- 适宜:
▹ 客户端数据计算(客户端可以做到的事加减乘除让客户端做,就不给服务器加负担了)
▹ 客户端表单合法性验证(密码是否为8位数,客户端判断完之后发给服务端)
▹ 浏览器事件的触发
▹ 网页特殊显示效果制作(网页游戏)
js的组成
- ECMAScript:定义核心语法,关键字,运算符,数据类型等系列标准
- DOM:文档对象模型,将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
- BOM:浏览器对象模型,是对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于,它只是 JavaScript 的一个部分,没有任何相关的准。
▹ 弹出新的浏览器窗口
▹ 移动、关闭浏览器窗口以及调整窗口大小
▹ 提供 Web 浏览器详细信息的定位对象
▹ 提供用户屏幕分辨率详细信息的屏幕对象
▹ 对 cookie 的支持
▹ IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX对象,进而实现ajax局部刷新技术
2、HTML和JavaScript结合方式
- 使用js的三种方式
行内脚本
- 点击按钮(触发)
- 弹框(具体的操作)
<button onclick="alert('弹框测试')">点我一下</button>
<!--
on: 绑定
click: 点击事件
alert: 弹框
在h2标签上绑定一个点击事件,弹框
-->
<h2 onclick="alert('hello');">点我试试</h2>
内部脚本
- 使用
- 标准是写在head和body之间(脖子位置),但其实只要写在html文件内部就可以,无论什么位置
<html>外,<p></p>内部,都可以。
<body>
<script>
alert("弹框");
</script>
</body>
外部脚本
- 在项目根目录下创建一个目录js
- 在js目录中创建一个文件,后缀名是.js
- 在html页面中,使用
<script src="js/xx.js"></script>
- 以上使用脚本的三种方式的优先级,谁在上,谁先执行。因为是解释性语言。
3、JavaScript的使用
变量
- 因为js是弱类型语言,所以,在定义变量的时候,所有的数据类型都是var
- 声明变量: var x ; var x,y;
- 数值类型:number
▹ 不区分整型数值和浮点型数值
▹ 所有数字都采用 64 位浮点格式存储,类似于double 格式 - 字符串:string
▹ 首尾由单引号或双引号括起
var aa="欢迎来到\"JavaScript世界";
- 布尔类型:
▹ 仅有两个值:true和false也代表1和0
▹ 实际运算中true=1,false=0
1. 自动类型转换
数字 + 字符串:数字转换为字符串 10+’a’ -> 10a
数字 + 布尔值:true转换为1,false转换为0 true+5->6
字符串 + 布尔值:布尔值转换为字符串true或false true+’a’->truea
布尔值 + 布尔值:布尔值转换为数值1或0 true+true->2
2. 数据类型转换函数
- parseInt:强制转换成整数
▹ 如果不能转换,则返回 NaN (NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字)
▹ 例如:parseInt(“6.32”)=6 - parseFloat:强制转换成浮点数
▹ 如果不能转换,则返回 NaN
▹ 例如:parseFloat(“6.32”)=6.32 - typeof:查询数值当前类型,返回 string / number / boolean / object
▹ 例如:typeof(“test”+3)==“string”
3. null 与 undefined
- null 在程序中代表“无值”或者“无对象”
▹ 可以通过给一个变量赋值 null 来清除变量的内容 - undefined
▹ 声明了变量但从未赋值或者对象属性不存在
4. 算术运算
- 加(+)、 减(-)、 乘( * ) 、除( / ) 、余数( % )
▹ - 可以表示减号,也可以表示负号,如:x = -y
▹ + 可以表示加法,也可以用于字符串的连接 - 递增( ++ ) 、递减( – )
▹ i++ 相当于 i=i+1
▹ i-- 相当于 i=i-1
5. 关系运算
- 严格相等:===
▹ 类型相同
▹ 数值相同 - 非严格相等:!==
var a = "10";
var b = 10;
if (a == b)
alert("equal");
if (a === b)
alert("same");
6. 逻辑运算
-
逻辑非(!)、逻辑与(&&)、逻辑或(||)
-
逻辑运算的操作数均为 boolean 表达式
-
我要吃两碗拉面或者10个包子才能吃饱!问题是,我只吃两碗面,饱了! 我只吃10个包子,饱了
-
我要吃两碗拉面并且10个包子才能吃饱!问题是,我只吃两碗面,没饱! 我只吃10个包子,没饱,
7. 控制语句
if(关系表达式) {
// 语句块 1
}else {
// 语句块 2
}
if (表达式1) {
// 语句1;
}else if (表达式2){
// 语句2;
}else if (表达式3){
// 语句3;
} else{
// 语句4;
}
switch (表达式) {
case 值1:
// 语句1;
break;
case 值2:
// 语句2;
break;
default:
// 语句4;
}
for (var i=1 ; i<=5 ; i++){
alert(i);
}
while (条件){
// 语句1;
...
}
常用字符串API
- length:获取字符串的长度(字符串中字符的个数) 属性,没有小括号
var str = "hello";
console.log( str.length );
- toUpperCase/toLowerCase :转大小写
var name = "AngierSun";
console.log( "大写:"+name.toUpperCase() );
console.log( "小写:"+name.toLowerCase() );
- charAt(下标) : 返回某个下标上的字符
var str1 = "javascript网页教程";
var str2 = str1.charAt(12); // 下标12上的字符
console.log(str2); //教
var str3 = str1.charCodeAt(12);
console.log(str3); //25945:(汉字“教”在unicode编码中的编号)
- indexof(字符):查找字符串中字符出现的首次下标
- lastIndexof(字符):查找字符串中字符最后一次出现的下标
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);
- substring(开始,结束):截取字符串中一部分(结束是不包含的)
var str1 = "abcdefgh";
var str2 = str1.substring(2,4);
console.log(str2); //cd,从2开始(包含),4结束(不包含)
- replace(旧的,新的):将字符串中的旧字符替换成新字符
var str1 = "abcde";
var str2 = str1.replace("cd","XXX");
console.log(str2); // abXXXe,将str1中的cd替换成XXX
- split(分割的节点):一个字符串切割成N个小字符串,所以返回的是数组类型
var str1 = "一,二,三,四,五";
var arr = str1.split(","); // 将str1 以逗号进行分割,分割成N份,所以返回的结果一定是数组结构
console.log( "共分割成:"+arr.length+"份" );
console.log( "第三份是:" + arr[2] ); // 三
数组
1. 创建数组
var arr1 = new Array();
2. 初始化数组的三种方式
// 第一种
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]);
}
3. 数组的常用方法
- tostring():将数组转换成字符串
var arr = [1,2,3,4];
console.log("类型为:" + typeof( arr ) );
var str = arr.toString(); // 将数组转换成字符串
console.log( str +",类型为:" + typeof( str ) );
- join(连接符号):将数组中的每个元素用连接符号连接成一个新的字符串。
var arr = [1,2,3,4];
var str = arr.join("-"); // 将数组中每个元素用-进行连接,并形成一个全新的字符串
console.log( str +",类型为:" + typeof( str ) );
- concat(新元素):将原来的数组连接新元素,原数组不变。
var arr = [1,2,3,4];
var arrnew = arr.concat(5,6); // 在arr数组的后面添加新的元素,形成一个新数组,但是原数组是不变的
console.log( arrnew +",类型为:" + typeof( arrnew ) );
console.log("原数组:" + arr);
- slice(开始,结束):在数组中提取一部分,形成新的数组。
▹ 1,2,3,4,5 slice(2,4) 结果:3,4
var arr = ['a','b','c','d','e','f','g','h'];
var arrnew = arr.slice( 2,4 ); // 在arr数组中截取,从2开始(包含),4结束(不包含)
console.log( arrnew ); // cd
- reverse():数组的反转(倒序)
var arr = [31,12,111,444];
console.log( arr.toString() );
arr.reverse(); // 将数组中的元素倒置
console.log( arr.toString() );
- sort():数组排序
▹ arr.sort() 字符排序
▹ arr.sort(func) 数值排序
var arr = [31,12,111,444];
arr.sort(); // 字符排序(不会按照字面量的大小)
console.log( arr );
var arr = [31,12,111,444];
arr.sort( laosun ); // 数字排序(会按照字面量的大小)
console.log( arr );
// 定义排序函数
function laosun(a,b){
return a-b;
}
Math数学对象
- Math 对象用于执行数学任务
- 没有构造函数 Math()
- 无需创建,直接把 Math 作为对象使用就可以调用其所有属性和方法
// 返回0-9之间任意一个随机数字
var i = Math.random() * 10;
var j = Math.floor(i);
console.log(j);
Number对象
- Number.toFixed(2); 自带四舍五入技能
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 );
正则表达式
- 对字符串执行模式匹配的强大工具
var reg1 = /^\d{3,6}$/; // 匹配纯数字3-6个
var reg2 = new RegExp(“^\\d{
3,6}$");
// 方式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("格式错误");
}
日期对象
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 );
函数
- 使用关键字 function 定义函数
function 函数名( 形参列表 ){
// 函数体
return 返回值;
}
- 函数声明后不会立即执行,会在我们需要的时候调用到,才会执行。
- 注意:
▹ 形参:一定不要带数据类型
▹ 分号;是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句,所以不以分号结束。
1. 无返回值
function qiuhe(a, b) {
var he = a + b;
console.log("两数之和:" + he);
}
qiuhe(3,4);
2. 有返回值
function qiuhe(a, b) {
var he = a + b;
return "两数之和:" + he;
}
var s = qiuhe(3,4);
console.log( s );
3. 参数对象
- 在函数内部,调用参数列表的属性
function func(a,b,c){
console.log( arguments.length ); // 获得参数的个数
console.log( arguments[1] ); // 获得下标为1的参数
}
4. 构造函数
- 函数同样可以通过内置的 JavaScript 函数构造器(Function())定义
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);
- 注: 上述函数以分号结尾,因为它是一个执行语句。
5. 匿名函数
- 没有名称的函数
var fn = function(a, b) {
// 没有名字的函数,应该用一个变量来接收
return a * 10 + b;
};
console.log( fn(3, 4) );
6. 全局函数
- isNaN:检查其参数是否是非数字值
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
- eval:用来转换字符串中的运算
var str = "1+3";
console.log( str ); // 1+3 , +会认定为一种字符符号而已,没有加法的作用
console.log( eval( str ) ); // 让字符串中的运算符号生效
- encodeURI 与 decodeURI
var name = "拉勾网";
console.log( "转码前:" + name );
name = encodeURI(name);
console.log( "转码后:" + name );
name = decodeURI(name);
console.log( "解码后:" + name );
7. 闭包
- 闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数。
- 闭包的作用:访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理;
简单地说:就是在函数的局部范围内声明一个封闭的环境,此环境不会被垃圾回收探测到。保证了数据的安全唯一性
- 想了解闭包,首先要了解什么是全局变量,什么是局部变量
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();
- 需求:统计方法执行了多少次
var count = 0; // 总次数
function test1(){
count++; // 自增+1
}
test1();
test1();
test1();
console.log( count );
- 谁都可以访问count,所以count变量并不安全,因为是全局变量。
- 如何才能安全呢?将count声明为局部变量
function test1(){
var count = 0; //局部变量
return count++; //外部无法访问count,只能通过return才能将count变量返回,并输出
}
test1();
test1();
test1();
console.log( test1() ); // 每次调用方法,首先就是将变量还原为0
- 结果一直是0,因为每次调用test1(),方法体的第一句代码就是还原,无论曾经的值是多少。
- 突发奇想,如果在test1()函数里面,再嵌套一个函数,js是支持函数嵌套的
function test1(){
var count = 0; //局部变量
function jia(){
return count++;
}
jia();
return count;
}
test1();
test1();
test1();
console.log( test1() ); // 每次调用方法,首先就是将变量还原为0
- 如果每次只调用test1()里面的jia()就好了。ok,闭包帮你解决此问题!
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
- 闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不 受外界干扰。
- 直观的说就是形成一个不销毁的栈环境。
▹ 闭包的优点: 方便调用上下文中声明的局部变量 逻辑紧密,可以在一个函数中再创建个函数,避免了传参的问题
▹ 闭包的缺点: 因为使用闭包,可以使函数在执行完后不被销毁,保留在内存中,如果大量使用闭包就会造 成内存泄露,内存消耗很大
弹框输出
- 普通弹框 alert(“hello,拉勾”);
- 控制台日志输出 console.log(“谷歌浏览器按F12进入控制台”);
- 页面输出 document.write("<h2>我爱你中国"); 将<h2>元素输出到中
- 确认框 confirm(“确定删除吗?”);
var b = confirm("确定删除吗?");
if(b){
document.write( "<h1>删除成功!</h1>" );
}else{
document.write( "<h1>你取消了操作</h1>" );
}
- 输入框 prompt(“请输入姓名:”);
var name = prompt("请输入你的名字:");
document.write( "<h1>大名:"+name+"!</h1>" );
4、DOM操作
- 在一个html页面中,会使用很多标签来规划制作页面。
- 每个标签都有它存在的意义,如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素
- 如何查找到这个元素是个难题,W3C组织的工程师们,突然看到了一棵大树。我要是想找到某一片叶子,应该怎么做?
- “顺藤摸瓜”,主树干有分支,每个分支还有许多小分支,只要把这个分支的结构整理清楚,任何一片叶子都不是难事了
- 叶子和大树的一些启发,工程师们开会讨论就定了这个理论**“文档对象模型”**,
- 文档对象模型,就是将页面中所有的标签元素都看成是一个对象(一片叶子),主树干定义为根节点(根元素),所有的标签都是从根元素延伸出去的,摸清结构,找到某个标签就不再困难了
▹ 在节点树中,顶端节点就是根节点(root)
▹ 每个节点都有父节点(除了根节点)
▹ 任何一个节点都可以拥有任意数量的子节点
▹ 同胞是拥有相同父节点的节点
<html>
<head>
<meta charset="utf-8">
<title>DOM 教程</title>
</head>
<body>
<h1>第一节:HTML DOM</h1>
<p>Hello world!</p>
</body>
</html>
- 从上面的 HTML 中:
▹ <html> 节点没有父节点;它是根节点
▹ <head> 和 <body> 的父节点是 <html> 节点
▹ 文本节点 “Hello world!” 的父节点是 <p> 节点 - 并且:
▹ <html> 节点拥有两个子节点:<head> 和 <body>
▹ <head> 节点拥有两个子节点:<meta> 与 <title> 节点
▹ <title> 节点也拥有一个子节点:文本节点 “DOM 教程”<h1> 和 <p> 节点是同胞节点,同时也是<body> 的子节点 - 并且:
▹ <head> 元素是 <html> 元素的首个子节点
▹ <body> 元素是 <html> 元素的最后一个子节点
▹ <h1> 元素是 <body> 元素的首个子节点
▹ <p> 元素是 <body> 元素的最后一个子节点 - js为我们提供了很多种方法来实现在页面找查找某个元素节点
DOM访问
- getElementById:通过id属性获得元素节点对象
▹ 案例:当帐号为空时,阻止表单提交
<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>
- getElementsByName:通过name属性获得元素节点对象集
▹ 案例:购物车全选效果
<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>
- getElementsByTagName:通过标签名称获得元素节点对象集
▹ 案例:表格隔行变色
<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>
DOM修改
- 修改 HTML DOM 意味着许多不同的方面:
▹ 改变 HTML 内容
▹ 改变 CSS 样式
▹ 改变 HTML 属性
▹ 创建新的 HTML 元素
▹ 删除已有的 HTML 元素
▹ 改变事件(处理程序)
- 改变一个 <h2> 元素的 HTML 内容 :
<body>
<button onclick="test()">点我试试</button>
<script>
function test(){
document.getElementById("hello").innerHTML = "走哇,喝点去~!";
}
</script>
<h2 id="hello">你好!</h2>
</body>
- 改变一个<h2>的 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>
1. 添加节点
- 点击按钮,在页面中创建一张图片
<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>
2. 删除节点
- 点击按钮,把上面刚创建的图片从页面上删除
<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>
3. 替换节点
- 点击按钮,把上面刚创建的图片替换成另一张
<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>
事件
- js捕获某个动作而做出的反馈
- HTML 事件的例子:
▹ 当用户点击鼠标时
▹ 当网页已加载时
▹ 当图片已加载时
▹ 当鼠标移动到元素上时
▹ 当输入字段被改变时
▹ 当 HTML 表单被提交时
▹ 当用户触发按键时
1. 窗口事件 (Window Events)
- 仅在 body 和 frameset 元素中有效。
▹ onload 当文档被载入时执行脚本
<body onload="test()">
<script>
function test() {
document.write("哈哈哈哈");
}
</script>
</body>
2. 表单元素事件 (Form Element Events)
- 仅在表单元素中有效。
▹ onblur 当元素失去焦点时执行脚本
▹ onfocus 当元素获得焦点时执行脚本(被激活)
<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>
3. 鼠标事件 (Mouse Events)
- onclick 当鼠标被单击时执行脚本
- ondblclick 当鼠标被双击时执行脚本
- onmouseout 当鼠标指针移出某元素时执行脚本
- onmouseover 当鼠标指针悬停于某元素之上时执行脚本
<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>
4. 键盘事件
- onkeydown 按下去
- onkeyup 弹上来
<script>
// window: 当前浏览器窗口
window.onkeydown = function(){
// event:事件源(按键)
// console.log( "按键编码:"+event.keyCode );
if(event.keyCode == "13"){
// 回车键
alert("登录成功!");
}
}
window.onkeyup = function(){
console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时,按键回弹则触发
}
</script>
5. 事件冒泡
- 创建两个div,一个大一些,一个小一些
<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>
- 先子,后父。事件的触发顺序自内向外,这就是事件冒泡;
6. 事件捕获
- 还是刚才创建两个div,一个大一些,一个小一些
<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>
- 先父,后子。事件触发顺序变更为自外向内,这就是事件捕获;
面向对象OOP
- 使用Object创建通用对象
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();
- 使用构造函数
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();
- 使用直接量
var user = {
username : "孙悟空",
age : 527,
say : function(){
console.log("大家好,我叫:"+this.username+",我今年"+this.age+"岁了!");
}
};
user.say();
JSON
- 大家在互联网上来回传递数据,如果没有一个统一的格式,解析起来的难度很大(每个人的编码喜好不一样)
- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
- 易于人阅读和编写,同时也易于机器解析和生成
{
属性1:值1,
属性2:值2,
。。。。
}
<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>
5、BOM操作
- 就是javascript对浏览器的一些常规操作的方法
(B:browser)
window对象
<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>
1. screen屏幕对象
- 我想知道我的电脑屏幕多大?实际上,得到的就是分辨率
<body>
<button onclick="kai()">求大小</button>
</body>
<script>
function kai() {
alert(window.screen.width + "|" + window.screen.height);
}
</script>
2. location定位
- 包含有关当前 URL 的信息,通常用来做页面跳转
<button onclick="test()">测试</button>
<script>
function test(){
console.log( "当前页面的URL路径地址:"+ location.href );
location.reload(); // 重新加载当前页面(刷新)
location.href = "http://lagou.com"; // 跳转页面
}
</script>
3. history浏览器历史
- history对象会记录浏览器的痕迹
- a.html
<a href="b.html">去b页面</a>
- b.html
<button onclick="hui()">返回</button>
<script>
function hui(){
//history.go(-1); //上一级页面
history.back(); // 与go(-1)是等价的
}
</script>
4. navigator 导航(了解)
- window.navigator 对象包含有关访问者浏览器的信息;
<script>
var str = "";
str += "<p>浏览器的代号:"+ navigator.appCodeName +"</p>";
str += "<p>浏览器的名称:"+ navigator.appName+"</p>";
str += "<p>浏览器的版本:"+ navigator.appVersion+"</p>";
str += "<p>硬件平台:"+ navigator.platform+"</p>";
str += "<p>用户代理:"+ navigator.userAgent +"</p>";
str += "<p>启用Cookies:"+navigator.cookieEnabled+"</p>";
document.write(str);
</script>
5. 存储对象
-
用起来和我们在java中map很相似,都是键值对的方式存数据
-
本地存储 localStorage
在关闭窗口或标签页之后将会删除这些数据
- 保存数据
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);
- 会话存储 sessionStorage
会话,就是保持浏览器别关闭。
关闭浏览就等于结束了一次会话。
开启浏览器就意味着创建了一次会话。
- 保存数据
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>
计时操作
1. 周期性定时器 setInterval
- setInterval(1,2):周期性触发代码exp (常用)
1:执行语句(函数)
2:时间周期,单位为毫秒 - 案例:闪烁的字体 (1秒1变色)
<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>
- 案例:在闪烁字体的基础上扩展,闪烁的电子时钟
<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>
2. 停止定时器 clearInterval
- 案例:模拟年会抽奖
<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>
3. 一次性定时器 setTimeout
- 相当于延迟的效果,只执行一次
<script>
function bian(){
document.body.style.backgroundColor = "red";
}
//3秒之后调用
setTimeout(bian,3000);
</script>
模块一 作业
- 编写一个注册用户信息页面,需求如下:
▹表单中包括:用户名,密码,性别,学历(本科,专科),自我介绍;
▹输入完用户名后校验只能是"admin",否则弹框提示错误
▹点击提交执行后执行事件,把自我介绍的内容弹框提示出来; - 使用html+css完成效果图(素材见课件)
第三阶段 模块二 前端高级(jQuery、ES6、Bootstrap)
任务四 (jQuery)
1. jQuery介绍
- jQuery由美国人John Resig(约翰·莱西格)于2006年创建
- jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装
- 它的设计思想是write less,do more
- 实现隔行变色效果,JavaScript要循环加判断,而jQuery只需一句关键代码
$("tr:even").css("background-color","#ccc");
1.1 jQuery能做什么?
- 访问和操作DOM元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的jQuery插件
- 与Ajax技术完美结合
jQuery能做的JavaScript也都能做,但使用jQuery能大幅提高开发效率
其实,jQuery和JavaScript的之间关系,可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩,而jQuery也是对JavaScript的高度压缩库
1.2 jQuery的优势
- 体积小,压缩后只有100KB左右
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
1.3 jQuery下载
进入jQuery官网:http://jQuery.com
我们使用压缩版就可以。体积更小,内容已经通过算法进行压缩, 不会浪费资源空间!
而开发版就针对修改jQuery源码的专业前端开发者的。
2. jQuery的使用
jQuery作为一个单独存在的js文件,并不会与其他的js文件发生冲突
在页面中使用传统引入js文件的方式引入即可。
<script src="js/jquery-3.4.1.min.js"></script>
2.1 基本的语法介绍
<script>
$(selector).action();
</script>
- 说明:
工厂函数 $() :将DOM对象转化为jQuery对象
选择器 selector:获取需要操作的DOM 元素(没错,用法基本上和css一致 )
方法action():jQuery中提供的方法,其中包括绑定事件处理的方法“$”等同于“ jQuery ” - 例如:
<body>
<p>hello</p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
alert( $("p").text() );
</script>
2.2 jQuery对象与DOM对象
- DOM对象和jQuery对象分别拥有一套独立的方法,不能混用
$("#title").html();
// 等同于
document.getELementById("title").innerHTML;
- 想混用,要转换
DOM对象转jQuery对象
jQuery对象转DOM对象
//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对象
2.3 选择器
2.3.1 基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
名称 | 语法构成 | 描述 | 示例 |
---|---|---|---|
标签选择器 | element | 根据给定的标签名匹配元素 | $(“h2” )选取所有h2元素 |
类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title的元素 |
并集选择器 | selector1,selector2,…,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $(“div,p,.title” )选取所有div、p和拥有class为title的元素 |
交集选择器 | element.class或element#id | 匹配指定class或id的某元素或元素集合 | $(“h2.title”)选取所有拥有class为title的h2元素 |
<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>
2.3.2 层次选择器
名称 | 语法构成 | 描述 | 示例 |
---|---|---|---|
后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant(后代)元素 | $("#menu span" )选取#menu下的元素 |
子选择器 | parent>child | 选取parent元素下的child(子)元素 | $(" #menu>span" )选取#menu的子元素 |
相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻 元素之后的同辈元素 |
同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取 元素之后所有的同辈元素 |
<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>
2.3.3 属性选择器
名称 | 语法构成 | 描述 | 示例 |
---|---|---|---|
属性选择器 | [attribute] | 选取包含给定属性的元素 | $(" [href]" )选取含有href属性的元素 |
[attribute=value] | 选取等于给定属性是某个特定值的元素 | $(" [href =’#’]" )选取href属性值为“#”的元素 | |
[attribute !=value] | 选取不等于给定属性是某个特定值的元素 | $(" [href !=’#’]" )选取href属性值不为“#”的元素 | |
[attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^=‘en’]" )选取href属性值以en开头的元素 | |
[attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $(" [href$=’.jpg’]" )选取href属性值以.jpg结尾的元素 | |
[attribute*=value] | 选取给定属性是以包含某些值的元素 | $(" [href* =‘txt’]" )选取href属性值中含有txt的元素 | |
[s1] [s2] [sN] | 选取满足多个条件的复合属性的元素 | $(“li[id][title=新闻]” )选取含有id和title属性为新闻的
|
<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>
2.3.4 过滤选择器
语法构成 | 描述 | 示例 |
---|---|---|
:first | 选取第一个元素 | $(" li:first" )选取所有 元素中的第一个 元素 |
:last | 选取最后一个元素 | $(" li:last" )选取所有 元素中的最后一个 元素 |
:even | 选取索引是偶数的所有元素(index从0开始) | $(" li:even" )选取索引是偶数的所有 元素 |
:odd | 选取索引是奇数的所有元素(index从0开始) | $(" li:odd" )选取索引是奇数的所有 元素 |
:eq(index) | 选取索引等于index的元素(index从0开始) | $(“li:eq(1)” )选取索引等于1的 元素 |
:gt(index) | 选取索引大于index的元素(index从0开始) | $(" li:gt(1)" )选取索引大于1的 元素(注:大于1,不包括1) |
:lt(index) | 选取索引小于index的元素(index从0开始) | $(“li:lt(1)” )选取索引小于1的 元素(注:小于1,不包括1) |
<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>
2.4 事件
2.4.1 鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件,常用鼠标事件有:
方法 | 描述 | 执行时机 |
---|---|---|
click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
mouseover( ) | 触发或将函数绑定到指定元素的mouse over事件 | 鼠标移过时 |
mouseout( ) | 触发或将函数绑定到指定元素的mouse out事件 | 鼠标移出时 |
<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>
2.4.2 键盘事件
用户每次按下或者释放键盘上的键时都会产生事件,常用键盘事件有:
方法 | 描述 | 执行时机 |
---|---|---|
keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
<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>
2.4.3 表单事件
- 当元素获得焦点时,会触发focus事件,失去焦点时,会触发blur事件,详见下表:
方法 | 描述 | 执行时机 |
---|---|---|
focus( ) | 触发或将函数绑定到指定元素的focus事件 | 获得焦点 |
blur( ) | 触发或将函数绑定到指定元素的blur事件 | 失去焦点 |
<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>
2.4.4 鼠标悬停复合事件
hover()方法相当于mouseover与mouseout事件的组合
<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>
2.4.5 连续点击复合事件
toggle()除了可以模拟鼠标的连续单击事件
<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>
2.4.6 事件的动态绑定
对dom元素绑定事件的另一种写法
- 绑定一个事件
$(".del").on('click', function() {
alert('hello');
})
- 绑定多个事件
$(".del").on('click mouseover', function() {
alert('hello');
})
2.5 元素的隐藏和显示
2.5.1 改变元素的宽和高(带动画效果)
- show( speed ):显示
- hide( speed ):隐藏
- toggle( speed )等价于show+hide : 显示的隐藏,隐藏的显示
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒
<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>
2.5.2 改变元素的高(拉伸效果)
- slideDown( speed ) :显示
- slideUp( speed ):隐藏
- slideToggle( speed )等价于slideDown+slideUp
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒
<script>
$("#btn2").click(function(){
$("div").slideUp(1000); //向上收缩
});
$("#btn1").click(function(){
$("div").slideDown(1000); //向下伸展
});
$("#btn3").click(function(){
$("div").slideToggle(1000); //切换
});
</script>
2.5.3 不改变元素的大小(淡入淡出效果)
- fadeIn( speed ) 显示
- fadeOut( speed ) 隐藏
- fadeToggle( speed ) 等价于fadeIn+fadeOut动画
- fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒
<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>
2.5.4 链
- 链是允许我们在同一个元素上在一条语句中运行多个jQuery方法,可以把动作/方法链接在一起 ;
- 例如:点击一次按钮,让div完成4个指定动作
1. 背景变粉
2. 字体变绿
3. 收缩
4. 拉伸
<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>
2.6 DOM和CSS的操作
2.6.1 属性函数
- attr( “属性” ); 获得元素的属性值
○ attr( “属性” , “新值” ); 修改元素的属性值
○ attr( 样式参数 ) :样式参数可以写成json格式
<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>
- val() ; 获得表单元素中的value值
○ val(“x”) 修改表单元素中的value值 - html(); 获得元素中的内容(标签+文本)
○ html(“x”) 修改元素中的内容(标签+文本) - text(); 获得元素中的文本
○ text(“x”) 修改元素中的文本(包括标签)
<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>
2.6.2 样式函数
- css( “属性”); 获得该属性值
- css( “属性”,“值”); 设置属性的值
- css( { json} ); 设置多个属性的值
<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>
- width(); 获得元素的宽度
- width( number ); 修改元素的宽度
- height(); 获得元素的高度
- height( number ); 修改元素的高度
<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>
2.6.3 类样式函数
- addClass(); 为元素添加类样式
- removeClass(); 将元素的类样式移除
- toggleClass(); 样式的切换(有->无,无->有)
<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>
2.6.4 节点操作
- 创建节点
○ 工厂函数$()用于获取或创建节点 - 插入节点
○ 插入子节点
语法 | 功能 |
---|---|
append(content) | $(A).append(B)表示将B追加到A中,如:$(“ul”).append($newNode1); |
appendTo(content) | $(A).appendTo(B)表示把A追加到B中,如:$newNode1.appendTo(“ul”); |
prepend(content) | $(A). prepend (B)表示将B前置插入到A中,如:$(“ul”). prepend($newNode1); |
prependTo(content) | $(A). prependTo (B)表示将A前置插入到B中,如:$newNode1.prependTo (“ul”); |
- 插入同辈节点
语法 | 功能 |
---|---|
after(content) | $(A).after (B)表示将B插入到A之后,如:$(“ul”).after($newNode1); |
insertAfter(content) | $(A). insertAfter (B)表示将A插入到B之后,如:$newNode1.insertAfter(“ul”); |
before(content) | $(A). before (B)表示将B插入至A之前,如:$(“ul”).before($newNode1); |
insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前,如:$newNode1.insertBefore(“ul”); |
- 替换节点
○ replaceWith()
○ replaceAll() - 复制节点
○ clone() - 删除节点
○ remove()删除整个节点
○ empty()清空节点内容
<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>
2.7 遍历节点
2.7.1 祖先元素
用于向上遍历 DOM 树的方法
- parent() 返回被选元素的直接父元素,仅仅是上一级 (找爸爸)
- parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素,可以选择辈分
<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>
2.7.2 同辈元素
- next() 获取紧邻匹配元素之后的元素
- prev() 获取紧邻匹配元素之前的元素
- siblings( ) 获取位于匹配元素前面和后面的所有同辈元素
- siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素中,选择的
<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>
2.7.3 后代元素
后代是子、孙、曾孙等等
- children( [selector] ) 方法返回被选元素的所有直接子元素,“孩子”
<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>
- find( 选择器 ) 方法返回被选元素的后代元素,一路向下直到最后一个后代。
<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>
2.7.4 元素的过滤
- first():过滤第一个元素
- last():过滤最后一个元素
- eq(index):过滤到下标为index的元素
- not():除了什么之外的元素
- is():返回布尔,判断是不是这种元素
<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>
3. 案例
3.1 手风琴特效
<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>
3.2 购物车结算
<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>
$(".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();
}
任务五 (ES6)
1.ECMAScript6 简介
- ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。
- 它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言
1.1 ECMAScript 和 JavaScript 的关系
- 要讲清楚这个问题,需要回顾历史。
- 1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织ECMA,希望这种语言能够成为国际标准
- ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。
- 因此,ECMAScript (宪法)和 JavaScript(律师) 的关系是,前者是后者的规格,后者是前者的一种实现
1.2 ES6 与 ECMAScript 2015 的关系
- 2011 年,ECMAScript 5.1 版发布后,就开始制定 6.0 版了。因此,ES6 这个词的原意,就是指JavaScript 语言的下一个版本。
- ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了ES2015、ES2016、ES2017 等等
2. 搭建前端环境
2.1 Node 环境
2.1.1 什么是Node.js
- 简单的说 Node.js 就是运行在服务端的 JavaScript。
- JavaScript程序,必须要依赖浏览器才能运行!没有浏览器怎么办?OK,nodejs帮你解决
- Node.js是脱离浏览器环境运行的JavaScript程序,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
2.1.2 Node.js有什么用
- 如果你是前端程序员,你不懂得像PHP、Python或Ruby等动态编程语言,然后你想创建自己的服务,那Node.js是一个非常好的选择。
- Node.js 是运行在服务端的 JavaScript,如果你熟悉Javascript,那么你将会很容易的学会Node.js。
- 当然,如果你是后端程序员,想部署一些高性能的服务,那么学习Node.js也是一个非常好的选择。
2.1.3 安装
下载
- 官网:https://nodejs.org/en/
- 中文网:http://nodejs.cn/
- LTS:长期支持版本
- Current:最新版
- 安装:Windows下双击点击安装——>Next——>finish
- 注意:
- node-v14.5.0-x64.msi 最新版本,如果是win7系统的话,可能安装不了。
- 如果是win7系统,安装node-v10.14.2-x64.msi这个版本
查看版本
- 在dos窗口中执行命令查看版本号
node -v
创建文件夹 lagou-node
- 用vscode打开目录,其目录下创建 hello.js
console.log("hello,nodejs");
- 打开命令行终端:Ctrl + Shift + y
输入命令
node hello.js
- 第一次运行,可能会报错!
- 兼容性的问题,以管理员身份运行即可
- 这样,没有使用浏览器,我们也可以运行js程序了
2.1.4 服务器端应用开发(了解)
- 创建 node-server.js
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");
- 服务器启动成功后,在浏览器中输入:http://localhost:8888/ 查看webserver成功运行,并输出html页面
- 停止服务:ctrl + c
2.2 NPM环境
2.2.1 什么是NPM
- NPM全称Node Package Manager,是Node.js包管理工具
- 是全球最大的模块生态系统,里面所有的模块都是开源免费的,也是Node.js的包管理工具,相当于前端的Maven
- 如果一个项目需要引用很多第三方的js文件,比如地图,报表等,文件杂而乱,自己去网上下载,到处是广告和病毒
- 那么,我们就想办法,把这些js文件统一放在一个仓库里,大家谁需要,谁就去仓库中拿过来,方便多了
- npm就是这个仓库系统,如果你需要某个js文件,那就去远程仓库中下载,放在本地磁盘中,进而引用到我们的项目中
- 管理前端工程 so easy!
2.2.2 NPM工具的安装位置
- node的环境在安装的过程中,npm工具就已经安装好了。
- Node.js默认安装的npm包和工具的位置:Node.js目录\node_modules
- 在这个目录下你可以看见 npm目录,npm本身就是被NPM包管理器管理的一个工具,说明 Node.js已经集成了npm工具
#在命令提示符输入 npm -v 可查看当前npm版本
npm -v
2.2.3 使用npm管理项目
项目初始化
- 全新创建一个目录,作为项目目录,使用dos命令进入此目录,输入命令
npm init
# 接下来是一堆项目信息等待着你输入,如果使用默认值或你不知道怎么填写,则直接回车即可。
# package name: 你的项目名字叫啥
# version: 版本号
# description: 对项目的描述
# entry point: 项目的入口文件(一般你要用那个js文件作为node服务,就填写那个文件)
# test command: 项目启动的时候要用什么命令来执行脚本文件(默认为node app.js)
# git repository: 如果你要将项目上传到git中的话,那么就需要填写git的仓库地址(这里就不写地
址了)
# keywirds: 项目关键字(我也不知道有啥用,所以我就不写了)
# author: 作者的名字(也就是你叫啥名字)
# license: 发行项目需要的证书(这里也就自己玩玩,就不写了)
- 最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml
- 我们之后也可以根据需要进行修改。
- 上述初始化一个项目也太麻烦了,要那么多输入和回车。想简单点,一切都按照默认值初始化即可,ok,安排
npm init -y
2.2.4 修改npm镜像 和 存储地址
- NPM官方的管理的包都是从 http://npmjs.com下载的,但是这个网站在国内速度很慢。
- 这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ,淘宝 NPM 镜像是一个完整npmjs.com 镜像,同步频率目前为 10分钟一次,以保证尽量与官方服务同步。
- 设置镜像和存储地址:
#经过下面的配置,以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#设置npm下载包时保存在本地的地址(建议英文目录)
npm config set prefix "E:\\repo_npm"
#查看npm配置信息
npm config list
2.2.5 npm install命令的使用
npm install jquery
- 使用 npm install 安装依赖包的最新版
- 模块安装的位置:项目目录\node_modules
- 安装会自动在项目目录下添加 package-lock.json文件,这个文件帮助锁定安装包的版本
- 同时package.json 文件中,依赖包会被添加到dependencies节点下,类似maven中的
- jQuery版本有很多,上述命令下载的什么版本的? 最新版
- 如果我的项目使用1.9.1版本进行开发的,通过npm安装的3.5.1版本太新,会导致项目失效,如何安装指定版本库?
npm install [email protected]
3. ES6基本语法
- ES标准中不包含 DOM 和 BOM的定义,只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
- 本部分只学习前端开发中ES6的必要知识,方便后面项目开发中对代码的理解。
3.1 let声明变量
- 与我们的JavaScript中var声明变量有什么区别?
- 作用域不同
{
var a = 0; // var声明的变量是全局变量
let b = 0; // let声明的变量是局部变量
}
console.log(a);
console.log(b); //b is not defined:b没有定义
- 声明次数不同
// 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);
- 声明与使用顺序不同
// var 声明的变量会全局存储
// let 声明的变量只能在执行后才存储
console.log( x ); //没有报错,输出:undefined
var x = "苹果";
console.log(y); //y is not defined(y没有定义)
let y = "香蕉";
3.2 const声明常量
- const 声明常量,为只读变量
- 一旦声明之后,其值是不允许改变的
- 一但声明必须初始化,否则会报错 SyntaxError: Missing initializer in const declaration(语法错误,声明常量丢失了初始化)
const PI = 3.14;
PI = 3.1415; //Assignment to constant variable.(声明的是常量)
console.log( PI );
3.3 解构赋值
- 解构赋值是对赋值运算符的扩展
- 它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
- 解构,顾名思义,就是将集合型数据进行分解,拆分,把里面的值逐一遍历获取
- 在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
3.3.1 数组解构
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);
3.3.2 对象解构
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);
3.4 模板字符串
- 模板字符串相当于加强版的字符串
- 用反引号 `,除了作为普通字符串,还可以用来定义多行字符串
- 还可以在字符串中加入变量和表达式。
3.4.1 定义多行字符串
- 再见了,\n
let str = `hello,
你俩在哪呢?
心情不好,出来喝点啊!`;
console.log(str);
3.4.2 字符串插入变量和表达式
- 再见了,字符串的拼接用 +
let name = `吕布`;
let age = 24;
// 传统的拼接字符串
var info1 = "我叫:"+ name +",我今年"+age+"岁!";
console.log(info1);
// es6的拼接字符串
var info2 = `我叫:${
name},我明年${
age+1}岁!`;
console.log(info2);
3.4.3 字符串中调用函数
- 还能这么玩
function test(){
return "吃喝玩乐";
}
let str = `悲催的人生,从${
test()}开始`;
console.log( str );
3.5 声明对象简写
- 定义对象的时候,可以用变量名作为属性名
let name = `吕布`;
let age = 28;
//传统
let user1 = {
name : name,
age : age
};
console.log(user1);
//es6新语法中的简写
let user2 = {
name,age};
console.log(user2);
3.6 定义方法简写
// 传统
let user1 = {
say : function(){
console.log("大家好!");
}
};
user1.say();
//es6,直接声明函数
let user2 = {
say(){
console.log("大家好啊!");
}
};
user2.say();
3.7 对象拓展运算符
- 拓展运算符 {…} 将参数对象中所有可以遍历的属性拿出来,然后拷贝给新对象
3.7.1 拷贝对象(深拷贝)
- 科幻电影中的一滴血,就可以制作出一个完全一模一样的克隆人
let user1 = {
name:"项羽",
age:34
};
let user2 = {
...user1}; // 深拷贝(克隆)
console.log(user1);
console.log(user2);
3.7.2 合并对象
- 吞噬合并(两个对象合并成一个对象)
let user1 = {
name:"项羽",
age:34
};
let user2 = {
head:"诸葛亮"};
let user = {
...user1,...user2};
console.log( user );
3.8 函数的默认参数
- 形参处已声明,但不传入实参会怎样?
function test(name , age = 18){
console.log(`我叫${
name},我今年${
age}岁`);
}
test("吕布",33); //我叫吕布,我今年33岁
test("貂蝉"); //我叫貂蝉,我今年18岁
test("关羽",null); //我叫关羽,我今年null岁
test("马超",""); //我叫马超,我今年岁
test("张飞",undefined); //我叫张飞,我今年18岁
3.9 函数的不定参数
- 定义方法时,不确定有几个参数?
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);
3.10 箭头函数
- 箭头函数提供了一种更加简洁的函数书写方式。基本语法是:参数 => 函数体
// 传统
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) );
3.11 Promise(了解)
- 用来解决回调函数的嵌套噩梦 (后面学习ajax才能更好的理解)
- 我们回顾一下嵌套噩梦:
○ 你和我打架,我打不过你,我说:你在这等着,我找我哥来揍你!
○ “哥,我被老王打了,你帮我揍他!”,“行,我先把饭做完,你先去找刘备,把刘备找来,我和刘备再一起帮你报仇!”
○ “刘备,我被老王打了,我哥叫我来找你,一起帮我报仇!”,“没问题,兄弟,我去交电话费,你去找我二弟关羽,他打架厉害,把他叫来,我们一起更有把握!”
○ “关羽,我被人打了,我哥叫我找刘备,刘备让我来找你,一起帮我报仇!”,“没问题,兄弟,我有点事,你先去找我三弟张飞,把张飞找来,我这边就办完事了,我们一起帮你报仇去!”
○ “张飞,我让老王打了,谁谁谁,哎,反正关羽让我找你,你跟我走,一起帮我报仇去!”,“行啊,老铁,我一会从老丈人回来就去找你,你去把我二哥的儿子关平找来,正好打一架让这小子练练胆。找到了我们一起帮你报仇!”
○ 。。。
○ 满嘴的兄弟情深,一个拖一个,就是不想帮我报仇 - 使用promise解决掐架找人的噩梦
○ “哥,老王打我!”,“走,但老王厉害,我们去找刘备一起帮你报仇!”
○ “刘备,走着,我们一起揍老王去”,“没问题!”,“二弟,过来,有人欺负我们,去揍他!”
○ 。。。找人过程中,都是立刻跟着走,没人拖!
○ 最终,我们108人一起找到了老王!!!! - 找到一个人成功后,再继续找下一个人。逐渐形成了“队伍”
- 组建队伍的过程中,如果找某个人失败了,则“队伍”失败
- 其实有点类似“击鼓传花”的游戏,一个成功拿到花之后,才能传递给下一个人。依次类推!
setTimeout(()=>{
console.log(1);
setTimeout(()=>{
console.log(2);
setTimeout(()=>{
console.log(3);
setTimeout(()=>{
console.log(4);
},1000);
},1000);
},1000);
},1000);
- 使用promise
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("出错啦!");
});
3.12 模块化
- 如果在a.js文件中定义了5个方法,现在b.js文件中想使用a中的5个方法,怎么办?
- java语言的做法是import引入之后,就能使用了。es6的模块化,就是这个过程
- 将一个js文件声明成一个模块导出之后,另一个js文件才能引入这个模块
- 每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。
3.12.1 传统的模块化
- 创建user.js文件
function addUser(name){
return `保存${
name}成功!`;
}
function removeUser(id){
return `删除${
id}号用户!`;
}
// 声明模块并导出
// module.exports={
// save:addUser,
// delete:removeUser
// }
// 声明模块导出的简写
module.exports={
addUser,
removeUser
}
- test.js
let user = require("./user.js"); //引入user模块
console.log( user );
let result1 = user.addUser("吕布");
let result2 = user.removeUser(101);
console.log(result1);
console.log(result2);
3.12.2 ES6的模块化
- user.js
let name = "老孙";
let age = 66;
let fn = function(){
return `我是${
name}!我今年${
age}岁了!`;
}
// 声明模块并导出
export{
name,
age,
fn
}
- test.js
import {
name,age,fn} from "./user.js"
console.log(name);
console.log(age);
console.log(fn);
- 运行test.js,报错:SyntaxError: Unexpected token { (语法错误,在标记{的位置 )
- 原因是node.js并不支持es6的import语法,我们需要将es6转换降级为es5!
3.13 babel环境
- babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有的环境中执行。
- 这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持
3.13.1 安装babel客户端环境
- 创建新目录 lagou-babel,在终端中打开,运行命令:
npm install --global babel-cli
- 查看版本
babel --version
- 如果报错1:(win7系统中)
- ‘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关掉,重新以“管理员身份运行 ” - 如果报错2:(win10系统中)
- windows10默认禁止运行有危险的脚本,修改一下系统策略就好了
- 开始菜单-> Windows PowerShell (切记要以管理员身份运行),输入代码
set-ExecutionPolicy RemoteSigned
- 现在,就可以看版本号了。
3.13.2 安装转码器
- 创建lagou-babel专属目录,在其中初始化项目
npm init -y
- 创建babel配置文件 .babelrc ,并输入代码配置:
{
"presets": ["es2015"],
"plugins": []
}
- 安装转码器
npm install --save-dev babel-preset-es2015
- 转码
创建dist目录,用来存放转码后的文件
babel user.js --out-file .\dist\user.js
或
babel user.js -o .\dist\user.js
- 运行转码后的文件
node .\dist\test.js
3.14 ES6模块化的另一种写法
3.14.1 as的用法
- user.js:如果你不想暴露模块当中的变量名字,可以通过as来进行重命名的操作:
let name = "老孙";
let age = 66;
let fn = function(){
return `我是${
name}!我今年${
age}岁了!`;
}
// 声明模块并导出
export{
name as a, // 将属性重命名
age as b,
fn as c
}
- test.js
import {
a,b,c} from "./user.js";
console.log(a);
console.log(b);
console.log(c());
- 也可以接收整个模块
- test.js
import * as info from "./user.js"; // 通过*来批量接收,用as来指定接收的对象名字
console.log(info.a);
console.log(info.b);
console.log(info.c());
3.14.2 默认导出
- 可以将所有需要导出的变量放入一个对象中,然后通过default export进行导出
/*****************导出****************************/
export default{
name:"老孙",
eat(){
return "吃点啥!";
}
}
/*****************导入****************************/
import p from "./person.js";
console.log( p.name, p.eat() );
3.14.3 重命名export和import
- 如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,
- 为了解决该问题,ES6为提供了重命名的方法,当你在导入名称时可以这样做:
/*******************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
任务六 (Bootstrap)
1.bootstrap简介
1.1 什么是Bootstrap?
- Bootstrap来自 Twitter,是目前最受欢迎的响应式前端框架。
- Bootstrap是基于 HTML、CSS、JavaScript的,它简洁灵活,使得 Web 开发更加快捷。
1.2 为什么使用 Bootstrap?
- 移动设备优先:自 Bootstrap3 起,框架包含了贯穿于整个库移动设备优先的样式。
○ 不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。
○ 也就是说,针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。 - 浏览器支持:所有的主流浏览器都支持 Bootstrap。
- 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
- 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
- 它为开发人员创建接口提供了一个简洁统一的解决方案。
- 它包含了功能强大的内置组件,易于定制。
- 它还提供了基于 Web 的定制。
- 它是开源的。
1.3 下载与使用
- 中文官网:https://www.bootcss.com/
- 英文官网:http://getbootstrap.com
- 下载好的,压缩包解压出来。就得到了bootstrap的资源文件了。
- 分别是css、js、font字体,全部放在项目的根目录即可
<!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>
<!-- 注意:这两个按钮的class样式是Bootstrap定义的 -->
<button class="btn btn-primary">学习充电</button>
<button class="btn btn-success">极速入职</button>
</body>
</html>
2.Bootstrap的使用
2.1 表格
- 和之前的表格相比,标签更丰富更加语义化,效果更佳美观
2.1.1 丰富的标签
- <table> 为表格添加基础样式
- <thead> 表格标题行的容器元素(<tr>)
- <tbody> 表格主体中的表格行的容器元素(<tr>)
- <tr> 表格行
- <td> 默认的表格单元格。
- <th> 特殊的表格单元格,(居中和加粗的效果)。必须在<thead> 内使用。
- <caption> 关于表格存储内容的描述或总结。
2.1.2 好看的类样式
- .table 为任意 <table> 添加基本样式 (只有横向分隔线)
- .table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ,隔行变色
- .table-bordered 为所有表格的单元格添加边框
- .table-hover 在 <tbody> 内的任一行启用鼠标悬停状态,鼠标悬停高亮突出显示
- .table-condensed 让表格更加紧凑
2.1.3 情景色类样式
- 适合应用在<th>、<tr>,<td>
- .active 激活效果(悬停颜色)
- .success 表示成功或积极的动作
- .info 表示普通的提示信息或动作
- .warning 表示警告或需要用户注意
- .danger 表示危险或潜在的带来的负面影响的动作
2.1.4 响应式表格
- 表格的父元素设置响应式,小于768px,出现边框
<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>
2.2 表单
2.2.1 表单布局
2.2.1.1 默认布局
<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>
2.2.1.2 内联布局
- 让所有表单元素居于一行
- 注意:当小于768px时,会自动还原成移动端样式.
<form class="form-inline">
2.2.2 表单控件
2.2.2.1 输入框
<form>
<div class="form-group">
<label for="">输入框</label>
<input type="text" class="form-control" placeholder="请输入文本...">
</div>
</form>
2.2.2.2 文本框
<div class="form-group">
<label for="">文本框</label>
<textarea class="form-control" cols="30" rows="5"></textarea>
</div>
2.2.2.3 复选框
- checkbox 默认
- checkbox-inline 内联
<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>
2.2.2.4 复选按钮
<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>
2.2.2.5 单选框
<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>
2.2.2.6 单选按钮
<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>
2.3 按钮
<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>
- 按钮大小
<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>
- 按钮状态
○ 激活状态:按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影);
○ 禁用状态:当您禁用一个按钮时,它的颜色会变淡 50%,并失去渐变;
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-default active">激活按钮</button>
<button class="btn btn-default" disabled>禁用按钮</button>
2.4 图片
- .img-rounded:添加 border-radius:6px 来获得图片圆角。
- .img-circle:添加 border-radius:50% 来让整个图片变成圆形。
- .img-thumbnail:添加一些内边距(padding)和一个灰色的边框
<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%">
- 响应式图片
<img src="img/1.jpg" class="img-responsive">
2.5 下拉菜单组件
<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>
- 用法的关键核心
- 外围容器使用 class="dropdown"包裹
- 内部点击按钮事件绑定 data-toggle=“dropdown”
- 菜单元素使用 class=“dropdown-menu”
2.6 分页组件
<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>
<ul class="pager">
2.7 栅格系统
- bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子
- 当浏览器大小发生变化的时候,我们可以控制每行的元素占用几个格子,从而达到响应式的效果
- 显示屏幕的扩大和缩小. 实现如下效果
<style>
.a{
height: 50px;
border: 1px solid black;
background-color: #eeeeee;
}
</style>
<body>
<div class="container">
<div class="row">
<!-- col-lg-3 当大屏幕时,一个div占3份,一行显示4个div -->
<!-- col-md-4 当中屏幕时,一个div占4份,一行显示3个div -->
<!-- col-sm-6 当小屏幕时,一个div占6份,一行显示2个div -->
<!-- 超小屏幕时,一个div占12份,一行显示1个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 class="col-lg-3 col-md-4 col-sm-6 a">x</div>
</div>
</div>
</body>
2.8 缩略图组件
- 配合响应式的栅格系统
<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>
<!-- 其余3张图片 -->
<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>
- 自定义内容
<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>
<!--其余3个省略-->
</div>
</div>
2.9 模态框组件
- data-toggle=“modal” 触发类型:模态框modal
- data-target="#myModal" 触发的节点
- data-backdrop=“static” 点击黑灰色背景,不会关闭模态框
<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">
<!-- 1.框的标题 -->
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">友情提示</h4>
</div>
<!-- 2.框内信息 -->
<div class="modal-body">
服务器错误,请稍后再试!
<hr>
<img src="img/1.jpg" width="200px">
<hr>
<input type="text">
</div>
<!-- 3.框的按钮 -->
<div class="modal-footer">
<button class="btn btn-info">确定</button>
<button class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
3.案例
3.1 首页轮播大图
- 大小屏幕自动适应,扩大缩小浏览器
- 滚动数字区点击左右切换图片
- 左右区域点击切换
- 默认5秒钟自动切换下一张
- 最后一张,回到第一张
<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>
- data 属性解释:
- data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置;
- data-slide-to 来向轮播底部创建一个原始滑动索引,data-slide-to=“2” 将把滑动块移动到一个特定的索引,索引从 0 开始计数。
- data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放
3.2 响应式导航条
<!-- 默认的导航条样式 -->
<div class="navbar navbar-default">
<!-- 响应式的容器 -->
<div class="container">
<!-- 导航条的头部 -->
<div class="navbar-header">
<a href="#" class="navbar-brand">老孙科技股份有限公司</a>
<!-- data-toggle="collapse" 数据切换的事件,特效是折叠-->
<!-- data-target="#nav" 折叠效果的目标是下面的#nav容器-->
<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>
第三阶段模块二作业
编程题:
- 根据如图需求,实现用户的CRUD:
-
当页面加载完成功后显示用户列表;
-
用户新增;
-
选中"序号"才能用户编辑或者删除;
-
可以根据用户工号和名称查询(不考虑模糊查询、使用完整的工号和名称)