社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
ECMAscript 基础语法
变量 数据类型 运算符 数组 函数 对象
BOM 浏览器对象模型
window对象(获取浏览器宽高)
history对象
location对象
DOM 文档对象模型 轮播图
元素获取 操作属性 操作样式 节点 事件 时间对象
1. 数据验证
2. 动态创建和删除元素
3. 操作元素的内容和样式
4. 模拟动画
5. 创建cookie
6. ajax 请求数据
。。。。。。
7. JSON格式的数据处理 *
1. 基于[对象]和[事件驱动]的松散型 解释型语言
2. 客户端脚本语言,实现用户交互
BOM: 浏览器对象模型
完成窗口与窗口之间的通信,window对象是其核心对象,
a.ie8及以上
window.innerWidth [获取浏览器宽度]
window.innerHeight [获取浏览器高度]
b.ie8以下
document.documentElement.ClientWidth [宽度]
document.documentElement.ClientHeight 【高度】
window.onreset=function () {
NewW=window.innerWidth;
NewH=window.innerHeight;
}
window.onresize=function(){
}
window.onscroll=function (){
}
window.screenTop [垂直偏移量]
window.screenLeft [水平偏移量]
因为window是核心,可以省略window不写
open("url","","width=300,height=200");
方法1
let t =setInterval(fn,3000)
function fn(){
}
方法2
setInterval(function(){
},1000)
let t =setInterval(fn,3000)
function fn(){
}
clearInterval(t)
对象.value=
清空=“”
location.href=“ ” 设置或获取页面地址 设置新值
location.host:主机名+端口号
location.hostname:主机名
location.port:端口号
location.protocol:协议
location.pathname: 路径
location.search: ?后面的查询【搜索】字段
location.reload( ) 重新加载
location.replace("网页.html") 页面替换,不会增加历史记录
location.assign(“网页.html”) 页面替换, 能够增加历史记录
DOM(文档对象模型)document object model
获取body:document.body
获取html:document.documentElement
let 变量=document.getElementById("id名")
例子: let box=document.getElementById("id名")
let 对象=document.getElementsByClassName(“class名”)
通过遍历改变样式
集合通过单个下表改变,不能全部用class名同时改变
let 对象=document.getElementsByTagName(“标签名”)
标签加1个类名
对象.className=“类名”
div加多个类名
对象.className=“类名1 类名2 ”
<div class="box">
<div class="box1">
<div class="box2"></div>
</div>
</div>
多楼层获取
let box=document.getElementClassName("box");
let box1=box.getElementClassName("box1");
let box2=box1.getElementClassName("box2")
let liss=document.querySelector("【选择器】"); 获取选择器选中的第一个元素
let lis=document.querySelectorAll("【选择器】"); 获取选择器选中的全部元素【集合】【下标或者foreach遍历】
<textarea name="con" id="text" cols="30" rows="10"></textarea>
let con = document.querySelector("[name=con]")
对象.style.样式名
getComputedStyle(对象,null).样式名
对象.style.样式名=“样式值”
对象.style=“background:red;border-radius:50%”
对象.className="class类名"
对象.className=“ ”;
对象.classList.add(“”) 添加类
对象.classList.remove(“”) 删除类
对象.classList.toggle(“”) 切换类
对象.id="id名"
外部定义一个样式,加到对象身上,参考第四点
已知的,系统自带
对象.属性
例子 : img.src
对象.getAttrbutte("name")
对象.setAttrbutte("name","value")
对象.innerText=“内容”
对象.innerHTML=“内容”
对象.对象事件=function(){
}
body的兼容
document.body.scrollTop || document.documentElement.scrollTop
1. 外部引入方式
<head>
<script src='路径'></script>
</head>
2. 内部引入方式(在html页面中放入srcipt标签,和body同级)
<script>
</script>
3. 放在事件后
<div onclick="alert(1)">文字等或事件</div>
注意:
~js的几种引入方式是相互关联的,可以相互操作与访问
~外部js中不能添加srcipt标签对
~嵌入式的js中不能添加src属性
1. 将srcipt标签对放最最后
2.在.js文档中加入
window.onload=function(){
需要执行的js代码块
}
弹出框:alter(' '); 数字可加可不加' ';
输出到控制台:console.log('输出到控制台');
输出到html页面中[可以识别html的标签对,即解释为html语言]:document.write('<h1>输出到html页面中 </h1>');
弹出框输入:var num=prompt("提示文本",[默认值]);
confirm("提示内容");
confirm返回值为true和false
单行注释: ctrl+?或者/ //
块注释: ctrl+shift+/或者? /* 块 */
1. 用“+”拼接
2. 模板字符串(es6):
`<td>${i}-${j}</td>`; 拼接部分用``括起来,变量用 ${变量}
识别空格,换行等
一个容器,存储数据
let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在
let命令所在的代码块
内有效
1. 适用于for循环
2. 先声明,在使用
3. 不允许在相同作用域内重复声明同一个变量。
4. let可以识别块级作用域
5. 不存在变量提升(先访问后声明) 报错:没有定义
声明一个只读的常量。一旦声明,常量的值就不能改变。
声明常量的
同时
进行赋值,不赋值就会报错可以识别块级作用域
不能重复声明
不存在变量提升【先访问在声明】
PI;
数字。字母。下划线组成
不能以数字开头
区分大小写
不能以关键字(js中已经用到的)命名
不能以保留字(js中将来会用到的)命名
有意义
遵循的规则:首字母大写 (Array String Obiect) ;驼峰命名法 (getElementByld)
先声明再赋值
var num;
num=10;
声明的同时赋值
var num=10;
一次性声明多个变量,再赋值
var a,b,c;
a=1,b=2;
c=3;
一次性声明多个变量同时复制
var a=1,b=2,c=3;
变量要先声明再访问,变量的默认值是undefined
新值可以覆盖旧值
变量可以用var关键字重新声明
不用var关键字声明时必须给变量赋值,并且为全局变量,先访问后声明变量,值为undefined:js执行时先预解析(即识别var 和function声明的变量,不赋值),在解析,一句一句执行。
根据在内存中的存储位置划分。基本数据类型存放在栈中,引用数据类型存放在堆中(指针存放在栈中,内容存放在堆中 )
undefined
null 【空占位符】
string 【也是对象】
模板字符串 字符编码 ASCII utf-8 unicode【万国码】 gb2312
转义字符: n[换行] r t[制表符] ' ""
let 对象=new String(“ ”);
编码
对象.charCodeAt(2) 返回第2个位置的字符编码
String.fromCharCode(字符编码) 解码
查找元素
对象.charAt(0) 字符串的第0个位置的元素【查找字符】
查找下标
对象.indexOf(“ ”) 查找对应字符的下标,如果有返回下标,如果没有,返回-1【第一个字符开始的下标】
对象.lastIndexOf(“”) 倒着看查找,倒序看如果有返回下标,如果没有,返回-1【第一个字符开始的下标】
对象.search(“”) 正则:有返回0;没有返回-1;
对象.match(“”) 有的话,返回数组【返回值,下标,包含返回值的数组,】
没有 返回null
字符串的截取:【返回新值,不改变原内容】
对象.substr(开始下标,【截取的长度】)
对象.substring(开始下标,结束的下标),从开始下标开始到结束下标之前,不取到结束的下标
对象.slice(开始下标,结束的下标),从开始下标开始到结束下标之前,不取到结束的下标【数组的方法】
字符串大小写【转换】
let str="AbCdEf";
str.toLowerCase() 转换为小写
str.toUpperCase() 转换为大写
替换:
str.replace(“山”,“闪”);
转换【字符串转换数组】
let str=“1,2,3,4,5,6”;
arr2=str.split(“,”);
boolean
number 2e3=2*10^3
二进制: 0b开头
八进制:以0o{0+字母o}开头,后跟0-7的数
十六进制:以0x开头,后跟0-9或者a-f
NaN:not a number 本来期望返回数值的操作,但并未返回数值的操作
object(属性与方法的集合)数组,函数,对象
深拷贝
let arr=【1,2,3,4】
let arr1;
arr1=arr; :传址
arr1 和 arr具有相同地址
浅拷贝:
let arr=【1,2,3,4】
let arr1=【】
arr.foreach(function(value){
arr1.push(value)
})
typeof用法:
var num="5555";
typeof num;
数据类型 | 值 | 情况 | typeof 的结果【看返回0 1代码的前三位】 |
---|---|---|---|
undefined | undefined | undefined | |
null | null(空占位符) | object | |
boolean 布尔型 | true false | boolean | |
string 字符串型 | 带" "或者' ' | string | |
number 数值型 | 整数,小数,八进制,十六进制,十进制 | ||
object |
表达式:能够求值的语句
+ - * / % ++var var++ --var var --
计算:操作对象是数值型
拼接:操作对象含有字符串,字符串中进行运算时,用()括起来
++var: ++在前,先算++,在执行本行的其他语句
var++:++在后,先执行本行的其他语句,在算++
返回值为布尔值 ,即true或者false
> < >= <= ==[等于] ===[全等于]--> 数值和数据类型相同 !=[不等于] !==[不全等]
如果比较的两个对象都是字符串[数字型,字符],按照ASCII表对应的ASCII码比较,逐位相比
如果比较的两个对象都是数值,直接比大小
如果一个操作对象是字符串,另一个是操作对象是数值,先尝试将字符串转换为数字,如果转换成功,按照数字比较大小;如果转换不成,则返回false
1==true; 0==false ; ==数值相同
=== 数值和数据类型相同
undefined=null
= +=[num+=10 等价于 num=num+10] -= *= /= %=
测量值与变量之间的逻辑关系
假:0、false undefined null NaN “ ”【空字符串】
真:其余为真
&&与
||或
!非【用来取反】
A | B | A && B | A || B | !A |
---|---|---|---|---|
true | true | true | true | false |
true | false | false | true | false |
false | true | false | true | true |
false | false | false | false | true |
第一步:先看与或非两边的真假
第二步:在看返回的真假的内容
&& 同真为真,返回第一个假值 【遵循短路原则:看到假值,后边的不看了】;全为真,返回最后一个真值
|| 同假为假,返回第一个真值 【遵循短路原则:看到真值,后边的不看了】;全为假,返回最后一个假值
! 取反;返回值只有ture或false
算术>关系运算符>逻辑运算符
表达式?为真的执行语句:为假的执行语句 【类似if else】
代码按照指定条件的执行顺序
顺序结构
分支结构
循环结构
语句按照从上到下的顺序进行执行
当满足条件时,重复不断的执行一段代码
for(初始条件;终止条件;步进值){
}
switch(表达式【能够求值的语句】){
case 值1【表达式能取到的值】:语句1;break;
case 值2【表达式能取到的值】:语句2;break;
...
default: 语句;
}
while(条件){
满足条件时,执行语句;
}
例子:
var j=0;
while(j<5){
console.log(1);
j++;
}
执行顺序先执行循环体,在执行判断语句
do{
循环体;
}while(条件)
例子:
var i=0;
do{
console.log(1);
i++;
}(i<5)
满足条件终止本次循环
满足条件,终止整个循环
当条件成立时执行相应的语句
单分支结构
if条件:
if(表达式){
为真的执行语句【返回值为true执行的语句】
}
双分支
if条件:
if(表达式){
为真的执行语句
}
else{
为假的执行语句
}
多分支
if条件:
if(表达式1){
表达式1成立时执行语句
}
else if(表达式2){
表达式1不成立 但 表达式2成立时执行语句
}
else if(表达式3){
表达式1不成立且表达式2不成立【但】表达式3成立时执行语句
}
else{
以上表达式都不成立时执行的语句
}
嵌套分支
if(){
if(){
}
else{
}
}
else{
}
Math.random() ; (0-1)
向下取整【向左取整】: rgb=Math.floor(Math.random());
向上取整【向右取整】: rgb=Math.ceil(Math.random());
Math.pow(x,y)
按照顺序排列的一组相关数据。
特点:每一个数组元素都有一个特定的键名(即俗称的下标)[字符串类型]
数组元素的默认值时undefined
先声明后赋值
var arr=[];
arr[0]=89,arr[0]="adc",....;
声明的同时赋值
var arr=[90,89,88,76,56];
访问数组元素,范围【0,n-1】
数组名.length; 例子: arr.length
arr=[90,89,88,76,56];
可以随时添加元素,可跳着添加。如:
arr[6]="aaa";
arr=[true,null,{name:},[1,2,3]]
访问数组的每一个元素
for(var i=0;i<arr.length;i++){
arr.[i]; 即可访问arr的每个元素
}
for(var i in arr){
i; //代表arr的键名(下标)
arr[i]; //元素
}
for(item of arr1){
arr2.push(item)
}
用法:
arr.forEach(function (value,index){
})
value[名字随便起]:数组中的当前元素【必须有】
index[名字随便起]:数组当前元素的下标【键名】【可选】
var arr=[[1,2.3],["a","b"],[78,89];
arr[行][列]
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
arr[i][j]
}
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!