2019-03-31 JavaScript基础
认识js
js 可以插入到<head>和<body>里
变量的声明和赋值
语法：var 变量名；
（变量名不可以数字开头）
ps：省略var声明的变量是全局变量。
数据类型
typeof
检测变量的数据类型
语法：typeof 变量名；或 typeof（变量名）；
undefined
没有定义类型；
ps：如果定义了一个变量，没有给这个变量赋值，那么就是undefined；
null
空对象指针
如果定义的变量未来要用于保存对象，那么最好初始化为null；
ps：undefined==null返回值是true；
console.log();
控制台打印；
number
表示整数和浮点数
NaN：非数值（not a number），一个特殊的数值；
NaN与任何值都不相等，包括它本身。
函数isNaN（）；
用来检测变量是否是非数值。
返回类型是Boolean。
ps：isNaN（）在接收变量时会尝试转换为数值，然后再检测。
函数Number（）；
把非数值转换为数值。//强制转换
如果转换不成数值就会是NaN;
函数parseInt()；
用于把字符串转换成数值。
1：忽略字符串前面的空格，直至 找到第一个非空格字符。
只能提取以数字开头的字符串的数字如“34px”,返回的就是34；
如果是以字母开头的字符串，本函数提取不出来，如“abc234”，就是返回NaN；
2：parseInt(“0xf”,16);就是把f转换成16进制，结果是15；相当于parseInt(“0xf”);
函数parseFloat()
用于把字符串转换成数值。
string
字符串类型，一定要用 " " 或者 ' ' 引起来；
函数tostring（）
语法：str.tostring()
将str转换成一个字符串
转换的内容：数值，布尔，对象， 字符串
函数string（）
语法：string（对象）；
转换内容可以是任何类型；
Boolean
用于表示真假
1：所有数字除了0之外，转换为布尔类型都是true
2：所有字符除了“ ”之外，转换为布尔类型都是true
3：null和undefined转换为布尔型是false
操作符
算术操作符
+-*/
两个数据相加，如果有一方是字符串那么加号的作用就是将他们进行拼接。
除了+隐式转换，会自动把类似“122”的字符串转换为number类型122
递增和递减
++a 先返回递增后a的值
a++ 先返回a的原值，再返回递增后的值
赋值操作符
比较操作符
==
!=
!==
三元操作符
条件?执行代码1：执行代码2
逻辑或
image.png
语句
if语句
if（条件1）{
状态1；
}
else if（条件2）{
状态2；
}
else{
状态3；
}
js常用语法：
弹出一个可输入框prompt（“”）；
弹出一个警示框alert（“”）；
获取星期返回值是number0-6：new Date().getDay()；
向浏览器输出内容document.write（）；
switch语句
switch（条件要判断的内容）
{
case 值1：状态 break；
case 值2：状态 break；
·····
default：状态；
}
break是退出循环；
for语句
for（语句1；语句2；语句3）
{
执行代码块；
}
语句1：在代码块开始前执行
语句2：定义循环的条件
语句3：代码块执行后执行
while语句
while（循环条件）
{
语句块；
}
ps：for适合已知循环次数的循环体，while适合未知循环次数的循环体。
break语句
跳出循环
continue语句
跳出本次循环
函数
声明函数
function 函数名（【参数】）
{
函数内容；
}
函数调用
函数名（【参数】）；
arguments参数
它有一个length属性确定参数的个数
函数从外边传进去的参数都保存在arguments里。
可以通过arguments【索引号】来访问对应的参数值。
索引号是从0开始的正整数，第一个参数的索引值是0；
ps：常出的面试题：
求任意一组数的平均值（个数不定）
function getAvg（）{
var sum=0,len=arguments.length;
var i;
for(i=0;i<len;i++)
{
sum+=arguments[i];
}
return sum/len;
}
数组
创建数组
new Array（）；
ps：创建一个保存颜色的数组
var colors = new Array（）；
new Array（可以是一个数值）表示数组长度；
new Array（可以是值1，值2，值3....）表示数组的值；
var 自变量 = [值1，值2，值3....]；
ps：var cols=[“red”，“yellow”，“green”]；
注：数组里面的每一个值的数据类型没有限制；
数组.length
数组的长度
数组方法
push()
在数组的尾部添加值
ps： var colors = new Array（“red”，“green”）；
colors.push（“blue”，“yellow”）；
或者是：var len = colors.push（“blue”，“yellow”）；
len的值是colors的长度 4
unshift()
在数组头部添加值
ps：var nums = [2,7,8,6];
var size = nums.unshift(99,66);
size的值是6
pop()
删除数组的最后一个元素
arrayObject.pop()
返回值是被删除的元素
shift()
arrayObject.shift()
删除数组的第一个元素
返回值是被删除的那个元素
join()
数组的转换方法
arrayObject.join(separator);
把数组中的所有元素 放入一个字符串
返回值是一个字符串
separate是分隔符 默认是逗号，
reverse()
数组逆序方法
sort()
数组排序方法
sort在排序过程中，会把每一个数组元素转换成字符串，按照字符串的首字母来进行排序。
当时数字数组要排序时，要这样写：
arr.sort（function（a，b）{return a-b}）//升序
arr.sort（function（a，b）{return b-a}）//降序
concat（）
用于连接两个或多个数组
arrayObject.concat（arrayX，arrayY，。。。）
slice（）
从已有的数组中返回选定的元素
通过索引截取值返回值是数组
ps：面试题
完成以下代码片段，实现b数组对a数组的拷贝，方法越多越好
var a=[1,"red",3],b;
//数组遍历 push
b=new Array();
for(var i=0;i<a.length;i++)
{
b.push(a[i]);
}
//concat()
b=[].concat(a);
//slice()
b=a.slice(0);
splice()
删除
arrayObject.splice (index,count);
需要有 索引和个数
个数为0时不删除
只有索引时，该索引后面的所有值都删除
插入
arrayObject.splice (index,0，items1，items2.。。。);
指定位置插入值
注意，想要往哪个位置后边插，index的值就是那个后置后边位置的索引值
替换
arrayObject.splice (index,count，items1，items2.。。。);
在指定位置插入值，且同时删掉任意数量的值
count要删掉的项数
indexOf
从数组的开头（位置0）开始向后查找
arrayObject.indexOf(searchvalue,startIndex);
从数组的开头 位置0开始 向后查找
searchvalue 必须有 要查找的项
startIndex 选有 起点位置的索引
返回值是一个number 记录第一个找到的位置索引，没找到返回-1
lastIndexOf
从末尾开始查找
ps：IE9以下的浏览器不支持这两个查找方法
//封装一个方法实现index的功能
function ArrayIndexOf(arr,value){
//检测value在arr中出现的位置
for(var i=0;i<arr.length;i++){
if(arr[i]===value)
{
return i;
}
}
return -1;
}
ArrayIndexOf(nums,8);
string
charAt()
stringObject.charAt(index);
功能是返回index位置的字符
charCodeAt()
功能是返回index位置字符的字符编码
indexOf(“”)
功能是从一个字符串中搜索给定的字符串，返回子字符串的位置
slice（）
stringObject.slice(start，end);
功能 截取字符串
start 必需 指定字符串开始位置
end 可选 表示结束位置 省略时截取至末尾
如果参数值是负数，则其值为字符长度+该负数
substring（）
语法和用处与slice一致
除了碰到负数，转为0；
substring会以较小数字为开始位置，较大数字为结束位置。
substr（）
截取字符串
stringObject.substr(start，len);
len可选，表示截取字符串的长度，没有时默认截止至末尾。为负值时，截取字符串是空值
split（）
stringObject.split(separator);
功能是 把字符串切割成字符串数组
separator 是分隔符
replace（）
stringObject.replace(regxp/substr,replacement);
用一些字符替换另一些字符，或替换一个与正则表达式匹配的字串
regexp必须 规定子字符串或要替换的模式的regexp对象
replacement 必须 一个字符串的串值
该语法不会改变自身字符串，而是返回一个替换后的新字符串
ps：
var tele='010-124432-213,010-345342-213,010-3497290-349';
var newTele=tel.replace(',',' ');
console.log(newTele);
toUpperCase()与toLowerCase()
up把字符串转化为大写
Lo把字符串转化为小写
Math对象
min（）
Math.min(num1，num2，num3....)
求一组数中的最小值
max（）
Math.max(num1，num2，num3....)
求一组数中的最大值
ceil（）
Math.ceil(num)
向上取整，即返回大于num的最小整数
floor（）
Math.floor(num)
向上取整，即返回小于num的最大整数
round（）
取整
四舍五入
abs（）
绝对值
random（）
公式：random=Math.floor（Math.random（）*（m-n+1）+n）；
封装求n-m之间的随机整数
date对象
创建一个日期时间对象
var today = new Date（）；
console.log(today);
获取时间
image.png
DOM对象
查找ID
document.getElementById("id");
功能：返回对拥有指定id的！第一个！对象的引用
查找标签
document.getElementByTagName("TagName");
功能：返回对拥有指定所有标签的引用
ps：如果想要获取某个ID下的某类标签
document.getElementsById("id").getElementByTagName("TagName");
返回的是一个数组
设置元素样式
语法：ele.style.styleName = styleValue;
功能是设置ele元素的style样式
ele是要设置样式的dom对象
styleName不能以用“-”形式 要用驼峰形式 ：font-size要写成fontSize
innerHTML
ele.innerHTML
功能是返回开始标签和结束标签之间的HTML内容
ele.innerHTML="html"
功能是设置开始和结束标签之间的HTML内容
className
ele.className
返回ele元素的class属性
ele.className=“cls”
设置ele元素的class属性为cls
ps：className是重新设置一个元素的类，替换元素本身的class
获取属性
语法：ele.getAttribute("attribute")
功能：获取ele元素的attribute属性
attribute是要获取所有的HTML属性
ps:id，type，align，value....除了class的标签自带的属性
都可以.属性名而class要获取 则是.className
设置属性
语法：ele.setAttribute("attribute"，value)
功能：设置ele元素的attribute属性
如果value是字符串，需加以“”
删除属性
语法：ele.removeAttribute("attribute")
功能：删除ele元素的attribute属性
事件
HTML事件
语法：<tag 事件=“执行脚本”></tag>
功能：在HTML元素上绑定事件
ps：<input type="button" value="弹出" onclick="alert('我是按钮')">
onload：页面加载时触发
onclick：鼠标点击时触发
onmouseover：鼠标划过时触发
onmouseout：鼠标离开是触发
onfocus：获得焦点时触发
用于type为text、password，textarea标签；
onblur：失去焦点时触发
onchange：域的内容改变时触发
作用域在select，checked或radio
this指向
在事件触发的函数中，this是对该DOM对象的引用
onsubmit表单中的确认按钮被点击发生
不是加在提交按钮上，是加在表单上
onmousedown鼠标按钮在元素上按下时触发
onmousemove在鼠标指针移动时发生
onmouseup在元素上松开鼠标按钮时触发
onresize在调整浏览器大小时触发
onscroll拖动滚动条时触发
！键盘事件与keycode属性
onkeydown：在用户按下一个键盘时发生
onkeypress：在按下键盘时发生（只会响应字母与数字符号）
onkeyup：在 键盘按键被松开时发生
键盘按键事件触发顺序：onkeydown>onkeypress>onkeyup
keycode:返回onkey事件触发的值的字符代码或者键的代码
BOM对象
BOM(browser object model)浏览器对象模型
window对象
window对象是浏览器的一个实例，它有双重角色，一是通过js访问浏览器窗口的一个接口，又是ECMA规定的全局对象
windows.alert("content")
功能：带有一段消息和一个确认按钮的警告框
windows.confirm("message")
功能：显示一个带有指定消息和ok及取消按钮的对话框
如果点击确定按钮，返回true
点击取消按钮，返回false
windows.prompt("text,defaultText")
text要在对话框中显示的纯文本
default默认的输入文本
返回值：点击取消按钮，返回null
点击确认按钮，返回输入字段当前文本
windows.open(pageURL,name,parameters)
打开一个新的浏览器窗口或者查找一个已命名的窗口
pageURL子窗口路径
name子窗口名称
parameters窗口参数（各参数用逗号分离）
窗口参数
windows.close(pageURL,name,parameters)
关闭窗口
setTimeout （code，millisec）
延迟多少毫秒后执行某段代码
code要调用的函数
millisec在执行代码前要等待的毫秒数
setInterval（code，millisec）
每隔指定的时间执行一次代码
code：要调用的函数
millisec周期性执行或调用code之间的时间间隔毫秒计数
clearTimeout（id）
清除id对应的延迟
navigator
navigator.userAgent
用的是什么浏览器
screen
包含有关客户端显示屏幕的信息
screen.availWidth
返回可用的屏幕宽度
screen.availHeight
返回可用的屏幕高度
image.png
history
history.back()
回到历史记录的上一步；相当于history.go(-1)
history.go(负数)
负几就是返回到前几步
history.forward()
回到历史记录的下一步；相当于history.go(1)
history.go(正数)
几就是回到历史记录的下几步
location
location.href 等同于window.location.href
返回当前加载页面的完整url
location.hash
返回URL中的hash(#后跟0或多个字符)，如果没有就返回空字符串
location.host
返回服务器名称与端口号
location.hostname
返回不带端口号的服务器名称
location.passname
返回url中的目录和文件名
image.png
location.reload()
重新加载当前页面
location.replace（url）
跳转到的URL会取代当前的URL，不会在历史记录中生成新记录
