移动端布局步骤:
视口:
- 视觉视口
- 布局视口
- 理想视口
rem布局实现适配
root em-----rem html字体的倍率
em 当前字体的倍率
-
修改视口
<meta name="viewport" content="width=device-width">
-
引入rem.js
<script src=""></script>
-
修改rem.js中设计稿的宽度
背景图片:
//引入背景图片 禁止重复 位置(top right bottom left)
backgorund:url() no-repeat left bottom/contain;
//背景图片的大小
background-size:100% 100%;
//背景图片的大小 按照宽高中的较大者占满屏幕(缩放图片)
background-size:contain;
//背景图片的大小 按照宽高中的较小者占满屏幕(缩放图片)
background-size:cover;
渐变:
background:linear-gradient(top,颜色1,颜色2,颜色3,......);
第一个参数:渐变开始的方向:top left right bottom 25deg
颜色:red #fff rgb(0,0,0) rgba(0,0,0,0.7)
浏览器内核:
-webkit-
谷歌-moz-
火狐-ms-
IE-o-
欧鹏
flex布局:
-
容器的属性:
-
flex-direction
决定主轴的方向row
主轴在水平方向 从左到右 (默认)row-reverse
主轴在水平方向 从右到左column
主轴在垂直方向 从上到下column-reverse
主轴在垂直方向 从下到上 -
flex-wrap
换行的设置wrap
换行 第一行在上面wrap-reverse
换行 第一行在下面nowrap
不换行 (默认) -
justify-content
定义了项目在主轴上的对齐方式flex-start
主轴的起点方向flex-end
主轴的终点方向center
居中space-between
两端对齐,项目之间的间隔都相等space-around
每个项目两侧的间隔相等 -
align-items
定义项目在交叉轴上如何对齐 (适用于一根轴线和多根轴线)flex-start
交叉轴的起点方向flex-end
交叉轴的终点方向center
居中baseline
项目的第一行文字的基线对齐 (文字的底部对齐)stretch
如果项目未设置高度或设为auto,将占满整个容器的高度 (默认值) -
align-content
定义了多根轴线的对齐方式 (仅适用于多根轴线)flex-start
交叉轴的起点方向flex-end
交叉轴的终点方向center
居中space-between
与交叉轴两端对齐,轴线之间的间隔平均分布space-around
每根轴线两侧的间隔都相等stretch
如果项目未设置高度或设为auto,将占满整个容器的高度 (默认值)
-
-
项目的属性:
-
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0 -
flex-grow
属性定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大 -
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小 ,值为0时,项目不缩小 -
flex-basis
定义了在分配多余空间之前,项目占据的主轴空间 可以给他像width 、height一样的固定值 则项目占据固定值 -
flex
上述属性的简写形式 -
align-self
定义单个项目在交叉轴上的对齐方式(允许单个项目有与其他项目不一样的对齐方式 )
-
A链接:
title
标题target
控制新页面打开的方式 默认值为_self
在本窗口打开_blank
在新窗口打开
浮动:
- 浮动的BUG
-
问题:父元素不设置高度,子元素在浮动时,不能自动撑开父元素
-
原因:浮动的元素脱离文档流
-
解决方法:
-
父元素设置高度
-
给父元素添加
overflow:hidden
-
使用
clear:both
.box:after{ content=""; display:block; width:0; height:0; line-height:0; clear:both; }
-
-
定位:
分类:
-
相对定位:position:relative;
-
绝对定位:position:absolute;
-
固定定位:position:fixed;
-
层级
z-index:10; 层级只有在有定位属性的元素上调层级
-
文本模型:
-
换行:
word-break:break-all;
//使非中日韩的文本换行
-
文本溢出(单行)或者(多行):
-
单行文本溢出
white-space:nowrap; 禁止换行 overflow:hidden; 超出部分隐藏 text-overflow:ellipais; 超出部分以...显示
-
多行文本溢出
display:-webkit-box; 指定盒子为弹性盒子 -webkit-box-orient:vertical; 在弹性模型中指定元素的排布顺序 -webkit-line-clamp:数字; 指定文本溢出的行数 line-height: ; 设置行高 overflow:hidden; 盒子的高必须是行高的整数倍
-
表单标签:
-
form
-
action="链接后台文件" method="get/post"; action属性用于链接后台文件,method选择提交的方式。 get:地址栏,信息少,安全性低 post:信息量少,比较安全
-
-
input
-
input 是行内块标签 ---用户名--- 用户名:<input type="text" placeholder="请输入用户名" maxlength="" value="" name="username"> ---密码--- 密码:<input type="password" plceholder="请输入密码" maxlength="" value="" name="psw"> ---单选--- 在单选中name中的值必须要相同 请选择你的性别: <label for="man"> 男:<input type="radio" name="sex" id="man" checked> </label> <label for="woman"> 女:<input type="radio" name="sex" id="woman"> </label> ---多选--- 请选择你喜欢的音乐: 摇滚乐:<input type="checkbox" checked> 轻音乐:<input type="checkbox" checked> 爵士乐:<input type="checkbox" checked> ---下拉框--- 请选择你的学历: <select name="" id=""> <option value="">学士</option> <option value="">学士</option> <option value="">学士</option> </select> ---文件--- 请上传照片:<input type="file"> ---文本域--- <textare></textarea> textarea{ resize:none; 不允许拖动框 resize:both; 能在几个方向拖动 resize:vertical; 只能在垂直方向拖动 resize:horizontal; 只能在水平方向拖动 } ---重置按钮--- <input type="reset"> ---提交按钮--- <input type="submit"> ---自定义按钮--- <input type="button" value="按钮"> <button>搜索</button> ---颜色--- <input type="color"> ---时间.日期--- 年月:<input type="month"> 年周:<input type="week"> 时分:<input type="time"> 年月日:<input type="date"> 年月日时分:<input type="datetime-local"> ---验证--- 邮箱验证<input type="email"> 电话验证<input type="tel" autofocus> autofocus为自动获取焦点 checked 默认的选择 placeholder:默认提示文本 maxlength:规定输入的最大字符数 name:和后台进行数据交互 label标签for="" 隐藏域:<input type="hidden">
-
音/视频控件:
-
音频:<audio src="1.mp4" controls loop autplay></audio> controls 控件向用户显示 loop 循环播放 autplay 自动播放 视频:<video src="1.mp4" controls loop autplay></video> controls 控件向用户显示 loop 循环播放 autplay 自动播放
h5语义化标签:
-
<header>头部</header> <footer>底部</footer> <nav>导航</nav> <aside>侧导航</aside> <section>页面中的某一部分</section> <main>主体</main>
获取焦点:
- :focus{outline:none} outline:none 外边线消失
Javascript:
组成:
- ECMAscript 变量、数据类型、运算符、数组、函数、对象
- BOM 浏览器对象模型 window对象、history对象、location对象
- DOM 文档对象模型 元素获取、操作属性、操作样式、节点、事件、事件对象
作用:
- 数据验证
- 动态创建、删除元素
- 操作元素的内容和样式
- 模拟动画
- 创建cookie
- ajax(请求数据)
- JSON格式的数据处理
- …
特征:
- 客户端脚本语言,实现用户交互
- 基于对象和事件驱动的松散型解释型语言
引入js:
-
外部引入
-
<script src="***.js"></script>
-
-
嵌入式
- 在html页面中用
script
标签引入
- 在html页面中用
-
事件后
-
<div onclick="alert(1)">事件后</div> div中间的事件不可少
-
需要注意:
- js的几种引入方式是相互关联的,可以互相操作访问。
- 外部js中不能添加
script
标签对 - 嵌入式js中不能添加
src
属性
输出工具:
-
弹出框
-
alert(); 括号中填入变量或者字符串(带引号的为字符串)
-
-
输出到控制台
-
console.log(); 括号中填入变量或者字符串(带引号的为字符串)
-
-
输出到页面中(可以识别标签对)
-
document.write('a'); document.write('倾斜');
-
-
输入框
-
prompt("提示文本",[默认值])
-
注释:
- 单行注释 ctrl+/
- 块级注释 ctrl+shift+/
变量:
- 就是一个容器 作用是存储数据
命名规范:(字母、下划线(_)、$)
- 不能以数字开头
- 区分大小写
- 不能以关键字(js中已经用到的)命名
- 不能以保留字(js中将来会用到的)命名
- 命名得有意义
- 首字母大写 (Array String Object)
- 驼峰命名法 (getElementByld)
赋值:
-
先声明,后赋值
-
var num; num=20;
-
-
声明的同时进行赋值
-
var num=20;
-
-
一次性先声明多个变量,再赋值
-
var a,b,c; a=10,b=20,c=30;
-
-
一次性声明多个变量并赋值
-
var a=10,b=20,c=30;
-
let:
- 声明变量,用法与
var
一致 - 可以识别块级作用域
- 不能重复声明
- 不存在变量提升(先访问后声明)
const:
- 声明常量,一旦声明就不能被改变
- 声明的同时必须要赋值,否则报错
- 可以识别块级作用域
- 不能重复声明,不存在变量提升
注意事项:
- 变量一般情况下要先声明后访问,变量的默认值是
undefined
- 声明的变量新值覆盖旧值
- 变量可以重复声明
- 不用var关键字声明变量,但是赋值了就不会报错,此时这个变量为全局变量
- 不用var关键字声明,也不赋值的变量就会报错
- 先访问后声明变量,输出的值为
undefined
预解析只识别(var function这两个关键字)
数据类型:(根据数据在内存中的存储位置划分)
-
基本数据类型(存放在栈中)
-
undefined
-
null
-
string
-
boolean
-
number
二进制:以0B开头, 八进制:以0O开头,0~~7 十六进制:以0x开头,0~~9 a~~f NaN:not a number 本来期望返回数值的操作但并未返回数值的情况
-
-
引用数据类型(指针存放在栈中,内容存放在堆中)
- object(一些属性和方法的集合:数组、函数(function)、对象…)
typeof
- 用来判断变量的数据类型 它的结果是一个字符串类型
数据类型 | 值 | 情况 | typeof的结果 |
---|---|---|---|
undefined | undefined | undefined | |
null | null,空占位符 | object | |
boolean 布尔型 | true/false | boolean | |
string 字符串型 | 带引号的都是字符串""、’’ | string | |
number 数值型 | 整数、小数、八进制、十进制、十六进制、特殊值 | number | |
object | 数组、函数 | object |
运算符:
表达式:能够求值的语句
-
算术运算符:
+ - * / % ++var var++ --var var-- Math.random()取随机数 Math.floor()向下取整 Math.ceil()向上取整 prompt("提示文本",默认参数) 提示输入框 alert 显示到弹框
+
:- 两边都是数值型执行相加运算
- 不是两边都为数值型的相当于连接符
var++
++var
var--
--var
中++
--
中的运算都一样++var
:++
在前,先算++
再执行本行中的其他语句var++
:++
在后,先执行本行中的其他语句再算++
-
关系运算符:
它的返回值为布尔值(true/false)
> < >= <= == ===(全等于,数据类型也要相等) != !==(不全等于)
- 如果两个操作数都是字符串(数字型字符串),按照ASCII码表进行比较
- 如果两个操作数都是数字,直接进行比较
- 如果一个操作数是字符串,另一个是数字,先尝试将字符串转换为数字,如果转换成功,按照数字比较;如果转换不成功就返回false
- 1true,0false
==
值相同===
值相同,数据类型也要相同undefined
和null
相等(undefined==null)
-
赋值运算符:
-
=
+=
-=
*=
/=
%=
-
var num=5; num+=10; //num=num+10;
-
-
逻辑运算符:
测量值与变量之间的逻辑关系
0 false undefined null NaN “”(空字符串) 这六个为false 其余的都为true
-
&& 与
-
|| 或
-
! 非
-
逻辑运算符真值表
A B A&&B A||B A!B true true true true false true false false true false false true false true true false false false false true -
返回值(判断的真假与返回值可能不一样):
- && 同真为真 返回第一个假值
- || 同假为假 返回第一个真值
- ! 取反 返回值为true/false
-
-
三元运算符
表达式?语句1:语句2; 如果表达式的结果为真,执行语句1的代码,如果结果为假,执行语句2
字符编码:
流程控制:
代码按照指定条件的执行顺序
-
顺序结构
语句按照从上到下的顺序执行
-
分支结构
当条件成立时执行相应语句
-
单分支结构
if(条件){ 条件成立时执行的语句 }
-
双分支结构
if(条件){ 条件成立时执行的语句 } else{ 条件不成立时执行的语句 }
-
多分支结构
if(条件1){ 条件1成立时执行的语句 } else if(条件2){ 条件1不成立,条件2成立时执行的语句 } else{ 以上条件都不成立时执行的语句 }
-
嵌套分支
if(){ if(){}else{} } else{ if(){}else{} }
-
switch
switch(表达式){ case 值1:语句1;break; case 值2:语句2;break; ...... default:语句; }
-
-
循环结构
当条件满足时,重复不断的执行一段代码
-
for循环:
for(初始条件;终止条件;步进值){ 满足条件时执行的循环体 }
执行顺序:
- 初始条件
- 终止条件
- 循环体
- 步进值
- 重复执行2.3.4.5步骤,直到不满足终止条件,跳出循环
-
while循环:
while(条件){ 当满足条件时执行的语句 } exm: var j=0; while(j<5){ console.log(j); j++; }
-
do while循环:
do{ 循环体; }while(条件) exm: var j=0; do{ console.log(j); j++; }while(j<5)
-
-
终止循环:
continue
满足条件时跳出本次循环,执行下一次循环break
满足条件时终止所有循环
数组:
按照顺序排列的一组相关数据,每一个数组元素都有特定的键名(下标)
初始化数组元素:
- 先声明后赋值
var arr=[];arr[0]="a",arr[1]="b"
- 声明的同时赋值
var arr=[1,2,3,4];
数组的下标:
访问数组元素。
数组的长度:
arr.length
访问数组长度(数组的长度是可变的)
清空数组:arr.length=0
遍历数组元素:
-
for循环遍历数组
for(var i=0;i<arr.length;i++){ arr[i] }
-
用for in 遍历数组
for(var i in arr){ i;//下标 arr[i];//元素 }
数组对象:
- 数组名.push(插入的元素) 向数组的后面插入一个元素
注意事项:
- 数组元素的默认值是undefined
- 数组长度是可变的
- 数组元素可以是任意的数据类型
二维数组:
访问:arr[i][j]
(双下标)
遍历:
- 使用for循环遍历数组
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
arr[i][j]
}
} //二维数组的遍历需要双重循环
-
使用内置函数
forEach()
遍历数组function map(arr,fn){ arr.forEach(function(vlue,index){ value=fn(value); }) return arr; }
函数:
1、封装的代码块
2、对象
3、构造函数(类)
把实现某一特定功能的代码块封装起来并且能够重复调用。
定义函数:
-
基本语法(function关键字)
function 函数名([形参1],[形参2],...){ 函数体 [return 返回值;] }
-
字面量,自变量
var variable=function(){ 函数体; } variable()
用字面量的方式声明一个函数必须先声明一个函数后调用,用关键字function声明的函数,调用可以在声明前也可以在声明后。(函数的预解析)
-
对象的方式
箭头函数:
let aa = ()=>{
console.log(123);
console.log(456);
console.log("item",item);
}
函数的调用:
- 函数名+(实参) functionName()
- 自变量+(实参)
参数:
动态地改变函数体的变量,使函数更加灵活
-
形参:
定义函数时写在括号中的变量,作用是接收实参
-
实参:
函数调用时写在括号中的值,作用是给形参传递值
参数的传递:
- 参数可以是任意的数据类型
- 按照顺序传递
- 形参 = 实参:一一对应
- 形参 > 实参:多余的形参赋值为
undefined
- 形参 < 实参:实参由
arguments
对象来接收
参数默认值:
- 分支结构
- 三元运算符
- 逻辑或
- es6 给形参赋值,当形参的值为
undefined
时
arguments对象:(arguments是一个对象不是一个数组)
arguments
对象接收的是所有实参,不管是已经定义的还是没有定义的
- 用来接收参数的详细信息
- 每声明一个函数,在其内部自动生成
arguments
对象,这个对象只在函数内部起作用 arguments[i]
arguments.length
遍历 类似数组却不是数组
剩余参数:rest
...rest
对象接收的是多余实参
- 声明:
...rest
- rest参数与arguments对象的区别:
- rest接收多余的实参,arguments接收所有实参
- rest是一个数组,arguments是一个类似数组的对象 但不是数组
作用域:
变量起作用的范围
- 全局作用域
- 局部作用域
- 块级作用域
全局作用域
在整个js代码中都能访问到变量,凡是进行修改,变量的值就全部改变
- 在函数外部用
var
声明的变量,拥有全局作用域 - 不用
var
声明,但赋值的变量,拥有全局作用域
局部作用域
在局部能访问到的变量
- 形参是局部变量,拥有局部作用域
- 在函数内部用
var
关键字声明的变量,拥有局部作用域
回调函数:
把一个函数的指针(函数名)作为形参传递给另一个函数,当指针调用函数时,这个函数叫做回调函数
function isExist(arr,fn){
if(fn==true){
return true;
}
return false;
}
function odd(arr){
for(let i=0;i<arr.length;i++){
if(arr[i]%2==0){
return true;
}
}
return false;
}
返回值:return
- 返回值可以是任意的数据类型
return
终止函数(return后面的代码不执行)- 一个函数中可以有多条
return
分支语句,但最终只执行一条return
语句 - 如果一个函数没有返回值,它返回的是
undefined
***
内置顶层函数:
内置:ECMAscript自带的函数,只需知道如何使用,不必关心如何封装
顶层:在代码中的任意位置都能够使用
-
escape()
:将输入的字符串进行编码
-
unescape()
:将编码的字符串进行解码
-
Boolear()
:将其余数据类型准换为布尔型
-
String()
:将任意数据类型转换为字符串型
-
Number()
:将其余数据类型转换为数值型
- null -->0 “” -->0 " " -->0
- false -->0 true -->1
- undefined -->NaN
- 进制数转换为十进制
- 去掉没有意义的后导0
- 字符串:字符串里面传的必须是规范的浮点数和数值型的字符串
-
parseint()
:将字符串转换为整数型
开头必须是数字(+,-,空格) 如果不是转换不成功 返回NaN
-
parseFloat()
:将字符串转换为浮点型
仅能转换规范的浮点数,不是一个数转换不成功 返回NaN
-
isNaN()
:判断一个值是否能转换为数值型,能转换为数值型的返回false 不能转换为数值型的返回true
数据类型的转换:
- 强制数据类型转换
- 隐式数据类型转换:算数运算符、逻辑运算符、条件 if() while()
对象:
概念:
- 类:一群具有相同特征的对象集合的描述
- 对象:具有存在的对象个体
- 属性:对象基础信息的描述
- 方法:对象功能的描述
定义对象:
- 构造函数的方式(模拟定义类),实例化对象
function Computer(color,play){
this.color=color;
this.play=function(){
console.log("上网");
}
}
//实例化对象
let SAUS=new Computer();
- JSON方式:直接定义对象
let ASUS={
属性名:属性值,
属性名:属性值,
方法名:function(){
}
}
- class定义类,实例化对象
属性:
对象.属性名=属性值
方法:
对象.方法名=函数
增删改查:
- 增加:对象.属性名=属性值
- 删除:delete 对象.属性名
- 修改(覆盖):对象.属性名=属性值(修改后)
- 查找(访问):对象.属性名、对象[“属性名”] 方法的访问:对象.方法名()
遍历对象:
for(let i in 对象){
i; //属性名
对象[i]; //属性值
}
关键字:
construcor:
对象的属性,返回该对象的构造函数
instanceof:
对象 instanceof 构造函数
用来判断函数是否是对象的构造函数,是就返回true,否就返回false
DOM(文档对象模型)
获取元素:
-
获取ID名的元素
let 变量名=document.getElementById("idname");
-
获取类名元素:集合(不是数组,通过下标访问,不可forEach遍历)
let obj=document.getElementsByClassName("classname");
-
获取标签名的元素:集合(不是数组,通过下标访问,不可forEach遍历)
let obj=document.getElementsByTagName("li");
-
获取表单的值:
obj.value
-
获取选择器中的第一个元素:
let obj=document.querySelector("选择器");
-
获取选择器中的集合:
let obj=document.querySelectorAll("选择器");
-
获取元素的属性:
let 变量名=getComputerStyle(obj.null).attr; attr为属性名
操作内容:事件源.事件=function函数
innerText
innerHTML
可以识别标签对
操作属性:
标准属性:obj.attr
自定义属性:
- 获取:
obj.getAttribute(name)
- 设置:
obj.setAttribute(name,value)
操作样式:
设置:
-
行内样式:
object.style.属性名=属性值
-
批量样式:
obj.className=""; obj.id="";
-
类的更新
obj.classList.add(""); 类的添加 obj.classList.remove(""); 类的删除 obj.classList.toggle(""); 类的切换
BOM(浏览器对象模型)
完成的是窗口与窗口的交互(通信),
window
对象是其核心对象
- history
- location
- dom
- screen
- frames
- navgation
window对象:
属性:
- 浏览器的宽高
window.innerWidth
获取浏览器的宽度window.innerHeight
获取浏览器的高度document.documentElement.clientWith
获取浏览器的宽度(IE8及以下版本获取)document.documentElement.clientHeight
获取浏览器的高度(IE8及以下版本获取)
- 浏览器左上角距离屏幕左上角的偏移量
window.screenTop
垂直偏移量window.screenLeft
水平偏移量
方法:
-
alert() 弹出框
-
prompt() 输入框
-
confirm() 弹出确定取消框 返回的是True/False
-
close() 关闭页面
-
open() 打开页面
- open中的参数:url 打开页面的地址
-
setInterval(fn,1000时间) 隔一段时间重复执行函数fn 时间单位是ms
let b=setInterval(gg,1000); function gg() { console.log(1); } clearInterval(b);
-
clearInterval(t) 清除时间函数
-
setTimeout(fn,1000时间) 隔一段时间执行一次fn 时间单位是ms
-
clearTimeout(t) 清除时间函数
操作内容:事件源.事件=function函数
innerText
innerHTML
可以识别标签对
操作属性:
标准属性:obj.attr
自定义属性:
- 获取:
obj.getAttribute(name)
- 设置:
obj.setAttribute(name,value)
操作样式:
设置:
-
行内样式:
object.style.属性名=属性值
-
批量样式:
obj.className=""; obj.id="";
-
类的更新
obj.classList.add(""); 类的添加 obj.classList.remove(""); 类的删除 obj.classList.toggle(""); 类的切换
元素的尺寸和位置:
-
obj.offsetWidth
: 获取元素的真实宽度 -
obj.offsetHeight
: 获取元素的真实高度 -
obj.offsetTop
: 获取这个元素的外边框top
到第一个定位了的父元素内边框top
的距离 -
obj.offsetLeft
: 获取这个元素的外边框left
到第一个定位了的父元素内边框left
的距离 -
obj.scrollTop
: 有滚动条的元素,浏览器在滚动时在垂直方向的拉伸距离 -
obj.scrollLeft
: 有滚动条的元素,浏览器在滚动时在水平方向的拉伸距离document.body.scrollTop||document.documentElement.scrollTop body标签获取的兼容性问题
动态创建元素:
document.creatElement("TagName");
添加类名
插入到页面
父元素.appendChild(子元素);
document.body.appendChild(div);
模板字符串(拼接 es6):
`字符串${变量}${变量}字符串`
数学方法:
- Math.random() 取随机数 [0,1)
- Math.floor() 向下取整
- Math.ceil() 向上取整
- Math.pow(X,Y) 算X的Y次幂
继承的原型与原型链:
function person(){
this.name="";
}
person.prototype={
say:function(){
alert(this.name);
}
}
let xb =new person();
子对象的proto
继承了父类的prototype
string方法:
获取字符编码:
str.charAt(a); 获取下标为a的元素
str.charCodeAt(a); 获取下标为a的元素的字符编码
String.fromCharCode(12345); 获取编码为12345的字符
查找下标:
str.indexOf(); 查找对应字符的下标如果有就返回下标,没有就返回-1(从前往后)
str.lastIndexOf(); 查找对应字符的下标如果有就返回下标,没有就返回-1(从后往前)
str.search(); 查找对应字符的下标如果有就返回下标,没有就返回-1 (正则)
str.match(); 返回一个数组,如果没找到返回null (正则)
字符串的截取:
str.substr(start,length); 截取从开始到结尾的元素
str.subString(start,end); 截取从开始到end前的元素(不包括end)
str.slice(start,end); 截取从开始到end前的元素(不包括end 数组的方法)
字符串的转化:
str.toLowerCase(); 转换为小写
str.toUpperCase(); 转换为大写
字符串的替换:
str.replace("需要替换的元素","替换成什么元素")
字符串转换成数组:
arr = str.split(","); 以逗号隔开的元素放到数组中
array的方法:
操作数组的方法:
1.
arr.push(); 在数组的最后插入内容(可插入多个内容)
2.
arr.pop(); 删除数组的最后一个内容
3.
arr.unshift(); 在数组的开始插入内容(可插入多个内容)
4.
arr.shift(); 在数组的开始删除一个内容
5.
//万能的插入和删除内容
arr.splice(3,1); 删除下标为3的元素 1为只删除一个
arr.splice(3,1,"four"); 把下表为3的元素替换成four
arr.splice(3,0,"four"); 在下标为3的元素前添加元素four
6.
//是否包含
arr.includes(); 是否包含某个元素
7.
//截取
arr.slice(start,end); 截取从start到end之前的元素(不包括end)
8.
//连接
arr.concat(); 连接(拼接)多个数组,生成新数组
9.
//取反
arr.reverse(); 把数组元素反向
带有高阶函数的数组操作
1.
//将数组转换为字符串
arr.join(","); 中间用","隔开
2.
//排序
arr.sort(function(x,y){
return x-y; //升序排序(从小到大)
return y-x; //降序排序
})
arr.sort((x,y)=>x-y) //箭头函数升序排序
arr.sort((x,y)=>y-x) //箭头函数降序排序
3.
//查找符合条件的第一个元素
arr.find(item=>item>7) //查找数组中第一个比7大的元素
arr.find(function(item){
return item>7;
}) //与箭头函数表示的意思一样
4.
//查找符合条件的第一个元素的下标
arr.findIndex(item=>item>7)
5.
//查找符合条件的一些元素
arr.some(item=>item>8) //查找数组中比8大的元素
arr.some(function(){
return item>8;
})
6.
//查找全部元素是否符合条件 符合返回true 不符合返回false
arr.every(item=>item>8) //查看是否每个元素都大于8
7.
//筛选
arr.filter(item=>item>8) //把每个大于8的元素筛选出来放到新数组中
8.
//遍历,让数组中的每一个元素都执行一个操作,不会影响原数组
arr.forEach((item)=>{
console.log(item*10);
})
9.
//让数组中的每一个元素都执行一个函数,并返回一个新数组
arr.map((item)=>{
console.log(item*10);
})
节点:
节点的属性:
- 文档节点
- 元素节点
- 属性节点
- 文本节点
- 注释节点
节点 | nodeName | nodeValue | nodeType |
---|---|---|---|
文档节点 | #document | null | 9 |
元素节点 | 大写标签名 | null | 1 |
属性节点 | 大写属性名 | 属性值 | 2 |
文本节点 | #text | 文本 | 3 |
注释节点 | #comment | 注释的内容 | 8 |
节点的获取:
子节点:
document.childNodes //每个元素的子节点,这个属性返回的是一个list列表
父节点:
document.parentNode
上一个兄弟节点:
document.previousSibling
下一个兄弟节点:
document.nextSibling
上一个兄弟元素节点:
document.previousElementSibling
下一个兄弟元素节点:
document.nextElementSibling
节点的方法:
- 创建节点
let div = document.createElement("div"); //创建节点
-
插入节点
let box = document.querySelector(".box"); box.appendChild(div); //在最后插入节点 box.insertBefore(span,div); //在div之前插入节点span
-
创建文本节点
let text1 = document.createTextNode("内容"); span.appendChild(text1);
-
创建注释节点
let comment1 = document.createComment("内容"); box.appendChild(comment1);
-
创建属性节点
let attr = document.createAttribute("id"); attr.nodeValue="box";
-
添加(设置)属性节点
box.setAttributeNode(attr);
-
删除节点
box.removeChild(div);
-
删除属性节点
box.removeAttributeNode(attr);
事件:
事件的添加方式:
节点.onclick = function(){}
节点.addEventListener("事件",事件处理程序,事件类型)
事件的构成方式:
- 事件源:谁去出发事件谁就是事件源
- 事件:
- 事件处理程序:
事件流:
当触发一个事件的时候,从这个事件的容器到整个文档都按照特定的顺序进行一次触发
e.target
阻止事件流:
let event = event || window.event
event.stoppropagation()
event.returnValue = true
事件委派:
event.target 目标事件源
事件的分类:
- 捕获型事件:true 从不具体的事件源到具体的
- 冒泡型事件:false 从具体的事件源到不具体的
常用的事件(web端):
鼠标事件:
onclick
单击ondblclick
双击onmousedown
按下onmouseup
抬起onmousemove
鼠标移动onmouseover
鼠标移入onmouseout
鼠标移出onmouseenter
鼠标移入onmouseleave
鼠标移出oncontextmenu
鼠标右击事件onmousewheel
鼠标滚轮事件e.preventDefult
阻止浏览器的默认行为
事件对象:
用来保存事件触发时的信息
w3c:事件处理程序的形参中
IE:window.event
处理兼容性问题:let event = e || window.event
鼠标事件对象常用的属性:
clientX
鼠标焦点距离浏览器的X轴偏移clientY
鼠标焦点距离浏览器的Y轴偏移offsetX
鼠标焦点距离事件源的X轴偏移offsetY
鼠标焦点距离事件源的Y轴偏移screenX
鼠标焦点距离屏幕的X轴偏移screenY
鼠标焦点距离屏幕的Y轴偏移
键盘事件:
onkeydown
键盘按下onkeyup
键盘抬起onkeypress
键盘按下 当你按下一些功能键的时候不触发onkeypress
键盘对象的常用属性:
keyCode
键盘码ctrlKey
是否按下Ctrl
键altKey
是否按下Alt
键shiftKey
是否按下Shift
键key
键盘名
表单事件:
oninput
输入onchange
内容发生改变并且失去焦点onblur
失去焦点onfocus
获得焦点onsubmit
提交表单onselect
选中文本onchecked
选中表单控件
窗口事件:
onscroll
当滚动条滚动时执行Javascript代码onload
当页面载入完毕后执行Javascript代码onresize
当浏览器被重置大小时执行Javascript代码
移动端事件:
ontouchstart
按下ontouchmove
移动ontouchend
抬起