Web前端知识系列（包括web前端全部知识点）

原创

软件小生活

修改于 2021-09-07 10:41:02

2.2K0

修改于 2021-09-07 10:41:02

文章被收录于专栏：软件小生活软件小生活

Web前端课程

【课程概述】：

知识体系:

1)HTML

2)CSS

3)JavaScript

4)Web前端框架

lJquery

lbootstrap

5)5)Ajax

1.HTML

1.1.为何学习HTML

1.2.HTML.概述

HTML：Hyper Text Markup Language ：超文本标记语言。

超文本：功能比普通文本更加强大

标记语言：使用一组标签对内容进行描述的语言，

W3C组织 [n1]

学习HTML的途径 [n2]

1.3.HTML语言特点

1)HTML文件不需要编译,直接使用浏览器阅读即可

2)HTML文件的扩展名是.html或.htm

3)HTML结构都是由标签组成

标签名预先定义好的，我们只需了解其功能即可

标签名不区分大小写

通常情况下标签由开始标签和结束标签组成。例如<a></a>

如果没有结束标签,建议以/结尾。例如:<img/>

4)HTML结构包括两部分: 头(head)和身体(body)

1.4.HTML基本结构

到此，我们已经对HTML有了最基本的了解也知道如何制作一个HTML基本框架了，但是离我们案例的效果还差的很远，因为我们需要学习HTML中标签！！！

1.5.HTML标签

1.5.1.基础标签1

1.5.1.1.标题标签

代码效果：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标题标签</title> </head> <body> <!--标题标签--> <h1>公司简介</h1><br /> <h2>公司简介</h2><br /> <h3>公司简介</h3><br /> <h4>公司简介</h4><br /> <h5>公司简介</h5><br /> <h6>公司简介</h6><br /> <h100>公司简介</h100> </body> </html>

1.5.1.2.水平线标签

代码效果:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h1>公司简介</h1><hr size="10"/><hr size="10" noshade="noshade"/></body></html>

1.5.1.3.段落标签

<p>标签用于在网页中定义段落

代码效果:

<p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。<p/><p>北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。</p>

1.5.1.4.字体标签

color:设置字体的颜色，可使用英文单词或者 16 进制

size：设置字体的大小，从 1 到 7 逐渐变大，最大显示为 7

face：设置字体

代码效果:

<font color="#ff0099" size="1">我是个大好人</font><br/><font color="#ff0099" size="2">我是个大好人</font><br/><font color="#ff0099" size="3">我是个大好人</font><br/><font color="#ff0099" size="4">我是个大好人</font><br/><font color="#ff0099" size="5">我是个大好人</font><br/><font color="#ff0099" size="6">我是个大好人</font><br/><font color="#ff0099" size="7" face="宋体">我是个大好人</font><br/></body></html>

案例1-网站信息显示页面

【效果图】：

【思路分析】：

第一步：创建一个 HTML 文件

第二步：创建一个标题标签显示公司简介

第三步：创建一个水平线标签

第四步：创建四个段落标签分别显示公司简介的一些文字性描述内容。

第五步：对文字内容进行完善(加粗、变色等设置)

代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h2>公司简介</h2><hr/><p><font color="red">拍拍网是京东战略收购的原腾讯电商旗下业务。</font>拍拍网致力于打造一个<i>卖家和买家</i>互联互通的<b>C2C</b>平台，通过提供包括服装服饰，母婴，食品和饮料，家居家装和消费电子产品等在内的丰富的产品，来全面满足消费者的需求。与此同时，拍拍网也为第三方卖家提供数据挖掘和分析等增值服务，这些增值服务将帮助卖家对消费者和市场做出精准分析，并为其产品规划和开展精准营销提供支持。通过布局拍拍网，京东正式进军C2C领域，京东原有的电商生态也在B2C的基础上得到了进一步丰富。</p><p>拍拍网将秉持“坚决杜绝假货”和“更公平的流量分配体系“两条核心原则，扶持包括大学生、中小商家、农民等广泛的电子商务创业者群体，建立公平，透明的商家生态，吸纳优质商家和商品入驻，并充分保障中小卖家的权益，在帮助中小卖家的健康成长同时，服务好最终消费者。</p><p>拍拍网建立规则公平和透明的流量分发体系，尤其是要帮助中小卖家成长。现在C2C市场内在的生态环境非常恶劣，优质的商家和商品需要支付高昂的广告和推广费用才能得到商品的曝光。拍拍网会建立更加科学和公平透明的流量分配机制，重视商家的服务质量，降低刷销量带来的搜索权重等。拍拍网将会充分保护中小卖家的权益，让他们在拍拍的平台上真正赚到钱。</p></body></html>

到此我们已经学会了一些HTML中最基本的标签，但是我们试想一下，如果是这样子的一个网站，我们去了一次那么下次应该就不会再去了，为何呢?

1.5.2.基础标签2

1.5.2.1.图片标签

<img/>标签的 src 属性。

src：图片资源的路径

width：设置图片的宽度

height：设置图片的高度

alt：当图片无法正常显示的时候给出的提示信息，它的显示效果与浏览器有关

代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><img src="mm/mm2212.jpg" width="100" height="50" alt="网络故障"></body></html>

案例2-网站图片信息显示页面

效果图:

实现思路:

第一步：创建一个 html 文件

第二步：创建一个图片标签显示 logo 图片

第三步：创建一个图片标签显示 header 图片

代码效果:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><img src="img/5b9e0b56ce722.png" height="51" alt=""><img src="img/header.png" alt=""></body></html>

图片路径问题:

当前目录：直接写文件名称或者./文件名称

上一级目录：../文件名称

上上一级目录: ../../文件名称

下一级：目录名称/文件名称

1.5.3.基础标签4

1.5.3.1.列表标签

效果:

列表标签分类:

1)有序列表

ol用来定义有序列表

2)无序列表

ul用来定义无序列表

不管是有序的ol还是无序的ul，都需要结合li定义列表项一起配合使用，否则无意义！

代码:

<ul> <li>百度</li> <li>腾讯</li> <li>阿里巴巴</li> </ul></body></html>

<ol> <li>百度</li> <li>腾讯</li> <li>阿里</li></ol>

无序列表ul的type属性取值: A、a、I、i、1等

有序列表ul的type属性取值:disc[n3](实心圆)、square(方块)、circle(空心圆)

1.5.4.基础标签3

1.5.4.1.超链接标签

在网页中使用a标签

A标签是超链接，是在html页面提供一种可以访问其他位置的实现方式

效果:

<body><a>我是超链接</a></body>

超链接的常见属性:

src属性写上你要访问的网页路径 (1.可以是一个网页 2.可以是一个网址 3. #空链接)

target属性:确定以何种方式打开href所设置的页面,常见取值:_blank、_self等

_blank 在新窗口中打开href确定的页面

_self默认,使用href确定的页面替换当前页面

代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><a href="01-水平线标签.html">我是超链接</a></body></html>

1.5.5.基础标签5

1.5.5.1.表格标签

表格效果在网页中有很多地方都有，例如:咱们这个网站首页，需要进行排版，就需要使用到表格

在网页中实现表格效果，使用一个标签：table

常用的子标签

<tr>:行

常用子标签:

<td>:列

<th>:表头单元格默认居中加粗

注意:

一行必须有一个单元格或者一列

代码:

<body><table> <!--生成一个一行三列的表格--> <tr> <td>百度</td> <td>腾讯</td> <td>阿里</td> </tr></table></body></html>

table 的常用属性:

border:边框像素值 [n4]

width [n5]:宽度

align:[n6]表格对齐方式

bgcolor:表格背景颜色

代码:

<table border="1px" width="300px" align="right"> <!--生成一个一行三列的表格--> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr></table></body>

跨列合并 [n9]:

<table border="1px" width="300px" align="center" height="300px"> <tr> <td>11</td> <td colspan="2">12&13</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr></table>

跨行合并:

<table border="1px" width="300px" align="center" height="300px"> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td rowspan="2">21&31</td> <td>22</td> <td>23</td> </tr> <tr> <td>32</td> <td>33</td> </tr></table>

表头单元格:th [n10]

代码:

<table border="1px" width="300px" align="center" height="300px"> <tr> <th>11</th> <th>12</th> <td>13</td> </tr> <tr> <td rowspan="2">21&31</td> <td>22</td> <td>23</td> </tr> <tr> <td>32</td> <td>33</td> </tr></table>

案例3：网站首页效果

【实现思路】：

创建一个8行1列的表格

1.在第一行放logo

嵌套一个1行3列的表格

2.第2行放菜单

3.第3行放图片

4.第4行热门商品

嵌套一个2行7列的表格

5.第5行放广告图片

6.第6行最新商品

嵌套一个2行7列的表格

7.第7行放一个图片

8.第8行

两个段落

代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><table border="1px" width="100%">  <tr> <td> <table width="100%"> <tr> <td><img src="img/5b9e0b56ce722.png" alt=""></td> <td align="center"><img src="img/header.png" alt=""></td> <td align="right"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a>     </td> </tr> </table> </td> </tr> <tr bgcolor="black" height="40px"> <td>  <a href="#"><font size="4" color="white">首页</font></a>    <a href="#"><font size="4" color="white">公司简介</font></a>     <a href="#"><font size="4" color="white">关于我们</font></a>    <a href="#"><font size="4" color="white">关于我们</font></a>   </td> </tr> <tr> <td><img src="img/1.jpg" alt=""></td> </tr> <tr> <td> <font>热门商品</font> <img src="img/title2.jpg" alt=""> <table width="100%"> <tr> <td rowspan="2"> <img src="img/big01.jpg" alt=""> </td> <td colspan="3"> <img src="img/middle01.jpg" alt=""> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> </tr> <tr> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> </tr> </table> </td> </tr> <tr> <td><img src="img/ad.jpg" alt="" width="100%"></td> </tr> <tr> <td> <font>热门商品</font> <img src="img/title2.jpg" alt=""> <table width="100%"> <tr> <td rowspan="2"> <img src="img/big01.jpg" alt=""> </td> <td colspan="3"> <img src="img/middle01.jpg" alt=""> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> </tr> <tr> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> <td> <img src="img/small08.jpg" alt=""> <p align="center">电饭煲</p> <p align="center">¥200</p> </td> </tr> </table> </td> </tr> <tr> <td><img src="img/footer.jpg" alt=""></td> </tr> <tr> <td align="center"> <p><a href="#">关于我们</a><a href="#">关于我们</a><a href="#">关于我们</a><a href="#">关于我们</a><a href="#">关于我们</a></p> <p>Copyright © 2005-2016 惠多多版权所有</p> </td> </tr></table></body></html>

https://baike.baidu.com/item/%E4%B8%87%E7%BB%B4%E7%BD%91%E8%81%94%E7%9B%9F/1458269?fromtitle=w3c&fromid=216888&fr=aladdin

在线文档 http://www.w3school.com.cn/

https://www.w3.org/ 原版英文

默认值

 <table border="1px">
    <!--生成一个  一行三列的表格-->
    <tr>
        <td>百度</td>
        <td>腾讯</td>
        <td>阿里</td>
    </tr>
</table>

Width的取值

可以是百分比

可以是具体的像素值

Align的取值

Left居左边对其

Center居中对其

Right居右边对其

是将tr中整个内容进行对其

是对单个td中内容进行对其

将多余的行删除掉即可！

居中

加粗

1.5.6.基础标签6

1.5.6.1.表单标签

在网页中表单标签使用form，用来收集用户的数据！

Form表单标签常见的子标签:

1)input 输入框 [n1]

2)select 下拉选

3)textarea 文本域

测试效果:

姓名: 密码: 性别: 爱好: 头像籍贯:

生日：自我介绍:

效果图:

代码效果:

当我们在表单中填写完所有的信息后，我们需要进行提交，接下来我们就来研究一下提交后的效果吧?

【开发小结】:

提交到服务器的内容的格式: key=value& 对于文本框密码框文本域手写的内容传递过去了对于单选框和多选框来说,却没有把值传递过去要想把值传递过去必须设置value属性若下拉选要想想在选中之后，带上一些值传递过去，这时候我们也需要加上value

代码:

性别:<input type="radio" name="sex" value="男">男<input type="radio" name="sex">女 <select name="city"> <option value="wh">武汉</option> <option>十堰</option> <option>黄石</option> <option>杭州</option> <option>绍兴</option></select>

表单标签的一些默认值

²文本框密码框:只需要添加value属性

²单选框复选框:添加 checked="checked"

²下拉选:添加selected="selected"

²文本域:标签体

默认提示语

使用 placeholder 属性

案例4:网站表单页面

【实现思路】:

1.在页面中间添加一个表格

2.10行3列表格

3.在表格中添加表单表单子标签

1.5.7.基础标签7

1.5.7.1.框架标签

frameset框架级

常见的子标签:

Frame

常用属性:

cols:垂直切割

例如: cols="40%,60%"

例如: cols="40%,*,10%"[n2]

rows:水平切割

注意:

最好和body不要共存

frame:具体实现

常用属性:

src:展示的页面的url

效果图

实现代码:

<frameset rows="30%,,10%"> <frame/> <frameset cols="15%,"> <frame/> <frame/> </frameset> <frame/></frameset>

接着进一步完善:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><frameset rows="30%,,10%"> <frame src="head.html"/> <frameset cols="15%,"> <frame src="leftMenue.html"/> <frame src="main.html"/> </frameset> <frame src="bottom.html"/></frameset></html>

点击左边菜单，右边main中会跟着一起切换

1.5.8.基础标签8

1.5.8.1.块标签div和行标签span

div 标签 [n3]

span 标签 [n4]

2.CSS

2.1.为什么要学习CSS

CSS 美化网页（样式）!!!

2.2.CSS概述

CSS的全称是Cascading Style Sheets，层叠样式表

它用来控制HTML标签的样式，在美化网页中起到非常重要的作用

CSS的编写格式是键值对形式的，比如

color: red;

background-color: blue;

font-size: 20px;

冒号:左边的是属性名，冒号:右边的属性值

2.3.CSS书写形式

l行内样式：（内联样式）直接在标签的style属性中书写

例如:

代码实战:

<body><div style="background-color: red;font-size: 30px">我是div</div><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div><hr><p style="background-color: yellow">我是段落</p><p>我是段落</p></body></html>

假设，我想这页面上所有的div都共同拥有相同的样式该怎么办呢?抽取？？？？

l页内样式：在本网页的style标签中书写

例如:

<style>

body {

color: red;

}

</style>

代码:

<head> <meta charset="UTF-8"> <title>Title</title> <style> div { background-color: red; } </style></head><body><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div><div>我是div</div><hr><p>我是段落</p><p>我是段落</p></body>

使用第二种方式虽然可以解决一部分的代码抽取问题，但是对于大型的网站来说，也是无法解决根本的问题，例如，一个网站有多个站点，每一个页面可能都会有相同的css代码

l外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用

例如:

代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/cssdemo.css"></head><body><div>我是div</div><div>我是div2</div><div>我是div3</div><hr><p>我是段落1</p><p>我是段落2</p></body></html>

2.4.CSS的规律

代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/cssdemo.css"> <style> div { background-color: green; color: purple; } </style></head><body><div>代码1</div></body></html>

原则:

1.就近原则

2.叠加原则

2.4.CSS的两大特点

属性

通过属性的复杂叠加才能做出漂亮的网页

选择器

通过选择器找到对应的标签设置样式

l选择器 [n5]的作用:

帮助我们找到对应的标签，并为其添加css样式

2.5.CSS常见的选择器

2.5.1.通配符选择器

2.5.2.CSS中的标签选择器

标签选择器作用：

根据标签名找到标签

格式:

标签名{

Css样式代码

}

代码:

提问:我想让某两个标签的颜色一样，但是又不允许使用行内样式肿么办?

2.5.3. CSS中的类选择器

类选择器作用：

根据类名找到标签

格式:

.类名{

}

代码:

提问:这里有三个标签，我想老大标签使用之后，老二不允许使用，其它都不允许使用，那么又该肿么办呢?

2.5.4.CSS中的id选择器

id选择器作用：

根据id名找到标签

格式:

#id名{

}

代码:

Id选择器和类选择器的区别:

Id选择器中的id不能重复,也就是说id是唯一的

类选择器的class名称可以重复使用,当然class名称也是可以每一个标签单独取一个来进行设置

【开发小结】:标签选择器、id选择器、类选择器统称为css的三大基本选择器，可以说虽然css虽然有很多选择器，但是你掌握这三个，就可以解决网页中所有关于css选择器的需求！！！

2.5.5.CSS中的并列选择器 [n6]

代码:

2.5.6.CSS中的复合选择器 [n7]

2.5.7.CSS中的后代 [n8]选择器

2.5.8.CSS中的直接后代 [n9]选择器

2.5.9.CSS中的相邻兄弟选择器

2.6.0.CSS中的属性选择器

2.6.1.CSS选择器-伪类

伪类在原有选择器的基础上添加的

伪类只有在触发某些操作的时候执行的样式效果

2.6.2.CSS选择器的优先级

原则：

相同类型的选择器: a 就近原则 b 叠加原则

不同类型的选择器:

优先级排序

important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符

选择器的权值:

通配选择符[n10]（*）：0

标签： 1

类： 10

属性： 10

伪类： 10

伪元素： 1

id： 100

important： 1000

2.6.HTML中标签类型

2.6.1.标签类型分类

HTML有N多标签，根据显示的类型，主要可以分为3大类

块级标签

独占一行的标签

能随时设置宽度和高度（比如div、p、h1、h2、ul、li）

行内标签（内联标签）

多个行内标签能同时显示在一行

宽度和高度取决于内容的尺寸（比如span、a、label）

行内-块级标签（内联-块级标签）

多个行内-块级标签可以显示在同一行

能随时设置宽度和高度（比如input、button）

input标签

常用的属性:

Type取值:

text:文本框默认

password:密码框

radio:单选框

checkbox:多选框

file:文件框

date:日期

========================

submit:提交

reset:重置

button:普通按钮

==========================

hidden:隐藏域在页面上显示提交的时候可以提交过去

image:图片提交替代submit

==============================

name:

可以将几个单选框(复选框)设置为一要想将信息保存到服务器上必须有name属性

readonly:

readonly="readonly" 只读

disabled:

disabled="disabled" 禁用

自己指定一部分，*代表是计算机自己来判断处理的

对比其他标签，发现div很纯洁

Div容器标签

Div独占一行 span一行显示多个

钩子

同时选择多个

用于精准的定位

满足条件的所有后代

直接后代

优先级很低

性能很差

[Web前端课程2.docx]

4.Web前端框架

4.1. jQuery框架

4.1.1.jQuery概述

4.1.1.1.jQuery框架概述

jQuery是一款优秀的javaScript库.jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它可以用最少的代码, 完成更多复杂而困难的功能

jQuery的主旨:write less, do more.

写的更少, 干的更多

以更少的代码,实现更多的功能.

4.1.1.2.jQuery作者-John Resig

John Resig：第一次编程大概是在初中，14、15岁

2006年8月发布jQuery (22岁)

2007年2月加入Mozilla

2011年5月，John Resig离职Mozilla，加入在线教育集团Khan Academy。在那里，他仍继续从事jQuery相关工作，同时负责该组织的开源项目及未来的iPad应用的开发。

4.1.1.3.jQuery特点

1.轻量级

2.强大的选择器

3.出色的Dom封装

4.可靠的事件处理

5.浏览器兼容性强

6.链式操作方式

7.隐式迭代

4.1.2.jQuery代码风格

l在jQuery程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象

$(function () {}); 执行一个匿名函数

$(‘#idName’); 进行执行的ID元素选择

$(‘#idName’).css(‘color’, ‘red’); 执行功能函数

都要使用“$”把它们包裹起来.

可以写做:

执行功能函数

jQuery(function () {});

jQuery(‘#idName’);

jQuery(‘#idName’).css(‘color’, ‘red’);

4.1.3. jQuery基本使用 [n1]

第一步:下载jQuery库

第二步:引入下载的jQuery库

第三步:编写jQuery代码

4.1.4.jQuery获取标签 [n2]

4.1.5.jQuery中事件介绍

鼠标单击事件 click

鼠标进入事件 mouseover

鼠标离开事件 mouseout

鼠标移动事件 mousemove

4.1.6. jQuery操作CSS

l通过jQuery可以很方便的来操作CSS样式.直接设置 CSS 样式、增加 CSS 类别、类别切换、删除等操作.

直接操作

<script> $(document).ready(function () { $("button").click(function () { $("p").css("width","200"); $("p").css("height","200"); $("p").css("background","blue"); }) });</script>

链式写法

<script> $(document).ready(function () { $("button").click(function () {// $("p").css("width","200");// $("p").css("height","200");// $("p").css("background","blue"); $("p").css("width","200").css("height","200").css("background","red"); }) });</script>

键值对key:value写法

案例：百度换肤实现

4.1.7. jQuery操作类

1)添加类

- 添加一个类

addClass(class)给某个元素添加一个 CSS 类

$('div').addClass('myClass1');

代码:

注意:类名没有”点”

-添加多个类

addClass(class1 class2 class3...)给某个元素添加多个 CSS 类

添加多个类时, 类名使用空格隔开

$ (‘div’).addClass(‘myClass1 myClass2');

升级版:

牛逼版:

2)删除类

-删除一个类

removeClass(class)删除某个元素的一个 CSS 类

$('div').removeClass('myClass1');

-删除多个类

removeClass(class1 class2 class3…)删除某个元素的多个 CSS 类

$('div').removeClass('myClass1 myClass2');

3)切换类[n3]

toggleClass(class)来回切换默认样式和指定样式

$('div').toggleClass('myClass1');

同样也可以在多个类之前进行切换

$('div').toggleClass('myClass1 myClass2');

4.1.7.1.特殊CSS方法

jQuery 不但提供了 CSS 的核心操作方法,比如.css()、.addClass()等。还封装了一些特殊功能的 CSS 操作方法

1.获取与修改宽高.

不带值为获取,带值为修改.

width()

width(value)

height()

height(value)

2.获取元素偏移

offset() 获取某个元素相对于视口的偏移位置

offset().left;

offset().top;

position()获取某个元素相对于父元素的偏移位置

position().left

position().top

4.1.7.2.操作HTML

l使用jQuery可以给一个标签内部添加标签以及获取标签

没有值代表获取,有值代表添加标签

html();

html(value);

获取标签当中的内容

text();

text(value);

4.1.8.jQuery选择器(***)

4.1.8.1.选择器简介

jQuery 最核心的组成部分就是:选择器引擎。

它完全继承了 CSS 的风格,可以对 DOM 元素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性,写法更加简洁。

jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。

4.1.8.2.选择器分类

l1.基本选择器

l2.层级选择器

l3.属性选择器

l4.筛选(过滤)选择器

l5.表单选择器

4.1.8.3.基本选择器

实战代码:

4.1.8.4.层级选择器

选择器	说明
$(“div p”)	选取div后代中所有p标签(包括孙子)
$(“div>p”)	选取div直接后代中p标签(不包括孙子)
$(“div+p”)	选取紧跟div后的兄弟元素中第一个p
$(“div~p”)	选取紧跟后的兄弟元素中的所有p

间接后代：

直接后代:

紧跟第一个兄弟:

选取紧跟后面所有兄弟元素

【注意点】:一定是紧跟着(紧挨着)的，中间不能有插队！！！

.next

.nextAll

4.1.8.5.属性选择器

实战代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>属性选择器</title> <script src='../jquery-2.1.0.min.js'></script> <script> $(function () { $('button').eq(0).click(function () { $('a[href]').css({ 'color':'red' }); }); $('button').eq(1).click(function () { $('a[href="www.baidu.com"]').css({ 'color':'red' }); }); $('button').eq(2).click(function () { $('a[href!="www.baidu.com"]').css({ 'color':'red' }); }); $('button').eq(3).click(function () { $('a[href^="www"]').css({ 'color':'red' }); }); $('button').eq(4).click(function () { $('a[href$="cn"]').css({ 'color':'red' }); }); $('button').eq(5).click(function () { $('a[href*="it"]').css({ 'color':'red' }); }); $('button').eq(6).click(function () { $('a[href^="www"][title*="是"]').css({ 'color':'red' }); }); }); </script></head><body><button>获取具有href属性的 DOM 对象</button><br><button>获取属性值为www.baidu.com对象</button><br><button>获取属性值不为www.baidu.com对象</button><br><button>获取属性值以www开头的对象</button><br><button>获取属性值以cn结尾的对象</button><br><button>获取属性值包涵it的对象</button><br><button>获取属性值包涵www的对象并且title包含"是"的对象</button><br><br><br><div class="divItem"> <a href="www.baidu.com" title="谁啊？">www.baidu.com百度</a><br/> <a href="www.888it.com">www.888it.com做技术888</a><br/> <a href="www.it.com" title="我是title的内容">www.it.com做技术</a><br/> <a href="sina.com.cn">sina.com.cn新浪</a><br/> <a>我没有href</a></div></body></html>

4.1.8.6.筛选(过滤)选择器

实战代码:

4.1.8.7.父子兄弟选择

案例:百度风云排行榜 [n4]

4.1.8.8.表单选择器

4.1.9.jQuery中动画(***)

4.1.9.1.jq中动画简介

通过jQuery动画方法,能够很轻松地为网页添加非常精彩的视觉效果,给用户一种全新体验.

4.1.9.2.jq中动画分类

1.显示、隐藏

2.滑动、卷动

3.淡入、淡出

4.自定义动画

4.1.9.3.jq的显示与隐藏动画

hide()方法隐藏元素

格式:hide(speed,callback [n5])方法

参数:

speed,动画执行的速度要求传入一个毫秒值. 1秒等于1000毫秒

callback:动画完成时调用的方法名称.

代码:

最基本的

$(document).ready(function () { $("button").eq(0).click(function () { $("div").show(); });});

传入speed时间参数

$(document).ready(function () { $("button").eq(0).click(function () { $("div").show(5000); });});

传入speed和回调函数

$(document).ready(function () { $("button").eq(0).click(function () { $("div").show(5000,finsh); }); function finsh() { alert("动画完成了啦~~"); }}); $("button").eq(0).click(function () { $("div").show(5000, function finsh() { alert("动画完成了啦~~"); });}); $("button").eq(0).click(function () { $("div").show(5000,function () { alert("完成了啦~~") });});

show()方法显示元素

格式:show(speed,callback)方法

参数:

speed,动画执行的速度要求传入一个毫秒值. 1秒等于1000毫秒

callback:动画完成时调用的方法名称.

代码实战:

切换显示隐藏

我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判断。而 jQuery 提供给我们一个类似功能的独立方法:

toggle() 方法用来切换显示隐藏

代码实战:

$("button").eq(2).click(function () { $("div").toggle(1000);});

【隐藏和显示以及切换动画总结】:

Ø注意:在无参数的时候,只是硬性的显示内容和隐藏内容。

Ø.hide()方法其实就是在行内设置 CSS 代码:display:none;

Ø.show()方法要根据原来元素是区块还是内联来决定.

如果是区块,则设置 CSS 代码:display:block;

如果是内联, 则设置 CSS 代码:display:inline;

4.1.9.4.jq中的滑动、卷起动画

jQuery 提供了一组改变元素高度的方法:

.slideUp()

.slideDown()

.slideToggle()。

顾名思义,向上收缩(卷动)和向下展开(滑动)

注意:滑动、卷动效果和显示、隐藏效果一样,具有相同的参数。

4.1.9.5.jq动画综合案例

4.1.9.5.1.二级下拉菜单

【效果图】：

Html和css代码:[n6]

改造后: <style> *{ margin: 0; padding: 0; list-style: none; } body { background-color: #909EAB; } #nav { width: 900px; height: 50px; margin: 100px auto; } #nav .one>li { width: 100px; height: 50px; text-align: center; line-height: 50px; float: left; color: white; position: relative; background: #cccccc; } .two { position: absolute; top: 50px; left: 0; } #nav .two>li { width: 100px; height: 50px; text-align: center; line-height: 50px; background: #cccccc; } #nav li:hover { background: black; }</style> 最终版:

接下来：先隐藏起来所有的二级菜单

Js代码思路:

对于上面的代码，下拉菜单基本已经实现了，但是如果用户滑动鼠标太快了，会出现，前面动画没有执行完毕，后面动画就开始执行，导致动画很乱！

在每一个动画开始之前，先停止调之前所有的动画，只保留自己的动画！！[n7]

4.9.5.2.折叠菜单

效果图:

Html和css

Js代码

4.1.9.6.淡入和淡出动画

jQuery 提供了一组专门用于透明度变化的方法:

.fadeIn() 淡入 [n8]

.fadeOut() 淡出 [n9]

分别表示淡入、淡出,当然还有一个自动切换的方法:

.fadeToggle() 切换淡入淡出

上面三个透明度方法只能是从 0 到 100,或者从 100 到 0,如果我们想设置指定值就没有办法了。

而 jQuery 为了解决这个问题提供了

.fadeTo()方法

注意:淡入、淡出效果和显示、隐藏效果一样,具有相同的参数。对于.fadeTo()方法, 如果本身透明度大于指定值,会淡出,否则相反。

代码实战:

4.1.9.7.jq中自定义动画

4.1.9.7.1.自定义动画-基本使用

jQuery 提供了几种简单常用的固定动画方面我们使用。但有些时候,这些简单动画无法满足我们更加复杂的需求。这个时候,jQuery 提供了一个.animate()方法来创建我们的自定义动画,满足更多复杂多变的要求。

语法：$(selector).animate({params},speed,callback);

参数说明:

params:必须参数,定义形成动画的 CSS 属性。

speed:可选参数,规定效果的时长,可取值 “slow”、“fast” 或毫秒。

callback:可选参数,是动画完成后所执行的函数名称。

代码实战:

$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });

使用相对值：

$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });

动画时间：设置speed参数

语法：$(selector).animate({params},speed,callback);

参数说明:

params:必须参数,定义形成动画的 CSS 属性。

speed:可选参数,规定效果的时长,可取值 “slow”、“fast” 或毫秒。

callback:可选参数,是动画完成后所执行的函数名称。

动画设置回调函数

语法：$(selector).animate({params},speed,callback);

参数说明:

params:必须参数,定义形成动画的 CSS 属性。

speed:可选参数,规定效果的时长,可取值 “slow”、“fast” 或毫秒。

callback:可选参数,是动画完成后所执行的函数名称。

4.1.9.7.2.自定义动画-队列

$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); });

4.1.9.7.3.自定义动画-延迟

4.1.9.7.4.自定义动画-停止动画

4.1.9.7.5.综合案例-轮播图

4.2.0.jq中事件深入

4.2.0.1.事件介绍

鼠标单击事件 click

鼠标进入事件 mouseover

鼠标离开事件 mouseout

鼠标移动事件 mousemove

浏览器窗口滚动事件

$(window).scroll(function () {

}

页面卷起的部分：

1）垂直方向=》 $(window).scrollTop()

2）水平方向=》$(window).scrollLeft()

4.2.0.2.案例-固定导航案例

helloWorld

使用jq选择器

切换类，如果有就删除，没有就添加

作业题

动画完成时候做一些事情

既然这里有两级菜单,所以每一级菜单最好单独使用样式来控制,这样子防止冲突

Stop()

显示

隐藏

4.2.1.jq其它牛逼功能补充(压轴)

4.2.1.1.attr()

- 基本使用

- 综合案例-美女相册

4.2.1.2.index()

- 基本使用

- 综合案例-tab选项卡

4.2.1.3.each()

- 基本使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src='js/jquery-3.1.1.js'></script> <script> $(function () { /*1.遍历数组*/ var array = ["gxq", "xmg", 20]; $.each(array, function (index, value) { console.log(index, value); }); /*2.遍历对象*/ var obj = { name: "gxq", age: 20 }; $.each(obj, function (key, value) { console.log(key, value); }) /*3.遍历结点*/ $('span').each(function (index,ele) { var text = $(ele).text(); console.log(index,text); }); }); </script> </head> <body> <span>我是一个span1</span> <span>我是一个span2</span> <span>我是一个span3</span> <span>我是一个span4</span> <span>我是一个span5</span> </body> </html>

4.2. Bootstrap框架

4.2.1.为什么要学习BootStarp

4.2.2. BootStarp概述

4.2.3. BootStarp基本使用

4.2.3.1.下载

4.2.3.2.目录结构

4.2.4.BootStrap实战

4.2.1.起步

找到bs中的模板

4.2.2.全局CSS样式

4.2.2.1.按钮和图片

4.2.2.2. 配模适配(响应式)

4.2.2.2.1.移动设备设置

在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。[n1]

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

以上只是一个初级的模板，要想适配所有屏幕，还需要将代码放在容器中

4.2.2.2.2.布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container"> ... </div>

.container-fluid [n2]类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid"> ... </div>

代码实战:

需求:页面上的商品展示，在PC端，一行显示6个，一行显示4个，一行显示2个

4.2.2.3.栅格系统

bootstrap将每一行分成12份

一行显示6个，每行占2份

一行显示2个每行占6份

根据上网设备区分，它是怎么知道，你是上网设备呢？

媒体查询，会自动判断

参数如下:

假如大屏幕,每行显示6个超大电脑,屏幕分辨率>1200 使用: col-lg-2 假如屏幕小点,每行显示4个 992<屏幕分辨率<1200 使用: col-md-3 再小点,每行显示2个 768<屏幕分辨率<992 使用: col-sm-6 继续小,每行显示1个屏幕分辨率<768 使用:col-xs-12

代码实战:

【思考】:如果一行显示12个

需求:

1)每行显示12个 col-lg

2)每行显示4个 col-md

3)每行显示2个 col-sm

4)每行显示1个 col-sx

4.2.3.组件

4.2.3.1.导航条

4.2.4.JavaScript插件

4.2.4.1.tab标签页

4.2.4.2.弹出框

4.2.4.3.轮播图

实战代码:

<div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol>  <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/nav_01.jpg" alt="..."> </div> <div class="item"> <img src="images/nav_02.jpg" alt="..."> <div class="carousel-caption"> <p>您们牛逼吗?</p> <button>肯定牛逼呀</button> </div> </div> <div class="item "> <img src="images/nav_03.jpg" alt="..."> </div> </div>  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div></div>

4.2.5BootStrap项目

4.2.5.1.搭建基本框架

4.2.5.2.添加导航条

- 删除多余的部分

<nav class="navbar navbar-default"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </div></nav>

修改文字:

添加下划线

处理导航条细节

l添加 .navbar-fixed-top 类可以让导航条固定在顶部

注意:固定的导航条会遮住页面上的其他内容,可给<body>设置padding

l包含一个.container或.container-fluid容器,从而让导航条居中显示或者自适应显示

l添加.navbar-inverse可以改变导航栏显示的背景颜色

导航条居中:

导航条固定在顶部

导航条背景色-反色

4.2.5.3.焦点图

基本代码:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol>  <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/nav_01.jpg" alt="..."> </div> <div class="item"> <img src="images/nav_02.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="images/nav_01.jpg" alt="..."> </div> </div>  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></div>

观察发现，轮播图好像往上走了一点，被网页的头部遮挡住了，我们肿么办呢?

4.2.5.4.中间区域

<div id="main"> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <img src="images/apple.png"> <h2>iOS学院</h2> <p>iOS学院，又称大神学院，学院内优秀学员比比皆是,不断挑战着业界薪资神话。学院的每一个学生都十分的牛逼,他们的梦想是用"指尖改变世界",励志做"中国的乔布斯"。</p> <button class="btn btn-danger">咨询一下</button> </div> <div class="col-md-4"> <img src="images/java.png" alt=""> <h2>Java学院</h2> <p>Java学院,学院的每一个学生也很牛逼,他们的梦想是通过代码改变自己,终极目标:"瞬间高富帅,赢取白富美"。</p> <button class="btn btn-danger">咨询一下</button> </div> <div class="col-md-4"> <img src="images/web.png" alt=""> <h2>网页UI学院</h2> <p>网页UI学院,又称女神学院。学院每个学生的梦想是:设计出能改变世界的UI界面,成为其他两大学院男生心目中的女神。</p> <button class="btn btn-danger">咨询一下</button> </div> </div> </div></div>

调整图片大小和p的首行缩进和内容居中(文字和图片)

#main{ text-align: center; padding-top: 20px;}#main .container-fluid .row .col-md-4 img{ width: 140px;}#main .container-fluid .row .col-md-4 p{ text-indent: 10%;}

2）版权部分

<!--版权--><div id="banquan"> <p class="pull-left">© 2015 广州粤嵌科技</p> <p class="pull-right">回到顶部</p></div>

默认大小显示

流动

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯git代码托管（工蜂）

腾讯云小微

webview

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯git代码托管（工蜂）

腾讯云小微

webview