网页与HTML的关系
1、关于网页
1）在浏览器中输入网址， 打开一个网页
2）手机淘宝 与 微信小程
常见浏览器
| firefox | Edge | Safari | Chrome | IE | opera | UC | ||
|---|---|---|---|---|---|---|---|---|
| 桌面端 | 7.86% | 10.07% | 9.61% | 66.64% | --- | 0.97% | 2.43% | --- |
| 移动端 | --- | --- | 14.78% | 55.88% | 8.41% | --- | --- | 17.74% |
为什么一个网站在不同浏览器中显示内容相同
因为HTML语言定义了相同的格式，即便是在不同的浏览器下也能解析为相同的内容
2、关于html
1、打开一个html文件
网页是网站中的单独页面，而网页文件的格式通常是HTML
网页时构成网站的基本元素，它通常是由图片、链接、文字、声音、视频等元素组成
网页通常格式以 .htm 或者 .html 后缀结尾的文件，通常也叫HTML文件
2、HTML 是超文本标记语言（Hyper Text Markup Language）
描述网页的一种语言，不是编程语言，而是一种标记语言（创建文本写网页图片）
超文本：
1、呈现内容上超越了传统文本 有图片、声音、多媒体等内容（超越了文本）
2、可以从一个文件跳转到另一个文件
3、网页加载过程
前端人员开发代码 -> 浏览器显示代码（解析、渲染）-> 生成Web页面
web标准的指定
Web标准是由W3C组织和其他标准化组织指定的一系列标准的集合。
W3C（万维网联盟）是国际最著名的标准化组织
(1）那为什么要定这样的标准
浏览器不同，它们显示页面的标准必须统一，要求开发人员编写代码必须统一
除此之外，让Web的发展前景更广、内容能被广泛的设备访问、更容易被搜索引擎搜索、降低网站流量费用、网站更易于维护、提高页面浏览速度.
(2）网页标准的组成
主要包括结构、表现、行为
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学习的是HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS |
| 行为 | 行为是指网页模型的定义以及交互的编写，现阶段主要学习为JavaScript |
Web标准的最佳方案就是 结构、表现和行为相互分离（各自在对应文件中编写代码）
例如：（食堂分工）
一个简单的网页
一.基本语法概述
1、HTML标签是由尖括号包围的关键词，例如<html>
2、HTML标签通常是成对出现的，例如<html> 和 </html>,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
3、有些特殊标签必须是单个标签（很少），例如<br />,我们称为单标签
二.标签关系
包含关系、并列关系
三.基本结构
<html> <head> <title>Hello页面</title> </head> <body> 专业Hello 语句 </body> </html>
每一个网页都有结构标签（骨架标签），页面内容也是在这些基本标签上书写的
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大标签，我们称为根标签 |
| <head></head> | 文档的头部 | 在head标签中必须设置的标签为title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body><body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body中的 |
1、标题标签 <h1> - <h6> （*）
在网页中经常会使用到标题标签，HTML提供了6个等级的网页标题即<h1>~<h6>
<h1>我是一级标题</h1>
特点：
加了标题的文字会变得加粗，字号也会依数字变小变大；一个标题独占一行。
2、段落和换行标签（*）
将网页中的文字分段显示出来，HTML中<P>标签用于定义段落，将网页分成若干段
<p>我是一个段落</p>
特点：
文本可以随着浏览器的窗口大小，自动换行；段落彼此间有空隙
段落中的文字一般会从左往右依次排序，直到右端窗口位置换行。如果需要换行，则应使用换行标签<br />
<br />
特点：
单标签、段落有间隙，换行就是新的一行。
3、文本格式化标签
网页中文字的粗体、斜体或下划线等效果，就要用HTML格式化标签，使文字以特殊的方式显示。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong> 标签加粗 语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 更推荐使用<em> 标签倾斜 语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 更推荐使用<del> 标签删除线 语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins> 标签下划线语义更强烈 |
4、<div>和<span>标签（**）
和是没有语义的标签，它们都是盒子，用来装内容
<div>我是一个大盒子</div> <span>我是一个小盒子</span>
特点：
<div>标签用来布局，但是现在一行只能放一个<div>。 通俗来说大盒子
<span>标签用来布局，一行上可以多个<span>。小盒子
5、图像标签和路径（**）
在HTML标签中, img 标签用于定义HTML 页面中的图像
<img src="图像URL"/>
src是img标签必须的属性，用于指定图像文件的路径和文件名
所谓属性：就是属于这个标签的特性
图像标签的其他属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
注意：
图像标签可以拥有多个属性，必须写在标签名的后面；
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
属性采取键值对的格式，即key =“value” 的格式，属性=“属性值”
问题：图像标签哪个属性是必须要写的；图像标签中的alt和title属性区别
路径：
1）相对路径：以引用文件所在位置为参考基础，而建立出的目录路径
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 | |
| 下一级路径 | / | 图像文件位于HTML文件下一级 |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级 |
2）绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
6、超链接标签（**）
1）链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或者图像</a>
anchor 锚
属性作用
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中self为默认值，blank为在新窗口中打开方式 |
2）链接的分类
外部链接：外部网络地址 百度一下，你就知道
内部链接: index.html
空链接： #
下载链接： 链接中带文件或者压缩包
网页元素：网页中的各种元素，文本、图像、表格、音频、视频等都可以添加超链接
锚点链接：通过链接可以快速定位到页面中的指定位置 （href = "#元素id属性"）比如百度百科
基本标签
1、表格标签
1.1 表格标签主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好。
1.2 表格的基本语法
<table> <tr> <td>单元格中的文字</td> ...... </tr> </table>
1)<table></table>是用于定义表格的标签
2）<tr></tr> 标签用于定义表格中的行，必须嵌套在table中
3）<td></td> 用于定义表格中的单元格，必须嵌套在tr中
1.3 表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<table> <tr> <th>项目</th> ...... </tr> </table>
1.4 表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对于周围元素的对齐方式 |
| border | 数字值 | 规定表格单元是否拥有边框，默认为0，表示没有边框，其余值越大外边界越宽。 |
| cellpadding | 像素值 | 规定单元边缘与内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
1.5表格结构标签
表格标签中，分别用<thead> 标签 表格的头部区域、<tbody>标签 表格的主体区域, 可以分清楚表格的结构
注意：
1.<thead></thead> ：用于定义表格的头部，<thead>内部必须有<tr>标签。一般是位于第一行
2.<tbody></tbody> : 用于定义表格的主体，主要用于放数据本体
3.以上的标签都需要在table标签中方能生效
1.6 合并单元格
1.合并单元格方式
-
跨行合并：rowspan = “合并单元格的数量”
-
跨列合并：colspan = "合并单元格的数量"
2.目标单元格
-
跨行：最上侧单元格为目标单元格，写合并代码
-
跨列：最左侧单元格为目标单元格，写合并代码
3.合并单元格的步骤流程
-
先确定是跨行还是跨列
-
找到目标单元格，写上合并方式 ，例如 <td colspan="2"></td>
-
删除多余的单元格
2、标题标签
<body>
只是没有标题标签的文字
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
特点 ：1、随着h标签的数字越来越大，然后标题的大小变小
2、h标签 独占一行
通常来说 h1标签 在一个网页只定义一个，h1的内容是搜索引擎的关键字
3、段落标签
<body>
<p>内容1</p>
<p>内容2</p>
</body>
说明：p标签可以划定一个段落
特点：p标签定义的段落之间有一个空隙，将所包裹的内容单独成段，随着窗口大小自动换行
4、换行标签
<body>
<p>内容1 + </br>内容 </p> + </br>
</body>
说明：br 标签是html中唯一可以换行的标签 实际开发中很多程序员会写成<br>
基本表格标签
1.表格的认识
<body>
<!-- 表格标签 table 表格定义 -->
<table>
<!-- tr table row 表格的一行 -->
<tr>
<!-- td table data 表格的数据 -->
<!-- 包含关系 并列关系 -->
<!-- <td><strong>项目</strong></td> -->
<!-- 表头单元格 th table head 表头-->
<th>项目</th>
<th>单价（元）</th>
<th>数量</th>
<th>金额（元）</th>
</tr>
<!-- 数据新增一行，就在table中继续添加tr标记 -->
<tr>
<td>五年高考三年模拟</td>
<td>29</td>
<td>100</td>
<td>2900</td>
</tr>
</table>
</body>
2.表格的属性
- table的属性
- align 设置表格的水平位置 left 靠左 center 居中 right 靠右
- border 设置表格的边框 边框为0时，没有单元格边框 边框为1时，就有单元格
- cellpadding 设置内容 和单元格边界之间的举例
- cellspacing 设置（单元格边界——表格外边界)
- (单元格边界-单元格边界)，之间的距离
- width 设置表格的宽度 属性值： 数字、
- 百分比（相对于父元素的宽度值的百分数，父元素改变时，table也随之改变
- 注意： border的内容就是数字没有单位，其余 width\cell...\cell.. 以像素为单位
3.有序和无序列表
<!--无序列表 双标签 -->
<!-- ul中的li标签（列表项）没有顺序 -->
<!-- ul中除了li标签外，不能防止任何文字或者元素标签 -->
<!-- li中可以定义任意元素。 -->
水果：
<ul>
<li>
苹果
<img src="./images/电影_movie.png" width="16px" height="16px">
</li>
<li>
香蕉
<!-- 二级列表 ：一级列表的选项中嵌套一个列表 -->
<ul>
<li>台湾香蕉</li>
<li>云南香蕉</li>
</ul>
</li>
<li>西瓜</li>
</ul><body>
<!-- 有序列表 了解 -->
<!-- ol中的li标签（列表项）有顺序的 -->
<!-- ol中除了li标签外，不能防止任何文字或者元素标签 -->
<!-- li中可以定义任意元素。 -->
<ol>
<li>选项1
<ol>
<li>选项1-1</li>
<li>选项1-2</li>
</ol>
</li>
<li>选项2</li>
<li>选项3</li>
</ol>
</body>4.input表单元素
<body>
<!-- 重要 ： input表单元素 必须放置在表单域中 -->
<form>
<!-- 单标签：br hr -->
<!-- 输入标签 -->
<!-- input默认是一个输入框标签 input一行可以存在多个 -->
<!-- <input /> -->
<!-- input中type属性可以决定表单输入内容的类型 -->
<!-- type="button" 按钮 可点击-->
<!-- value="" 按钮的名称 -->
<input type="button" value="这是一个按钮"/> <br />
<!-- 复选框（多选框） -->
<!-- type="checkbox" 例如：记住密码 -->
<!-- 表单输入内容：键值对 name="" value="" -->
<!-- <input type="checkbox" />记住密码 -->
<!-- ArrayList add remove -->
<!-- menu 集合 = ["红烧肉"] -->
<input type="checkbox" name="menu" value="宫保鸡丁"/>宫保鸡丁<br />
<input type="checkbox" name="menu" value="红烧肉"/>红烧肉<br />
<input type="checkbox" name="menu" value="青椒肉丝"/>青椒肉丝<br />
<!-- 单选框 -->
<!-- type="radio" 例如：性别 -->
<!-- 表单输入内容：键值对 name="" value="" -->
<!-- sex = "female" -->
<input type="radio" name="sex" value="male"/>男<br />
<input type="radio" name="sex" value="female"/>女<br />
<!-- 文件选择 -->
<!-- type="file" 例如：文件上传 -->
<!-- upload = 文件路径（文件） -->
<input type="file" name="upload"/><br />
<!-- 文本输入 -->
<!-- type="text" input的默认type值就是text -->
<!-- 表单输入内容：键值对 name="" value="" -->
<!-- value实际上就是输入框输入的内容 -->
<!-- content = "输入的内容" -->
<input type="text" name="content" value=""/><br />
<!-- type="password" 基本与text一样 输入格式为密码 -->
<input type="password" name="password" value=""/><br />
<!-- type="number" 输入格式为数字 -->
<input type="number" name="number" value=""/><br />
</form>
</body>5.重置和提交
<body>
<h2>登录界面</h2>
<form action="服务器地址" method="post">
账号：<input type="text"/><br />
密码：<input type="password"/><br />
<!-- type = “submit” 提交按钮 -->
<!-- submit会将form中的所有表单内容
按照action的地址和method的上传方式上传 -->
<input type="submit" value="登录"/>
<!-- type = "reset" 重置按钮 -->
<!-- 一旦被点击，表单的所有内容将会被清空到初始状态 -->
<input type="reset" value="重置"/>
</form>
</body>6.lable标签
<body>
<h2>登录界面</h2>
<form action="服务器地址" method="post">
<!-- label 用for属性，指向对应表单元素input中的id属性 -->
<!-- 当用户点击对应的label，它的for属性指向的id属性所在输入框就能获取焦点 -->
<label for="user">账号：</label><input type="text" id="user"/><br />
密码：<input type="password"/><br />
<input type="submit" value="登录"/>
<input type="reset" value="重置"/>
</form>
</body>7.select标签
<body>
<!-- select 是表单元素 -->
<!-- name属性设置在 select中， value就是option中的字符 -->
<!-- city = "北京" -->
<!-- selected属性，selected ="selected" 下拉选项被默认选中 -->
选择所在城市
<select name="city">
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option selected="selected">重庆</option>
</select>
</body>CSS样式
1.CSS入门
<head>
<!-- 内部样式 -->
<!-- 设置一个style标签，在style标签中补充css的内容 -->
<style>
/* CSS的注释快捷键 Ctrl + / */
/* 选择器：针对特定名称或者属性的元素 */
/* h1针对body中的h1元素 */
h1{
/* 样式（style）属性 */
/* 设置字体颜色 */
color: red;
/* 设置字体大小 CSS中的值不加引号 */
font-size: 100px;
}
h1{color:red;font-size: 100px;}
</style>
</head>2.CSS中的选择器
选择分类： 基础选择器、 复合选择器
基础选择器 ：标签选择器、类选择器、id选择器 还有通配符选择
复合选择器 ： 将上述的基础选择器进行多个组合
3.CSS中的字体属性
<style>
/* 通配符 */
*{
font-size: 16px;
}
p{
/* 设置字体的大小 */
/* font-size: 50px; */
/* 设置字体样式 */
/* 字体的样式是由 系统决定的 */
/* 注释：如果系统中不存在对应的字体样式，
则字体会议默认的字体风格呈现 */
/* font-family: "楷体"; */
/* 当font-family的第一个参数设置字体加载不出时，由第二个参数设置字体 */
/* font-family: "楷体1",sans-serif; */
/* 设置字体加粗 */
/* font-weight: 1 ~ 1000 ; 值越大字体越粗 */
/* font-weight: normal; 默认粗细 400 正常粗细 */
/* font-weight: bold; 700 加粗 不同浏览器标准不同 */
/* 设置字体以何种方式显示 normal正常 italic斜体 */
/* font-style: normal; */
/* 复合写法 */
/* 复合写法 font: font-style font-weight font-size/line-height font-family */
/* font:normal bold 30px/30px "黑体",sans-serif; */
/* 复合写法中，必须保留 font-size font-family */
font:30px "黑体",sans-serif;
}
</style>对应标签对应设置属性
4.CSS中的文本属性
<style>
h1{
/* 浏览器中内置了英文颜色 */
/* color: red; */
/* 十六进制颜色 */
/* color: #ff0000; */
/* 十进制 */
/* color: rgb(255, 0, 0); */
/* QQ截图功能截取 目标颜色 十进制：按C 十六进制：Ctrl + C */
color: rgb(51,136,255);
color: #3388FF;
}
/* div 独占一行 */
div{
/* 设置背景颜色 */
background-color: orange;
/* 设置字体大小 */
font-size: 40px;
/* 设置标签中“文字”的位置 */
/* text-align: left\center\right */
text-align: center;
/* 为文本设置 下划线、删除线、上划线 */
/* text-decoration:underline; 下划线 */
/* text-decoration: line-through; 删除线*/
/* text-decoration:overline; 上划线 */
}
p{
font-size: 20px;
/* text-indent 缩进属性 */
/* 缩进两个字 */
/* 1em 代表一个字的大小，这个大小会随之字体变化而变化 */
/* text-indent:40px */
text-indent: 2em;
/* 设置行间距 */
line-height: 60px;
}
</style>同上，对应标签对应设置属性
常见的设置与效果
//居中
<style>
/* margina:auto 只能将块标记，进行水平居中 */
/* 绝对定位 居中 */
.a{
width: 300px;
height: 200px;
background-color: red;
/* margin: auto; */
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 150px);
}
}
</style>
//圆角
<style>
.a{
width: 300px;
height: 100px;
background-color: red;
/* border-radius 设置圆角 像素值、百分比 */
/* 像素设置 */
/* border-radius: 150px; */
/* 百分比设置 当前元素的宽高 * 10%*/
/* border-radius: 50%; */
/* border-radius: 100px; */
/* border-radius: 50%; */
/* border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 0px; */
}
img{
width: 100px;
height: 100px;
border-radius: 50%;
}
</style>
//阴影
<style>
.a{
width: 200px;
height: 200px;
background-color: blanchedalmond;
margin: auto;
/* 设置阴影 */
/* box-shadow 阴影的坐标位置 */
/* 0 0 是元素的中心点位置 */
/* box-shadow: 30px 30px 10px gray; */
}
.a:hover{
box-shadow: 0 0 10px #CCCCCC;
}
</style>
//背景渐变
<style>
.a{
width: 200px;
height: 200px;
/* 设置渐变色 */
/* linear-gradient 线性渐变 */
/* background-image: linear-gradient(red,green); */
/* background-image: linear-gradient(red,green,yellow); */
/* background-image: linear-gradient(10deg,red,green); */
/* background-image: radial-gradient(red,green); */
}
</style>JavaScript
JavaScript通常简称为JS，由网景(netScape)公司推出脚本语言。
是一门轻量级、弱类型、面向对象的解释型脚本语言。
弱类型：没有数据类型的限制、变量可以不用定义就使用
解释型：无需编译，通过解释器解释运行。浏览器就是一个JS的解释器。
脚本script：一系列指令。
JS的作用
HTML用于定义页面中的内容。
CSS用于控制HTML元素的外观和样式。
JS用于控制HTML元素的行为。
HTML+CSS+JS就是前端的三要素。
-
可以在页面中动态嵌入HTML元素
-
可以操作浏览器
-
与用户进行数据交互
…
JS写在哪里
1.写在某个标签的事件中
事件，如鼠标单击事件onclick，鼠标移入事件onmouseenter等
<button onclick="alert('hello js!')">点击按钮</button>
通常用于调用函数。
2.写在<script></script>标签中
该标签可以放在页面的任意位置，通常放在head中或body结束之前。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--放在head中-->
<script></script>
</head>
<body>
<!-- 放在body结束前 -->
<script>
// js代码，默认页面加载时就会执行
console.log("在控制台中输出");
</script>
</body>
</html>
3.将js写到一个独立的.js文件中，再通过<script>标签导入
-
新建一个.js文件，在其中编写js代码
-
在页面中
<html> <head> <meta charset="utf-8" /> <title></title> <script src=".js文件的路径" type="text/javascript" charset="utf-8"></script> </head> <body> </body> </html>
JS中的输出语句
1.弹出警告框
alert("hello");
2.控制台输出
console.log("hello")
3.页面中输出
document.write("hello");
JS的组成
1.ECMAScript
简称ES，是JS的前身，也是JS的标准。
其中要学习JS的核心语法，如数据类型、定义变量、控制语句等。
2.BOM(Browser Object Model)
浏览器对象模型，可以通过js的BOM控制浏览器的行为。
3.DOM(Document Object Model)
文档对象模型，这里的文档指HTML页面。
可以通过js的DOM控制页面中的元素。
ECMAScript
数据类型
基本类型和引用类型。
由于JS是弱类型语言，定义变量时不需要指定数据类型，所以这些类型作为了解既可。
基本类型
| 基本类型 | 说明 |
|---|---|
| 数值型number | 整数、小数都称为数值型 |
| 字符串string | 用引号引起来的都是字符串 |
| 布尔型boolean | true/false |
| 空null | 某个引用类型变量通过null设置为空 |
| 未定义undefined | 当某个变量没有声明或没有值时 |
引用类型
数组、对象、函数等都是引用类型，也称为本地对象
JS中定义变量
var 变量名;
//或
let 变量名;
var stu_name,age;
let sex;
JS中标识符的命名规则
标识符：变量名、方法名、类名统称为标识符
- 由字母、数字、下划线和$符号组成
- 不能以数字开头
- 不能使用JS中的关键字
- 命名时尽量使用单词或拼音，达到"见名知意"
变量的初始化
与java不同的是，JS中给某个变量赋什么值，它就是什么类型。
//先定义后赋值
var name;
name="小米";
//定义的同时赋值
var age=20,sex="男";
运算符
JS中的true可以用1表示，false可以用0表示。
算术运算符
//+ - * / %
var a = 5,
b = 3.2;
//+两端都是数值当做相加，有一端为字符串当做拼接
console.log(a + b);//8.2(number)
console.log("" + a + b);//53.2
console.log(a + b + "");//8.2(string)
console.log("xxx" + (a + b) + "xxx");xxx8.2xxx
// - * / % 必须是两个数值之间进行运算，如果有非数字参与运算，结果为NaN
//"2"可以参与运算，"b"不可以
//除+外，字符串类型的数字可以运算
console.log(a / "a"); //NaN not a number
console.log("5"/ "2");//2.5
// 除法正常显示结果
console.log(5 / 2);//2.5
// a%b a<b 结果为a
console.log(4 % 7);//4
关系运算符
//> < >= <= == != === !==
//> < >= <=用法同java
//js中的==表示判断两个数据字面量是否相同，不会比较数据类型
console.log("123" == 123);//true
//js中的===和!==表示判断两个数据的数据类型和字面量是否相同
console.log("123" === 123);//false
console.log("123" === "123");//true
console.log("123" !== 123);//true
逻辑运算符
//&& || !
//用法同java
//&&如果有一个为false,结果就为false,只有都为true,结果才为true。
//||如果有一个为true,结果就为true,只有都为false,结果才为false。
//!将原结果取反
赋值/复合赋值运算符
//= += -= *= /= %=
//a+=b表示a=a+b;
var a=3,b=4;
//a+=b;
//console.log(a);//7
//将符号两端的数据进行运算后，赋值给符号左侧的变量中
//a*=b+c相当于a=a*(b+c)
a*=b+5;//a=3*(4+5)
console.log(a);//27
自增自减运算符
//++ --
//a++表示a=a+1或a+=1
//--a表示a=a-1或a-=1
//如果符号在后，先使用后加减
//如果符号在前，先加减后使用
var n = 10;
// n++;
// ++n;
// console.log(++n);//11
// console.log(n);//11
// console.log(n++ + n); //10 + 11
// console.log(++n + n); //11 + 11
console.log(n++ + ++n); //10 + 12
console.log(n-- - --n); //12-10
条件运算符
//表达式一?表达式二:表达式三
//执行表达式一，如果为true,执行表达式二，如果为false，执行表达式三
//相当于双分支if语句if(表达式一){表达式二}else{表达式三}
运算符的优先级
小括号>>>单目运算符(++ – !)>>>算术运算符>>>关系运算符>>>逻辑运算符>>>条件运算符>>>复合赋值/赋值运算符
流程控制语句
条件语句
-
单分支if
if(布尔值){ } -
双分支
if(布尔值){ }else{ } -
多分支
程序从上往下执行，如果有某个if满足条件，则不再判断后续的if
if(布尔值){ }else if(布尔值){ }else{ } -
if嵌套
if(布尔值){ if(布尔值){} }else{ if(布尔值){} } -
switch
js中的switch语句的小括号可以判断任意类型的变量，case后数据的类型也可以不同。其它特性同java
switch(变量){ case 可能的情况: break; case 可能的情况: break; case 可能的情况: break; default: 没有任何case匹配时 break; }
如果条件能一一例举出来，使用switch语句，语法更为简洁。
如果条件是范围，只能使用if语句。
循环语句
-
while
while(循环条件){ 循环体; } 如果条件不成立则会停止循环。所以while循环有可能一次都不执行。 -
do-while
do{ 循环体; }while(循环条件); 先执行一次后再判断是否循环。所以do-while循环至少执行一次。 -
for
for(初始化循环变量;循环条件;更新循环变量){ 循环体; }
break和continue
-
continue表示停止本次循环，直接执行下一次循环
循环中遇到continue，不再执行后续代码，直接进入下次循环
var i=0; while(i++<=100){ if(i%2==0){ continue; } console.log(i); }
//打印0~100以内的奇数
- break表示停止整个循环
```js
var i=0;
while(true){
if(i++==50){
break;
}
console.log(i);
}
//打印0~49
数组
一组有序的数据集合，可以保存不同类型的数据，数组大小可变。
类似于Java中的ArrayList。以对象的形式存在。
- 可以保存不同类型的数据
- 可以改变数组大小
- 数组中的元素默认为undefined
定义数组
//创建一个指定大小的数组：var 数组名 = new Array(数组大小);
//这里的数组大小可以省略
var list1 = new Array(10);
//创建一个空数组：var list2 = [];
var list2 = [];
//创建一个拥有初始元素的数组
var list3 = new Array(元素1,元素2...);
var list4 = [元素1,元素2...];
数组的赋值和取值
- 赋值：数组名[索引]=值;
- 取值：var obj=数组名[索引];
遍历数组
-
普通for循环
遍历数组中的所有元素，包含undefined
for(var i=0;i<数组.length;i++){
var obj=数组[i];
}
var list=new Array(5,"hello",true);
list[10]="xxx";
//这时会打印11个元素，没有赋值的元素输出undefined
for(var i=0;i<list.length;i++){
console.log(list[i]);
}
-
“增强for循环”
遍历数组中的非undefined元素
for(索引 in 数组名){
var obj= 数组[索引];
}
var list=new Array(5,"hello",true);
list[10]="xxx";
//这时会打印4个实际存在的元素
for(index in list){
console.log(list[index]);
}
冒泡排序
//外层循环比较的轮数
for (var i = 1; i <= list.length - 1; i++) {
//内层循环每轮比较的次数
for (var j = 1; j <= list.length - i; j++) {
//如果不满足排序要求。升序用>，降序用<
if (list[j - 1] > list[j]) {
//交换位置
var temp = list[j - 1];
list[j - 1] = list[j];
list[j] = temp;
}
}
}
常用函数
| 函数 | 作用 |
|---|---|
| pop() | 移除最后一个元素 |
| push(object) | 添加元素到末尾 |
| shift() | 移除第一个元素 |
| unshift(object) | 添加元素到头部 |
| sort() /sort(function) | 无参表示将元素视为string，按第一个字符的ascii码升序排序。 有参时参数为指定的排序方式。 |
| every(function) | 验证数组中的元素是否都满足指定函数的要求 |
| some(function) | 检测数组中是否存在满足指定函数要求的元素 |
| indexOf(object)/lastIndexOf(object) | 得到指定元素第一次/最后一次出现的索引 |
| splice(start,length) | 从start开始截取length个元素 |
| join(string) | 使用指定的字符将所有元素拼接成一个整体字符串 |
| reverse() | 将数组中的元素倒序 |
Math
是一个包含了很多处理数学相关问题的对象。
如使用π、计算三角函数等方法。这些属性和方法直接通过Math调用。
Math对象的常用函数
| 常用属性和函数 | 作用 |
|---|---|
| Math.PI | 得到圆周率 |
| Math.E | 得到自然常数 |
| Math.abs(num) | 得到num的绝对值 |
| Math.pow(a,b) | 得到a的b次幂 |
| Math.max(a,b) | 得到a和b之间的 最大值 |
| Math.sqrt(num) | 得到num的平方根 |
| Math.cbrt(num) | 得到num的立方根 |
| Math.ceil(num) | 向上取整 |
| Math.floor(num) | 向下取整 |
| Math.round(num) | 四舍五入 |
| Math.random() | 得到[0,1)之间的随机数 |
- 得到[min,max)区间内的随机整数：
var num = Math.floor(Math.random() * Math.abs(max - min) + Math.min(max,min));
Date
用于表示日期时间的一个对象。
通过new关键字创建Date对象
var now = new Date();//创建当前日期时间对应的对象
Date对象的常用函数
| 常用函数 | 作用 |
|---|---|
| toLocaleString() | 将日期时间转换为本地形式的字符串 |
| toLocaleDateString() | 将日期转换为本地形式的字符串 |
| toLocaleTimeString() | 将时间转换为本地形式的字符串 |
| get/setFullYear() | 获取/设置年份 |
| get/setMonth() | 获取/设置月份(011表示112月) |
| get/setDate() | 获取/设置日期 |
| get/setDay() | 获取/设置星期(0~6表示周天到周六) |
| get/setHours() | 获取/设置小时 |
| get/setMinutes() | 获取/设置分钟 |
| get/setSeconds() | 获取/设置秒 |
| get/setTime() | 获取/设置时间戳(1970年1月1日至指定时间经过了多少毫秒) |
字符串
JS中的字符串实际是一个字符数组，可以通过下标获取指定索引上的字符。
var str="hello world";
//可以直接将字符串视为数组使用
console.log(str[0]);
字符串常用函数
| 常用函数 | 作用 |
|---|---|
| toUpperCase()/toLowerCase() | 转换为大写/小写 |
| trim() | 去掉首尾空格 |
| sub()/sup() | 文字下标/上标 |
| charAt(index) | 得到index索引对应的字符 |
| indexOf(string)/lastIndexOf(string) | 得到string第一次/最后一次出现的索引，如果不存在，返回-1 |
| substr(index)/substring(index) | 从下标index开始截取至字符串末尾 |
| substr(start,length) | 从下标start开始截取length个字符 |
| substring(from,to) | 截取[from,to)区间内的字符 |
| split(string) | 根据string切分字符串，得到字符串数组 |
| replace(旧字符,新字符) | 替换满足要求的第一个字符串 |
| replaceAll(旧字符,新字符) | 替换满足要求的所有字符串 |
| replace(正则表达式,新字符) | 按正则表达式替换 |
正则表达式
一套自定义规则。用于检索、修改满足规则的字符串。
//创建一个正则表达式
var reg=/规则/;
//reg.test(参数)//验证参数是否满足正则表达式的规则
| 规则 | 说明 | 举例 |
|---|---|---|
| /a/ | 匹配指定字符 | 匹配字母"a" |
| /abc/ | 匹配指定字符 | 匹配字符"abc"整体 |
| /[abc]/ | 匹配指定范围内的字符 | 匹配"a"或"b"或"c" |
| /[a-z]/ | 匹配指定范围内的字符 | 匹配所有的小写字母 |
/[^a]/ | 匹配除指定字符之外的字符 | 匹配除字母"a"以外的字符 |
/[^0-9]/ | 匹配除指定数字之外的字符 | 匹配非数字 |
| /\d/ | 匹配数字 | 匹配0-9 |
| /\D/ | 匹配非数字 | 匹配除0-9以外的字符 |
| /\w/ | 匹配字母、数字和下划线 | 相当于[a-zA-Z0-9_] |
| /\W/ | 匹配非字母、数字和下划线 | 相当于[^a-zA-Z0-9_] |
| /\s/ | 匹配空格 | |
| /\S/ | 匹配非空格 |
| 规则 | 说明 | 举例 |
|---|---|---|
| /q{2}/ | 匹配2个指定字符 | 匹配qq |
| /q{2,5}/ | 匹配2-5个指定字符 | 匹配2个、3个、4个或5个q |
| /q{2,}/ | 匹配至少2个指定字符 | |
| /q+/ | 匹配至少1个指定字符 | 相当于q{1,} |
| /q?/ | 匹配0个或1个指定字符 | 相当于q{0,1} |
| /q*/ | 匹配0个或多个指定字符 | 相当于q{0,} |
| ^ | 从头开始匹配 | |
| $ | 匹配到结尾 | |
| g | 全局匹配 | |
| i | 忽略大小写匹配 |
jQuery
入门导读
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
jQuery是一个主流的优秀的JavaScript类库，是由John resig在2006年1月创建的。
jQuery库包含核心库、UI、插件和jQuery Mobile等模块。（LayUI）
jQuery凭借着强大的选择器、链式操作以及出色的浏览器兼容性，极大的简化访问和更新HTML页面、DOM操作、事件处理以及执行动画等操作。
“写得少，做的多“
JavaScrit库
jQuery 库包含以下功能：
- HTML 元素选取 √
- HTML 元素操作 √
- CSS 操作 √
- HTML 事件函数 √
- JavaScript 特效和动画
- HTML DOM 遍历和修改 √
- AJAX √
- Utilities
jQuery概述
通过封装JS代码的方式简化 操作
jQuery基本使用-文档就绪事件
$(document).ready(function(){
//代码内容
});
还有更简洁的做法
$(function(){
// 开始写 jQuery 代码...
});
jQuery顶级对象$
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
-
$(this).hide() - 隐藏当前元素
-
$(“p”).hide() - 隐藏所有
元素
-
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
-
$(“#test”).hide() - 隐藏 id=“test” 的元素
DOM对象和jQuery对象
1、jQuery获取的对象，不能直接使用DOM中的方法
2、JQuery获取的对象加上[] 后可以使用DOM中的内容（包括使用get() 方式）
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3、同一函数实现set和get
$("#msg").html(); // 返回id 为msg 的元素节点的html 内容。
$("#msg").html("<b>new content</b>"); // 将“<b>new content</b>” 作为html 串写入id 为msg 的元素节点内容中, 页面显示粗体的new content
$("#msg").text(); // 返回id 为msg 的元素节点的文本内容。
$("#msg").text("<b>new content</b>"); // 将“<b>new content</b>” 作为普通文本串写入id 为msg 的元素节点内容中, 页面显示<b>new content</b>
$("#msg").height(); // 返回id 为msg 的元素的高度
$("#msg").height("300"); // 将id 为msg 的元素的高度设为300
$("#msg").width(); // 返回id 为msg 的元素的宽度
$("#msg").width("300"); // 将id 为msg 的元素的宽度设为300
$("input").val("); // 返回表单输入框的value 值
$("input").val("test"); // 将表单输入框的value 值设为test
$("#msg").click(); // 触发id 为msg 的元素的单击事件
$("#msg").click(fn); // 为id 为msg 的元素单击事件添加函数
4、集合处理
使用each 配合函数可以做集合的遍历和处理
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) // 为索引分别为0 ，1 ，2 的p 元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) // 实现表格的隔行换色效果
$("p").click(function(){alert($(this).html())}) // 为每个p 元素增加了click 事件，单击某个p 元素则弹出其内容
5、扩展 JQuery对象
$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); // 为jquery 扩展了min,max 两个方法
6、链式写法
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
7、元素操作
$("#msg").css("background"); // 返回元素的背景颜色
$("#msg").css("background","#ccc") // 设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200"); // 设定宽高
$("#msg").css({ color: "red", background: "blue" });// 以名值对的形式设定样式
$("#msg").addClass("select"); // 为元素增加名称为select 的class
$("#msg").removeClass("select"); // 删除元素名称为select 的class
$("#msg").toggleClass("select"); // 如果存在（不存在）就删除（添加）
jQuery基本和层级选择器
基础选择器的使用
复合选择器的使用
jQuery隐式迭代
let arr = document.querySelectorAll('li')
for(let i = 0;i < liArr.length;i++) {
arr[i].onclick = function () {
console.log('原生循环');
}
}
// 隐式迭代实现
$(function () {
$('li').on('click',function () {
console.log('隐式迭代');
})
})
//可以用无序列表体验一下
jQuery筛选选择器
属性筛选选择器
[att=val] 选取att属性等于val的标记
[att] 选择有att属性的标记
[att|=val] 选取att中以val开头的属性
[att~=val] 选取att中包含val的属性
[att^=val] 选取att中以val开头的属性
[att*=val] 选取att中包含val的属性
[att$=val] 选取att中以val结尾的属性
[att!=val] 选取att中不包含val的属性
jQuery筛选方法-选取父子元素
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，
比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),
但是是查找所有祖先元素，不限于父元素
jQuery.children(expr).返回所有子节点，这个方法只
会返回直接的孩子节点，不会返回所有的子孙节点
jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是
从初始的jQuery对象集合中筛选出一部分，而jQuery.find()
的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从
p元素开始找,等同于$("p span")
新浪下拉菜单
jQuery其他筛选方法
在jQuery对象数组中，过滤出一部分元素 ：
1)、首先获取ul中所有的li子元素，即会产生一个li数组uls
var uls =$("ul>li");
2)、first()：获取数组uls中的第一个元素，即第一个li标签.
ls.first().css({"background":"pink"});
3)、last()：获取数组uls中的最后一个元素，即最后一个li标签.
=uls.last().css({"background":"pink"});
4)、eq(index):从数组uls中找到下标为2的元素.
uls.eq(2).css({"background":"pink"});
4.1)、从数组uls中找到倒数第2个元素.
uls.eq(-2).css({"background":"yellow"});
5)、filter(selector)：匹配到类名为sa的元素。
uls.filter(".sa").css({"background":"yellow"});
5.1)、匹配到有属性title，并且值为a的元素.
uls.filter("[title=a]").css({"background":"yellow"});
5.2)、匹配到属性title的值不为a的元素
uls.filter("[title!=a]").css({"background":"yellow"});
5.3)、匹配到有title属性，且属性值不为a的元素.
uls.filter("[title][title!=a]").css({"background":"yellow"});
5.4)、从数组uls中过滤出有title属性的元素集合.
uls.filter("[title]").css({"background":"blue"});
6)、has(selector)：从数组uls中过滤出有<span>标签的元素集合.
uls.has("span").css({"background":"blue"});
7)、从数组uls中过滤出没有title属性的元素集合.
uls.not("[title]").css({"background":"blue"});
jQuery排他思想
1、siblings
语法：siblings(selector)
用法：$(".frist").siblings(“li”)
说明：查找兄弟节点，不包括自身元素
2、排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
16-淘宝服饰精品案例
jQuery链式编程
jQuery修改样式css方法
| css() | 设置或返回匹配元素的样式属性。 |
|---|---|
| height() | 设置或返回匹配元素的高度。 |
| offset() | 返回第一个匹配元素相对于文档的位置。 |
| offsetParent() | 返回最近的定位祖先元素。 |
| position() | 返回第一个匹配元素相对于父元素的位置。 |
| scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
| scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
| width() | 设置或返回匹配元素的宽度。 |
jQuery修改样式操作类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
tab栏切换案例
jQuery类操作和className区别
jquery 相当于类名的追加
className相当于覆盖
jQuery显示与隐藏效果
show()
hide()
jQuery滑动效果以及事件切换
jQuery停止动画排队stop
jQuery淡入淡出以及突出显示案例
jQuery自定义动画animate方法
王者荣耀手风琴案例布局分析
王者荣耀手风琴案例制作
jQuery属性操作
| 方法 | 描述 |
|---|---|
| attr() | 设置或返回匹配元素的属性和值。 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
购物车模块-全选（上）
购物车模块-全选（下）
jQuery内容文本值
$("#msg").html(); // 返回id 为msg 的元素节点的html 内容。
$("#msg").html("<b>new content</b>"); // 将“<b>new content</b>” 作为html 串写入id 为msg 的元素节点内容中, 页面显示粗体的new content
$("#msg").text(); // 返回id 为msg 的元素节点的文本内容。
$("#msg").text("<b>new content</b>"); // 将“<b>new content</b>” 作为普通文本串写入id 为msg 的元素节点内容中, 页面显示<b>new content</b>
$("input").val("); // 返回表单输入框的value 值
$("input").val("test"); // 将表单输入框的value 值设为test
购物车模块-增减商品数量
购物车模块-修改商品小计
jQuery遍历对象each方法
$('div').each(function(){
if($(this).is(':hidden')) return;//跳过隐藏的元素
//对可见的元素操作
});
jQuery遍历数据$.each
var myArray = ["apple", "mango", "orange", "grapes", "banana"];
$.each(myArray, function (index, value) {
console.log(index+' : '+value);
});
购物车模块-计算总件数和总额
创建、添加、删除元素
创建元素
$("<li></li>"); // 动态创建了一个li标签
内部添加
// 把内容放入到元素的最后面
element.append("内容");
// 把内容放入到元素的最前面
element.prepend("内容");
外部添加
// 把内容放到元素最后面
element.after("内容");
// 把内容放到元素最前面
element.before("内容");
删除元素
// 删除匹配元素本身 自杀
element.remove();
// 删除匹配元素中所有的子节点 也就是删除孩子
element.empty();
// 清空匹配的元素内容 也是删除孩子
element.html("");
购物车模块-清理购物车
购物车模块-选中商品添加背景颜色
jQuery自动触发事件
<div class="login-btn">
<input type="button" value=“登录” onclick="checkLogin"/>
</div>
$("login-btn input").trigger("click")总结
整个HTML内容远不止这些，但也是我们必须经历的。基本标签很多需要我们不断积累，才能熟练掌握。其中每个方面的结构、方法、以及原理都是需要我们不断的练习尝试才能得出结果。
web标准有三层结构：分别是结构（html）,表现（css）和行为（Javascript）
其中结构类似人的身体，表现类似人的穿着，行为类似人的行为动作。
理想状态下，他们三层相互独立，放在不同的文件中
扫一扫
2264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
