目录

认识前端

客户端/服务器

模式

使用方法

特点

浏览器/服务器

模式

使用方法

特点

学习前端的重要性

浏览器

作用

主流/推荐的浏览器

前端学习网站

推荐编写软件

HTML部分

定义

标签

标签的类型

标签的属性

格式

作用

网页基本结构（文件后缀.html）

常用标签

Emojo表情

其它标签

CSS部分

定义

CSS语法

选择器

id选择器

class选择器

元素/html/标签选择器

层次选择器

群组选择器

CSS的三个位置

CSS优先级

选择器优先级

常用样式

尺寸

背景background

边框border

字体font

文本text

列表list

伪类

鼠标样式cursor

显示方式display

浮动float

盒子模型

溢出overflow

盒子模型阴影box-shadow

定位position

层叠z-index

不透明度

转换transform

过渡transition

动画animation

滤镜filter

JS部分

简介

特征

两种类型

弱类型

解释型

JS的作用

JS的注释

JS的组成

1.ECMAScript

2.BOM

3.DOM

JS中的本地对象

数组Array

日期Date

字符串

正则表达式

Math

函数function

事件

给节点添加事件

常用事件

event对象

表单相关

注意

jQuery部分

简介

作用

使用

jQuery对象和js对象(dom对象) 的区别

jQuery对象和js对象(dom对象) 的转换

$符号冲突问题

jQuery中的选择器

基本选择器

层次选择器

过滤选择器

操作节点

预设动画

自定义动画

事件

两种方式

前端框架

JSON

个人总结

认识前端

客户端/服务器

模式

Client / Server，简称CS模式。

使用方法

用户需要下载安装一个客户端才能使用。

特点

功能丰富，安装略微繁琐，需要更新，不同平台，软件不同。

浏览器/服务器

模式

Browser / Server，简称BS模式。

使用方法

用户需要一个能上网的设备

特点

功能较独立的客户端略简单，无需下载安装，无需更新，平台无关。

学习前端的重要性

使用BS模式的JavaEE，必须要使用浏览器将后台的数据等渲染到页面上。

浏览器

作用

用于解析页面的平台。

主流/推荐的浏览器

  • 谷歌浏览器Chrome
  • 火狐浏览器FireFox
  • 微软IE/Edge
  • Safira（IOS端使用）

前端学习网站

  • 菜鸟教程（菜鸟教程 - 学的不仅是技术，更是梦想！）
  • W3Schoo（w3school 在线教程）

推荐编写软件

  • HBuilder（HBuilderX-高效极客技巧）
  • VSCode（Visual Studio Code - Code Editing. Redefined）
  • Sublime（Sublime Text - Text Editing, Done Right）

HTML部分

定义

Hyper Text Markup Language 超文本标记语言

  • 超文本：超级文本/超链接文本，超越了文本的限制，如多媒体文件、超链接等。
  • 标记：也可以称为标签，用<>括起来的一个特定单词，整体称为标记或标签，分为单标签和双标签。

标签

标签的类型

  • 块级元素，占页面中的一整行。block
  • 行内元素，占一行中的一部分。inline

标签的属性

格式

属性 =“值”

作用

让某个标签拥有特定属性。

网页基本结构（文件后缀.html）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

常用标签

标签名 作用
h1~h6 块级元素。标题。文字加粗，1最大，6最小。通常用h1~h3
p 块级元素。段落。
span 行内元素。
pre 块级元素。预处理标签。
i 行内元素。倾斜。
u 行内元素。下划线。
b 行内元素。加粗。
sub 行内元素。文字下标。
sup 行内元素。文字上标。

注意：以上标签都是双标签

Emojo表情

用法

复制表情对应的十进制或十六进制的代码，最好使用span显示。

其它标签

图片img

  • 单标签
  • 行内元素

<img src="图片路径" alt="无法显示图片时的提示文字">

 列表ul/ol/li

  • 无序列表ul

语法格式 

<ul><li>小1</li><li>小2</li><li>小3</li><li>小4</li><li>小5</li></ul>

通过type属性修改符号

  • disc 默认，实心圆
  • circle 空心圆
  • square 正方形
  • none 去掉修饰符号
  • 有序列表ol

语法格式

 <ul><lo>小1</lo><lo>小2</lo><lo>小3</lo><lo>小4</lo><lo>小5</lo></ul>

机制

默认每一项前用自增数字修饰

通过type属性修改符号

  • a/A 英文字母
  • i/I 罗马符号
  • 1 默认数字
  • none 去掉修饰符号

表格table

tr:表格中的行。

td:每行中的单元格。（colspan=“3”属性实现跨3列，rowspan=“2”属性实现跨2行）

th:特殊的单元格，表头，文字加粗居中。

语法格式

<table><tr><th></th></tr><tr><td colspan="3"></td><td rowspan="3"></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 href="资源路径" target="">点击跳转</a>

target控制打开位置

  • _self 默认。在当前页面打开

  • _blank 在新页面打开

  • _parent 在父页面打开

  • 指定的name名（如果是锚点的name，通过“#name“访问如果是iframe的name，通过"name"访问）

 锚点

作用

可以通过a标签定义锚点和访问锚点，实现当前页面的快速定位。

设置锚点

<a name="锚点名"></a>

访问锚点

<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>

marquee标签 

<!--
direction="left/right/up/down"朝向。默认left
behavior=""行为。scroll默认重复  slide移动到底后停止  alternate往复
scrollamount=""移动速度。
-->
<marquee scrollamount="10" direction="right" >xxxx
</marquee>

表单和表单元素 

表单form

作用

双标签，用于接收用户输入的数据。

<form action="表单提交的最终目的路径" method="表单提交方式"></form>

action:设置提交路径

method:设置提交方式（get方式和post方式）

表单元素 

常用表单元素 作用
input 单标签，行内元素。通过修改关键属性type，变化为不同的组件
select 双标签，行内元素。下拉菜单
textarea 双标签，行内元素。文本域
type属性值

作用

text

 文本框

password

 密码框

radio

 单选按钮

date

日历组件

number

 数字组件

hidden

 隐藏域

file

上传文件

image

 图片提交按钮

submit

提交按钮

reset

重置按钮

表单元素中的属性

作用

value

用于设置组件的默认值

checked

用于设置单选按钮和复选框的默认选中

name

 用于提交数据时设置提交的参数名

placeholder

 用于设置输入框的提示文字

required

 用于设置输入框为必填项
selected 用于设置下拉菜单默认选中
disabled 用于设置某个组件为不可用状态
readonly 用于设置某个组件为只读状态
max/min/step number独有，用于设置最大值、最小值和步长
rows/cols/ textarea独有，用于设置文本域的行数和列数

div标签 

特征

块级元素，双标签，没有任何特点。

<div></div>

CSS部分

定义

Cascading Style Sheets层叠样式表
用于控制HTML中标签样式的语言。可以精确到像素，美化修饰HTML标签。

CSS语法

样式名：样式值；

选择器

id选择器

定义

  • 给标签添加id属性，对其命名。
  • 在style标签中通过#id名获取通常用于选择某一个元素。

语法格式

#id名{属性名：属性值
}

class选择器

定义

  • 给标签添加class属性，对其命名。
  • 在style标签中通过.class名获取。
  • 通常用于选择一组元素。
.样式名{}

元素/html/标签选择器

定义

  • 直接通过标签名获取。
  • 通常用于选择一组元素。

格式

标签名{}

层次选择器

定义

  • 通过空格或>获取某个元素的子元素。
  • "元素A元素B"表示获取元素A下的所有元素B。
  • ""元素A >元素B"表示获取元素A下的第一层元素B。
#father div{获取其中的所有子元素}
#father>div{获取其中的第一层子元素}

群组选择器

 作用

通过,同时选择多个元素。

格式

div,#mp,.mu{}

CSS的三个位置

  • 写在标签的style属性中
<body style="background-color:red;"></body>
  • 写在<style>标签中
<style>
选择器{样式:值;样式:值;}
</style>
  • 创建一个独立的.css文件，通过link标签引入
<link rel="stylesheet" href="css文件路径">

CSS优先级

style属性==>style标签==>引入css文件。

选择器优先级

style属性==>id选择器==>类选择器==>元素选择器

常用样式

尺寸

注意

只能对块级元素设置尺寸。如果要对行内元素设置尺寸，需要先将其改为块级元素。

样式

样式名 作用 值
width 设置块级元素的宽度 px像素或百分比或vw
height 设置块级元素的高度 px像素或百分比或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 solidred;
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:link 未访问时
a:hover 鼠标悬停
a:active 鼠标按住
a:visited 访问后

鼠标样式cursor

值 作用
pointer  光标呈现为指示链接的指针（一只手）
crosshair 光标呈现为十字线。
move 此光标指示某对象可被移动。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
progress 载入

显示方式display

值 作用
block 将元素设置为块级元素，能设置尺寸，独占一行
inline 将元素设置为行内元素，不能设置尺寸，占一行中的一部分，尺寸由内容决定
inline-block 将元素设置为行内块，能设置尺寸，占一行中的一部分
none 不显示，不保留自身位置，后续元素会顶替其位置

浮动float

特征

让某个元素脱离原本的位置，朝某个方向对齐。

值 作用
left 向左浮动
right 向右浮动
none 清除浮动

盒子模型

样式名 作用
padding 内边距。一个参数表示同时设置4个方向，两个参数表示上下左右；三个参数表示上左右下；四个参数表示上右下左；
padding-方向 某个方向的内边距，方向可以是left、right、top、bottom
margin 外边距。如果某个值设置为auto表示自动将所在容器剩余距离除以2
margin-方向 某个方向的外边距

溢出overflow

值 作用
hidden 溢出部分隐藏
scroll 使用滚动条
visiable 默认。显示。

盒子模型阴影box-shadow

定义

box-shadow:gray 4px 5px 6px灰色阴影向右4px向下5px模糊6px

定位position

值 名称 作用
relative 相对定位 让某个元素，相对于原本的位置进行定位。定位原点为元素本身的位置。
fixed 固定定位 让某个元素脱离文档流，默认根据页面的四个边界进行定位。
absolute 绝对定位 让某个元素脱离文档流，根据已定位的父元素进行定位。如果没有已定位的父元素，会根据页面定位。

层叠z-index

定义

通过z-index控制其层叠顺序。（z-index是一个数字，数字越大，距离视线越近。）

不透明度

样式名 作用
opacity 独立的样式，修改某个元素的不透明度
rgba background-color的值的一种写法，修改背景的不透明度

转换transform

定义

改变某个元素的状态，如旋转、移动、缩放等。

例子 说明
rotate(30deg) 顺时针旋转30度
translate(10px,20px) 向右平移10px，向下平移20px
translateX(10px)/translateY(10px) 向右/向下平移10px
rotateX(30deg)/rotateY(30deg)/rotateZ(30) 沿着X/Y/Z轴3D旋转30度
rotate3d(1,1,0,30deg) 沿着X和Y轴3D旋转30度(0表示该轴不变化)
scale(1.5) 放大1.5倍

过渡transition

定义

设置某个转换效果完成所需的时间等。

例子 说明
transition-duration:3s 所需时间
transition-delay:2s 延时生效
transition-timing-function:linear 时间函数
transition:5s 2s ease 2s后执行，所需5s，慢-快-慢

动画animation

例子 说明
animation-name:动画名 执行指定动画
animation-duration:3s 动画执行时间
animation-delay:3s 动画延时时间
animation-iteration-count:3 动画执行次数，infinite表示无限
animation-timing-function:linear 动画执行时间函数，linear表示匀速
animation:动画名5s 2s 简写。只写一个时间表示用时写两个时间表示第一个是用时，第二个是延时

滤镜filter

样式名 作用
grayscale(100%) 灰度
blur(4px) 模糊
brightness(150%) 亮度
contrast(150%) 对比度
hue-rotate(45deg) 色调旋转
invert(100%) 颜色反转
opacity(50%) 不透明度
saturate(2) 饱和度
sepia(80%) 灰褐色(做旧)

JS部分

简介

JavaScript通常简称为JS，由网景(NetScape)公司推出。

特征

是一门面向对象、轻量级、弱类型的解释型脚本语言。

两种类型

弱类型

没有数据类型的限制，变量甚至可以不同定义就能使用。

解释型

无需编译，通过解释器解释运行。浏览器就是一个JS解释器。

JS的作用

操作HTML元素

JS的三种位置

  • 写在某个标签的某个事件中。
  • 写在<script>标签中。
  • 写到一个独立的.js文件中，再通过script标签导入。

JS的注释

//单行注释

/*

多行注释

*/

JS的组成

1.ECMAScript

定义

简称为ES，是JS的标准，也是JS的核心语法。

数据类型

类型名 值
数值型number 整数、小数都称为数值型
字符串string 用单引号或双引号引起来的都是字符串
布尔型boolean true/false
未定义undefined 当某个变量没有声明或没有值时
空null 某个引用类型变量通过null设置为空

引用类型

        

类型名 值
如对象、数组、函数等

定义变量

var/let 变量名

标识符的命名规则

  • 由字母、数字、下划线和$符号组成。
  • 不能以数字开头。
  • 不能使用js中的关键字。

运算符

与Java不同的几个符号（注意）

==

比较值是否相同，不比较数据类型，如"123"==123结果为true

===
        比较值和数据类型是否相同，如"123"===123结果为false

!==（同理）

比较值和数据类型是否不同，如"123"!==123结果为true

2.BOM

浏览器对象模型（可以通过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(myTmeout) 取消指定的延时生效
var
myInterval=window.setInterval(函数,毫秒) 		设置重复生效，在指定的毫秒后重复执行指定函数，通常是一个匿名函数
window.clearInterval(myInterval) 取消指定的重复生效

screen对象

用于获取屏幕相关信息

属性 作用
[window.]screen.width 获取当前屏幕设置的宽度
[window.]screen.height 获取当前屏幕设置的高度
[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) 前进

3.DOM

文档对象模型

获取节点

获取节点的方式 作用
document.getElementById("某个标签的id
名") 		根据id名获取页面中唯一的节点。返回获取的节点对象。
document.getElementsByClassName("某些标签的class名") 根据class名获取页面中对应的所有节点。返回获取的节点数组。
document.getElementsByTagName("标签名"); 根据标签名获取页面中对应的所有节点。返回获取的节点数组。
document.getElementsByName("标签的
name属性值") 		根据标签的name属性值获取对应的所有节点。返回获取的节点数组。

获取设置节点文本

  • innerText
  • innerHTML（能识别HTML元素）

获取设置节点属性

常用属性 作用
节点.src 获取或设置资源路径，如img的src
节点.value 获取或设置标签的value属性，如表单元素的value
节点.checked 获取或设置单选按钮和复选框的选中状态
节点.className 获取或设置标签的class属性值
节点.href 获取或设置标签的href属性值，如a的href

节点样式

  • 修改单个样式（节点.style.样式名="值"；）
  • 修改多个样式（节点.style.cssText="样式名:值;样式名:值"；）

创建节点

document.createElement("标签名");

添加子节点

父节点.appendChild(子节点);

删除子节点

父节点.removeChild(子节点)

获取父节点

某节点.parentNode

获取子节点

//父节点.children获取子节点的数组
//父节点.firstChild获取第一个子节点
//父节点.lastChild获取最后一个子节点

JS中的本地对象

数组Array

定义

可以保存不同类型的数据，数组大小可变。

定义数组

var 数组名 = newArray();
var 数组名 = [];

数组使用

//定义数组
//1.默认没有给某个位置赋值时，是undefined//
//2.最大下标决定了数组长度
//3.可以保存不同类型的数据
var list1 = newArray();
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 数组名= newArray(元素1,元素2...);
va 数组名= [元素1,元素2...];

常用方法1（都会影响到原数组）

方法名 作用 返回值
sort() 将数组中的元素进行升序排序 排序后的数组
reverse() 将数组中的元素倒序保存 倒序后的数组
pop() 移除数组中的最后一个元素 被移除的元素
push(元素) 添加元素到数组末尾 最新的数组长度
shift() 移除数组中的第一个元素 被移除的元素
unshift(元素) 添加元素到数组开头 最新的数组长度
fill(元素) 使用指定元素填充数组 填充后的数组
splice(index) 从指定索引开始分割数组，方法调用后，数组为剩余元素的数组 截取到的元素集合
splice(index,length) 从指定索引开始截取指定长度的数组，方法调用后，数组为剩余元素的数组 截取到的元素集合

常用方法2（都不会影响原数组）

方法名 作用 返回值
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

常用方法

<script>
var str="rejklFDSAkdsja";
//length-字符串的长度
console.log(str.length);
//字符串转小写，返回新字符串，不会改变源字符串内容
var lowerStr=str.toLowerCase();
console.log(lowerStr);
//字符串转大写，返回新字符串，不会改变源字符串内容
var upperStr=str.toUpperCase();
console.log(upperStr);var blank="  ";
var blank=" 123  ";
var blank="  1 2 3 ";console.log(blank.length);
//去掉字符串前后（左右）的空格，返回新字符串
varnewBlank=blank.trim();
console.log(newBlank.length);
console.log(newBlank);
blank="abc";
//去掉字符串左边的空格
console.log(blank.trimLeft());
//去掉字符串右边的空格
console.log(blank.trimRight());
var str2="abcd12,34,xyz";
//返回指定下标的字符
console.log(str2.charAt(5));
//返回指定字符（字符串）在字符串中第一次出现的下标，从0开始
var index=str2.indexOf(",");
console.log(index);
//返回指定字符（字符串）在原字符串中最后一次出现的下标
console.log(str2.lastIndexOf(","));
//截取用逗号分割的两个dianhua号码
var phone="13047598723,15123648695";
//substring截取指定位置开始（包含），到指定位置结束（不包含）的子字符串
var phone1=phone.substring(0,phone.indexOf(","));
console.log(phone1);
var phone2=phone.substring(phone.indexOf(",")+1,phone.length);
console.log(phone2);
//substr截取从指定位置开始（包含），指定长度的子字符串.长度超过字符串的长度，不
会报错，截取到字符串结束
phone2=phone.substr(phone.indexOf(",")+1,11);
console.log(phone2);
//按指定字符（字符串）拆分字符串为数组,
var arrPhone=phone.split(",");
console.log(arrPhone[0]);
console.log(arrPhone[1]);
var chars="abc中edfeg";
//用空字符串拆分，实际就是按字符拆分
var arrChar=chars.split("");
console.log(arrChar[3]);
//拼接字符串
""
var stra=xxx,;
var strb="你好";
console.log(stra+strb);
console.log(stra.concat(strb));
var str3="admin";
//用新字符（字符串）替换第一个旧的字符串
console.log(str3.replace("",""));
console.log(str3.replaceAll("",""));
</script>

正则表达式

作用

正则表达式对字符串匹配（规定字符串的格式，比如长度，允许出现的字符等）的工具，一般用于表单输入数据的校验。

定义方式

var reg1 = new RegExp("hqyj");
var reg2 = /hqyj/;

校验字符串

reg2.test("hqyj");

正则表达式的规则

  • 方括号
  • 元字符
  • 量词
  • 修饰符

Math

相关函数

函数名 作用
floor() 向下取整
ceil() 向上取整
abs() 取绝对值
random() 产生[0, 1)的随机数
round() 四舍五入

函数function

作用

一段代码的，能够完成特定的功能，可以被重复的使用。

自定义函数

function 函数名(参数1，参数2...){//代码return返回值；//函数不需要返回值，省略return语句
}

函数调用

对象.函数名(参数);

js默认的全局函数

函数名 值
parseInt（） 字符串转整数
parseFloat() 字符串转小数
isNaN() 判断是否是数字（可以查看是否转换成功）
eval() 把字符串中能执行的内容当语句执行

匿名函数

没有名字的函数，通常设置某个标签的某个事件

标签.事件=function(){}

事件

给节点添加事件

节点.事件=function(){//触发事件时执行的内容
}

常用事件

事件名 作用
onclick 鼠标单击
ondblclick 鼠标双击
onfocus 文本框聚焦
onblur 文本框失去焦点
onmouseenter/onmouseover 鼠标移入
onmouseout/onmouseleave 鼠标移出
onmousemove 鼠标移动
onmousewheel 鼠标滚轮滚动
onmousedown/onmouseup 鼠标按下/松开
onsubmit 表单提交
onchange 改变

event对象

作用

可以监听对应的事件。

格式

节点.事件=function(event){}
event对象常用属性和方法 作用
event.clientX; 获取当前鼠标水平位置
event.clientY; 获取当前鼠标垂直位置
event.preventDefault(); 阻止默认事件
event.stopPropagation(); 阻止事件冒泡

表单相关

注意

不要使用提交按钮的单击事件，要使用表单的onsubmit事件。

获取表单

document.forms[0].onsubmit=function(){}

阻止表单提交

在表单的提交事件中，使用returnfalse阻止表单提交。

输入框

文本框text，密码框password，文本域textarea都是输入框

获取输入框中输入的内容

var变量=节点.value;

设置输入框的内容

节点.value=值;

单选按钮

判断是否选中

节点.checked//结果为true表示选中

获取单选按钮对应的值

通过设置变量值点击获取。

复选框

判断是否选中（同单选框）

全选

点击全选时，将所有复选框的选中状态设置为全选按钮的选中状态。

反选
点击反选时，将所有复选框的选中状态设置为它自身相反的选中状态
获取复选框选中的值
复选框需要自己设置value的值。
通常会定义一个数组保存最终选择的各个选项的value值。
通过遍历所有复选框，判断其状态，如果被选中，将其value添加到数组中。

下拉菜单

获取选中的值
下拉但可以通过option的value属性获取选中的值，如果没有设置value，获取的是option标签中的文本。如果有value属性，获取实际的value值。
动态添加选项
可以使用document.createElement("option")方式创建Option后，使用appendChild方法添加到select中。建议使用new Option(value)方式创建一个Option后，使用select节点.add(option节点)方式添加到select中。

jQuery部分

简介

jQuery是一个轻量级的javascript函数库，封装了很多javascript中的内容。jQuery的本质依然是
javacript(一个.js文件)。

作用

  • 用于获取文档中的元素，对元素进行操作。
  • 更强大的选择器。
  • 支持链式写法。
  • 封装了ajax，更方便使用。

使用

  1. 下载jQuery.js文件，导入到项目中。
  2. 在页面中导入jQuery.js文件。
  3. 在页面中加入另一个script标签，在该标签中写jQuery代码。

通常将jQuery代码写在文档就绪函数中，表示在页面所有内容加载成功后开始执行
文档就绪函数类似于js中的onload事件

jQuery对象和js对象(dom对象) 的区别

js对象：

  • 在js中，使用document.getElementXXX获取到的是dom对象。
  • dom对象只能使用如.style、.innerText等属性修改样式或内容，不能使用jQuery对象中的属性或函数。

jQuery对象：

  • 在jQuery中，使用jQuery选择器获取到的是jQuery对象。
  • jQuery对象只能使用jQuery中的属性或函数，不能使用dom对象中的属性或函数。

jQuery对象和js对象(dom对象) 的转换

jQuery对象转换为dom对象

//方式一
jQuery对象[0]
//方式二
jQuery对象.get(0)

dom对象转换为jQuery

$(dom对象)

$符号冲突问题

如果一个页面中，会引入多个js函数库，并且这些函数库都会用到$符号时，就会造成$符号冲突。

解决方法（jQuery提供了一个noConflict()函数用于释放对$的使用权。）

//直接调用该方法，释放对$的使用权，之后只能使用默认的"jQuery"
$.noConflict();
//$("#md")//这时会无效
jQuery("#md")//只能这样使用
//调用该方法，使用变量接收，释放对$的使用权，用指定的变量名代替$
var jq=$.noConflict();
jq("#md")//将jq当做$使用

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>.test") 得到id为test节点中的第一层class为test的子节点
$("#test+p") 得到id为test节点后紧邻的第一个p节点
$("#test~p") 得到id为test节点后同级的p节点

过滤选择器

普通过滤

选择器名 作用
$("tr:odd") 奇数索引。得到索引为1,3,5...的tr标签，按自然顺序为偶数
$("tr:even") 偶数索引。得到索引为0,2,4...的tr标签，按自然顺序为奇数
$("tr:first") 得到所有tr标签中的第一个
$("tr:last") 得到所有tr标签中的最后一个
$("tr:eq(索引)") 得到指定索引的tr
$("tr:gt(索引)") 得到大于指定索引的tr
$("tr:lt(索引)") 得到小于指定索引的tr
$("li:nth-child(3n+1)") 得到4 ，7,10的里标签
$("#test p:first-child") 得到id为test下的第一个p标签
$("#test p:last-child") 得到id为test下的最后一个p标签
$("div:not(.test)") 得到class不为test的div
$("div:not(:eq(3))") 得到索引不为3的div

表单元素过滤

选择器名 作用
$(":input") 得到所有表单元素，包含input、select、textarea
$(":text") 得到文本框
$(":password") 得到密码框
$(":radio") 得到单选按钮
$(":checkbox") 得到复选框
$(":checked") 得到被选中的表单元素，包含radio、checkbox、select
$(":checkbox:checked") 得到被选中的复选框
$(":selected") 得到被选中的下拉菜单选项
$(":reset")/$(":submit") 得到重置/提交按钮

属性过滤选择器

选择器名 作用
$("a[href]") 得到所有包含href属性的a标签
$("a:not([href])") 得到所有不包含href属性的a标签
$("div[属性=值]") 得到指定属性和值的div
$("div[属性!=值]") 得到指定属性不等于指定值的div
$("div[属性^=值]") 得到以指定值开头的指定属性的div
$("div[属性$=值]") 得到以指定值结尾的指定属性的div
$("div[属性*=值]") 得到包含指定值的指定属性的div
$("div[属性1=值][属性2=值]") 得到既包含指定值的属性1且包含指定值的属性2的div

内容(文本)过滤选择器

选择器名 作用
$("p:contains(文字)") 得到带有指定文字的p标签
$("p:not(:contains(文字))") 得到不带有指定文字的p标签
$("p:empty") 得到没有任何文本的p标签

操作节点

获取、设置节点内容

函数 作用
节点.text() 获取节点中的文本。相当于js中的var text=x.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值

创建节点

$("完整标签")

添加节点

添加子节点 作用
父节点.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

自定义动画

启用自定义动画

节点.animate({"样式":"值","样式":"值"
},2000,linear,function(){//动画执行结束后执行
}).animate(...)

停止当前动画

节点.stop();

停止所有动画

节点.stop(true);

事件

两种方式

//jquery节点.事件(function(){});
$("#md").click(function(){
});
或
//jquery节点.bind("事件名",function(){})
$("#md").bind("click",function(){
})

相关函数

函数 作用
click() 单击
hover() 鼠标悬停/离开。该事件可以传入两个函数，分别表示悬停时触发第一个函数，离开时触发第二个函数。如果只有一个函数，悬停离开均触发这一个函数。
focus() 获得焦点
blur() 失去焦点
change() 改变。适用于各种能发生变化的节点，如文本框、单选、复选、下拉等
mouseup/down/over/move/enter/leave/out() 鼠标相关
submit() 表单提交

前端框架

使用

  • 设计者提供给用户该框架的css文件和js文件。
  • 用户只需导入css文件和js文件后，通过对应的class值呈现相应的样式和效果。
  • 任何前端框架都有对应的开发文档API，只需参考其使用使用说明即可。

BootStrap

由Twitter推出的一套前端框架。其最大的特点是"栅格化系统"。
使用

  1. 下载核心文件。
  2. 将解压后的整个文件夹复制到项目中。
  3. 新建一个页面，引入3个文件bootstrap.min.css文件、jquery.js文件、bootstrap.min.js文件。引入js时，一定要先引入jquery，再引入bootstrap.min.js。因为bootstrap依赖于jquery

Layui

  • 由国内开发者设计的一款基于jquery的前端框架。
  • 官网现已下架，但Layui依然可以使用。

使用

  1. 下载layui核心文件。
  2. 解压后导入项目。
  3. 在页面中加入2个文件。（layui.css文件layui.js文件）

JSON

简介

  • JavaScriptObjectNotation  JS对象简谱
  • 是一种数据交换格式，可以理解为保存数据、交换数据的一种格式。
  • JSON数据通常以键值对的形式保存。

键:值
键的类型为字符串，值的类型可以是普通类型、对象或数组。

值的数据类型

数据类型 符号 示例
字符串 "" "name":"wanghai"
数值 直接写数字 "age":20
逻辑值 true/false "married":false
空 null "car":null
对象 {} "pet":{"petName":"小汪","petAge":2}
数组 [] "family":[{"relation":"父亲","name":"xxx"},{"relation":"弟弟","name":"xxx"}]

在HTML中读取JSO文件

$.getJSON("json文件路径",回调函数)
$.ajax({url:"访问的资源路径",success:function(){访问成功后的回调函数}})

个人总结

对于前端的知识在这个阶段得到了很大的提高，虽然以前自学过，但技术的快速更新，确实让我不禁觉得，不论什么时候，都应该学习熟悉领域的新的内容，不断提高自己的解决问题的思维方式，只有这样，代码能力就会在实践和理论知识上大幅度提升，适应时代更新技术的要求。加油吧！

华清远见-重庆中心-前端阶段技术总结/个人总结相关推荐

  1. 华清远见-重庆中心-前端阶段技术总结

    华清远见-重庆中心-前端阶段技术总结 HTML Hyper Text Markup Language 超文本标记语言 超文本:超级文本/超链接文本,超越了文本的限制,如多媒体文件.超链接等. 标记:也 ...

  2. 华清远见-重庆中心-框架阶段技术总结/知识点梳理

    文章目录 华清远见-重庆中心-框架阶段技术总结/知识点梳理/个人总结 框架 Java主流框架 Spring 概念 组成 名词解释 IOC DI Spring控制台应用 1.创建一个普通的Maven项目 ...

  3. 华清远见-重庆中心-JavaWeb阶段技术总结/知识点梳理/个人总结

    文章目录 JavaWeb B/S与C/S模式 网站 网页 网络服务器 Tomcat 下载 目录结构 Maven 使用IDEA创建基于Maven的Web项目 1.新建webapp模板 2.设置项目名称和 ...

  4. 华清远见-重庆中心-框架阶段技术总结

    框架 一套规范. 实际是他人实现的一系列接口和类的集合.通入导入对应框架的jar文件(maven项目导入对应的依赖),进行适当的配置,就能使用其中的所有内容. 开发者可以省去很多模板代码,如dao中的 ...

  5. 华清远见-重庆中心-数据库阶段技术总结/知识点梳理/个人总结/关于JavaWeb技术的解析（看法）

    JavaWeb 使用Java开发Web服务的技术,统称为JavaWeb. B/S与C/S模式 B/S:Browser/Server 浏览器/服务器模式 用户只需要一个浏览器即可访问服务器 C/S:Cl ...

  6. 华清远见重庆分中心——前端阶段技术个人总结

    目录 前端自学网站 好用的网站 HTML 常用标签 文字 图片img 列表ul/ol/li 无序列表ul 有序列表ol 表格table 多媒体 音频audio 视频video 水平线hr 换行br a ...

  7. 华清远见-重庆中心-数据库阶段技术总结/知识点梳理/个人总结/面试题解析

    目录 Java Web阶段核心内容 (一)初识Web 1.JavaWeb定义 2.B/S与C/S模式 3.网站与网页 4.Tomcat服务器 5.Maven 6.常见的Http状态码 7.Servle ...

  8. 华清远见-重庆中心-前端阶段个人总结

    为什么要学习WEB前端基础 由于JavaEE是BS模式,必须要使用浏览器渲染页面,程序都需要页面呈现数据. 所以后台开发,需要知道如何将数据显示在页面中. 学习WEB基础,就是学习开发网页. 网页是一 ...

  9. 华清远见-重庆中心-数据库阶段技术总结/知识点梳理/个人总结

    文章目录 前端.后端.数据库 数据和信息 数据库 数据库管理系统 总结 常见的数据库管理系统 关系型数据库 非关系型数据库 MySQL8.x的安装和使用 1.下载 2.卸载 3.安装 MySQL控制台 ...

最新文章

  1. mysql导入sql文件过大或连接超时的解决的方法
  2. wxWidgets 电源管理示例
  3. grid布局浏览器兼容_CSS Grid布局尝试
  4. 如何利用FFT（基2时间以及基2频率）信号流图求序列的DFT
  5. 独家分享| 2019年校招大厂算法自己经历和好友经验（大疆，百度，腾讯……）
  6. linux 缩小链接库体积,两个奇技淫巧，将 Docker 镜像体积减小 99%
  7. Java RSA加密（一）--BCD输出
  8. 计算机类专业毕业设计（学期课程设计）题目大全
  9. java get请求参数乱码_java web项目get,post请求参数中文乱码解决
  10. 如何找到QQ互联开发者认证在哪？
  11. AngularJS - $uibModal - 自定义模态框大小
  12. win7蓝牙怎么连接_图文详解win7蓝牙怎么打开
  13. 读文章《新阶级论：寒门难贵，豪门难收》
  14. 2021高性价比蓝牙耳机榜单，学生党最爱五款平价蓝牙耳机分享
  15. 歌曲《一路生花》的matalb实现（附程序代码，免费）
  16. 设计 | 最新免费无版权可商用字体下载
  17. 李现成为PADI全球青年海洋大使
  18. Linux 批量无损压缩图片
  19. 输入年月，输出这个月的日历
  20. ToB的新思维“MaaS”--管理即服务（Management as a Service）

热门文章

  1. EV录屏无法录入声音解决
  2. 配置上位机软件开发环境BOOST及cmake等
  3. 微信平台更改html,微信公众平台.html
  4. GOWIN革文超级增长引擎---B2B数字化整合营销体系
  5. 淘宝、1688代购系统；微信代购小程序，代购系统源代码，PHP前端源码演示
  6. cmd下无法切换路径问题
  7. 查看电脑支持内存类型及大小
  8. 【SAM套路/AC自动机+主席树】CF547E Mike and Friends
  9. mysql 统计日活、周活、月活
  10. [MySQL] 数据库复制异常恢复之Error_code: 1062 (Duplicate entry)