枫桥夜泊

每走一步,都是进步

0%

前端快速入门

发表于 分类于
本文字数： 55k 阅读时长 ≈ 50 分钟 
1
2
3
4
5
6
作者: 夜泊1990
企鹅: 1611756908
鹅群: 948233848
邮箱: hd1611756908@163.com
博客: https://hd1611756908.github.io/
B 站: https://space.bilibili.com/514155929/

第一章 前端概述

第1节 前端介绍

1
2
3
4
5
6
7
8
9
10
11
1. 前端即网站的前台部分,用于网站的数据展示以及数据交互(人机交互的一部分),是人与机器交流的操作界面.
2. 网站有前端(前台)也有后台,后台主要进行业务功能的实现,以及数据处理等.
	2.1 购物车实现
	2.2 微信支付功能的实现
	2.3 银行转账功能的实现
3. 这里介绍的前端以PC(电脑)端为主.因为前端不止包括PC端还有移动端.
4. PC端里面的前端不是指电脑上安装的QQ、英雄联盟这样的软件而是指使用浏览器访问各个网站加载的页面.
	4.1 www.taobao.com
	4.2 www.jd.com
	4.3 www.mi.com
5. 浏览器可以将各个网站的前端通过互联网加载过来并且展示出来(如果网站有前端)

第2节 前端结构

1
2
3
4
5
6
7
举例: 通过浏览器输入百度地址 www.baidu.com 百度的前端首页就会从百度的服务器通过互联网加载到电脑的浏览器中,并且显示出来
	 加载过来的网页数据被浏览器解析并且显示出来,显示的网页包括页面内容(包括图片,音频,视频,文章内容等),页面样式(前端页面的排版样式等),页面的动态样式(轮播图等).

前端页面结构:
	1. 网页内容展示
	2. 页面样式(内容的展示位置,展示的样式)
	3. 动态的效果(轮播图,点击搜索展示搜索结果等)

第3节 前端基础技术介绍

1
2
3
4
5
网页技术的组成: 前端页面展示包含了内容,样式以及动态效果分别对应这不同的前端技术实现.

	1. HTML      : 实现前端内容的展示
	2. CSS 	     : 实现前端样式的展示,前端单纯展示内容比较丑,使用CSS技术对前端进行装修,让前端内容展示更漂亮
	3. JavaScript: 前端有些地方需要动态效果的展示(轮播图,点击上一页或者下一页动态获取数据等)

第二章 HTML

第1节 HTML介绍

1
2
3
HTML(HyperText Markup Language)超文本标记语言,是构成前端网页的基本单元.他包含两层意思:
	1. HTML指它是一个以.html结尾的文件,是构成网站前端的基本单元
	2. HTML还指.html文件中的内容

第2节 HTML文件解析

1
2
3
4
5
6
网站的前端是由一个个的.html文件组成,我们在浏览器输入网站域名(网址)之后就会加载网站的前端页面(www.baidu.com),然后在浏览器中展示出来.

网站展示的样式和内容各种各样,但是这样的页面不是编写的时候就是我们在浏览器看见的这样,而是以文件的形式存在.浏览器通过域名将文件从服务器
端加载到浏览器,在由浏览器将html文件进行解析然后才是我们看见的最终样式.

我们编写前端页面需要浏览器(最好是谷歌浏览器,或者以谷歌最为内核的浏览器)帮助我们解析html文件.

第3节 HTML文件的基本格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
前端的.html文件有自己固定的格式,格式如下:

<!DOCTYPE html>
<html>
	<head>
		
	</head>
	<body>
	
	</body>
</html>

HTML文件模板有一些固定格式
1. .html文件里的内容都是由一个个的标签构成,标签就是由左尖角号和右尖角号中间加上内容组成
	1.1 标签格式可以是左开右闭的标签,成对出现 例如: <html></html>
	1.2 标签格式也可以是自闭合标签,单个出现   例如: <hr>或者<hr/> 都可以
	
2. 固定模板介绍: 上面说.html文件内容是由一个个的标签组成,咱们详细介绍一下这个固定格式的前端模板
	2.1 <!DOCTYPE html>: 自闭合标签,放在html文件的首行,告诉浏览器在解析当前文件的时候,使用什么HTML版本进行解析.
		2.1.1 当前标签(<!DOCTYPE html>)意义是当前文件中的标签需要浏览器采用HTML5版本进行解析
		2.1.2 在HTML5版本之前还有HTML4版本,HTML4版本的标签为<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
		2.1.3 HTML5版本相比于HTML4版本添加了很多新特性,如果声明HTML4版本,很多HTML5版本的新特性就不能在当前html文件中使用
		2.1.4 软件升级一般都是向下兼容,也就是我们所说的高版本兼容低版本
		
	2.2 <html></html>: 左开右闭的标签,是html模板的基标签,除了首行的声明标签,整合html文件的标签都必须写在此标签之内.
	2.3 <head></head>: 左开右闭的标签,对当前页面的一些基础配置需要在这个标签中完成(比如当前html文件的标题,当前文件的编码,当前文件是否支持手机端浏览器[响应式]等)
	2.4 <body></body>: 左开右闭的标签,当前html文件在浏览器中显示出来的内容都必须放在此标签中,<head>标签的内容不会再浏览器中显示

第4节 HTML标签介绍

4.1 head中常见标签

  • meta标签
1
2
3
4
5
6
7
8
9
10
11
<meta>:自闭合标签,可以配置当前网站的元数据信息,主要针对于搜索引擎以及字符编码,meta标签有4个重要属性 name、content、charset、http-equiv
	1. charset属性: 设置当前页面编码,例如:设置当前页面编码为utf-8  <meta charset="utf-8">
	2. name属性: name属性用于网页描述一般与content属性成对出现,name属性有多个值对应异同的content属性的值
		2.1 name属性值为keywords: keywords关键字,我们编写的网站可以被搜索引擎搜到关键字是其中非常重要的一个属性 例如: <meta name="keywords" content="汽车,汽车之家,汽车网"/>
		2.2 name属性值为description: 描述信息,使用搜索引擎搜索网站时会出现网站列表,列表中的网站都会有一段网站介绍,一般为描述的content值 例如: <meta name="description" content="汽车之家为您提供最新汽车报价"/>
	3. http-equiv属性: 可以向浏览器传递一些信息以帮助浏览器正确显示网页.http-equiv属性也有多个值对应content属性值
		3.1 http-equiv属性值为 content-type: 当前网页内容以及编码 例如: <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		3.2 http-equiv属性值为 refresh: 刷新页面 例如: 
			3.2.1 每隔2秒刷新一次 <meta http-equiv="refresh" content="2"/>
			3.2.2 10秒后跳转到另一个地址 <meta http-equiv="refresh" content="10;https://www.baidu.com"/>
		3.3 http-equiv属性值为 X-UA-Compatible: 如果不是IE浏览器此属性不会生效,如果是IE浏览器可以指定浏览器使用哪种引擎解析当前页面  例如: <meta http-equiv="X-UA-Compatible" content="IE=Edge;IE=IE11"/>
  • title标签
1
<title>标签: 左开右闭标签,一个浏览器可以打开多个标签,title属性设置标签名. 例如: <title>百度一下,你就知道</title>
  • link标签
1
2
3
4
5
6
<link>标签: 自闭合标签,主要有两个功能
	1. 引入css文件,下面将css时候详细介绍
		1.1 引入css文件: <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"/>
	2. 设置标签的图标,这个图标不会展示在浏览器内容区,而是展示在title标签中
		2.1 设置标签图标(网络图标): <link rel="icon" href="https://www.jd.com/favicon.ico"/>
		2.2 设置标签图标(本地图标): <link rel="icon" href="favicon.ico"/>

4.2 body中常见标签

  • h1~h6
1
2
3
4
5
6
7
标题标签,如果在前端想展示文章标签可以使用此标签,标题一共分为6个级别
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  • p
1
2
3
4
5
段落标签,一年文章分为多段,一般用p标签

<p>段落文本</p>

注意:如果一篇文章有3个段落时，要放在3个p标签中
  • abbr
1
2
<p>超文本传输协议写简称为<abbr>HTML</abbr></p>
如果一句话中有简称或者缩写(比如HTML是HyperText Markup Language的缩写),将缩写内容放在此标签中
  • strong/em
1
2
3
4
5
em    :强调        -> 默认是斜体
strong:更强烈的强调 -> 粗体

<em>强调</em>
<strong>强烈的强调</strong>
  • code
1
2
3
添加一行代码,一般计算机代码放在这个标签中

<code>一行代码</code>
  • pre
1
2
3
添加一段代码

<pre>多行代码</pre>
  • q
1
2
3
短引用文本: 一句话如果引用一句经典语录,设置到此标签中

<q>短引用文本</q>
  • blockquote
1
2
3
长引用: 一句话如果引用多句经典语录,设置到此标签中

<blockquote> 长引用 </blockquote>
  • br
1
2
3
4
5
6
7
8
9
换行标签

<h2>枫桥夜泊</h2>
<p>
   月落乌啼霜满天，<br>
   江枫渔火对愁眠。<br>
   姑苏城外寒山寺，<br>
   夜半钟声到客船。
</p>
  • hr
1
2
3
4
5
分割线

<p>火车飞驰过暗夜里的村庄,月光,总是太容易让思念寂寞,太容易让人觉得孤独</p>
<hr>	
<p>每一枚被风吹起的蒲公英,都载满了一双眼睛的深情告别与一个目光的依依不舍</p>
  • ul+li
1
2
3
4
5
6
7
无序列表

<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>
  • ol+li
1
2
3
4
5
6
7
有序列表

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>
  • img
1
2
3
4
5
6
7
8
图片

<!-- 网络图片 -->
<img src="http://i0.hdslb.com/bfs/article/138225f66e58191efab2c2fdbbf95799aaad8c39.jpg">
<!-- 本地图片 -->
<img src="img/timg.jpg" alt="图片地址错误显示" title="鼠标移到图片上显示"/>
<!-- 云图片 -->
<img src="https://note.youdao.com/yws/api/personal/file/WEB6e9e40071bff499ec0fdae4756359ec5?method=download&shareKey=a722ddd923ca202724d9da80ca42b68a" />
  • a
1
2
3
4
超链接: 跳转另一个地址

<a href="#">零基础学习Java</a>
href属性: 点击a标签跳转地址
  • table
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
表格: 生成表格

第一种表格:
<table border="1">
	<caption>员工通讯录</caption>
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>职位</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>男</td>
		<td>产品经理</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>男</td>
		<td>开发工程师</td>
	</tr>
</table>

第二种表格:
<!-- 
	<thead><tbody><tfooter>标签作用: 如果不加表格会加载完成之后在显示,如果加了,表格tbody里的内容就会按需加载,防止数据过大,加载缓慢问题
	colspan: 水平合并单元格
 -->
 <table border="1">
 	<caption>员工通讯录</caption>
 	<thead>
 		<tr>
 			<th>姓名</th>
 			<th>性别</th>
 			<th>职位</th>
 		</tr>
 	</thead>
 	<tbody>
 		<tr>
 			<td>张三</td>
 			<td>男</td>
 			<td>产品经理</td>
 		</tr>
 		<tr>
 			<td>李四</td>
 			<td>男</td>
 			<td>开发工程师</td>
 		</tr>
 	</tbody>
 	<tfoot>
 		<tr>
 			<td>合计</td>
 			<td colspan="2">100</td>
 		</tr>
 	</tfoot>
 </table>
  • form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
表单

<form>
	性别:
	<label for="male">男</label>
	<input type="radio" name="gender" checked id="male"/>
	<label for="female">女</label>
	<input type="radio" name="gender" id="female"/><br/>
	兴趣:
	篮球 <input type="checkbox" name="a" />
	足球 <input type="checkbox" checked name="b" />
	台球 <input type="checkbox" name="c" />
	<br/>
	<label for="email">邮箱</label>
	<input type="email" name="email" id="email" placeholder="输入邮箱地址"/><br/>
	<label for="desc">描述</label>
	<textarea value="文本域" name="desc" id="desc"></textarea><br/>
	<label for="address">地址</label>
	<select id="address">
		<option>北京</option>
		<option>上海</option>
		<option>天津</option>
		<option>南京</option>
	</select>
	<br/>
	<input type="submit" value="提交" />
	<input type="reset" value="重置" />
</form>
  • span
1
2
3
给文本增加样式的标签: 没有具体语义

<span> 文本 </span>
  • div
1
2
3
布局标签: 没有具体语义

<div>用于布局</div>
  • button
1
2
3
按钮标签: 生成按钮

<button type="button">我是一个按钮</button>
  • iframe
1
2
3
4
5
6
7
8
9
iframe标签可以包含(或者引入)另一个页面到当前标签中

<iframe src="另一个html地址"></iframe>

HTML5版本中的属性介绍

frameborder: 0/1  是否显示边框  1:显示;0:不显示
scrolling: yes/no/auto 是否显示滚动条 
src: 显示另一个页面的页面地址
  • 特殊字符
1
2
3
4
5
1. 空格( ) : &nbsp;
2. 大于号(>) : &gt;
3. 小于号(<) : &lt;
4. 单个双引号(") : &quot;
5. 与号(&) : &amp;
  • article(HTML5)
1
2
3
4
5
6
7
标签是 HTML 5 中的新标签,用于描述文章

<article>
  <h1>标题</h1>
  <p>文章第一段</p>
  <p>文章第二段</p>
</article>
  • header(HTML5)
1
2
3
4
5
6
标签是 HTML 5 中的新标签,标签定义文档的页眉(文档介绍信息)

<header>
	<h1>文档标题</h1>
	<p>文档内容</p>
</header>
  • footer(HTML5)
1
2
3
4
5
6
标签是 HTML 5 中的新标签,标签定义文档的页脚

<footer>
  <p>网站: https://ukoko.gitee.io/</p>
  <p>邮箱: <a href="#">hd1611756908@163.com</a></p>
</footer>
  • section(HTML5)
1
2
3
4
5
标签是 HTML 5 中的新标签,标签定义文档中的节.比如:章节、页眉、页脚或文档中的其他部分

<section>
  <p>第一节</p>
</section>
1
HTML标签有很多这里只是介绍了一些比较常见的标签,如果工作中需要其他标签,可以查询文档.

第5节 HTML标签语义化

5.1 什么是语义化

1
在浏览器中显示出来的每一个内容赋予其特殊的意义

5.2 HTML为什么设计那么多标签

浏览器在解析HTML文件时,文件内容中有些标签在前端表现出来的样式对于用户来说是分辨不出的（例如: p标签和div标签）.既然标签在前端展示出来的样式是相同的那么为什么还要设计不同的标签,用同一个标签不是更好吗,简单方便.理论上说的没错,但是这些标签本身不是给我们用户看的,是给浏览器(SEO搜索引擎)看的.我们用百度通过搜索条件搜索的结果展示是有排名的,有的网站排名靠前,有的网站排名靠后(打广告的网站除外),排名靠前的网站是因为HTML文件在进行内容结构设计的时候,根据内容设计到不同语义的标签中,便于SEO收集关键字,SEO收集网站的关键字越多,在搜索的时候更容易被优先匹配到.

5.2 语义化的好处

1
2
1. 更容易被搜索引擎收录
2. 更容易让屏幕阅读器读出网页内容

第三章 CSS

第1节 CSS简介

1
CSS全称为"层叠样式表"(Cascading[kæˈskeɪdɪŋ] Style Sheets),它主要作用是定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等

第2节 CSS基础语法

选择符: 又称选择器,指明网页中应用样式规则的元素(标签)
{}   : 声明,在大括号中给元素设置样式,格式为key:value键值对方式,多个key:value时使用分号分割
            
1
2
3
4
5
6
7
8
给一个标签元素添加样式的方式有三种:
	第一种: 直接在标签元素上添加样式,所有的HTML标签都有style属性,这个属性是给标签添加样式的基本属性. 例如: <p style="color:red;">一段话</p>
	第二种: 在HTML模板的head标签中,声明一个style标签,语法如下:
		<style type="text/css">
			/* 编写CSS样式 */
		</style>
	第三种: 创建css文件的方式,在外部创建一个以.css结尾的文件.例如xxx.css,然后在HTML文件的head标签中使用link标签引入,语法如下:
		<link rel="stylesheet" type="text/css" href="xxx.css"/>

第3节 CSS注释

1
/* CSS注释 */

第4节 CSS的选择器

4.1 选择器的介绍

CSS样式定义由两部分组成,形式如下:
选择器{
    样式;
}

在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式"作用于网页中的哪些标签。

4.2 选择器的分类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
1、标签选择器 语法: p{}
	选择器就是标签名,例如给p标签添加样式,案例如下:
	
	p{
		/* 给所有p标签的文本内容设置成红色 */
		color: red;
	}
	
2、类选择器  语法: .className{}
	HTML中的所有标签都有class属性,可以设置class的类名,多个标签可以设置相同的class类名,案例如下:
	
	<div class="container">我是一个div标签我的类名为container</div>
	.container{
		color: red;
	}
	注意事项: 类选择器类名前一定要加一个点(.)这是类选择器的标记语法.
	
3、ID选择器 (全局唯一) 语法: #id{}
   HTML中的所有标签都有id属性,可以设置id的名称,在同一个html文件中id的名称是唯一的,不能有两个标签的id名称相同,案例如下：
   
   <div id="show">我是一个div标签,我的id属性值为show</div>
   #show{
   	color: red;
   }
   注意事项: id选择器id属性名前一定要加一个#这是id选择器的标记语法.
   
4、子选择器 > (表示第一代子元素)    语法:  #id>p{} 
   HTML标签是可以嵌套使用的,嵌套的HTML标签之间就构成了子父类的关系,这时候我们如果知道父标签,就可以直接通过父标签使用子选择器找到他的儿子. 案例如下:
   
   <div id="box">
   	<div>
   		我是div1
   		<p>我是p标签</p>
		<div>我是div2</div>
   	</div>
   </div>
   给id是box的div下的div元素(大于号左右两侧可以是任意选择器,不局限与id和标签选择器),设置宽度和高度
   #box>div{
   	/* 只给了子div添加了样式,孙子的没有添加上 */
   	height: 100px;
   	width: 100px;
   }
5、后代选择器   语法:  #id p{}
   后代选择器和子类选择器类似,他是将某一个元素标签下的所有的目标元素添加样式,不论是儿子还是孙子等 案例如下:
   
   <div id="box">
   	<div>
   		我是div1
   		<p>我是p标签</p>
   		<div>我是div2</div>
   	</div>
   </div>
   #box div{
   	/* 给id为box的后代中的所有div添加样式 */
   	height: 100px;
   	width: 100px;
   }
   
5、通用选择器 *    语法:  *{}  星号(*)匹配所有的标签元素

*{
	font-size:14px;
}

6、伪类选择器 :hover    语法:  p:hover{}
   HTML所有标签元素都可以添加伪类选择器,伪类的意义是当鼠标悬停到当前标签下时,呈现的样式 案例如下:
   
   <div id="box"> 我是hover伪类 </div>
   #box:hover{
   	font-size: 100px;
   }

7、分组选择器 h1,h2,p  语法:  h1,h2,p{}
   分组选择器是给一组HTML标签添加样式,多个选择器使用逗号分隔
   
   <div id="box">我是div</div>
   <p class="pName">我是p标签</p>
   <span>我是span标签</span>
   <h1>我是h1标签</h1>
   #box,.pName,span,h1{
   	color: red;
   }

第5节 CSS的继承,优先级和重要性

5.1 继承

1
2
3
<div style="color: red;font-size: 100px;">
	<p> 测试继承关系 </p>
</div>

5.2 优先级

  • 权值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1、标签的权值为1
2、类选择符的权值为10
3、ID选择符的权值最高为100
如果样式作用在一个标签上,根据权值来应用使用哪个样式(应用权值高的)


<style type="text/css">
	/* 
		如果权值相同,那么下面会覆盖上面的样式
		如果权值不同,谁大谁生效,和上下顺序无关
	*/
	p{color:red;}
	.first{color:green;}
</style>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
  • 层叠
1
当作用在同一个标签上的样式权值相同时,那么遵循就近原则,谁离标签近,谁的样式就会生效

5.3 重要性

1
2
3
4
5
6
7
8
有时候,在某些特殊情况下,在权值相同的情况下,要让某些样式的设置生效,这时候可以使用!important来设置他的最高权值

<style type="text/css">
	p{color:red !important;}
	p{color:green;}
</style>

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

第6节 CSS字体/段落/单位和值

6.1 字体/段落样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
文字—字体:  
    font-family: "microsoft yahei";
文字—字号颜色:    
    font-size: 12px;
	color: #FF0000;
文字—粗体:
    font-weight: bold;
文字—斜体:
    font-style: italic;
文字-下划线
    text-decoration: underline;
文字-删除线
    text-decoration: line-through;
段落-缩进
    text-indent: 2em;
段落-行间距(行高)
    line-height: 1.5em;
段落-中文字间距、字母间距
    1、letter-spacing:50px;    中文或者是英文字母之间的间距
    2、word-spacing:50px;      英文单词之间的间距
段落-对齐
    text-align: left|center|right; 段落文本的左对齐|居中|右对齐

6.2 单位和值

  • 颜色值
1
2
3
4
5
6
7
8
9
1、英文命令颜色
    p{color:red;}
2、RGB颜色
    p{color:rgb(133,45,200);}
3、RGBA颜色
    p{color:rgba(133,45,200,1);}
    rgba颜色有4位,最后一位为颜色的透明度,取值范围为0~1,1:不透明,0:全透明
4、十六进制颜色
    p{color:#00ffff;}
  • 字体大小/长度单位
1
2
3
4
5
6
7
8
9
字体大小的单位一般我们前端使用px或者em表示
盒子高度/宽度的单位我们一般使用px或者%表示

px表示像素
像素的介绍: 咱们的显示器的屏幕是由很多点组成的,像素就是组成图像的最小单元,单位是px.

注意: 
1、em表示一个固定值,如果当前的文字的font-size为14px,那么1em=14px,例如当面的首行缩进,当前段落的字体大小为14px,那么首行缩进text-indent:2em,就是24px,正好是两个字体大小,一般取离他最近的字体作为参照.
2、%一般表示宽度,它会以父元素作为参照计算;如果父元素宽度200px,子元素宽度为50%,那么子元素宽度就为200*0.5=100px

第7节 元素(标签)分类

7.1 元素分类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
标签元素,分为块状元素和内联元素以及内联块状元素

块状元素特点: 
	1. 块状元素默认独占一行
	2. 块状元素有宽度和高度
常见的块状元素: <div>、<p>、<h1>~<h6>、<ol>、<ul>、<table>、<form>

内联元素特点:
	1. 不会独占一行,多个内联元素会水平顺序排列
	2. 没有宽度和高度
常见内联元素: <a>、<span>、<em>、<strong>、<label>

内联块状元素特点:
	1. 可以设置宽高
	2. 不占一整行
常见内联块状元素: <img>、<input>

7.2 元素转换

1
2
3
4
display属性可以将一个元素转换成其它元素类型
	1、块状转内联
	2、内联转块状
	3、display: inline | block | inline-block;

7.3 元素的隐藏/显示

1
display: none; 设置display属性为none,当前标签就会隐藏

第8节 CSS布局模型

8.1 CSS盒模型

1
盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间相互关系(用于前端布局),所有的块状元素都具有盒子模型的特点

8.2 CSS的布局

  • 流动模型(Flow)
1
2
3
4
5
流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML网页元素都是根据流动模型来分布网页内容的

流动模型的特点
1、块状元素独占一行
2、内联元素不会独占一行而是从左向右排列
  • 浮动模型(Float)
1
2
3
4
5
6
7
正常情况下块状元素独占一行,那么怎么能让块状元素并排显示呢?这时候就用到了浮动模型

实现浮动的css属性
float:left|right

高度塌陷问题处理
clear：left | right | both;
  • 层模型(Layer)
    • 绝对定位(position: absolute)
position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口. 
		
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
    • 相对定位(position: relative)
position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动 
		
div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}
    • 固定定位(position: fixed)
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是窗口。由于窗口本身是固定的，它不会随浏览器窗口的滚动条滚动而变化 
    div{
        width: 200px;
        height: 200px;
        border: 2px red solid;
        position: fixed;
        left: 100px;
        top: 100px;
    }

8.3 前端布局

  • 一列布局
1
<div style="width: 1200px;height: 500px;background-color: pink;margin: 0 auto;"></div>
  • 二列布局
1
2
3
4
<div style="width: 100%;height: 500px;background-color: pink;margin: 0 auto;">
	<div style="width: 50%;height: 500px;background-color: red;float: left;"></div>
	<div style="width: 50%;height: 500px;background-color: blue;float: left;"></div>
</div>
  • 三列布局
1
2
3
4
5
<div style="width: 100%;height: 500px;background-color: pink;margin: 0 auto;">
	<div style="width: 33.33%;height: 500px;background-color: red;float: left;"></div>
	<div style="width: 33.33%;height: 500px;background-color: blue;float: left;"></div>
	<div style="width: 33.33%;height: 500px;background-color: yellow;float: left;"></div>
</div>

第9节 CSS样式设置小技巧

  • 水平居中设置-行内元素
1
被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的
  • 水平居中设置-定宽块状元素
1
定宽块状元素,设置自身为 margin-left：auto;margin-right:auto
  • 水平居中设置-不定宽块状元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
	.container{
		text-align: center;
	}
	.container>ul{
		display: inline;
	}
	
</style>

<div class="container">
	<ul>
		<li><a href="#">1</a> </li>
		<li><a href="#">2</a> </li>
		<li><a href="#">3</a> </li>
	</ul>
</div>
  • 垂直居中-父元素高度确定的单行文本
1
2
3
4
5
6
7
8
9
10
11
12
13
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height 高度一致来实现的

<div class="container">
	Hi 大呲花
</div>

<style type="text/css">
	.container{
		background-color: red;
		height: 50px;
		line-height: 50px;
	}
</style>
  • 垂直居中-父元素高度确定的多行文本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="container">
	<div>
		<p>Hi 大呲花</p>
		<p>Hi 大呲花</p>
		<p>Hi 大呲花</p>
		<p>Hi 大呲花</p>
		<p>Hi 大呲花</p>
	</div>
</div>

.container{
	background-color: red;
	height: 500px;
	display: table-cell;
	vertical-align: middle;
}

第10节 Flex弹性盒模型

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对有些特殊布局非常不方便.2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能

10.1 Flex介绍

  • Flex布局是什么
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局.

.box{
  display: flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀(这是兼容老版本浏览器的写法)

.box{
  display: -webkit-flex; /* Safari,chrome */
  display: flex;
}

注意: 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
  • 基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
  • 容器的属性
1
2
3
4
5
6
7
8
以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

10.2 容器的属性使用

  • [1] flex-direction属性
1
2
3
4
5
flex-direction属性决定主轴的方向（即项目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4个值
* row（默认值）：主轴为水平方向，起点在左端。
* row-reverse：主轴为水平方向，起点在右端。
* column：主轴为垂直方向，起点在上沿。
* column-reverse：主轴为垂直方向，起点在下沿。
  • [2] flex-wrap属性
1
2
3
4
5
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三个值
1. nowrap（默认）：不换
2. wrap：换行，第一行在上方
3. wrap-reverse：换行，第一行在下方
nowrap（默认）：不换
wrap：换行,第一行在上方
wrap-reverse：换行，第一行在下方
  • [3] flex-flow属性
1
2
3
4
5
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}
  • [4] justify-content属性
1
2
3
4
5
justify-content属性定义了项目在主轴上的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
  • [5] align-items属性
1
2
3
4
5
align-items属性定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  • [6] align-content属性
1
2
3
4
5
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
该属性可能取6个值。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴

第11节 其他常用前端属性介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1. 设置圆角
	border-radius: 3px;
	
2. 取消a标签的默认下划线
	text-decoration: none;

3. 取消无序列表的点
	list-style: none;

4. 取消input的边框以及焦点
	outline: none;
	border: none;

5. 设置背景图片
	background-image: url(img/timg.jpg);默认沿着水平方向和垂直方向进行平铺
	
	background-repeat: repeat-y; 沿着垂直方向
	background-repeat: repeat-x; 沿着水平方向
	background-repeat: no-repeat; 不平铺

第12节 Google搜索首页练习

https://www.xiaopiu.com/web/byId?type=project&id=5d6a109262ad1e4d5efc56f6

第四章 JavaScript

第1节 JavaScript概述

1
2
个人建议:如果是零基础,没有计算机相关的理论知识,那么建议你学一门强类型语言,比如Java语言,强类型语言会让你更好的理解计算机(软件和硬件).
JavaScript这样的语言以浏览器做为编译器,不能很好的理解计算机,生硬的学习它,恐消化不了,一知半解.

1.1 JS简介

1
2
3
4
5
0. JavaScript是一门计算机语言(人与计算机交流的语言)
1. JavaScript(简称"JS")一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言
2. JavaScript的作者 布兰登·艾克
3. 它的解释器被称为JavaScript引擎,为浏览器的一部分,是广泛用于客户端的脚本语言
4. 最早是在HTML网页上使用,用来给HTML网页增加动态功能

1.2 JS应用场景

1
2
简单应用: 按钮点击,浮动布局,幻灯片
复杂应用: 游戏、2D/3D动画、大型数据库驱动程序

1.3 JS发展史

1
2
1. JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成
2. Netscape在最初将其脚本语言命名为LiveScript,后来Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript

第2节 JavaScript的书写位置

  • 行内式
1
2
3
JS写到HTML标签中

例如: <button onclick="alert('行内式')">行内式</button>
  • 内嵌式(开发中常见)
1
2
3
4
5
6
将JS代码写到HTML文件中的head标签中,使用方式和css类似,将JS代码写到script标签中

例如:
<script type="text/javascript">
	alert('内嵌式');
</script>
  • 外部式(开发中常见)
1
2
3
4
5
在外部创建一个以.js结尾的文件,然后在当前HTML文件中使用script标签引入

例如:
1. 在head标签中引入
2. 在body标签中引入

第3节 JS入门之HelloWorld

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
基本所有的计算机语言在学习之前都会编写一个入门的代码,输出HelloWorld字符串

点击button按钮,在浏览器弹窗HelloWorld

方式一(行内式)

<button onclick="alert('HelloWorld')">HelloWorld</button>

方式二(内嵌式)

<button id="btn">HelloWorld</button>
<script type="text/javascript">
	window.onload=function(){
		var btn = document.getElementById("btn");
		btn.onclick=function(){
			alert("HelloWorld");
		}
	}
</script>

方式三(外部式): 外部式代码和内嵌式代码一模一样,就是将JS代码写到外部的JS文件中.

第4节 JavaScript基础语法

4.1 变量声明

  • 变量的概念
1
2
3
4
1. 变量是存储值的容器
2. 内存中的一个存储单元
3. 该单元有自己的名称（变量名）和类型（数据类型）
4. 变量必须先声明,后使用
  • 变量的声明
1
2
3
4
5
6
7
JS声明变量使用关键字 var 

关键字: 被JavaScript语言赋予了特殊含义,用作专门用途的字符串(单词)

例如: 
	var num=10;    var:声明变量的关键字  num: 给变量起的名字,名字自定义(见名知意,用英文,不允许用汉语拼音)
	var s="Hello";

4.2 基本数据类型

  • 常见数据库类型介绍
变量 解释 示例
String 字符串: 一串文字,字符串的值必须用引号(单引号或者双引号)括起来 var s=’李雷’
Number 数字(整数/小数) var x=10; var y=1.0;
Boolean 布尔值: 真或者假. 真:true;假:false
Array 数组: 存储一组数据 var arr=[1,2,’Polly’,[3,4,5]];
Object 对象: 万事万物皆对象,一切都可以保存到变量中 var obj1={}; var obj2 = new Object();
  • 获取数据的数据类型以及注释
1
2
3
4
5
6
7
1. 控制台输出函数 console.log('要输出的内容');
2. typeof("传入要查询的数据值的变量名");  typeof:是一个函数,返回数据的类型.


JavaScript的注释和CSS类型,JS分为两种注释:
1. 单行注释  //单行注释
2. 多行注释  /* 多行注释 */

4.3 对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
JS是一门纯面向对象的语言:万事万物皆对象

JS创建对象的方式:
方式一:
var obj = {};
//赋值
obj.id=100;
obj.name="李雷";
//控制台输出
console.log(obj);
//获取属性值
console.log(obj.name);

方式二:
var obj = new Object();
//赋值
obj.id=100;
obj.name="李雷";
//控制台输出
console.log(obj);
//获取属性值
console.log(obj.name);

4.4 数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
创建数组的三种方式:
方式一:
var arr1=['AAA',123];
方式二:
var arr2=new Array('AAA',123);
方式三:
var arr3=new Array(10);
arr3[0]=1;
arr3[1]="Hello";
注意: 当new Array(10)构造器里面值赋一个值或者不赋值时,代表的是数组的长度,当大于一个值是表示数组的内容,构造器内输入数据的类型可以是任意类型


1.数组函数
1.1 push() : 向数组尾部添加一个元素
1.2 pop()  : 从数组尾部弹出一个元素,并且返回弹出的元素
1.3 shift(): 头部删除一个元素
1.4 unshift(): 头部添加一个元素
1.5 concat([数组]): 数组连接  [1,2,3].concat([4,5]) [1,2,3,4,5]
1.6 join(): [1,2,3].join("-") 1-2-3

4.5 运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
运算符: 
算数运算符: + - * / %  += -= *= /= %=  ++ --
关系运算符: < > >= <= == != ===(严格等于,既比较值又比较数据类型)
逻辑运算符: && || !
三目运算符: 表达式 ? 结果1:结果2
语法规则和Java基本相同,在进行除法运算时,因为没有整数类型和浮点类型的区分所以,不会取整

注意: 虽然js是一个所类型语言,但是当遇到下面的运算时也需要类型转换.

var a=10;
var b="10";
var sum=a+b;//如果不将b进行类型转换,那么就会变成字符串拼接.

parseInt();将字符串转换成number

var sum=parseInt(b)+a;
console.log(sum);

4.6 条件分支结构

  • if语句
1
2
3
4
5
6
7
8
9
if(true/false){
    
}else if(true/false){
    
}else{
    
}

语法格式和Java语言基本相同
  • switch流程控制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var a=2;
switch(a){
  case 1:
	/* 浏览器输出 */
    document.write("值为1");
    break;
  case 2:
	/* 控制台输出 */
    console.log("值为2");
    break;
  case 3:
    document.write("值为3");
    break;
  default:
     document.write("值不是3也不是2也不是1");
}

4.7 循环结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
for循环
while循环

break与continue关键字
- break用于结束循环
- continue用于结束本次循环

/*
	打印九九乘法表
*/ 
for(var i=1;i<=9;i++){
	for(j=1;j<=i;j++){
		document.write(i+"*"+j+"="+(i*j)+"&nbsp;&nbsp;&nbsp;&nbsp;");
	}
	document.write("<br>");
}

语法和Java相同

4.8 函数

1
2
函数又叫做方法,和我们数学中的方法概念相似,函数可以帮助我们完成特定功能 例如: sin()函数 cos()函数等
在计算机中: 函数就是实现特定功能的一段代码,可反复被调用
  • 方法的声明
1
2
3
4
5
6
7
8
9
10
11
12
13
函数:也叫方法
js定义函数使用关键字function
方式一:
function 方法名(参数列表){方法体}
function sum(a,b,c,d){
    函数体
}
函数的返回值 return js函数的方法不用声明返回值类型

方式二:匿名方法
var sum=function(){}

tips: 万事万物皆对象,所以函数也是一个对象
  • 方法的调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//方式一
function sum(a,b,c){
	return a+b+c;
}
//方式二
var sum1 = function(a,b){
	return a+b;
}
//调用一
var s = sum(10,29,30);
console.log(s);
//调用二
var d = sum1(20,30);
console.log(d);
  • 将函数赋给对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {};
//方式一
function sum(a,b,c){
	return a+b+c;
}
//方式二
var sum1 = function(a,b){
	return a+b;
}
//给对象赋值
obj.name="韩梅梅";
//将方法赋给对象
obj.fun1 = sum;
obj.fun2 = sum1;
console.log(obj);
  • 对象函数的调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var obj = {};
//方式一
function sum(a,b,c){
	return a+b+c;
}
//方式二
var sum1 = function(a,b){
	return a+b;
}
//给对象赋值
obj.name="韩梅梅";
//将方法赋给对象
obj.fun1 = sum;
obj.fun2 = sum1;
console.log(obj);
//方法调用
var r = obj.fun1(1,2,3);
console.log(r);
var r2 = obj.fun2(4,5);
console.log(r2);
  • JS的常见内置对象和函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
时间对象: 
var myDate = new Date();
console.log(myDate);
console.log(myDate.getFullYear());//年
console.log(myDate.getMonth()+1);//月
console.log(myDate.getDate());//日
console.log(myDate.getHours());//时
console.log(myDate.getMinutes());//分
console.log(myDate.getSeconds());//秒
console.log(myDate.getDay());//星期日是0
console.log(myDate.toLocaleDateString());//日期
console.log(myDate.toLocaleTimeString());//时间
console.log(myDate.valueOf());//毫秒


数学对象Math
console.log(Math.PI);
console.log(Math.abs(-1));//绝对值
console.log(Math.floor(4.99));//向下取整
console.log(Math.max(1,2,3,4));//最大值
console.log(Math.min(1,2,3,4));//最小值
console.log(Math.random());//0-1随机数

4.9 Cookie技术

  • cookie介绍
1
cookie英文单词饼干,小甜点的意思,在JS中他是一段可以保存不超过4KB的小型文本数据,保存在浏览器中
  • cookie数据结构
1
2
3
cookie是以key=value的形式存储

例如: username=tom
  • cookie怎么使用
1
2
1. 向浏览器中保存数据: document.cookie="username=tom";
2. 从浏览器中获取cookie数据 var c = document.cookie;
  • cookie的其他参数
1
2
1. expires 设置cookie的过期时间,时间格式必须为UTC 或 GMT 时间格式
2. path 设置cookie的存储路径默认为 /
  • 设置和获取cookie案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1. 设置cookie

//创建cookie
//创建过期时间
var d = new Date();//当前时间
//根据当前时间向后推一天作为过期时间
d.setTime(d.getTime()+2*24*60*60*1000);//向后推2*24*60*60*1000毫秒(2天)
//创建cookie格式,设置数据,过期时间,以及保存位置
var cookie_str="username=tom1;expires="+d.toGMTString()+";path=/";
document.cookie=cookie_str;
console.log(cookieStr);

2. 获取cookie

//获取cookie
var c = document.cookie;
console.log(c);

第5节 正则表达式

5.1 正则表达式介绍

1
2
3
4
1. 正则表达式是由一个字符序列形成的搜索模式
2. 当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容
3. 正则表达式可以是一个简单的字符，或一个更复杂的模式
4. 正则表达式可用于所有文本搜索和文本替换的操作

5.2 正则表达式的语法

1
/正则表达式主体/修饰符(可选)

5.3 JS中支持正则表达式的常见对象和方法

  • RegExp对象
方法 描述
exec 检索字符串中指定的值。返回找到的值,并确定其位置
test 检索字符串中指定的值。返回 true 或 false
  • String对象
方法 描述
search 检索与正则表达式相匹配的值
match 找到一个或多个正则表达式的匹配
replace 替换与正则表达式匹配的子串
split 把字符串分割为字符串数组

5.4 正则表达式的使用

  • 构建正则表达式的特殊字符
1
修饰符: 用于执行区分大小写和全局匹配
修饰符 描述
i 执行对大小写不敏感的匹配
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m 执行多行匹配 
1
方括号: 用于查找某个范围内的字符
表达式 描述
[abc] 查找方括号之间的任何字符
[^abc] 查找任何不在方括号之间的字符
[0-9] 查找任何从 0 至 9 的数字
[a-z] 查找任何从小写 a 到小写 z 的字符
[A-Z] 查找任何从大写 A 到大写 Z 的字符
[A-z] 查找任何从大写 A 到小写 z 的字符
(red blue 
1
元字符(Metacharacter): 是拥有特殊含义的字符
元字符 描述
. 查找单个字符,除了换行和行结束符
\w 查找单词字符
\W 查找非单词字符
\d 查找数字
\D 查找非数字字符
\s 查找空白字符
\S 查找非空白字符
\b 匹配单词边界
\B 匹配非单词边界
\0 查找 NULL 字符
\n 查找换行符
\f 查找换页符
\r 查找回车符
\t 查找制表符
\v 查找垂直制表符
\xxx 查找以八进制数 xxx 规定的字符
\xdd 查找以十六进制数 dd 规定的字符
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符 
1
量词: 用于表示重复次数的含义
量词 描述
n+ 匹配任何包含至少一个 n 的字符串
n* 匹配任何包含零个或多个 n 的字符串
n? 匹配任何包含零个或一个 n 的字符串
n{X} 匹配包含 X 个 n 的序列的字符串
n{X,} X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配
n{X,Y} X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配
n$ 匹配任何结尾为 n 的字符串
^n 匹配任何开头为 n 的字符串
?=n 匹配任何其后紧接指定字符串 n 的字符串
?!n 匹配任何其后没有紧接指定字符串 n 的字符串
  • 常见正则表达式的构建
1
2
3
4
5
6
7
8
9
10
11
12
13
1. 匹配手机号

var phone=/^[1][3,4,5,7,8][0-9]{9}$/;

^: 匹配输入的开始
[1]: 第1位以1开始
[3,4,5,7,8] : 第2位可以是3,4,5,7,8  这时候手机号前两位就出来了 13,14,15,17,18 如果以后手机号还有别的开头的比如说19,那么在第二个中括号中添加9即可
[0-9]{9}$ : {9}表示前面还有9位可以是0-9任意; $: 表示结尾

2. 匹配身份证

//校验身份证15位或者18位的正则,如果为18位后一位可能是数字或者x
var cardId=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  • 正则表达式的使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
1. 检索字符串中某一个子串是否存在

//使用string对象中的方法
var str="abCDef";
//返回cd所在字符串中的下标值,如果不存在返回-1  i: 表示不区分大小写,可以省略
var f = str.search(/cd/i);
console.log(f);

2. 检索一个字符串是不是以数字开头

//使用JavaScript对象
var reg=/^\d/; //以数字开头
var f = reg.test("1abc");//如果以数字开头返回true
console.log(f);

3. 检索一个字符串是不是正确的手机号

var phone=/^[1][3,4,5,7,8][0-9]{9}$/;
var f = phone.test("19252565897");
console.log(f);

4. 检索一个字符串是不是一个正确的身份证号

var cardId=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
var f = cardId.test("23230319966582256x");
console.log(f);

第6节 HTML DOM(文档对象模型)

6.1 DOM介绍

1
2
3
1. 当网页被加载时,浏览器会创建页面的文档对象模型DOM(Document Object Model),将整个.html文件读成一个对象(document对象)
2. DOM是一项W3C(World Wide Web Consortium)标准,它允许程序和脚本动态地访问、更新文档的内容、结构和样式
3. W3C: 万维网联盟,又称W3C理事会,是国际最著名的标准化组织,W3C最重要的工作是制定、发展 Web规范

6.2 DOM树

1
2
3
DOM树: document对象里描述了整个.html文件(包含各个标签元素),里面的各个元素之间产生了各种关系,这种关系就像树形结构

document对象由浏览器创建,在浏览器加载.html文件后生成,描述了整个DOM树对象,各个标签元素存在于docuemnt对象中,如果想获取元素标签对象可以从docuemnt对象中查找

6.3 获取元素对象的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
通过document对象调用
一、获取元素节点:
1. getElementById(): 通过id属性获取一个元素节点对象
2. getElementsByTagName(): 通过标签名获取一组元素节点对象
3. document.getElementsByClassName():通过类名获取一组元素节点对象
4. getElementsByName(): 通过name属性获取一组元素节点对象

二、获取元素节点的子节点
1. getElementsByTagName(): 方法，返回当前节点的指定标签名后代节点
2. childNodes: 属性，表示当前节点的所有子节点
3. firstChild: 属性，表示当前节点的第一个子节点
4. lastChild: 属性，表示当前节点的最后一个子节点

三、获取父节点和兄弟节点
1. parentNode: 属性，表示当前节点的父节点
2. previousSibling: 属性，表示当前节点的前一个兄弟节点
3. nextSibling: 属性，表示当前节点的后一个兄弟节点

6.4 元素节点对象获取

1
2
3
4
5
6
节点: Node——构成HTML文档最基本的单元
常用节点分为四类:
    – 文档节点:整个HTML文档
    – 元素节点:HTML文档中的HTML标签 
    – 属性节点:元素的属性
    – 文本节点:HTML标签中的文本内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
1、文档节点(document)
   - 1.1 文档节点document,代表的是整个HTML文档,网页中的所有节点都是它的子节点
   - 1.2 document对象作为window对象的属性存在,我们不用获取可以直接使用.
   - 1.3 通过该对象我们可以在整个文档中查找节点对象,并可以通过该对象创建各种节点对象
2、元素节点(Element)
   - 2.1 HTML中的各种标签都是元素节点,这是我们最常用的一个节点
   - 2.2 浏览器会将页面中所有的标签都转换为一个元素节点,我们可以通过document的方法来获取元素节点
        -- 比如: 
        //JS代码,通过id获取元素节点
        var pEle = document.getElementById("pId");
		console.log(pEle);
		<!--HTML代码-->
		<p id="pId">这是一个P标签</p>
   
3、文本节点(Text)
   - 3.1 文本节点表示的是HTML标签以外的文本内容,任意非HTML的文本都是文本节点
   - 3.2 它包括可以字面解释的纯文本内容
   - 3.3 文本节点一般是作为元素节点的子节点存在的
   - 3.4 获取文本节点时,一般先要获取元素节点.在通过元素节点获取文本节点
        -- 例如:
        //JS代码,通过id获取元素节点
        var pEle = document.getElementById("pId");
		console.log(pEle);
		//获取文本节点
		var textEle = pEle.firstChild;
		console.log(textEle);
		
		<!--HTML代码-->
		<p id="pId">这是一个P标签</p>
        
4、属性节点(Attr)
   - 4.1 属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素 节点的子节点，而是元素节点的一部分
   - 4.2 可以通过元素节点来获取指定的属性节点
        -- 例如:
        //JS代码,通过id获取元素节点
        var pEle = document.getElementById("pId");
		console.log(pEle);
		//获取属性节点
		var attrEle = pEle.getAttributeNode("id");
		console.log(attrEle);
		
		<!--HTML代码-->
		<p id="pId">这是一个P标签</p>

6.5 元素节点内容的获取

1
2
3
上面获取到了元素节点对象,接下来我们要从节点对象中获取元素节点的内容.

节点对象中包含各个属性,我们通过对象属性获取节点内容,属性如下:
nodeName nodeType nodeValue
文档节点 #document 9 null
元素节点 标签名 1 null
属性节点 属性名 2 属性值
文本节点 #text 3 文本内容
  • 文档节点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    //节点名称
    var name = document.nodeName;
    console.log(name);
    //节点类型
    var type = document.nodeType;
    console.log(type);
    //节点值
    var value = document.nodeValue;
    console.log(value);
  • 元素节点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //获取元素节点
    var pEle = document.getElementById("pId");
    //节点名称
    var name = pEle.nodeName;
    console.log(name);
    //节点类型
    var type = pEle.nodeType;
    console.log(type);
    //节点值
    var value = pEle.nodeValue;
    console.log(value);
  • 文本节点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //获取元素节点
    var pEle = document.getElementById("pId");
    //获取文本节点
    var textEle = pEle.firstChild;
    //节点名称
    var name = textEle.nodeName;
    console.log(name);
    //节点类型
    var type = textEle.nodeType;
    console.log(type);
    //节点值
    var value = textEle.nodeValue;
    console.log(value);
  • 属性节点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    //获取元素节点
    var pEle = document.getElementById("pId");
    //获取属性节点
    var attrEle = pEle.getAttributeNode("id");
    console.log(attrEle);
    //节点名称
    var name = attrEle.nodeName;
    console.log(name);
    //节点类型
    var type = attrEle.nodeType;
    console.log(type);
    //节点值
    var value = attrEle.nodeValue;
    console.log(value);

6.6 元素节点的属性

  • 给元素节点的属性赋值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p id="pId" title="标题" mn="abc" class="def">这是一个P标签</p>

//获取元素节点对象
var pEle = document.getElementById("pId");

console.log(pEle.id) //通过属性获取值
console.log(pEle.title) 
console.log(pEle.mn)  //mn属性不是p标签固有属性,是否能获取到值
console.log(pEle.className) //获取类(class)属性,使用className属性获取

//修改属性值
pEle.className="李雷";
console.log(pEle.className);
//给一个当前标签不存在的属性赋值
pEle.className1="李雷1";
console.log(pEle.className1);
  • 添加和获取元素的属性(setAttribute和getAttribute方法)
1
2
3
4
5
6
7
8
<p id="pId">这是一个P标签</p>

var pEle = document.getElementById("pId");
//通过方法设置属性值
pEle.setAttribute("title","中国");
//通过方法获取属性值
var v = pEle.getAttribute("title");
console.log(v);

6.7 元素节点创建以及元素节点内容的修改

  • 元素节点的创建和修改
1
2
3
4
5
6
7
8
9
10
11
1、创建元素节点
    document.createElement("标签名");
2、创建文本节点
    document.createTextNode("北京");
3、删除节点
    父节点.removeChild(子节点);
4、替换节点
    父节点.replaceChild(新节点,旧节点);
5、插入节点
   5.1 父节点.appendChild(子节点);
   5.2 父节点.insertBefore(新节点,旧节点);
  • 设置/获取元素内容
1
2
3
4
5
6
7
8
9
innerText:设置元素内容,原样输出
innerHTML:设置元素内容,如果设置的是一个标签元素会被浏览器解析

HTML:
<p id="pId">ppppp</p>

js:
var pIdEle = document.getElementById("pId");
pIdEle.innerHTML="<h1>看这里,我变~~~</h1>";

6.8 DOM事件

  • 事件简介
1
2
3
4
5
6
7
事件:文档或浏览器窗口中发生的一些特定的交互瞬间.
JavaScript 与 HTML 之间的交互是通过事件实现的.

事件三要素:
事件源: 被触发的物体
事件类型: 用户的行为,单击，双击，移入，移出，拖拽，滑屏
事件处理函数: 执行的代码
  • 事件类型
1
2
3
单击 onclick
移入 onmouseover
移出 onmouseout
  • 事件绑定的方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1. 方式一

HTML:
<button id="btn" >JavaScript事件绑定</button>

JS:
var btn = document.getElementById("btn");
btn.onclick=function(){
	alert("+++++++");
}

2. 方式二

HTML:
<button id="btn" >JavaScript事件绑定</button>

JS:
var btn = document.getElementById("btn");
// click:不带on的事件类型
// function:事件处理函数
// false:指定事件是否在捕获或冒泡阶段执行
btn.addEventListener("click",function(){
	alert("=====");
},false);
  • 定时器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//设置定时器1:时间到了之后定时器执行一次然后结束
setTimeout("参数1","参数2");
参数1: 被定时的函数
参数2: 定时时间(多久执行一次函数 ms)
eg: setTimeout(function(){console.log("=====")},3000);

//设置定时器2:根据时间循环执行函数
setInterval("参数1","参数2");
参数1: 被定时的函数
参数2: 定时时间(多久执行一次函数 ms)
var timeId = setInterval(function(){console.log("=====")},3000);

//取消定时器
//可以指定要取消的哪个定时器timeId,为开启的定时器的返回值
window.clearInterval(timeId);

6.9 JS页面跳转

  • JS跳转页面
1
window.location.href="https://www.baidu.com"
  • JS跳转目标页面参数获取
1
2
3
4
5
6
var url = location.href;
console.log("地址:",url)
var parameter = url.substring(url.lastIndexOf("?")+1,url.length)
console.log("parameter:",parameter)
var pars = parameter.split("&");
console.log("pars:",pars);

6.10 JS设置元素的CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
使用JS设置元素的CSS样式
方式一:
HTML:
<p id="pId">ppppp</p>
JS:
var pId = document.getElementById("pId");
pId.onclick=function(){
	pId.style.color="red";
}

方式二:
HTML:
<p id="pId">ppppp</p>

JS:
var pId = document.getElementById("pId");
pId.onclick=function(){
	pId.style.cssText="color:red;font-size: 30px;";
}

6.11 练习(轮播图)

1
2
3
4
5
6
7
8
原型地址: https://www.xiaopiu.com/web/byId?type=project&id=5d6dcfc162ad1e4d5efcf4dd

素材地址:

链接: https://pan.baidu.com/s/1e7D1-zLDB9ZvDzzP2wRunA
提取码: jjq5

素材来源 https://www.readnovel.com/

第五章 JQuery

第1节 JQuery是什么

1
2
3
JQuery是一个快速、简洁的JavaScript代码库(轻量级JS框架)
JQuery设计的宗旨是"Write Less,Do More",即倡导写更少的代码,做更多的事情.
JQuery封装JavaScript常用的功能代码,提供一种简便的JavaScript操作方式,优化HTML文档操作、事件处理、动画设计和Ajax交互

第2节 JQuery的优势

1
2
3
4
5
6
- 轻量级
- 强大的选择器
- 出色的 DOM 操作的封装
- 可靠的事件处理机制
- 完善的 Ajax
- 出色的浏览器兼容性

第3节 JQuery的引入方式

  • 离线本地引入
1
2
3
4
5
6
下载地址: https://www.jq22.com/jquery-info122

1. 在head中引入
2. 在body中引入

<script src="jquery-1.12.2.min.js"></script>
  • CDN引入
1
2
3
4
5
6
CDN地址: https://www.jq22.com/jquery-info122

1. 在head中引入
2. 在body中引入

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

第4节 JQuery入门之HelloWorld

1
2
3
4
5
6
7
<button id="btn">Hello JQuery</button>

$(function(){
	$("#btn").click(function(){
		alert("HelloWorld.");
	});
});

第5节 JQuery文档使用之选择器

5.1 基本选择器一

  • id选择器
1
2
3
4
5
6
7
8
9
HTML:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

JS:
$("#myDiv");

结果:
[ <div id="myDiv">id="myDiv"</div> ]
  • 元素(标签)选择器
1
2
3
4
5
6
7
8
9
10
HTML:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

JS:
$("div");

结果:
[ <div>DIV1</div>, <div>DIV2</div> ]
  • 类选择器
1
2
3
4
5
6
7
8
9
10
HTML:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

JS:
$(".myClass");

结果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
  • 通用选择器
1
2
3
4
5
6
7
8
9
10
HTML:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>

JS:
$("*");

结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
  • 分组选择器
1
2
3
4
5
6
7
8
9
10
11
HTML:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

JS:
$("div,span,p.myClass")

结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

5.2 基本选择器二

  • 匹配索引值为偶数的元素
1
2
3
4
5
6
7
8
9
10
11
12
HTML:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

JS:
$("tr:even")

结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
  • 匹配索引值为奇数的元素
1
2
3
4
5
6
7
8
9
10
11
12
HTML:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

JS:
$("tr:odd")

结果:
[ <tr><td>Value 1</td></tr> ]

5.3 层级选择器

  • 后代选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
HTML:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JS:
$("form input")

结果:
[ <input name="name" />, <input name="newsletter" /> ]
  • 子类选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
HTML:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JS:
$("form > input")

结果:
[ <input name="name" /> ]

  • 兄弟选择器

    • 匹配所有紧接在 prev 元素后的 next 元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
HTML:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JS:
$("label + input")

结果:
[ <input name="name" />, <input name="newsletter" /> ]
    • 匹配 prev 元素的所有同辈 siblings 元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
HTML:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

JS:
$("form ~ input")

结果:
[ <input name="none" /> ]

5.4 属性选择器

  • 根据属性名匹配
1
2
3
4
5
6
7
8
9
10
11
HTML:
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

JS:
$("div[id]")

结果:
[ <div id="test2"></div> ]
  • 根据属性名和值匹配
1
2
3
4
5
6
7
8
9
10
HTML:
<input type="checkbox" name="newsletter"  />
<input type="checkbox" name="newsletter" />
<input type="checkbox" name="accept" />

JS:
$("input[name='newsletter']")

结果:
[ <input type="checkbox" name="newsletter"  />, <input type="checkbox" name="newsletter" /> ]

5.5 表单选择器

  • 匹配单行文本框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
HTML:
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

JS:
$(":text")

结果:
[ <input type="text" /> ]
  • 匹配密码框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
HTML:
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

JS:
$(":password")

结果:
[ <input type="password" /> ]
  • 匹配单选框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
HTML:
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

JS:
$(":radio")

结果:
[ <input type="radio" /> ]
  • 匹配复选框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
HTML:
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

JS:
$(":checkbox")

结果:
[ <input type="checkbox" /> ]
  • 匹配不可见元素
1
2
3
4
5
6
7
8
9
10
11
HTML:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

JS:
$("tr:hidden")

结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]

5.6 表单对象属性选择器

  • 匹配所有选中的元素
1
2
3
4
5
6
7
8
9
10
11
12
HTML:
<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

JS:
$("input:checked")

结果:
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]
  • 匹配所有选中的option元素
1
2
3
4
5
6
7
8
9
10
11
12
HTML:
<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

JS:
$("select option:selected")

结果:
[ <option value="2" selected="selected">Gardens</option> ]

第6节 JQuery文档使用之文档处理

  • 内部插入
1
2
3
4
5
6
7
8
HTML:
<p>I would like to say: </p>

JS:
$("p").append("<b>Hello</b>");

结果:
[ <p>I would like to say: <b>Hello</b></p> ]
  • 删除
1
2
3
4
5
6
7
8
HTML:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>

JS:
$("p").empty();

结果:
<p></p>

第7节 JQuery文档使用之筛选

  • 查询列表中的第一个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
HTML:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

JS:
$('li').first()

结果:
[ <li>list item 1</li> ]
  • 查询列表中的最后一个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
HTML:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

JS:
$('li').last()

结果:
[ <li>list item 5</li> ]
  • 筛选出与指定表达式匹配的元素集合
1
2
3
4
5
6
7
8
HTML:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

JS:
$("p").filter(".selected")

结果:
[ <p class="selected">And Again</p> ]
  • 筛选一个包含着所有匹配元素的唯一父元素的元素集合
1
2
3
4
5
6
7
8
HTML:
<div><p>Hello</p><p>Hello</p></div>

JS:
$("p").parent()

结果:
[ <div><p>Hello</p><p>Hello</p></div>]

第8节 JQuery文档使用之事件绑定

  • 页面载入事件
1
2
3
4
5
6
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

$(document).ready(function(){
  // 在这里写你的代码...
});

  • 事件绑定

    • on函数
      1
      2
      3
      $("p").on("click", function(){
      	alert($(this).text());
      });
    • bind函数
1
2
3
$("p").bind("click", function(){
  alert($(this).text());
});
    • 直接绑定
1
2
3
$("p").click(function(){
	alert($(this).text());
});
  • 单击事件
1
$("p").click();
  • 失去焦点事件
1
$("input").blur();
  • 获取焦点事件
1
$("input").focus();

第9节 JQuery文档使用之属性操作

  • attr()获取/设置元素属性
1
2
1. 获取属性   $("img").attr("src");
2. 设置属性   $("img").attr({ src: "test.jpg", alt: "Test Image" });
  • addClass()给元素添加类
1
2
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
  • html()获取/设置第一个匹配元素的html内容
1
2
1. 获取值  $('p').html();
2. 设置值  $("p").html("Hello <b>world</b>!");
  • text()获取/设置第一个匹配元素的文本内容
1
2
1. 获取值  $('p').text();
2. 设置值  $("p").text("Hello world!");
  • val()获取/设置input元素value属性值
1
2
1. 获取值  $("input").val();
2. 设置值  $("input").val("hello world!");

第10节 JQuery文档使用之CSS操作

  • css()获取/设置css样式
1
2
1. 获取值  $("p").css("color");
2. 设置值  $("p").css({ "color": "#ff0011", "background": "blue" });

第11节 JQuery文档使用之效果

  • 元素隐藏和显示
1
2
3
4
5
6
7
8
1. 显示  

HTML: <p style="display: none">Hello</p>
JS  : $("p").show()

2. 隐藏

JS  : $("p").hide()
  • 滑动
1
2
3
1. 向上收起(隐藏) slideUp()
2. 向下展开(显示) slideDown()
3. 隐藏和显示切换 slideToggle()

第12节 JQuery节点创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table border="1"></table>

//创建<tr></tr>
var trEle = $("<tr></tr>");
var thEle1 = $("<th>ID</th>");
var thEle2 = $("<th>名字</th>");
var thEle3 = $("<th>性别</th>");
trEle.append(thEle1);
trEle.append(thEle2);
trEle.append(thEle3);
var trEle2 = $("<tr></tr>");
var tdEle1 = $("<td>1001</td>");
var tdEle2 = $("<td>张三</td>");
var tdEle3 = $("<td>男</td>");
trEle2.append(tdEle1);
trEle2.append(tdEle2);
trEle2.append(tdEle3);
console.log(trEle[0]);
$("table").append(trEle);
$("table").append(trEle2);

第13节 JQuery对象和DOM对象的转换

1
2
3
4
5
6
7
8
9
10
<button id="btn">我是一个按钮</button>

//使用jQuery选择器获取jQuery对象
var $btn = $("#btn");
console.log($btn);
//将jQuery对象转换成DOM对象
console.log($btn[0]);//方式一
console.log($btn.get(0)); //方式二
//将DOM对象转成jQuery对象
console.log($($btn[0]));

第14节 练习

14.1 练习一 表格的隔行换色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
HTML:
<table border="1">
	<thead>
		<tr>
			<th>收费单位</th>
			<th>付款方式</th>
			<th>结算方式</th>
			<th>状态</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
		<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
		<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
		<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
		<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
		<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
		<tr><td>**教育xx分公司</td><td>手机</td><td>支付宝</td><td>已付款</td></tr>
	</tbody>
</table>

JQuery:
var trso =  $("tbody tr:even"); //获取偶数
var trsj =  $("tbody tr:odd");  //获取奇数
trso.css({"background-color":"red"}); //给偶数设置背景色
trsj.css({"background-color":"green"});//给偶数设置背景色

14.2 练习二 全选/全不选练习

  • 样式
  • HTML代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
	<form action="#" method="post">
	    你爱好的运动？
	    <input type="checkbox" id="checkedAllBox"/>全选/全不选
	    <br />
	    <input type="checkbox" name="items" id="" value="足球" />足球
	    <input type="checkbox" name="items" id="" value="篮球" />篮球
	    <input type="checkbox" name="items" id="" value="羽毛球" />羽毛球
	    <input type="checkbox" name="items" id="" value="乒乓球" />乒乓球
	    <br />
	    <input type="button" name="" id="checkAllBtn" value="全  选" />
	    <input type="button" name="" id="checkNoBtn" value="全不选" />
	    <input type="button" name="" id="checkRevBtn" value="反  选" />
	    <input type="button" name="" id="sendBtn" value="提  交" />
	</form>
</body>
  • JQuery代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
$(function(){
	
	//获取全选按钮
	var checkAllBtn = $("#checkAllBtn");
	//给全选按钮绑定单击事件
	checkAllBtn.click(function(){
		//给所有name属性是items的选中
		var items = $("input[name='items']");
		console.log("全选");
		for(var i=0;i<items.length;i++){
			items[i].checked=true;
		}
		//全选按钮选中
		$("#checkedAllBox")[0].checked=true;
	});
	//全不选
	var checkNoBtn = $("#checkNoBtn");
	checkNoBtn.click(function(){
		//给所有name属性是items的选中
		var items = $("input[name='items']");
		console.log("全不选");
		for(var i=0;i<items.length;i++){
			items[i].checked=false;
		}
		//全不选按钮选中
		$("#checkedAllBox")[0].checked=false;
	});
	
	//反选
	var checkRevBtn = $("#checkRevBtn");
	checkRevBtn.click(function(){
		var items = $("input[name='items']");
		console.log("反选");
		for(var i=0;i<items.length;i++){
			items[i].checked=!items[i].checked;
		}
		//默认全选勾上
		$("#checkedAllBox")[0].checked=true;
		for(var i=0;i<items.length;i++){
			//如果有一个没选上就勾掉全选
			if(!items[i].checked){
				$("#checkedAllBox")[0].checked=false;
				break;
			}
		}
	});
	
	//提交
	var sendBtn = $("#sendBtn");
	sendBtn.click(function(){
		var items = $("input[name='items']");
		console.log("提交");
		for(var i=0;i<items.length;i++){
			if(items[i].checked){
				alert(items[i].value)
			}
		}
	});
	
	//全选/全不选
	var checkedAllBox = $("#checkedAllBox");
	checkedAllBox.click(function(){
		var items = $("input[name='items']");
		for(var i=0;i<items.length;i++){
			items[i].checked=checkedAllBox[0].checked;
		}
	});
	
	//items
	var items = $("input[name='items']");
	for(var i=0;i<items.length;i++){
		$(items[i]).click(function(){
			//默认全部选中
			checkedAllBox[0].checked=true;
			for(var j=0;j<items.length;j++){
				if(!items[j].checked){
					checkedAllBox[0].checked=false;
					break;
				}
			}
		});
	}
});

14.3 练习三 侧边栏导航以及右侧内容区联动

  • HTML代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
	<div class="head">
		<h3 style="text-align: center;">网站头部</h3>
	</div>
	<div class="content">
		
		<div class="content-left">
			
			<div class="menu">
				<div class="menu-item">
					<a>用户管理</a>
					<div class="menu-sub-item">
						<a onclick="showPage('show','demo.html')">用户列表</a>
						<a>添加用户</a>
					</div>
				</div>
				<div class="menu-item">
					<a>角色管理</a>
					<div class="menu-sub-item">
						<a>角色列表</a>
						<a>添加角色</a>
					</div>
				</div>
			</div>
			
		</div>
		<div class="content-right">
			<!-- 
				iframe:引入另一个页面
			 -->
			<iframe id="show" frameborder="0"></iframe>
		</div>
	</div>
</body>
  • CSS代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
a{
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
a:link{
	text-decoration: none;
}
a:visited{
	text-decoration: none;
}
.head{
	height: 40px;
	width: 90%;
	margin: auto;
	background-color: yellowgreen;
}
.content{
	width: 90%;
	height: 500px;
	margin: auto;
	display: flex;
}
.content-left{
	width: 20%;
	height: 500px;
	background-color: black;
}
.content-right{
	width: 80%;
	height: 500px;
	background-color: pink;
}
.content-right>iframe{
	height: 100%;
	width: 100%;
}
.menu{
	width: 100%;
	height: 100%;
	padding-left: 10px;
}
.menu-item{
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}
.menu-item>a{
	display: block;
	font-size: 14px;
	font-weight: bold;
	color: white;
	cursor: pointer;
}
.menu-item>.menu-sub-item{
	display: none;
}
.menu-item>.menu-sub-item>a{
	display: block;
	font-size: 13px;
	padding-left: 5px;
	height: 30px;
	line-height: 30px;
	color: white;
	cursor: pointer;
}
  • JQuery代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 获取所有的主菜单
var menus = $(".menu-item>a");
//绑定事件
for(var i=0;i<menus.length;i++){
	//给所有的主标题添加一个id
	menus[i].id=i;
	$(menus[i]).click(function(){
		//获取主标题下一级兄弟元素
		var sub = $(this).next();
		//切换状态
		sub.slideToggle("slow",function(){
			//获取显示
			var sf = sub.is(":visible");
			if(sf){
				//当前展开,其他关闭
				for(var j=0;j<menus.length;j++){
				  //获取当前展示的主标题的id
				  var cindex = sub.prev()[0].id;
				  if(cindex!=j){
					  //关闭
					  $(menus[j]).next().slideUp("slow");
				  }
				}
			}
		});
	});
}
// 打开新页面
function showPage(id,url){
	//获取iframe
	var c = $("#"+id);
	//设置iframe的src属性
	c[0].src=url;
}
----------------本文结束感谢您的阅读---------------