前端整体阶段个人总结
前端整体阶段个人总结
HTML
Hyper Text Markup Language 超文本标记语言
超文本:超级文本/超链接文本,超越了文本的限制,如多媒体文件、超链接等。
标记:也可以称为标签,用<>括起来的一个特定单词,整体称为标记或标签,分为单标签和双标签。
- 单标签:<单词/>
- 双标签:<单词></单词>
标签的类型
- 块级元素,占页面中的一整行。block
- 行内元素,占一行中的一部分。inline
标签的属性
标签第一个中括号中,使用 属性=“值” ,让某个标签拥有特定属性。
如<meta charset="utf-8">
中,charset="utf-8"就是meta标签的属性
chartset称为属性名,utf-8称为属性值。
如果有多个属性,使用空格隔开。
如<div id="xxx" class="xxx"></div>
。
网页基本结构
<html><head><title>网页标题</title></head><body>网页主体</body>
</html>
创建一个文本文档,将以上内容进行保存,文档的后缀名改为.html,用浏览器就能解释运行。
HTML注释
<!-- HTML中的注释 -->
页面种显示颜色的方式
- 颜色单词,如red、blue、green等
- 颜色RGB。R-RED,G-GREEN,B-BLUE。rgb(255,0,0)表示红色,数字范围[0,255],值越大,对应的颜色越深
- 颜色的十六进制RGB。#FF0000表示红色,相当于RGB(255,0,0)
资源的路径
绝对路径:资源的完整地址。如在线图片地址或带有盘符的地址
相对路径:从当前页面出发,找到图片所在位置
- 使用“…/”跳出当前目录
- 使用"xxx/"进入xxx目录
常用标签
文字
标签名 | 作用 |
---|---|
h1~h6 | 块级元素。标题。文字加粗,1最大,6最小。通常用h1~h3 |
p | 块级元素。段落。 |
span | 行内元素。 |
pre | 块级元素。预处理标签。 |
i | 行内元素。倾斜。 |
u | 行内元素。下划线。 |
b | 行内元素。加粗。 |
sub | 行内元素。文字下标。 |
sup | 行内元素。文字上标。 |
以上标签都是双标签 |
Emojo表情
用法:复制表情对应的十进制或十六进制的代码,最好使用span显示
<!--十进制 &#特定值;-->
<span>⭐</span>
<!--十六进制 &#x特定值; -->
<span>⌛</span>
图片img
单标签,行内元素
<img src="图片路径" alt="无法显示图片时显示的文字" title="鼠标悬停时的提示文字" width="宽度" height="高度">
列表ul/ol/li
双标签,块级元素,li是ul或ol的子标签
无序列表ul
默认每一项前用实心圆符号修饰
通过type属性修改符号
- disc 默认,实心圆
- circle 空心圆
- square 正方形
- none 去掉修饰符号
<ul><li>xxx</li><li>xxx</li><li>xxx</li>
</ul>
有序列表ol
默认每一项前用自增数字修饰
通过type属性修改符号
- a/A 英文字母
- i/I 罗马符号
- 1 默认数字
- none 去掉修饰符号
<ol><li>xxx</li><li>xxx</li><li>xxx</li>
</ol>
表格table
表格中的标签 | 作用 |
---|---|
tr | 表格中的行 |
td | 每行中的单元格 |
th | 特殊的单元格,表头,文字加粗居中 |
td可以通过
colspan=“3”属性实现跨3列
rowspan=“2”属性实现跨2行
<table border="1" ><tr><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td rowspan="2">上午</td><td>语文</td><td>数学</td><td>语文</td><td>数学</td><td>语文</td></tr><tr><td>数学</td><td>语文</td><td>数学</td><td>语文</td><td>数学</td></tr><tr><td colspan="6" align="center">午休</td></tr><tr><td rowspan="2">下午</td><td>体育</td><td>音乐</td><td>自然</td><td>科技</td><td>美术</td></tr><tr><td>音乐</td><td>体育</td><td>科技</td><td>美术</td><td>自然</td></tr>
</table>
多媒体
音频audio
<audio controls autoplay loop muted ><source src="xxx.mp3" type="audio/mpeg">
</audio>
视频video
<video width="320" height="240" controls autoplay loop muted ><source src="xxx.mp4" type="video/mp4">
</video>
controls开启控制器
autoplay自动播放
loop循环
muted静音
谷歌浏览器,默认不允许自动播放非静音视频
水平线hr
<hr color="颜色" size="粗细" width="宽度">
换行br
<br>
a标签
行内元素,双标签。
超链接
可以通过a标签访问任何一个地址
<a href="资源路径" target="">点击跳转</a>
target可以控制要访问的资源在哪里打开
_self 默认。在当前页面打开
_blank 在新页面打开
_parent 在父页面打开
指定的name名
- 如果是锚点的name,通过“#name“访问
- 如果是iframe的name,通过"name"访问
锚点
可以通过a标签定义锚点和访问锚点,实现当前页面的快速定位
1.设置锚点
<a name="锚点名"></a>
2.访问锚点
<a href="#指定的锚点名">点击访问锚点</a>
浮动框架iframe
<a href="xx" target="main">xx</a>
<a href="yy" target="main">yy</a><iframe name="main" src="页面的路径" width="宽度" height="高度"></iframe>
表单和表单元素
表单form
双标签,用于接收用户输入的数据
<form action="表单提交的最终目的路径" method="表单提交方式"></form>
form表单有两个重要的属性
- action:设置提交路径
- 可以是一个页面,也可以是后台请求映射
- method:设置提交方式
- 默认值为get,表示使用get方式提交,提交的数据会暴露在浏览器地址栏中
- 设置为post方式,提交的数据不会暴露在浏览器地址栏中
表单元素
定义在表单form标签中的标签
常用表单元素 | 作用 |
---|---|
input | 单标签,行内元素。通过修改关键属性type,变化为不同的组件 |
select | 双标签,行内元素。下拉菜单 |
textarea | 双标签,行内元素。文本域 |
input标签type属性的值 | 作用 |
---|---|
text | 文本框 |
password | 密码框 |
radio | 单选按钮 |
checkbox | 复选框 |
date | 日历组件 |
number | 数字组件 |
hidden | 隐藏域 |
file | 上传文件 |
image | 图片提交按钮 |
submit | 提交按钮 |
reset | 重置按钮 |
表单元素中的属性 | 作用 |
---|---|
name | 用于提交数据时设置提交的参数名 |
value | 用于设置组件的默认值 |
checked | 用于设置单选按钮和复选框的默认选中 |
placeholder | 用于设置输入框的提示文字 |
required | 用于设置输入框为必填项 |
selected | 用于设置下拉菜单默认选中 |
disabled | 用于设置某个组件为不可用状态 |
readonly | 用于设置某个组件为只读状态 |
max/min/step | number独有,用于设置最大值、最小值和步长 |
rows/cols/ | textarea独有,用于设置文本域的行数和列数 |
div标签
块级元素,双标签,没有任何特点。
页面布局时采用div布局。
CSS
Cascading Style Sheets 层叠样式表
用于控制HTML中标签样式的语言。可以精确到像素,美化修饰HTML标签
CSS语法
样式名:样式值;
color:red;
font-size:20px;
选择器
用于选择页面中的元素
id选择器
1.给变迁添加id属性,对其命名
2.在style标签中通过#id名获取
3.通常用于选择某一个元素
class选择器
- 给标签添加class
元素/标签/html选择器
直接通过标签名获取
通常用于选择一组元素
将CSS写在哪里
1.写在标签的style属性中
style=“样式:值;样式:值;”
<body style="background-color:red;"><body/>
2.写在<style>
标签中,通过选择器获取标签后控制样式
style标签通常放在head标签中
<html><head><style>选择器{样式:值;样式:值;}/*获取页面中所有名为div的元素*/div{}/*获取页面中class为test的元素*/.test{}/*获取页面中id为test的元素*/#test{}</style></head></html>
3.创建一个独立的.css文件,通过link标签引入
1.创建一个.css文件,将原本写在style标签中的内容保存在该文件中
2.在页面的head标签中,使用以下代码引入
<link rel="stylesheet" href="css文件路径">
CSS优先级
如果某个元素同时拥有id、class以及style属性时。
优先级从高到低
style属性==>id选择器==>类选择器==>元素选择器
常用样式
尺寸
只能对块级元素设置尺寸。
如果要对行内元素设置尺寸,需要先将其改为块级元素。
样式名 | 作用 | 值 |
---|---|---|
width | 设置块级元素的宽度 | px像素或百分比或vw |
height | 设置块级元素的高度 | px像素或百分比或vh |
设置为像素时,元素不会根据浏览器的窗口大小变化而变化,是固定值。
设置为百分比或vh/vw时,元素会根据浏览器的窗口大小变化二变化,都是百分比。
如果元素需要根据实际窗口变化,宽度建议使用百分比,高度建议使用vh。
背景background
样式名 | 作用 | 值 |
---|---|---|
background-color | 背景色 | 颜色的单词、十进制RGB、十六进制RGB |
background-image | 背景图 | url(图片路径) |
background-repeat | 背景重复 |
默认重复。 no-repeat不重复 repeat-x表示x轴重复 repeat-y表示y轴重复 |
background-size | 背景尺寸 |
默认加载原图。 100%表示完整显示图片。 cover表示覆盖元素。 如body的背景如果设置为cover,随着页面高度变大,背景也会变大,100%则会完整显示图片。 |
background-position | 背景位置 |
可以同时设置x轴和y轴的距离。 如10px 20px表示向右移动10px,向下移动20px 也可以通过background-position-x或-y只移动具体轴 通过使用right left top bottom center设置指定方向 |
background-attachment | 背景固定方式 | fixed表示固定背景,scroll或默认表示跟随滚动条移动 |
background | 背景属性简写 |
可以同时设置图片路径、是否重复和图片位置,无关顺序。如 background:url(图片地址) no-repeat right top 表示图片不重复位于容器右上角 |
background | 渐变函数 | linear-gradient(to left, #7a28c1, #a17fe0, #59C173) |
边框border
边框会"套"在元素外层,元素原本大小不变,但所占区域会变为原本大小+边框宽度
样式 | 作用 | 值 |
---|---|---|
border-style | 边框线型 | solid单线,double双线,dotted点线,dashed虚线 |
border-width | 边框宽度 | 像素 |
border-color | 边框颜色 | 颜色的三种写法 |
border | 同时设置边框线型、宽度和颜色 | 1px solid red |
border-方向-样式 | 某个方向的style或width或color。方向可以是left、right、top、bottom | border-bottom-color:red |
border-方向 | 同时设置指定方向边框线型、宽度和颜色 | border-right:1px solid red; |
border-上下-左右-radius | 设置某个方向为圆角 | |
border-radius | 同时设置四个角为圆角。如果正方形,值设置为边长的一半变为圆形 | |
outline | 轮廓。input文本框获得焦点时,会自动显示一个轮廓,通过将该属性设置为none去除轮廓 | |
border-collapse | 合并相邻边框。通常用于表格设置边框时,将其值改为collapse,表示合并相邻td边框。 | collapse |
字体font
样式名 | 作用 | 值 |
---|---|---|
font-size | 字体大小 | 像素。默认16px,最小12px |
font-family | 字体字型 | 默认微软雅黑 |
font-weight | 字体粗细 | lighter细,bolder粗 |
文本text
样式 | 作用 | 值 |
---|---|---|
color | 文本颜色 | 颜色的三种写法 |
text-align | 文本对齐方式 | 默认left,right右对齐,center居中 |
line-height | 行高 | 像素。如果希望文字“垂直居中”,设置行高为所在容器的高度。 |
letter-spacing | 字符间距 | 像素。 |
text-indent | 首行缩进 | 像素。如果缩进2个字,默认设置为32px |
text-shandow | 文本阴影 | 颜色 水平位置 垂直位置 模糊程度。如gray 4px 4px 3px 表示向右下角移动4px,模糊3px |
text-decoration | 文本修饰 | under-line下划线,over-line上划线,line-through删除线。通常将a标签设置该样式为none表示去掉默认的下划线 |
word-break | 英文换行方式 | 默认以单词为单位换行,不会拆分单词。break-all表示以字母为单位换行,会拆分单词。 |
列表list
样式名 | 作用 | 值 |
---|---|---|
list-style-type | 列表符号 | 通常用none去掉。 |
list-style-image | 使用图片替换列表符号 | url(图片路径) |
list-style-position | 列表符号位置 | 默认outside表示符号和文本分离。inside表示符号和文本绑定。 |
伪类
表示某个元素的某种状态。
用于对某些元素在不同的情况下呈现不同的效果。
如a标签在访问前、悬停时、访问时、访问后的四个状态对应四个伪类
a标签伪类 | 作用 |
---|---|
a:link | 未访问时 |
a:hover | 鼠标悬停 |
a:active | 鼠标按住 |
a:visited | 访问后 |
以上的:hover可以适用于很多标签,如div:hover。
但其余伪类只适用于a标签。
鼠标样式cursor
值 | 效果 |
---|---|
pointer | 光标呈现为指示链接的指针(一只手) |
crosshair | 光标呈现为十字线。 |
move | 此光标指示某对象可被移动。 |
text | 此光标指示文本。 |
wait | 此光标指示程序正忙(通常是一只表或沙漏)。 |
help | 此光标指示可用的帮助(通常是一个问号或一个气球)。 |
progress | 载入 |
显示方式display
值 | |
---|---|
block | 将元素设置为块级元素,能设置尺寸,独占一行 |
inline | 将元素设置为行内元素,不能设置尺寸,占一行中的一部分,尺寸由内容决定 |
inline-block | 将元素设置为行内块,能设置尺寸,占一行中的一部分 |
none | 不显示,不保留自身位置,后续元素会顶替其位置 |
浮动float
让某个元素脱离原本的位置,朝某个方向对齐。
值 | 作用 |
---|---|
left | 向左浮动 |
right | 向右浮动 |
none | 清除浮动 |
float:left和display:inline-block的区别
相同点:都能让多个独占一行的块级元素位于同一行
display:inline-block
多个元素最终会位于同一行内,保留该行位置,元素以下线对齐,保留元素间的缝隙,后续元素是新的一行。
float:left
多个元素脱离自身的位置向指定方向贴合,不保留该行位置,元素向上线对齐,不保留元素间的缝隙,后续元素会顶替之前元素的位置
JavaScript
Java Script通常简称JS,是由网景(NetScape)公司推出
是一门面向对象的、轻量的、弱类型的解释型脚本语言。
弱类型:没有数据类型的限制,变量甚至可以不用定义就能使用
解释型:无需编译,通过解释器解释运行。浏览器就是一个JS解释器。
script脚本:按指令顺序执行。
JS的作用
HTML用于定义页面中的内容
CSS用于控制HTML元素的外观和样式
JS用来操作HTML元素
HTML+CSS+JS组成前端基本三要素。
可以在页面中控制任意元素
可以在页面中嵌入元素
可以操作浏览器
可以与用户进行数据的交互
JS写在哪里
1.写在某个标签的某个事件中
事件如鼠标单击onclick,鼠标移入onmouseenter等
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body><button onclick="alert('Hello JS!')">点击</button><button onclick="console.log('Hello JS!')">点击2</button><button onclick="document.write('Hello JS')">点击3</button>
</body>
</html>
2.写在
```
3.写到一个独立的.js文件中,再通过script标签导入
1.新建一个.js文件,将js代码保存在其中
document.getElementById("xxx");
2.在页中通过script
<script src="js路径"></script>
JS中的输出语句
1.弹警告窗
alert(字符串或变量);
2.控制台输出
console.log(字符串或变量);
3.打印在新页面中
document.write(字符串或变量);
JS中的注释
// 单行注释/*多行注释 */
JS的组成
1.ECMAScript
简称为ES,是JS的标准,也是JS核心语法
包含了数据类型、定义变量、流程控制语句等语法内容。
2BOM
浏览器对象模型
3.DOM
文档对象模型
ECMAScript核心语法
数据类型
元素类型
JS中的原始类型 | 说明 |
---|---|
数值型number | 整数、小数都称为数值型 |
字符串String | 用单引号或双引号起来的都是字符串 |
布尔型boolean | true/false |
空null | 某个引用类型变量通过null设置为空 |
未定义undefined | 当某个变量没有声明或没有值时 |
引用类型
如对象、数组、函数等都是引用类型
定义变量
var/let 变量名;
var name;
var age;
let sex;
标识符的命名规则
由字母、数字、下划线和$符号组成
不能数字开头
不能使用js中的关键字
变量的初始化
var name;
name="Tom";
var age=22;
//可以不用var定义,但不建议
sex="男";
console.log("name"+name+"age"+age+"sex"+sex);
运算符
JS中的boolean类型可以用true或false,也可以用非零数字表示true,默认情况用1表示,false用0表示。
所以可以用true或false当做数字来运算。
算术
+ - * % +两端如果有一端是字符串,作为拼接使用 +两端如果都是数值,作为相加使用。 除+外,其余符号都可以计算字符串。
关系
> < >= <= != == 用法同java,结果都是boolean == 比较内容是否相同,不比较数据类型,如“123”==123结果时true ===比较值和数据类型,如“123”===123结果false !=比较的是内容,如“123”!=123结果为false !==比较值和数据类型是否不同,如“123”!==123结果为true
逻辑
&& || ! 用法同java
赋值和复合赋值
= += -= *= /= %= a*=b+c相当于a=a*(b+c) 符号两端当做整体运算后赋值给符号左侧变量
自增自减
++ -- 符号在前,先+1或-1后使用 符号在后,先使用后+1或-1如果独立成行,都为+1或-1 var i=10; var res=i-- - --i; //res为2,i最终为8;
条件运算符
表达式1?表达式2:表达式3 判断表达式1,结果为true执行表达式2,结果为false执行表达式3
条件语句
if语句
js中的if语句条件可以是boolean值也可以是一个数字(0表示false,非0表示true)
//单分支
if(){}
//双分支
if(){}else{}
//多分支
if(){}else if(){}
//嵌套
if(){if(){}
}
多分支if语句,如果有一个条件满足,则不再判断后续的条件,所有将范围最小的情况写到最前
switch语句
//可以是任意类型
var op;
switch(op){case "":break;case 123:break;case true:break;default:
}
与java不同的是,小括号中没有数据类型的限制,不同的case后也可以写不同类型的数据。
没有break,会继续执行后续case后的内容,直到break或没有代码,如果没有任何case满足,执行default
循环
while循环
while(循环条件){循环体;
}
先判断后执行,有可能一次都不执行
do-while循环
do{循环体;
}while(循环条件);
先执行一次后判断,至少执行一次。
for循环
for(定义循环变量;循环条件;更新循环变量){循环体;
}
continue和break
continue停止本次循环,执行下一次循环。
break停止所有循环。
JS中的本地对象
数组Array
JS中的数组类似于Java中的ArrayList,
可以保存不同类型的数据,数组大小可变。
定义数组
var 数组名 = new Array();
var 数组名 = [];
数组使用
//定义数组
// 1.默认没有给某个位置赋值时,是undefined
// 2.最大下标决定了数组长度
// 3.可以保存不同类型的数据
var list1 = new Array();
list1[0] = 123;
list1[3] = "hello";
list1[10] = true;console.log(list1[3]);
数组遍历
// length属性可以获取数组长度
// 循环所有下标,没有赋值元素的输出undefined
for (var i = 0; i < list1.length; i++) {console.log(list1[i]);
}// 增强for循环,获取保存了数据的下标
for(var index in list1){// 通过下标获取元素console.log(list1[index]);
}
数组初始化
var 数组名 = new Array(元素1,元素2...);
var 数组名 = [元素1,元素2...];
常用方法
方法名 | 作用 | 返回值 |
---|---|---|
sort() | 将数组中的元素进行升序排序 | 排序后的数组 |
reverse() | 将数组中的元素倒序保存 | 倒序后的数组 |
pop() | 移除数组中的最后一个元素 | 被移除的元素 |
push(元素) | 添加元素到数组末尾 | 最新的数组长度 |
shift() | 移除数组中的第一个元素 | 被移除的元素 |
unshift(元素) | 添加元素到数组开头 | 最新的数组长度 |
fill(元素) | 使用指定元素填充数组 | 填充后的数组 |
splice(index) | 从指定索引开始分割数组,方法调用后,数组为剩余元素的数组 | 截取到的元素集合 |
splice(index,length) | 从指定索引开始截取指定长度的数组,方法调用后,数组为剩余元素的数组 | 截取到的元素集合 |
以上方法在调用后,都会影响原数组 |
方法名 | 作用 | 返回值 |
---|---|---|
indexOf(元素) | 得到某个元素第一次出现的索引 | 索引 |
lastIndexOf(元素) | 得到某个元素最后一次出现的索引 | 索引 |
concat(元素) | 将指定元素添加到元素数组末尾 | 添加元素后的数组 |
join(字符) | 使用指定符号将数组元素拼接为一个字符串 | 拼接后的字符串 |
slice(start,end) | 截取指定[start,end)区间内的元素 | 截取后的数组 |
slice(index) | 截取从index开始至末尾的元素 | 截取后的数组 |
map(方法名) | 让数组中的元素都执行指定方法 | 执行方法后的新数组 |
以上方法在调用后,都不会影响原数组 |
日期Date
创建Date对象
var now = new Date();
常用方法
// 获取当前日期时间
var now = new Date();// 年
document.write(now.getFullYear()+"<br>");
// 0-11表示1-12月
document.write(now.getMonth()+"<br>");
// 日期
document.write(now.getDate()+"<br>");
// 一周中的第几天 0-6表示周天到周六
document.write(now.getDay()+"<br>");
document.write(now.getHours()+"<br>");
document.write(now.getMinutes()+"<br>");
document.write(now.getSeconds()+"<br>");
// 获取从1970/1/1起经过的毫秒数
document.write(now.getTime()+"<br>");
//以上方法都有对应的set方法用于设置指定值// 获取日期时间字符串
document.write(now.toString()+"<br>");
// 获取日期部分字符串
document.write(now.toDateString()+"<br>");
// 获取时间部分字符串
document.write(now.toTimeString()+"<br>");
// 以当前环境输出日期时间字符串
document.write(now.toLocaleString()+"<br>");
// 以当前环境输出日期字符串
document.write(now.toLocaleDateString()+"<br>");
// 以当前环境输出时间字符串
document.write(now.toLocaleTimeString()+"<br>");
字符串
在JS中字符串其实是一个字符数组。字符串对象有属性length
常用方法
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body><script>var str="abcABC";//length字符串长度console.log(str.length);var LowerStr=str.toLowerCase();console.log(LowerStr);var blank=" abc ";//去掉字符串左右空格var newblank=blank.trim();console.log(newblank);var str2="123456,1789";//返回字符串指定下标的字符console.log(str2.charAt(5));//返回指定字符(字符串)在字符串第一次出现的下标,从0开始,-1就是没找到var index=str2.indexOf(",");console.log(index);//返回指定字符(字符串)在原字符串中最后一次出现的下标console.log(str2.lastIndexOf("1"));//截取用逗号分割的两个电话号码var phoneNumber="17723010073,17783680377";//substring截取指定位置开始(包含),到指定位置结束(不包含)的子字符串var phone1=phoneNumber.substring(0,phoneNumber.indexOf(","));var phone2=phoneNumber.substring(phoneNumber.indexOf(",")+1,phoneNumber.length);console.log(phone1);console.log(phone2);//substr截取从指定位置开始(包含),指定长度的子字符串,如果长度超过了字符串的长度,也不会报错,只截取到字符串结束var testphone=phoneNumber.substr(phoneNumber.indexOf(",")+1,11);console.log(testphone);//按指定字符(字符串)拆分字符串为数组,var test=phoneNumber.split(",");console.log(test[0]);console.log(test[1]);var chars="abcdefg";//用空字符串拆分,实际是按字符拆分var arrChar=chars.split("");console.log(arrChar[4]);//拼接字符串var stra="xxx";var strb="你好";var newstr=stra.concat(strb);console.log(newstr);var strc="a d min";//用新字符(字符串)替换掉第一个旧字符console.log(strc.replace(" ",""));//把原字符串出现的所有旧字符串全部替换console.log(strc.replaceAll(" ",""));</script>
</body>
</html>
正则表达式
参考网站:JavaScript RegExp 参考手册
正则表达式对字符串匹配(规定字符串的格式,比如长度,允许出现的字符。。。)的工具,一般用于表单输入数据的校验
- 正则表达式的定义和使用
两种定义方式 :var reg1=new RegExp(“hqyj”);
var reg2=/hqyj/;
校验字符串使用test方法,字符串跟正则表达式匹配,返回true,否则返回false
reg2.test(“hqyj”);
正则表达式规则
方括号
[1-9],[a-z] 范围
[abc],[135] 列举
(130|151|189) 组合,多选一
元字符
\d 数字
\w 字符
. 数字、字符、符号
\s 空格
\n 换行
\r 回车
\t 制表符
\ 转义符, \ . 匹配点 比如url中点 www.com.cn
^ 以什么开头
$ 以什么结尾
量词
+一个或多个
*0个或多个
? 0个或1个
{n} n个
{m,n} m到n个
{m,} m到任意个
修饰符
i 忽略大小写
g 全局匹配(匹配字符串的每一个符合规则)
<script>//正则表达式定义var reg1=new RegExp("hqyj");var reg2=/hqyj/;//正则表达式用于校验(匹配)字符串,返回结果为true,说明字符串符合正则表达式格式要求,否则返回falsevar result=reg1.test("hqyj");result=reg2.test("hqyj");console.log(result);result=reg2.test("javascript");console.log(result);//匹配数字var reg3=/[0-9]/;console.log(reg3.test("10000"));//只要有数字,就算匹配成功console.log(reg3.test("100a00"));//true//^以什么开头,$以什么结束。整个字符串都要是数字reg3=/^[0-9]$/;console.log(reg3.test("100a00"));//false//等效于[0-9],都是匹配数字reg3=/\d/;//匹配字母var reg4=/[a-z]/;//匹配小写字母console.log(reg4.test("1abcbc"));reg4=/^[a-z]$/;console.log(reg4.test("4ssss"));reg4=/[A-Z]/;//匹配大写字母reg4=/[A-z]/;//匹配所有字母//\w等效于[A-z]reg4=/\w/;//匹配部分数字或字符var reg5=/[135]/;console.log(reg5.test("1"));reg5=/[xyz]/;console.log(reg5.test("xyzz22"));//匹配次数(量词)var reg6=/[8]*/;//*代表可以出现0次或多次console.log(reg6.test("8"));//trueconsole.log(reg6.test("888888888"));//trueconsole.log(reg6.test(""));//truereg6=/[8]+/;//+代表前面的字符至少出现1次或多次console.log(reg6.test("8"));//trueconsole.log(reg6.test("88888"));//trueconsole.log(reg6.test(""));//falsereg6=/[8]?/;//?代表0或1次console.log(reg6.test("8"));//trueconsole.log(reg6.test(""));//trueconsole.log(reg6.test("88"));//truereg6=/[8]{6}/;//{}大括号里面一个数字指定固定次数console.log(reg6.test("888888"));//trueconsole.log(reg6.test("88888"));//falseconsole.log(reg6.test("88888888"));//truereg6=/[8]{3,5}/;//大括号两个数字,用逗号分割,表示数字出现字数范围console.log(reg6.test("888"));//trueconsole.log(reg6.test("8888"));//trueconsole.log(reg6.test("88888"));//trueconsole.log(reg6.test("88"));//falseconsole.log(reg6.test("888888"));//truereg6=/[8]{2,}/;//大括号后面的一个数字省略,代表2到无限次console.log(reg6.test("88"));//trueconsole.log(reg6.test("888888888888"));//trueconsole.log(reg6.test("8"));//false//例子:QQ号码的正则表达式//全是数字,最少5位,最多10位,第一位不能为0(只能是1到9)var regqq=/^[1-9]{1}\d{4,9}$/;console.log(regqq.test("1818148"));//trueconsole.log(regqq.test("1818"));//falseconsole.log(regqq.test("011818"));//falseconsole.log(regqq.test("17723010073"));//false//小括号括起来,中间有|分割,这种表示或者(多选一)var reg7=/^(130|177|151|189)/;console.log(reg7.test("17723010073"));console.log(reg7.test("1177"));//falsevar rgephone=/^(150|130|155|177){1}\d{8}$/;console.log(reg7.test("17723010073"));//trueconsole.log(reg7.test("130"));//true//其他元字符//除了换行和结束符之外的其他字符(数字、字母、符号)//\s 空格//\n 换行符//\r 回车//\t 制表符//\ 转义符var reg8=/hqyj/i;//正则表达式后面的i,表示忽略大小写console.log(reg8.test("hqyj"));//trueconsole.log(reg8.test("HQYJ"));//truereg8=/ba/g;//正则表达式后面的g,表示全局匹配console.log(reg8.test("baxyba"));//trueconsole.log(reg8.test("baxyba"));//false//字符串的replace方法使用正则表达式//去掉字符串中连续的两位数字var str="abcd45lhl89jkl";var reg9=/\d{2}/g;//替换字符串中所有的两位数字console.log(str.replace(reg9,""));</script>
Math
floor() 向下取整
ceil() 向上取整
round() 四舍五入
abs() 取绝对值
random() 产生一个[0,1)的随机数
[m,n]的随机数:Math.floor(Math.random()*(n-m+1)+n)
[m,n)的随机数Math.floor(Math.random()*(n-m)+n)
<script type="text/javascript">//floor 向下取整(返回整数部分)console.log(Math.floor(3.94)); //3//ceil 向上取整(返回整数+1)console.log(Math.ceil(3.1));//4//round 四舍五入console.log(Math.round(3.14));//3//abs 取绝对值console.log(Math.abs(-10));//10//开平方console.log(Math.sqrt(9));//3//幂运算,3的2次方console.log(Math.pow(3,2));//random 返回0到1的随机数[0,1)console.log(Math.random());//0-9的随机数console.log(Math.floor(Math.random()*10));//5到10(包含)的随机数console.log(Math.floor(Math.random()*(10-5)+5));</script>
函数function
一段代码,能够完成特定的功能,可以被重复的使用
匿名函数
没有名字的函数
标签.事件=function(){}
自定义函数
函数的定义
function 函数名(参数1,参数2,参数3...){//代码}
函数调用
对象.函数名(参数);
<script>fun1();//函数调用function fun1(){console.log("fun1 被调用");}//有参数。无返回值function fun2(name){console.log("你好" + name);}fun2("ABC");fun2();//js函数调用可以传参数也可以不传,不会报错function fun3(a,b){return a+b;}var sum=fun3(1,2);console.log(sum);</script>
js默认的全局函数
parseInt()
parseFloat()
isNaN()
Number()
eval()
//js自带的全局函数
//字符串转整数
console.log(parseInt("85"));
console.log(parseInt("abc")); //返回结果为NaN (not a number)
console.log(parseInt("99abc"));//99, 数字开头的字符串能把前面的数字转为整数,后面部分的字
符自动丢弃
// 字符串转小数
console.log(parseFloat("3.14"));
console.log(parseFloat("a.14"));// NaN
console.log(isNaN(parseFloat("a.14")));// true, 说明字符不是数字,转换失败
console.log(parseFloat("3.1515927").toFixed(2));//toFixed()对小数保留小数的位数
console.log(parseFloat("3.14xyz"));//3.14
// eval, 把字符串中能执行的内容当语句执行
console.log(eval("3 + 2")); //5
BOM
Browser Object Model
浏览器对象模型
可以通过JS获取浏览器信息和控制浏览器行为
弹框
警告框
alert("提示文字");
输入框,带有输入框和确认按钮,返回值为输入的内容
prompt("提示文字");
确认框,带有确认取消按钮,点击确认返回true,否则返回false
confirm("提示文字");
window 对象
表示浏览器窗口对象,可以获取浏览器相关信息,调用浏览器的某些行为
常用属性和行为 作用 window.innerWidth 获取当前浏览器窗口可视区域宽度 window.innerHeight 获取当前浏览器窗口可视区域高度 window.screen 获取当前页面screen对象,保存了屏幕相关信息 window.location 获取当前页面location对象,保存浏览器地址相关信息 window.history 获取当前页面history对象,保存了历史记录相关信息 window.alert() 警告框 window.prompt() 输入框 window.confirm() 确认框 var wid=window.open() 弹出新窗口,返回值为弹出的窗口对象 wid.close() window.close() 关闭窗口,如果通过open()方法的返回值调用,关闭打开的新窗口;如果通过window调用,关闭当前窗口 var myTimeout=window.setTimeout(函数,毫秒) 设置延时生效,在指定毫秒后执行一次指定函数,通常是一个匿名函数 window.clearTimeout(myTimeout) 取消指定的延时生效 var myInterval=window.setInterval(函数,毫秒) 设置重复生效,在指定的毫秒后,重复执行指定函数,通常是一个匿名函数 window.clearInterval(myInterval) 取消指定的重复生效
screen对象
用于获取屏幕相关信息
属性 | 作用 |
---|---|
[window.]screen.width | 获取当前屏幕设置的宽度 |
[window.]screen. | 获取当前屏幕设置的高度 |
[window.]screen.availWidth | 获取当前屏幕除任务栏之外的宽度 |
[window.]screen.availHeight | 获取当前屏幕除任务栏之外的高度 |
location对象
用于设置或获取地址栏你相关信息
常用属性和方法 | 作用 |
---|---|
[window.]location.href | 获取或设置当前浏览器地址 |
[window.]location.assign(“地址”) | 设置当前浏览器地址,能回退 |
[window.]location.replace(“地址”) | 设置当前浏览器地址,不能回退 |
[window.]location.reload() | 重新加载当前页面 |
history对象
方法 | 作用 |
---|---|
[window.]history.back()/go(-1) | 回退 |
[window.]history.forward()/go(1) | 前进 |
DOM
Document Object Model
文档对象模型
每个页面都是一个文档树document tree
页面中的每个标签都是这个树的节点node
根节点是html
document对象是DOM中的核心对象,表示当前页面对象
DOM用于操作(获取设置内容、更改样式等)页面中的节点
标签元素节点==DOM对象
获取节点
获取节点方式 | 作用 |
---|---|
document.getElementById(“某个标签的id名”) | 根据id名获取页面中唯一的节点。返回获取的节点对象。 |
document.getElementsByClassName(“某些标签的class名”) | 根据class名获取页面中对应的所有节点。返回获取的节点数组。 |
document.getElementsByTagName(“标签名”) | 根据标签名获取页面中对应的所有节点。返回获取的节点数组 |
document.getElementsByName(“标签的name属性值”) | 根据标签的name属性值获取对应的所有节点。返回获取的节点数组 |
获取/设置节点文本
innerText
读取或设置某个节点的内容。(双标签中的内容),无论设置什么都会原样显示
innerHTML
读取或设置某个节点的内容。(双标签中的内容),设置的内容如果有HTML元素会HTML元素
获取/设置节点属性
常用属性 | 作用 |
---|---|
节点.src | 获取或设置资源路径,如img的src |
节点.value | 获取或设置节点的value属性,如表单元素的value属性 |
节点.checked | 获取或设置单选按钮和复选框的选中状态 |
节点.className | 获取或设置标签的class属性值 |
节点.href | 获取或设置标签的href属性值,如a的href |
修改节点样式
修改单个样式
节点.style.样式=“值”;
样式名在这里需要使用驼峰命名法,如background-color,要写成backgroundColor
修改多个样式
节点.style.cssText=“样式名:值;样式名:值;”
通过节点.style.样式只能获取通过该方式设置过的样式
创建添加删除节点
创建节点
document.creatElement("标签名");
document.creatElement("div");
此时创建的节点处于"游离态",需要添加到其他节点中才能使用
添加子节点
//父节点.appChild(子节点);
var md=document.creatElement("div");
document.body.appChild(md);
删除子节点
//父节点.removeChile("子节点");
var md=document.getElementById("md");
document.body.removeChild(md);
事件
某个节点的某个行为。
给节点添加事件
<script>
节点.事件=function(){//触发事件时执行的内容}
</script>
<button onclick="函数(实参)">
按钮
</button><script>function(){//xxx
}
</script>
常用事件
常用事件 | 作用 |
---|---|
onclick | 鼠标单击 |
ondblclick | 鼠标双击 |
onfocus | 文本框聚焦 |
onblur | 文本框失去焦点 |
onmouseenter/onmouseover | 鼠标移入 |
onmouseout/onmouseleave | 鼠标移出 |
onmousemove | 鼠标移动 |
onmousewheel | 鼠标滚轮滚动 |
onmousedown/onmouseup | 鼠标按下/松开 |
onsubmit | 表单提交 |
onchange | 改变 |
event对象
在某个函数中传入一个参数,通常为e或event,就可以监听对应的事件。
如在onmouse相关的事件中,加入参数event,就能监听鼠标状态。
在onkey相关事件中加入参数event,就能监听键盘状态等
节点.事件=function(){}
event对象常用属性和方法 | 作用 |
---|---|
event.clientX | 获取当前鼠标水平位置 |
event.clientY | 获取当前鼠标垂直位置 |
event.preventDefault(); | 阻止默认事件 |
event.stopPropagation(); | 阻止事件冒泡 |
事件冒泡
文档中元素如果有重叠的情况,并且这些重叠的节点都有相同的事件
默认在子节点触发事件时,父节点也会触发事件,这种情况称为事件冒泡
通过envent.stopPropagation()
表单相关
表单提交
不要使用提交按钮的单击事件,要使用表单的onsubmit事件
获取表单
//使用常用的id、class、标签名、name属性名,通过document.getElementXXX方式获取
//还可以使用document.form获取当前页面中表单的数组document.forms[0].onsubmit=function(){}
阻止表单提交
//在表单的提交事件中使用return false阻止表单提交
输入框
文本框text、密码框password、文本域textarea都是输入框
获取输入框中输入的内容
//var 变量=节点.value;
var username=document.getElementByName("username")[0].value;
设置输入框的内容
//节点.value=值;
document.getElementByName("username").value="xxx";
单选按钮
判断是否选中
节点.checked结果为true表示选中
获取单选按钮对应的值
如在获取选择的性别时,可以设置性别变量值为男,默认选择男,再判断选项女是否为选中,如果被选中,更改性别变量的值为女
复选框
判断是否选中
//节点.checked结果为true表示选中
全选
点击全选时,将所有复选框的选中状态设置为全选按钮的选中状态
反选
点击反选时,将所有复选框的选中状态设置为它自身相反的选中状态
获取复选框选中的值
复选框和单选按钮一样,需要自己设置value的值
通常会定义一个数组保存最终选的各个选项的value值。
通过遍历所有复选框,判断其状态,如果被选中,将其value添加到数组中。
下拉菜单
获取选中的值
下拉单可以通过option的value属性获取选中的值,如果没有设置value,获取的是option标签中的文本。如果有value属性,获取实际的value值
动态添加选项
可以使用document.creatElement(“option”)方式创建option后,使用appendChild方法添加到select中。建议使用new Option(value) 方式创建一个Option后,使用add()添加到select中
JQuery
JQuery是一个轻量级的javascript函数库,封装了很多javascript中的内容,JQuery本质依然是javascript
JQuery
JQuery是一个轻量级的javascript函数库,封装了很多javascript中的内容,JQuery本质依然是javascript
作用
JQuery的宗旨是:“write less,do more”,意味着写更少的代码,干更多事情
用于获取文档中的元素,对元素进行操作
更强大的选择器
封装了ajax,更方便使用
····
使用
** 1.下载JQuery.js文件**
官网下载
- 通过右键另存为下载
** 2.在页面中导入jquery.js文件**
<script src="jquery.js文件路径"></script>
3.在页面中写入另一个script标签,在改变前中写jquery代码
通常将jquery代码写再文档就绪函数中,表示在页面所有内容加载成功后开始执行
- 文档就绪函数类似于js中的onload事件
<script src="jquery.js文件路径"></script>
<script>//文档就绪函数jQuery()//$(function(){})</script>
jquery对象和js对象(dom对象)
在js中,使用document,getElementXXX获取的是dom对象
dom对象只能使用如style、innerText等属性修改样式或内容
在jquery中,使用jquery选择器获取的是jquery对象。
jquery对象只能使用jquery中的属性或函数。
通常在jquery对象命名时,使用$符号作为前缀,方便区分jquery对象和dom对象。
jquery对象转换为dom对象
jquery对象[0]
jquery对象.get(0)
dom对象转换成jquery
$(dom对象)
$符号冲突问题
在页面中引入jquery.js后,$符号相当于"jquery"这个单词,有特殊的含义。
如果一个页面中会引入多个js函数库,并且这些函数库都会使用到$符号时,就会造成 符号冲突。
jquery提供了一个noConflict()函数用于释放对$的使用权
//直接调用该方法,释放对$的使用权,之后只能使用默认的"jquery"
$.noCoflict();
//$("#md")这时会无效//调用该方法,使用变量接收,释放对$的使用权,用指定的变量名代替$
var jq=$.noConflict();
jq("#md");
jQuery中的选择器
基本选择器
基本选择器 | |
---|---|
$(“#id名”) | id选择器,根据id名获取某个元素 |
$(“.class名”) | class选择器,根据class名获取某些节点 |
$(“标签名”) | 元素选择器,根据标签名获取某些节点 |
$(“#id名,.class名,标签名”) | 群组选择器,根据指定的选择器获取所有满足的节点 |
$(“a.test”) | 获取class名为test的a标签 |
$(“a#test”) | 获取id名为test的a标签 |
$(“*”) | 获取所有节点 |
层次选择器
层次选择器 | 作用 |
---|---|
$(“#test空格”) | 得到id为test节点中的所有子节点 |
$(“#test空格div”) | 得到id为test节点中的所有div子节点 |
$(“#test>*”) | 得到id为test节点中的第一层所有子节点 |
$(“#test>.class”) | 得到id为test节点中的第一层class为test的子节点 |
$(“#test+p”) | 得到id为test节点后紧邻的第一个p节点 |
$(“#test~p”) | 得到id名为test节点后的同级p节点 |
注意
$(“p .test”)表示得到p标签下的class为test的标签,有空格
$(“p.test”)表示得到class为test的p标签,无空格
过滤选择器
普通过滤
普通过滤 | |
---|---|
$(“tr:odd”) | 奇数索引。得到索引为1,3,5…的tr标签,按自然顺序为偶数 |
$(“tr:even”) | 偶数索引。得到索引为0,2,4…的tr标签,按自然顺序为奇数 |
$(“tr:first”) | 得到所有tr标签中的第一个 |
$(“tr:eq(索引)”) | 得到指定索引的tr |
$(“tr:lt(索引)”) | 得到小于指定索引的tr |
$(“tr:gt(索引)”) | 得到大于指定索引的tr |
$(“li:nth-child(3n+1)”) | 得到指定函数的子节点 |
$(“li:first-child()”) | 得到作为子节点的li的第一个li |
$(“li:last-child()”) | 得到作为子节点的li的最后一个li |
$(“#test p:not(#md)”) | 得到id为test下的除id为md的p标签 |
$(“#test p:not(:eq(0)”) | 得到id为test下的除索引为0的p标签 |
表单元素过滤
表单元素过滤 | |
---|---|
$(“:input”) | 得到所有表单元素,包括input、select、textarea |
$(“:text”) | 得到文本框 |
$(“:password”) | 得到密码框 |
$(“:radio”) | 得到表单按钮 |
$(“:checkbox”) | 得到复选框 |
$(“:input”) | 得到被选中的表单元素,包含radio、checkbox、select |
$(“: checkbox:checked”) | 得到被选中的复选框 |
$(“:select”) | 得到被选中的下拉菜单选项 |
$(“:reset”) |
属性过滤选择器
属性过滤 | |
---|---|
$(“a[href]”) | 得到所有包含href属性的a标签 |
$(“a:not([href])”) | 得到所有不包含href属性的a标签 |
$(“div[属性=值]”) | 得到指定属性和值的指定标签 |
$(“div[属性!=值]”) | 得到指定属性不等于指定值的指定标签 |
$(“div[属性^=值]”) | 得到以指定值开头的指定属性的指定标签 |
(“div[属性 =值]”) | 得到以指定值结尾的指定属性的指定标签 |
$(“div[属性*=值]”) | 得到包含指定值的指定属性的指定标签 |
$(“div[属性1=值][属性2=值]”) | 得到既包含指定值的属性1且包含指定值的属性2的div |
内容过滤选择器
内容过滤选择器 | |
---|---|
$(“p:contains(文字)”) | 得到带有指定文字的p标签 |
$(“p: not(:contains(文字))”) | 得到不带有指定文字的p标签 |
$(“p:empty”) | 得到不带文字的p标签 |
操作节点
获取、设置节点内容
函数 | |
---|---|
节点.text() | 获取节点中的文本,相当于js中的innerText |
节点.text(“内容”) | 设置节点中的文本。相当于js中的x.innerText=“内容” |
节点.html() | 获取节点中的内容。相当于js中的var text=x.innerHTML; |
节点.html(“内容”) | 设置节点中的内容,相当于js中的x.innerHTML=“内容” |
节点.val() | 获取节点中的value属性。相当于js中的var val=x.value |
节点.val(“内容”) | 设置节点中的value属性。相当于js中的x.value=“内容”; |
获取、设置节点样式
函数名 | |
---|---|
节点.css("样式名“) | 获取某个节点的某个样式值 |
节点.css("样式名“,”值“) | 设置某个节点的某个样式 |
节点.css(“样式名”:“值”).css(“样式名”:“值”) | 同时设置多个样式 |
节点.css({"样式名“:”值“,“样式名”:“值”……}) | 同时设置多个样式 |
获取、设置节点属性
函数名 | 作用 |
---|---|
节点.attr(“属性名”) | 获取某个属性的值 |
节点.attr(“属性名”,“值”) | 设置某个属性的值 |
节点.removeattr(“属性名”) | 移除指定的某个属性 |
节点.addClass(“class名”) | 给某个节点追加class值 |
节点.removeClass(“class名”) | 移除某个节点的某个class值 |
节点.toggleClass(“class名”) | 添加或移除某个class值,如果没有则添加,如果有则移除 |
节点.hasClass(“class名”) | 判断是否存在某个class值,返回boolean类型 |
创建节点
//js写法
document.creatElement("h1");
h1.innerText="创建出的h1";
//jquery写法
var $h1=$("<h1>创建出的h1</h1>");
//以上两种方式创建出的节点都是处于游离状态,需要添加到已有的某个节点上
添加节点
添加子节点 | |
---|---|
父节点.append(子节点) | 将子节点添加到父节点中的最后 |
子节点.appendTo(父节点) | 将子节点添加到父节点中的最后 |
父节点.prepend(子节点) | 将子节点添加到父节点中的最前 |
子节点.prependTo(父节点) | 将子节点添加到父节点中的最前 |
添加兄弟节点 | |
---|---|
原始节点.before(新节点) | 将新节点添加到原始节点之前 |
原始节点.insertBefore(新节点) | 将新节点添加到原始节点之前 |
原始节点.after(新节点) | 将新节点添加到原始节点之后 |
原始节点.insertAfter(新节点) | 将新节点添加到原始节点之后 |
移除节点
移除节点 | |
---|---|
某节点.remove() | 移除某节点 |
某节点.empty() | 移除某节点的子节点 |
复制节点
复制节点 | |
---|---|
某节点.clone() | 复制某节点,不复制节点事件 |
某节点.clone(true) | 复制某节点,复制节点事件 |
修饰节点
替换节点 | |
---|---|
旧节点.replaceWith(新节点) | 用新节点替换旧节点 |
新节点.replaceAll(新节点) | 用新节点替换旧节点 |
包裹节点 | |
---|---|
原节点.wrap(指定节点) | 使用指定节点包裹原节点,如果原节点是集合,会逐一包裹 |
原节点.wrapAll(指定节点) | 使用指定节点包裹原节点,如果原节点是集合,会整个用一个节点包裹 |
父节点.wrapInner(指定节点) | 使用指定节点对父节点中的所有子节点进行包裹 |
通过节点获取节点
函数名 | |
---|---|
某节点.next() | 得到某节点的下一个节点 |
某节点.prev() | 得到某节点的上一个节点 |
某节点.nextAll(参数) | 得到某节点之后的所有节点或指定节点。参数为标签名的字符串,如nextAll(“a”)表示得到后续所有a标签。无参表示得到某节点后的所有节点 |
某节点.prevAll(参数) | 得到某节点之前的所有节点。 |
某节点.siblings(参数) | 得到某节点同级所有或指定的节点 |
父节点.children(参数) | 得到某父节点的所有或指定子节点 |
节点集合.first() | 得到节点集合中的第一个子节点 |
节点集合.last() | 得到节点集合中的最后一个子节点 |
子节点.parent() | 得到某节点的父节点 |
某节点.index() | 得到节点所在集合的索引 |
预设动画
函数名 | |
---|---|
某节点.show() | 同时将宽度和高度从0变为原始值,最终display:block |
某节点.hide() | 同时将宽度和高度从原始值变为0,最终display:none |
某节点.toggle() | 切换show/hide状态 |
fadeIn() | 将不透明度改为从0变为1,淡入,最终display:block |
fadeOut() | 将不透明度改为从1变为0,淡出,最终display:none |
fadeToggle() | 切换fadeIn/fadeOut状态 |
slideUp() | 将高度从原始值变为0,最终display:none |
slideDown() | 将高度从0变为原始值,最终display:block |
slideToggle() | 切换slideUp/slideDown |
以上所有函数都可以给两个参数。节点.动画(时间毫秒数,回调函数)。如节点.动画(2000,function(){ })表示在动画结束后执行函数内的内容 |
自定义动画
启用自定义动画
使用animate()函数,该函数有四个参数,分别为样式组、所需时间、动画函数、回调函数
animate()函数支持链式写法
只支持数值型样式。如尺寸、位置等。字符串型样式不支持,如颜色等
节点.annimate({"样式":"值","样式":"值" },2000,function(){//动画执行结束后执行 }).annimate(...)
停止动画
停止当前动画
节点.stop()
停止所有动画
节点.stop(true)
事件
- js中的事件绑定方式为
dom节点.on事件=function(){}document.getElementById("md").onclick=function(){}
- jquery中的事件绑定方式为:
//jquery节点.事件(function(){})
$("#md").click(function(){})
或jquery节点.bind("事件名",function(){})
事件函数 | 作用 |
---|---|
click() | 单击 |
hover() | 鼠标悬停/离开。该事件可以传入两个函数,分别表示悬停时触发一个函数,离开时触发第二个函数。如果只有一个函数,悬停或离开都触发这个函数 |
focus() | 获得焦点 |
blur() | 失去焦点 |
change() | 改变。适用于各种能发生变化的节点,如文本框、单选、复选、下拉等 |
mouseup/down/over/move/enter/leave/out() | 鼠标相关 |
submit() | 表单提交 |
… | 将js中的事件名去掉on变为函数 |
前端框架
设计者提供给用户该框架额css文件和js文件
用户只需要导入css文件和js文件后,通过对应的class值呈现相应的样式和效果
任何前端框架都有对应的开发文档API,只需参考其使用说明即可
BootStrap
由Twitter推出的一套前端框架,其最大的特点是"栅格化系统"
使用
1.下载核心文件
官网https://v3.bootcss.com/
2.将解压后的整个文件夹复制到项目中
3.新建一个页面,引入3个文化
bootstrap.min.css文件
jquery.js文件
bootstrap.min.js文件
引入js时,一定要先引入jquery,再引入bootstrap,因为bootstrap依赖于jquery
Layui
由国内开发设计者设计的一款基于jquery的前端框架
官网现已下架,但Layui依然可以使用
现在看到的网站都是镜像网站
镜像网站:https://layuion.com/
使用
1.下载Layui核心文件
2.解压后导入项目
3.在页面中加入2个文件
layui.css文件
layui.js文件
JSON
JavaScript Object Notation JS对象简谱
是一种数据交换格式,可以理解为保存数据、交换数据的一种格式。
JSON数据通常以键值对的形式保存。
键的类型为字符串,值的类型可以是普通类型、对象或数组
值的数据类型
值的数据类型 | 符号 | 示例 |
---|---|---|
字符串 | “” | “name”:“wanghai” |
数值 | 直接写数字 | “age”:20 |
逻辑值 | true/false | “married”:false |
空 | null | “car”:null |
对象 | {} | “pet”:{“petNmae”:“点点”,“petAge”:2} |
数组 | [] | “family”:[{“relation”:“父亲”,“name”:“xxx”},{“relation”:“母亲”,“name”:“xxx”}] |
举例
使用json格式保存一个人的信息
属性:姓名、性别、年龄、性别、宠物、婚姻状况、房产、家庭成员
{"name":"张明","age":20,"sex":"男","pet":{"petName":"卡妹","petType":"狗"},"married":true,"house":null,"famliy":[{"name":"xxx","relation":"配偶"},{"name":"yyy","relation":"孩子"}]
}
在HTML中读取JSON文件
$.getJSON(“json文件路径”,回调函数)
$.ajax({url:“访问的资源路径”,success:function(){访问成功后的回调函数}})
前端整体阶段个人总结相关推荐
- 自学前端开发,前端进阶阶段需要学习哪些知识?
今天要跟大家分享的文章是关于web前端进阶阶段需要学习哪些知识?已经入门web前端想要提升自己技术的小伙伴们来和小编一起看一看本篇文章吧,希望本篇文章能够对大家有所帮助. 1.完善我们的基础知识 (1 ...
- Web前端不同阶段工资待遇如何?前端开发真的很值钱吗?
对于互联网公司来说用户就是上帝,做好客户体验一切才有可能.所以互联网公司都会把钱砸向前端,Web前端程序员也越来越受到企业争相聘用.但Web前端工程师真的那么值钱吗? 1.Web前端不同阶段薪资待遇如 ...
- 前端各阶段资源,学得完算我输
前端路漫漫,如果想好要走,那就加油吧 ps:可以加我微信,关于前端的困惑都可以问我 1.前端基础视频 各阶段视频 链接: https://pan.baidu.com/s/1DkKu-uyN0zGP ...
- 大前端各阶段知识点,视频,软件,书籍,源码,面试题等汇总
前端是越来越火了,这就更需要我们汇集百家之长于一身,接下来发一波前端的知识点,希望帮助到想学习前端的同学. 源路径点 一.2019新版前端与移动开发学习路线图---每阶段可掌握的能力及各阶段覆盖的关键 ...
- 重学前端第一阶段完 钢琴项目(document.querySelector js改变css样式的3种方式 思路 成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
- 重庆华清远见-前端部分阶段学习
html 客户端/服务器 Client / Server CS模式 用户需要下载安装一个客户端才能使用.如通讯工具.网游.购物软件等. 特点:功能丰富,安装略微繁琐,需要更新,不同平台,软件不同 浏览 ...
- 【coderwhy前端笔记 - 阶段一 HTML+CSS】(一)HTML
文章目录 软件安装 1 vscode 2 常用工具 HTML 1 快捷键 2 HTML结构 2.1 整体结构 2.2 文档声明 2.2 <html></html> 2.3 &l ...
- 华清远见-重庆中心-JAVA前端JavaScript阶段技术总结
JavaScript JavaScript通常简称为JS,由网景(NetScape)公司推出. 是一门面向对象.轻量级.弱类型的解释型脚本语言. 弱类型:没有数据类型的限制,变量甚至可以不同定义就能使 ...
- 华为云前端一阶段HTML入门(常用标签 表格标签 表单)
HTML入门 HTML入门 1.1结构标签 div是块标签,包裹一定区域中的元素,会独自占一行,可以嵌套使用形成父子级关系以及兄弟级关系: span是会在一行中不断加入(内联标签),但当数量过多时也会 ...
最新文章
- Switch入门第一讲
- DS-1 数据结构和算法刷题
- 用电脑更新手机ios系统_手机系统频繁提示更新,到底要不要更新?
- 搭建iscsi存储系统
- linux 内存使用原理,linux中内存使用原理
- hbase-1.3.2安装
- Nginx 的常用命令
- Java:转换列表 String 到一个字符串
- EDUCoder编程练习题解(递归与嵌套函数)
- jQuery Mobile中列表项ol、ul中的li的data-*选项
- 重新leetcode第2天——递归讲解合集
- layui 点击头像 上传头像
- 年轻人,你应该拒绝奶头乐
- LeetCode 247. 中心对称数
- xshell连接liunx服务器身份验证不能选择password
- ArcGIS学习总结(三)——空间分析基本操作
- 服务器ahci模式安装系统,ahci模式下安装win7系统的方法
- 电脑php的基本方法是什么,做文员的基本电脑操作是什么
- Matlab中的冲激函数
- c语言转义字符 xhh,jsj_C语言转义字符和格式控制符参考.pdf