Web前端技术
一、HTML网页
HTML（超文本标记语言）：通过文字和标签配合来制作网页内容
HTML语法结构：
- 一个文档标记：<！DOCTYPE HTML>
- 根标签：< html >
- 头标签：< head > ——头标签储存一系列对当前网页进行配置的内容
- < meta >：元素可提供有关页面的元信息
- < title >：网页的标题部分
- 主体标签：< body > ——主体标签的内容讲显示在网页中
- 超链接：a——用作网页、链接跳转，还可以作为锚使用
- 块级标签：div、span ，无状态块标签。用于给网页内容进行分块，方便对容器中的元素进行统一控制。
- 表格标签: table ，用于在网页中制作表格显示内容
- 图片标签: img,用于在网页中引入图片
- 列表标签：ul、ol、dl
- 表单标签: form,用于在网页中制作-个表单，用于接收用户输入数据提交给程序使用
- 输入框: input，有明文输入框、密码输入框、单选框、复选框、日期框…
- 下拉框：select、option
- 按钮：button
- 头标签：< head > ——头标签储存一系列对当前网页进行配置的内容
思考：
1、绝对路径和相对路径有什么区别？
2、表单的提交方式(method) 有哪些?它们有什么区别?
二、CSS网页渲染
CSS是层叠样式表。用来对网页中的元素进行美化，进行样式修饰。
- CSS常用内容：
- 选择器：选择器是用来在标签外部选择标签元素的语法。
-
- 标签选择器
- id选择器
- 类选择器
- 组合选择器
- 层级选择器
- 伪类
-
- 盒子模型:页面中的元素通过一系列属性设定让其占有一定的页面空间，此时这个元素就类似一个盒子了，我们可以通过相关属性规定盒子的大小。
- 宽: width
- 高: height
- 背景：background
- background-color
- background-image
- 边框:border
- border-radius
- 内边距: padding
- 外边距:margin
- 内容: context
- 定位:提供了一些对页面元素位置进行控制的样式。
- 漂浮: float
- 清除浮动：clean
- 定位:position
- 静态（默认）定位: static
- 相对定位: relative
- 绝对定位: absolute
- 固定定位: fixed
- 粘性定位: sticky
- 漂浮: float
- 常用样式
- 文本类
- 文字风格:font-family
- 文字大小: font-size
- 文本对齐方式: text-align
- 文本行高:line-height
- 文本颜色: color
- 元素内容溢出处理: overflow
- 文本类
- 列表类
- 列表样式控制:list-style
- 元素显示:displayopacity
- 过渡: transition
- 选择器：选择器是用来在标签外部选择标签元素的语法。
思考：
1、什么是css的就近原则
2、网页的布局方式有哪些?
3、css定位属性中，绝对定位、相对定位、固定定位有什么区别?
三、JavaScript脚本语言
JavaScript是一门可以在浏览器引擎中直接解释运行的脚本语言。
JS和Java相比，JS是弱类型语言，JS是面向对象的，更重要的是JS是基于对象的，大部分常用的浏览器对象JS都为我们内置好了，直接使用即可。
1、基础语法
JS代码需要写在脚本区中，脚本可以放在页面的任何位置。
在JS中，所有的数据类型都是以var , let 、const 来定义，数据的类型在进行运算时能够完成隐式转换。
JS的运算和Java类似。
JS的流程控制语句也和Java类似。但是JS没有Java的foreach 循环，但是提供了其他的增强for循环，比如forin。
JS支持自定义对象，对象的定义是通过JSON语法来完成的。
JS支持函数，语法格式:
// 普通函数
function 函数名 ( v1 , v2 , ...){
方法体;
return 返回值;
}
//匿名函数
var 对象名 = function (){
}
JS所有的函数内部都内置了-一个arguments参数对象,不管我们传入对少个参数,都会存入arguments进行保存。
- JS中有很多内置对象，其中比较重要的内置对象有两个: window 对象和events对象。
- window: 代表整合浏览器窗口，所有和窗口相关的操作都是它或它的子对象提供的。
- 包含了一些全局方法:各种弹出框、定时任务、关闭窗口
- Navigator: 包含了对浏览器的各项信息的描述，可用于获取浏览器、操作系统等信息。
- Screen:代表浏览器窗口，可以用于获取浏览器窗口的大小、边距等信息。
- History:代表浏览器历史记录，可用于获取历史记录条目以及完成前进、后退等功能。
- Location:代表浏览器当前窗口的URL，可用于获取URL信息或者改变URL完成页面跳转。
- document:代表当前页面显示的文档对象。可用于获取文档中的元素、对元素进行增删改等操作。
- window: 代表整合浏览器窗口，所有和窗口相关的操作都是它或它的子对象提供的。
思考：
JS中的var、let、const 关键字用来修饰变量时，有什么区别?
2、事件处理
JS 事件是沟通用户与程序的桥梁。当用户操作网页元素时，就会触发某些事件，我们可以给这些被触发的事件绑定处理函数来达到和用户交互的效果。
在用户操作网页时，触发的事件会生成一个对应的事件对象（event），该对象会在浏览器中进行传递，根据事件机制不同，event 对象的传递方式也不同。
- 冒泡型事件：事件对象从发生事件的具体元素开始，逐级向上传递。
- 捕获型事件：事件对象从 window 开始产生，逐级向下传递，直到找到具体发生该事件的元素。
- 常用 JS 事件类型：
- 页面加载事件
- 鼠标事件
- 鼠标单击事件
- 鼠标移动事件
- 键盘事件
- 按键事件
- 表单事件
- 表单提交事件
- 输入框事件
- 下拉菜单切换事件
事件处理函数的绑定：
- 直接在元素标签内部绑定事件处理函数
- 在 JS 对象上绑定事件处理函数
思考
JS 的事件机制有哪些？默认的事件传递机制是什么？
练习
- 通过 JS 实现页面中一组复选框的 全选/全不选
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#" method="post">
<input type="checkbox" onclick="check(this);"/><br>
<input type="checkbox" name="hobby"/> 篮球<br>
<input type="checkbox" name="hobby"/> 电影<br>
<input type="checkbox" name="hobby"/> 摄影<br>
<input type="checkbox" name="hobby"/> 游戏<br>
<input type="checkbox" name="hobby"/> 阅读<br>
<input type="checkbox" name="hobby"/> 编程<br>
</form>
</body>
</html>
JavaScript部分
<script type="text/javascript">
/* 全选 / 全不选控制函数 ，每次点击总控制框都会触发此函数 */
function check(v){
// 获取页面内所有表示爱好的一组复选框
var arr = document.getElementsByName("hobby");
// 判断当前总控制框的勾选状态
if(v.checked){
// 如果勾选了全选，那么遍历所有爱好复选框，给他们勾选状态设置为true
for (let i in arr) {
arr[i].checked = true;
}
}else{
// 如果勾选了全不选，那么遍历所有爱好复选框，给他们勾选状态设置为false
for (let i in arr) {
arr[i].checked = false;
}
}
}
</script>
- 通过 JS 实现一个二级联动。（省、市数据自定）
当页面加载完成后，先直接生成 省 下拉框的省份
当切换所选省份时，在二级市菜单中生成对应省份的下属市
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id="province" style="text-align: center;"onchange="change(this.value);">
<option value="">---省---</option>
</select>
<select id="city">
<option>---市---</option>
</select>
</body>
</html>
<script type="text/javascript">
/* 自定义静态数据模拟数据库获取的数据 */
// 省数据
var arr = ["北京市","广西壮族自治区","山西省"];
// 市数据
var arr1 = ["朝阳区","海淀区","昌平区"];
var arr2 = ["南宁市","来宾市","防城港市"];
var arr3 = ["太原市","大同市","晋城市"];
/* 页面加载完成后，触发回调函数，加载省的子节点 */
// 页面加载完成后，触发加载完成事件
window.onload = function(){
// 获取省下拉框的父节点
var province = document.getElementById("province");
// 遍历省数据，创建一个一个的新的下拉框子节点
for (let i in arr) {
var o = document.createElement("option");
o.setAttribute("value",arr[i]);
o.innerHTML = arr[i];
// 通过省下拉框父节点将创建的子节点添加到页面元素中
province.appendChild(o);
}
}
/* 二级联动 菜单切换处理函数 */
function change(v){
// 获取市下拉框父节点
var city = document.getElementById("city");
// 只要切换了选择的省，那么先清空上一次的市信息
city.innerHTML = "";
//判断所选省份的值，确定要使用的市数据
if(v == "北京市"){
// 遍历确定的市数据，创建一个一个的市子节点
for (let i in arr1) {
var o = document.createElement("option");
o.setAttribute("value",arr1[i]);
o.innerHTML = arr1[i];
// 通过市父节点将创建的子节点加到市下拉框中
city.appendChild(o);
}
}else if(v == "广西壮族自治区"){
// 遍历确定的市数据，创建一个一个的市子节点
for (let i in arr2) {
var o = document.createElement("option");
o.setAttribute("value",arr2[i]);
o.innerHTML = arr2[i];
// 通过市父节点将创建的子节点加到市下拉框中
city.appendChild(o);
}
}else if (v == "山西省"){
// 遍历确定的市数据，创建一个一个的市子节点
for (let i in arr3) {
var o = document.createElement("option");
o.setAttribute("value",arr3[i]);
o.innerHTML = arr3[i];
// 通过市父节点将创建的子节点加到市下拉框中
city.appendChild(o);
}
}else {
city.innerHTML = "<option>---市---</option>";
}
}
</script>
思考：
1、JavaScript中的== 和 ===有什么区别?
2、JS的事件机制有哪些?默认的事件传递机制是什么?
3、什么是JS的闭包?
四、jQuery
jQuery是JavaScript库，jQuery提供了很多常用的JavaScript操作，并且在原生JS的基础上做了封装和优化。jQuery默认的对象名称是$。
jQuery常用操作：
- johery 与JS的相互转换
- jQuery大部分情况下获取到的页面对象是一个集合，只能调用jQuery提供的方法，如果想要使用JS原生的属性、方法的话，就需要讲jQuery对象转换成JS对象。
- 遍历集合jQuery对象集合：each
- jQuery选择器：参考文档，CSS支持的选择器，jQuery都支持。它可以直接选取部分页面元素集合。
- jQuery的筛选：jQuery提提供了一些列筛选方法，用于对通过选择器选择的元素对象集合进行二次筛选。
- eq:通过索引获取集合中的某个单独的元素对象。
- **filter:**通过筛选条件对当前集合进行筛选。
- find:通过筛选条件筛选当前集合中元素的子元素。
- hasClass:用于判断当前集合中的元素是否包含某个class属性
- is:用于判断当前集合中是否至少有一个元素满足给定条件
- parent:用于获取当前对象的父对象
- map:用于将选定jQuery集合中的元素通过一定逻辑转换成数组
- jQuery操作网页文档
- 操作标签元素对象
- 操作元素内部属性
- 操作元素样式
- jQuery事件处理
- 提供了一些简易的事件绑定函数
- 提供了一些通用的事件绑定函数
- jQuery简易动画
- jQuery的异步请求交互Ajax
思考:
1、jQuery的 filter方法和find方法有什么区别?
2、什么是事件委派机制?
五、bootstrap
bootstrap是一个局域HTML、CSS、JS、jQuery等基础技术开发的页面渲染框架，它提供了一种非常简单的方式来为页面元素添加样式渲染以及交互处理。
- bootstrap的使用
- 下载bootstrap
- 将相关类库引入需要使用bootstrap的页面
- 参考官网在自己的工程页面中使用bootstrap的功能
- 手动添加页面内容(HTML 标签+文本)
- 参考官网例子将合适的class类添加到对应标签元素中
- bootstrap的布局方式
- bootstrap默认使用容器布局container进行布局。
- bootstrap默认(最常用)布局方式是栅格系统布局。它将页面通过流式布局分为最大12个列。容器中的每一行中都可以拥有 N个列，这些列瓜分这12个列空间。
- bootstrap的常用类
- 列表类
- 表格类
- 表单类
- 按钮类
- 动画类
JS库、插件使用基本步骤:
1.通过官方插件库或网络搜索需要的插件
2.下载插件
3.将类库、插件等导入到工程页面中
4.参考插件指导手册、入门使用、Demo等,测试插件是否可用
5.引入工程中使用
4780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
