前端知识总结,点进来看看!!!

前端知识总结

第一章 Web

1.1 Web的概念:

javaWeb:使用java语言编写的基于互联网的项目

1.2 软件架构
1.2.1 C/S:Client/Sever客户端/服务器端

概述:在用户本地有一个客户端,通过客户端访问远程的服务器端

优点:用户体验好

缺点:开发、安装部署、维护麻烦

1.2.2 B/S:Browser/Server

概述:用户通过浏览器发送网址(URL)访问服务器端

优点:开发、安装部署、维护简单

缺点:用户体验可能不好

1.3 核心技术必学(前端三剑客)

1.3.1 HTML:用于构建网页结构,定义网页包括的内容

1.3.2 CSS

层叠样式表 (Cascading Style Sheets,缩写为 CSS),用于构建网页布局,外观,美化页面。是一种 样式表 语言,用来描述 HTMLXML(包括如 SVGMathMLXHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

1.3.3 JavaScript:脚本语言,用于构建网页行为,与用户进行交互,使用户获得更好的体验

JavaScript ( JS ) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,例如 Node.jsApache CouchDBAdobe Acrobat。JavaScript 是一种基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

一般在web前端认为html是结构层,css是表现层,js是行为层

第二章 HTML

2.1 HTML概念
<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>
1 HTML标签:

作用所有HTML中标签的一个根节点。 最大的标签   根标签

2 head标签: 文档的头部

文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

注意在head标签中我们必须要设置的标签是title

3.title标签: 文档的标题

作用:让页面拥有一个属于自己的标题。

4.body标签:文档的主体  以后我们的页面内容 基本都是放到body里面的

body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)
2.1.1 概念

HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript

“超文本”(hypertext)是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网,并将其与他人创建的页面相链接,你就成为了万维网的积极参与者。

2.2语法

2.2.1 双标记:<开始标记>内容</结束标记>

2.2.2 单标记:<标记/>

2.2.3 标记的属性:<标记 属性1=参数 属性2=参数…>内容</标记>

说明:(1)标记与属性、属性与属性之间以空格分隔

(2)属性不区分先后顺序

2.3标签
2.3.1常用标签
//表示文本类型
<html></html>表示创建一个html文档
<head></head>设置文档标题和其他在网页不显示的信息
<title></title>设置文档的标题,就是最上方的名字
<body></body>设置文档内容

body内常用标签

<br>      换行标签
<hr/>     水平线标签
<p></p>   表示段落
<h1></h1> 表示标题,分为h1到h6字体依次递减
//文本格式化标签
<strong> </strong><b> </b> 将文本加粗
<em> </em><i> </i> 将文本倾斜
<del> </del><s> </s> 将文本设置删除线
<ins> </ins><u> </u> 将文本设置下划线
div span标签(重点)
div span 是没有语义的 是我们网页布局主要的2个盒子 css+div

div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。

span, 跨度,跨距;范围

图像标签img(重点)

属性属性值描述
srcURL图片的路径(src属性用于指定图像文件的路径和文件名,是img标签的必须属性)
alt文本图像不能显示时的替换文本
title文本鼠标悬停时显示的内容
width像素设置图像宽度
height像素设置图像高度
border数字设置图像边框

链接标签(重点)

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,_blank为在新窗口中打开方式。
注意:
1.外部链接 需要添加 http:// www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
列表标签

无序列表ul(重点)

无序列表的各个列表项之间没有顺序级别之分,是并列的。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

有序列表ol

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排序定义,有序列表的基本语法格式

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

自定义列表

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>
表格标签
  1. 表格提供了HTML 中定义表格式数据的方法。
  2. 表格中由行中的单元格组成。
  3. 表格中没有列元素,列的个数取决于行的单元格个数
//创建表格
<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>
.table用于定义一个表格。

2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。

3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)

表格的属性

属性名含义常用属性值
border设置表格边框(默认border=“0”无边框)像素值
cellspacing设置单元格与单元格边框之间的空白间距像素值(默认为2像素)
cellpadding设置单元格内容与单元格边框之间的空白距离像素值(默认为1像素)
width设置表格的宽度像素值
height设置表格的高度像素值
align设置表格在网页中的水平对齐方式left、center、right
rowspan跨行合并单元格行数
colspan跨列合并单元格列数

表格结构

在使用表格进行布局时,可以将表格划分为头部、主体和页脚
<thead></thead>:用于定义表格的头部。

必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。

<tbody></tbody>:用于定义表格的主体。

位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容

表格标题

caption 元素定义表格标题。
<table>
   <caption>我是表格标题</caption>
</table>
caption 标签必须紧随 table 标签之后。

合并单元格

跨行合并:rowspan 跨列合并:colspan

表单标签

表单目的是为了收集用户信息。

在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。

在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

表单控件:

包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息:

一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

表单域:

他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

type

text单行文本输入框
password密码输入框
radio单选按钮
checkbox复选框
button普通按钮(onclick弹窗)
submit提交按钮
reset重置按钮
image图像形式的提交按钮(通过src)
file文件域
hidden隐藏域

input控件(重点)

<input />标签为单标签
//属性
type 说明了属于那种表单
radio 如果是一组,我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个

label标签

label 标签为 input 元素定义标注(标签)。
作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

textarea控件(文本域)

text 文本框 只能写一行文本
textarea 文本域
如果需要输入大量的信息,就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框
<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>
注意:<select></select>中至少应包含一对<option></option>。
在option 中定义selected =" selected "时,当前项即为默认选中项。

**iframe标签:**iframe可以显示一个目标链接的页面

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
表单域

在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>
常用属性
1、Action
在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
2、method
用于设置表单数据的提交方式,其取值为get或post。
3、name
用于指定表单的名称,以区分同一个页面中的多个表单。
注意: 每个表单都应该有自己表单域。
特殊字符标签

HTML为这些特殊字符准备了专门的替代代码

特殊字符描述字符代码
空格符&nbsp
<小于号&lt
>大于号&gt
&和号&amp
人民币&yen
©版权&copy
®注册商标&reg
摄氏度&deg
±正负号&plusmn
×乘号&times
除号&divide
²平方2(上标2)&sup2
³立方3(上标3)&sup3
路径(重点、难点)

实际工作中,通常新建一个文件夹专门用于存放图像文件,这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为: 相对路径和绝对路径

相对路径
以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。

图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如
图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如
图像文件位于HTML文件的上一级文件夹:在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推,如
绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的

“D:\web\img\logo.gif”,或完整的网络地址,例如

“http://www.itcast.cn/images/logo.gif”

第三章 CSS

3.1CSS概念

3.1.1概念

层叠样式表,用于构建网页布局、外观、美化页面

3.2CSS的样式格式

3.3.1CSS的使用:与HTML结合方式

1、行内样式

2、内部样式

3、外部样式

语法:

<head>
    <link href=”CSS文件的路径” type=”text/CSS” rel=”stylesheet” />
</head>
注意
href:定义所链接外部样式表文件的URL,可以是相对/绝对路径type:定义所链接文档的类型

rel:定义当前文档与被链接文档之间的关系,stylesheet表示被链接的文档是一个样式表文件
样式表优点缺点使用情况控制范围
行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少)
内部样式部分结构和样式相分离没有彻底分离较多控制一个页面(中)
外部样式表完全实现结构和样式分离需要引入最多控制整个站点(多)

3.2.2标签显示模式

1、块级元素(block-level):会独占一整行或多整行。

常见的块级元素:h1~h6、p、div、ul、ol、li等

特点:总是从新行开始,高度,行高,外边距以及内边距可以控制宽度默认是容器的100%,可以容纳内联元素和其他块元素

2、行内元素(inline-block):不占有独立的区域。

常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等

特点:和相邻行内元素在一行上。高,宽无效,但水平方向的padding和margin可以设置,垂直方向的无效,默认宽度就是它本身内容的宽度。行内元素只能容纳文本或其他行内元素(a特殊)

3、行内块元素(inline-block):特殊标签,可以对其设置宽高和属性。

常用标签:img、input、td

特点:和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙,默认宽度就是它本身内容的宽度高度,行高,外边距以及内边距可以控制

标签显示模式(display):

块转行内:display:inline

行内转块:display:block

块、行内元素转换为行内块:display:inline-block

注意:只有文字才能组成段落,因此p里面不能放块级元素,同理还有h1,dt等标签,他们都是文字类块级标签,里面不能放其他块级元素

3.3选择器

3.3.1基础选择器

**1、id选择器:**元素的id值是唯一的

**2、类选择器:**可以为元素定义单独或相同的样式

**3、元素选择器:**能快速为页面中同类型的标签统一样式

**优先级:**id选择器>类选择器>元素选择器

3.3.2扩展选择器

1、伪类选择器

(1)链接伪类选择器

:link未访问的链接
:visited已访问的链接
:hover鼠标移动到链接上
:active选定的链接

(2)结构伪类选择器even偶数、odd奇数

:first-child选取属于其父元素的首个子元素
:last-child选取属于其父元素的最后一个子元素
:nth-child(n)匹配属于其父元素的第N个子元素,正数
:nth-last-child(n)匹配属于其父元素的第N个子元素,倒数

(3)目标伪类选择器

:target选取当前活动的目标元素

2、伪元素选择器

E:first-letter文本的第一个单词或字
E::first-line文本的第一行
E::selection可改变选中文本的样式
E::before

E::after
在E元素内部的开始位置和结束位置创建一个元素(该元素为行内元素,且必须结合content属性使用)
3.4CSS字体样式属性
属性含义解释
font-size字号大小常用px,普遍14px
font-family字体可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体
font-weight字体粗细b、strong标签 normal:400px默认值 bold:700px bolder、lighter、100~900
font-style字体风格i、em标签 normal:默认值 italic、oblique:倾斜
font综合设置字体样式顺序:font-style font-weight font-size/line-height font-family;
3.5CSS文本样式属性
属性含义解释
color文本颜色color属性用于定义文本的颜色。其取值方式有三种:1、预定义颜色值,如:red、green、blue等
2、十六进制(常用)如:如#ff0000,#ff6600等

3、RGB代码 如:红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。注意:取值0是不能省略百分号
line-height行间距设置行与行之间的距离,及字符的垂直间距,一般为行高
text-align水平对齐方式设置文本内容的水平对齐,其属性值:left:左对齐(默认值)right:右对齐 center:居中对齐
text-indent首行缩进设置首行文本的缩进。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值,建议使用em作为设置单位。
text-overflow文字溢出最常用属性:ellipsis,显示省略号来代表被修剪的文本

clip:修剪文本

string:使用给定的字符串来代表被修剪的文本
text-decoration文本装饰效果下划线
3.6背景
属性含义
background-image: url()图片路径 背景图
background-repeat背景图不重复
background-repeat-y垂直铺垫
background-repeat-x水平铺垫
background-repeat:space;水平铺垫,距离等分,图片完整
background-repeat:round;平铺方式,图片完整
background-color背景颜色
background-attachment:设置背景类容是scroll滚动或是fixed固定
background-clip指定对象的背景图像向外裁剪的区域
background-size设置对象背景图像的尺寸大小
background-size:cover;铺满背景
background-position:移动背景位置,左上角为00(水平位置 垂直位置)
3.7边框
属性含义
border-style设置边框样式
none:设置无边框
dashed虚线
dotted点状线
double双实线
solid实现
groove3D凹槽效果
ridge3D垄起效果
border-radius:设置圆角
3.8浮动、定位

3.8.1浮动(float)

**概念:**所谓浮动就是指元素脱离文档流,漂浮到文档流上方。不会占据位置。

特性:

1、在网页布局中浮动分为两种:Float:left表示左浮动  Float:right表示右浮动
2、浮动的元素会向左或向右浮动,碰到父元素边界、浮动元素、未浮动的元素 才停下来
3、相邻浮动的块元素可以并在一行,超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素
5、浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果
6、父元素内整体浮动的元素无法撑开父元素,需要清除浮动
7、浮动元素之间没有垂直 margin 的合并

清除浮动

第一种:使用clear: left | right | both

第二种:给父元素设置overflow:hidden;

第三种:采用伪元素清除浮动,如下代码:
.clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    clear: both;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
}

3.8.2定位(position)

概念:设置元素在html文档流中的位置

设置元素的定位方式之后, 要想进行位置偏移,那么就必须设置属性left,top,right,bottom

可以使用css中的position属性设置元素的定位类型

属性含义
relative生成相对定位元素,元素所占据的文档流的位置不变, 元素本身相对文档流的位置进行偏移
absolute生成绝对定位元素,元素脱离文档流,不占据文档流的 位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对 或者绝对或者固定定位的父级元素来进行定位,如果找不到,则相 对于 body 元素进行定位。
fixed生成固定定位元素,元素脱离文档流,不占据文档流的位置, 可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。
static默认值,没有定位,元素出现在正常的文档流中,相当于 取消定位属性或者不设置定位属性 inherit 从父元素继承 position 属性的值

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

内外边距

margin:从自身的边框到外部某个元素边框之间的距离,作用:设置与某个元素的距离。
padding:从自身的边框到内部某个元素之间的距离,作用:可撑大元素。

3.9定位元素层叠

属性:z-index

一个元素放置于另一元素上面。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
层叠就需要给元素定位

第四章JavaScript

4.1JavaScript概念

JavaScript是一个基于对象和事件驱动的,并具有安全性能的脚本语言,是一种轻(弱)量级的编程语言,而Java是强类型的编程语言,两者没有任何关系,只是名字相似而已。JavaScript主要用来给html增加动态功能

脚本语言:又称扩建语言(动态语言),是一种编程语言,用来控制软件应用程序, 脚本通常以文本(如ASCII)保存,只在被调用时进行解释或编译

4.2JavaScript使用
方法说明
window.alert(msg)浏览器弹出警示框
consloe.log(msg)浏览器控制台打印输出信息
prompt(info)浏览器弹出输入框,用户可以输入
document.write()输出,把标签写入html
innerHTML()获取标签中的文本
4.3选择器
选择器说明
class选择器getElementsByClassName获取的是元素数组
标签选择器通过标签名getElementsByTagName获取的是元素数组
id选择器通过id名getElementsById获取的是标签元素对象
4.4数据类型

var表示所有的数据类型

数据类型说明
Number数字型,包含整型和浮点
Boolean布尔值类型
String字符串类型
Undefined(未命名)var a;声明了变量a但是没有给值,此时a=undefined
NullVar a=null;声明了变量a为空值
4.5自定义函数
执行某一功能的代码块 参数不用加var

   function + 函数名(参数){

}
4.6运算符

JavaScript的运算符和Java一样:算术运算符 逻辑运算符 关系运算符 三目运算符

4.7流程控制语句
if(){}

if(){}else{}

if(){}else if(){}else{}

switch(){break}

for(){}

while(){}
4.8创建数组

数组对象用来在单独的变量名中存储一系列的值

创建数组的方式:var arr = new Array(); var arr = [值];

4.9创建对象

JavaScript的对象和Java中的一样,对象名.属性名 对象名.方法名

//第一种
var person=new Object();

person.firstname="Bill";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";
//第二种(用逗号隔开)
var person1={

	name:"张三",

	age:22,

	sex:"男"

}
4.10比较

==:比较的值相等,不分类型

===:值相等类型也相等

4.11typeOf

typeOf返回的是数据类型

用法:typeOf(变量)或typeOf变量

4.12DOM文档对象模型

DOM 节点

在 HTML DOM(Document Object Model)中,每个东西都是 节点

文档本身就是一个文档对象

所有的 HTML 元素都是元素节点

所有的 HTML 属性都是属性节点

插入到 HTML 元素文本时文本节点

注释是注释节点

元素对象

在 HTML DOM 中,元素对象代表着一个 HTML 元素

元素对象子节点 可以是 元素节点文本节点注释节点

NodeLis 对象 代表了节点列表,类似于 HTML 元素的子节点集合

元素可以有属性属性属于属性节点

文档其实是一个网页:

1、通过id找到HTML元素

2、通过标签名找到HTML元素

3、通过类名找到HTML元素

arguments和this

所有的方法都有两个默认的形参,一个叫 this ,一个叫 argument

如果只调用方法不去 new 它this指向调用它的东西

如果直接调用方法,相当于把它赋给了 window 对象相当于是 window.aaa

如果不去new 对象,this 就是 window(对象)

this永远指向它的调用实例对象

哪个实例对象调用了这个方法,这个方法里的 this 就是哪个实例对象

arguments 是一个 arguments 形式的数组

参数的一个封装,会把你传入的所有的参数封装成一个集合,这个集合可以当数组用

可以用arguments的下标来获取相应的参数

DOM使用

document.方法名().属性

例:
document.getElementById("test").innerHTML = "test"
属性名称说明
innerHTML节点(元素)的文本值
attributes节点(元素)的属性节点
innerText内部文字修改

常用方法

方法名称说明
getElementById(id)获取带有指定id的节点(元素)
appendChld(node)插入新的子节点(元素)
removeChild(node)删除子节点(元素)
getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)
write()向文档写文本、HTML表达式或JavaScript代码
getElementsByClassName()获取带有指定Class的节点(元素)所有元素的节点列表
querySelectorcss怎么用它怎么用,选择标签,css里的选择器
4.13BOM浏览器对象模型

BOM提供了独立于内容而与浏览器窗口进行交互的对象。

​ BOM的核心是window。

​ BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性

警示框:window.alert()

确认框:window.confirm(“really?”)

提示框:window.prompt()

网页跳转:window.location.href=“http://www.baidu.com”; window.open(“http://www.baidu.com”)

4.15日期

Java获取日期的时间戳:New Date().getTime(); System.currentTimeMillis();

JavaScript创建日期:var now=new Date();

getFullYear():获取年份

getTime():返回从 1970 年 1 月 1 日至今的毫秒数

setFullYear():使用设置具体的日期

toUTCString():将当日的日期(根据 UTC)转换为字符串

getDay():使用 getDay() 和数组来显示星期,而不仅仅是数字

第五章jQuery

5.1jQuery概述

JQuery是一个快速、简洁的JavaScript框架,是把JavaScript的一些功能封装起来存放在库里,为了方便使用;JavaScript的功能 > JQuery的功能

5.1.1jQuery的优点
  1. 轻量级。核心文件才几百kb,不会影响页面加载速度
  2. 跨浏览器兼容。基本兼容了现在主流的浏览器
  3. 链式编程、隐式迭代
  4. 对事件、样式、动画支持,大大简化了DOM操作
  5. 支持插件扩展开发,有着丰富的第三方的插件
  6. 免费、开源
5.1.2使用方法

1、基础语法:$(selector).action()

$定义JQuery

选择符(selector)”查询”和”查找”HTML元素

JQuery的action()执行对元素的操作

2、使用方法

(1)在head标签引入jQuery

<script type = “text/javascript” src = “jquery-3.4.1.min.js” /><script>

(2)文档加载完成加载js

第一种:
$(document).ready(function(){

});

第二种:$(function(){

});

3、jQuery设置样式

$(‘div’).css(‘属性’, ‘值’)

4、标签的显示隐藏

hide()隐藏 show()显示

5.2 DOM对象和JQuery对象

5.2.1 DOM对象
概述:用原生JavaScript获取过来的对象就是DOM对象

举例:var myDiv = document.querySelector(‘div’); //myDiv是DOM对象

5.2.2 JQuery对象
概述:用JQuery方式获取过来的对象是JQuery对象

本质:通过$把DOM元素进行了包装

举例:(‘div’);// (‘div’); //(‘div’);//(‘div’)是一个JQuery对象

5.2.3 JQuery对象只能使用JQuery方法,DOM对象使用原生JavaScript属性和方法
myDiv.hide(); //myDiv是一个DOM对象不能使用JQuery里面的hide方法

$ (‘div’).style.display = ‘none’; //这个$ (‘div’)是一个JQuery对象不能使用原生JavaScript的属性和方法

5.2.4 相互转换
因为原生js比JQuery更大,原生的一些属性和方法JQuery没有给我们封装,要想使用这些属性和方法需要把JQuery对象转换为DOM对象才能使用

DOM对象转换为JQuery对象:$(DOM对象)

JQuery对象转换为DOM对象(两种方式)

$ (‘div’)[index]或$ (‘div’).get(index) index是索引号

5.3jQuery选择器
名称用法描述
id选择器$(“.#id”)获取指定id的元素
全选选择器$(“*”)匹配所有元素
类选择器$(“.class”)获取同一类class的元素
标签选择器$(“div”)获取同一类标签的所有元素
并集选择器$(“div.p.li”)选取多个元素
交集选择器$(“li.current”)交集元素
子代选择器$(“ul>li”)使用>号,获取亲儿子层级的元素
后代选择器$(“ul li”)使用空格,代表后代选择器
5.4jQuery筛选选择器
语法用法描述
:first$(“li:first”)获取第一个li元素
:last$(“li:last”)获取最后一个li元素
:eq(index)$(“li:eq(2)”)选择索引号为2的元素,从0开始
:odd$(“li:odd”)选择索引号为奇数的元素
:even$(“li:even”)选择索引号为偶数的元素
5.5事件

事件:页面对不同访问者的响应,出发某个操作而执行的代码

鼠标事件:click、dblclick、mouseenter、mouseleave、hover

键盘事件:keypress、keydown、keyup

表单事件:submit、change、focus、blur

文档/窗口事件:load、resize、scroll、unload

事件解除

1. elem.onclick = null / false; //直接解除

 var div = document.getElemetById('id');

  div.onclick = test;

  function test(){

    console.log('remove click');

  }

  div.onclick = null;  或者  div.onclick = false;

2. elem.removeEventListener(type,fn,false);//这里 fn 必须是原有绑定的函数,否侧解除无效

  var div = document.getElemetById('id');

  div.addEventListener('click',test,false);

  function test(){

    console.log('remove click');

  }

 

  div.removeEventListener('click',test,false);

3. elem.detachEvent(‘on’+type,fn); //这里 fn 必须是原有绑定的函数,否侧解除无效

var div = document.getElemetById('id');

  div.attachEvent('onclick',test);

  function test(){

    console.log('remove click');

  }

   div.detachEvent('onclick',test);

事件冒泡

事件会从最确定的点击的事件扩展到一切包着它的父元素上。

从点击最小的元素扩展到包含他的最大的元素,叫事件冒泡。

事件捕获

事件捕获和事件冒泡是两种方向相反的事件传递的方式。

阻止事件冒泡

stopPropagation(); 阻止事件冒泡的方法

event.stopPropagation():只是阻止事件往上冒泡,不阻止事件本身。

.5.6内置对象

JavaScript基于对象的语言

也就是说JavaScript是由很多内置的对象组成的编程语言

它有一些内置对象去帮助我们合理的去操作一些东西

数组对象

属性介绍
length获得数组元素的个数
concat连接数组生成新的数组
join使用指定的分割符将数组连接成字符串
push、pop分别表示向数组末尾添加元素,删除末尾元素
shift、unshift分别表示删除数组第一个元素,向数组开头添加一个元素
reverse颠倒数组顺序,数据反转
slice()获取数组元素,并将截取的部分返回 (参数1:开始的索引位置)(参数2:结束的索引)
splice()删除数组元素,这个方法在执行时返回的是删除的数组元素(参数1:开始的索引位置)(参数2:删除的元素个数)(参数3:可选的,如果有参数3,表示使用参数3代替删除的那些元素)
toString()将数组转换为字符串,该结果的返回值是修改后的字符串

字符串对象

属性介绍
indexOf()获得某个字符在字符串整体中第一次出现的索引
lastIndexOf()获得某个字符在字符串整体中最后一次出现的索引
split()根据指定的分隔符,将字符串拆分为数组(参数1:分隔符号)(参数2:限制返回的结果数量)
replace()字符串替换(参数1:正则表达式)(参数2:替换的结果)
match()方法用来根据正则表达式进行筛选
charAt()用来获得在指定索引位置的字符是什么(参数:索引位置)
slice()字符串截取(参数1:开始的索引位置)(参数2:结束的索引位置)
substr()(参数1:开始的索引位置,如果是正数,从0开始;如果是负数,从后面向前面数) (参数2:截取的长度)
toLowerCase()将字符串转换成小写
toUpperCase()将字符串转换成大写

第六章组件

jQuery学习 搜索jQuery的API文档进行学习:http://jquery.cuishifeng.cn/

框架
layui框架

搜索layui的官网文档里进行学习:https://www.layui.com/doc/

echart组件

搜索echart的官网文档里进行学习:https://www.echartsjs.com/zh/index.html

第七章原型链和正则表达式

1、原型和原型链

(1)原型概念

  • JavaScript的所有对象中都包含了一个 [proto] 内部属性,这个属性所对应的就是自身的原型
  • JavaScript的函数对象,除了原型 [proto] 之外,还有 prototype 属性,当函数对象作为构造函数创建实例时,该 prototype 属性值将被作为实例对象的原型 [proto]

(2)原型链概念

​ 原型链是实例对象与原型之间的链接

  • 当一个对象调用自身不存在的属性/方法时,就会去自己 [proto] 关联的前辈 prototype 对象上去找,如果没找到,就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推,直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”。

          function Person(){
                this.name = "小明";
                }
                Person.prototype.showName = function(){
                    alert(this.name);
                }
                var bb = new Person();
                bb.showName();
    
    答案是bb会弹出小明。
    Person.prototype也是一个对象,只是这个对象比较特殊,叫“原型对象”。然后我们在原型对象Person.prototype上挂载了showName这个方法。
    bb是构造函数Person实例化的一个新对象。然而bb上为什么也有showName方法呢?
    ------因为实例对象bb与原型对象Person.prototype之间存在一个隐式链接。这个隐式链接就是**__proto__**原型链。
    bb自身是木有showName方法的,但这并不能阻止bb的脚部,因为它有**__proto__**原型链,当bb在自身的方法中找不到showName时,就会通过它与生具有的**__proto__**原型链继续查找它的原型对象Person.prototype,通过原型链,实例化对象bb也可以拥有原型对象Person.prototype上的方法了。
    总结:
    每一个构造函数上都有一个prototype属性,每一个对象,包括被实例出来的对象都有一个**__proto__**属性,他们的指向都是一致的。
    
    
      function Aaa(){
                     this.num = 20;
                 }
               Aaa.prototype.num = 10;
            var bb = new Aaa();
            alert(bb.num);//20
    
    为什么弹出的是20而不是10呢?
    ——这里有两个num,Aaa自身有num属性,bb是其实例化出来的对象,所以bb自身也有num属性,就没有必要到原型对象上去找了。
    总结:
    函数对象自身的属性相当于css加中的行内样式style,而其原型对象上的属性相当于css中加的class样式。style优先级高于class,自身的属性优先于原型对象上挂载的属性。
    

    当函数自身有相应的方法或者属性时就用自己的,当自身没有时才通过**proto**原型链查找。

    原型链的最外层是Object.prototype

       function Aaa(){
                    // this.num = 20;
                 }
              // Aaa.prototype.num = 10;
               Object.prototype.num = 30;
            var a1= new Aaa();
            alert(a1.num);//30
    

    当函数对象自身和其原型上都找不到对应的属性或方法时就继续通过原型链**proto**往Object上查找。

    (3)__proto__和prototype

    __proto__指向当前对象的原型,prototype是函数才具有的属性,默认情况下,new 一个函数创建出的对象,其原型都指向这个函数的prototype属性。

    每个实例对象(object )都有一个私有属性(称之为 proto)指向它的原型对象(prototype)。该原型对象也有一个自己的原型对象 ,层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。

    总结:

JavaScript中的对象,都有一个内置属性[Prototype],指向这个对象的原型对象。当查找一个属性或方法时,如果在当前对象中找不到,会继续在当前对象的原型对象中查找;如果原型对象中依然没有找到,会继续在原型对象的原型中查找(原型也是对象,也有它自己的原型);直到找到为止,或者查找到最顶层的原型对象中也没有找到,就结束查找,返回undefined。这个查找过程是一个链式的查找,每个对象都有一个到它自身原型对象的链接,这些链接组建的整个链条就是原型链。拥有相同原型的多个对象,他们的共同特征正是通过这种查找模式体现出来的。
在上面的查找过程,我们提到了最顶层的原型对象,这个对象就是Object.prototype,这个对象中保存了最常用的方法,如toString、valueOf、hasOwnProperty等,因此我们才能在任何对象中使用这些方法。

2、正则表达式

JS正则表达式实用总结

一、什么是正则表达式

正则表达式是由一个字符序列形成的搜索模式,搜索模式可用于文本搜索和文本替换以及文本检测。

二、创建正则表达式

JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量。

var re=new RegExp (); //RegExp 是JS中的类,同Array类似。然而这个创建方法没有指定表达式内容
re=new RegExp ("a"); //最简单的正则表达式,将匹配字母a 
re=new RegExp ("a","i"); //重载的构造函数,其第二个参数指定将不区分大小写

其中,对于第二个参数,为可选参数,常用的有:

g :全文查找;

i :不区分大小写;

然而更为常见的正则表达式创建法则是:字面量的声明方式。 即:

var re=/a/i; //其作用同:re=new RegExp ("a","i"),而且更常用

3、正则表达式本身的方法

在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。

test() 方法 test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文

本,则返回 true ,否则返回 false 。

//以下实例用于搜索字符串中的字符 "e": 
var patt = /e/;
patt.test("The best things in life are free!"); 字符串中含有 "e",所以该实例输出为: true
以上两行代码可以合并为一行: /e/.test("The best things in life are free!")
exec() 方法 exec() 方法用于检索字符串中的正则表达式的匹配。 该函数返回一个数组,其中
存放匹配的结果。如果未找到匹配,则返回值为 null 。 以下实例用于搜索字符串中的字母 e :
/e/.exec("The best things in life are free!"); 字符串中含有 "e",所以该实例输出为: e

比较常用的就是正则表达式的 test 方法了,因为大多只需要知道:某个字符串是否匹配某正则表达

式,是则 True ,否则为 False 。

4、 ()、[]、{} 的区别

先看个例子 校验字符串是否全由8位数字组成

function isStudentNo(str) { var reg=/^[0-9]{8}$/; /*定义验证表达式*/ return reg.test(str); /*进行验证*/ }

[] 是定义匹配的字符范围。 [0-9] 表示查找任何从 0 至 9 的数字。

{} 一般用来表示匹配的长度。 {8} 表示位数为8位。

() 的作用是提取匹配的字符串。表达式中有几个 () 就会得到几个相应的匹配字符串。比如 (\s+) 表

示连续空格的字符串。

5、 ^ 和 $

^ 匹配一个字符串的开头,比如 ( ^a ) 就是匹配以字母 a 开头的字符串

$ 匹配一个字符串的结尾,比如 ( b$ ) 就是匹配以字母 b 结尾的字符串

需要注意的是:如果 ^ 出现在 [] 中一般表示取反,而出现在其他地方则是匹配字符串的开头。

6、 \d \s \w .

\d 匹配一个非负整数, 等价于 [0-9] ;

\s 匹配一个空白字符;

\w 匹配一个英文字母或数字,等价于 [0-9a-zA-Z] ;

. 匹配除换行符以外的任意字符,等价于 [^\n] 。

7、 * + ?

* 表示匹配前面元素0次或多次,比如 (\s*) 就是匹配0个或多个空格;

+ 表示匹配前面元素1次或多次,比如 (\d+) 就是匹配由至少1个整数组成的字符串;

? 表示匹配前面元素0次或1次,相当于 {0,1} ,比如 (\w?) 就是匹配最多由1个字母或数字组成的字

符串 。

8、修饰符 修饰符用于执行区分大小写和全局匹配:

修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m执行多行匹配。

方括号 方括号用于查找某个范围内的字符:

表达式描述
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
[adgk]查找给定集合内的任何字符。
[^adgk]]查找给定集合外的任何字符。

元字符 元字符( Metacharacter )是拥有特殊含义的字符:

元字符描述
.查找单个字符,出了换行和行结束符
\w查找单词字符。
\W查查找非单词字符
\d查找数字。
\D查找非数字字符
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NULL 字符。
\n查找换行符。
\f>查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

9、常用的js正则表达式

1.验证用户名和密码:”^[a-zA-Z]\w{5,15}$” 

2.验证电话号码:(”^\d{3,4}-\d{7,8}$”) 

eg:021-68686868 0511-68686863.验证手机号码:”^1[3|4|5|7|8][0-9]\d{8}$”; 

4.验证身份证号(15位或18位数字):”\d{14}[[0-9],0-9xX]”; 

5.验证Email地址:(^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$”)6.只能输入由数字和26个英文字母组成的字符串:(^[A-Za-z0-9]+$”) ; 

7.整数或者小数:^[0-9]+([.]{0,1}[0-9]+){0,1}$ 

8.只能输入数字:”^[0-9]*$”。 

9.只能输入n位的数字:”^\d{n}$”。 

10.只能输入至少n位的数字:”^\d{n,}$”。11.只能输入m~n位的数字:”^\d{m,n}$”。 

12.只能输入零和非零开头的数字:”^(0|[1-9][0-9]*)$”。 

13.只能输入有两位小数的正实数:”^[0-9]+(.[0-9]{2})?$”。 

14.只能输入有1~3位小数的正实数:”^[0-9]+(.[0-9]{1,3})?$”。 

15.只能输入非零的正整数:”^+?[1-9][0-9]*$”。 

16.只能输入非零的负整数:”^-[1-9][]0-9*$。 

17.只能输入长度为3的字符:”^.{3}$”。 

18.只能输入由26个英文字母组成的字符串:”^[A-Za-z]+$”。 

19.只能输入由26个大写英文字母组成的字符串:”^[A-Z]+$”。 

20.只能输入由26个小写英文字母组成的字符串:”^[a-z]+$”。 

21.验证是否含有%&,;=?$\”等字符:”[%&',;=?$\x22]+”。 

22.只能输入汉字:”^[\u4e00-\u9fa5]{0,}$”。 

23.验证URL:”^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$”。 

24.验证一年的12个月:”^(0?[1-9]|1[0-2])$”正确格式为:”01″~”09″和”10″~”12″。 

25.验证一个月的31天:”^((0?[1-9])|((1|2)[0-9])|30|31)$”正确格式为;”01″~”09″、”10″ 

~”29″和“30~31”。 

26.获取日期正则表达式:[\d{4](file:////d%7B4)}[年|-|.]\d{\1-\12}[月|-|.]\d{\1-\31} ? 

评注:可用来匹配大多数年月日信息。 

27.匹配双字节字符(包括汉字在内)[^\x00-\xff] 

评注:可以用来计算字符串的长度(一个双字节字符长度计2ASCII字符计128.匹配空白行的正则表达式:\n\s*\r 

评注:可以用来删除空白行 

29.匹配HTML标记的正则表达式:<(\S?)[^>]>.?</>|<.? /> 

评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力 

30.匹配首尾空白字符的正则表达式:^\s|\s$ 

评注:可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式 

31.匹配网址URL的正则表达式:[a-zA-z]+://[^\s]* 

评注:网上流传的版本功能很有限,上面这个基本可以满足需求32.匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线)^[a-zA-Z][a-zA-Z0-9_] 

{4,15}$ 

评注:表单验证时很实用 

33.匹配腾讯QQ号:[1-9][0-9]{4,} 

评注:腾讯QQ号从10 000 开始 

34.匹配中国邮政编码:[1-9]\d{5}(?!\d) 

评注:中国邮政编码为6位数字 

35.匹配ip地址:((2[0-4]\d|25[0-5]|[01]?\d\d?).){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值