文章目录
1.JS数据类型
字符串、数字（整型、浮点型、NaN）、布尔、数组、对象、Null、Undefined
2.转成数值型
- Number
1、如果是Boolean值，true和false值将分别被转换为1和0。
2、如果是数字值，只是简单的传入和返回。
3、如果是null值，返回0。
4、如果是undefined，返回NaN。
Number("Hello world"); //NaN
Number(""); //0
Number("0000011"); //11
- parseInt
parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)
parseInt("11",2); //返回 3 (2+1)
parseInt("17",8); //返回 15 (8+7)
parseInt("1f",16); //返回 31 (16+15)
parseInt("010"); //未定：返回 10 或 8
- parseFloat
parseFloat("10") //10
parseFloat("10.00") //10
parseFloat("10.33") //10.33
parseFloat("34 45 66") //34
parseFloat(" 60 ") //60
parseFloat("40 years") //40
parseFloat("He was 40") //NaN
3.删除数组中指定的元素
- delete关键字：不会改变原数组
var arr = ['a','b','c','d']
delete arr[1] //['a',,'c','d'] delete只删除元素的值，下标还在，删除之后值变成undefined
- splice(index下标,len长度,[item替换元素])：可对数组进行删除、替换、添加，会改变原数组
var arr = ['a','b','c','d']
//删除
arr.splice(1,1) //['a','c','d']
arr.splice(1,2) //['a','d']
//替换
arr.splice(1,1,'ttt') //['a','ttt','c','d']
arr.splice(1,2,'ttt') //['a','ttt','d']缺少的不添加元素
arr.splice(1,2,'ttt','ccc') //['a','ttt','ccc','d'] 依次往后添加
//添加
arr.splice(1,0,'ttt','ccc') //['a','ttt','ccc','b','c','d']
3.内置对象
（1）String对象：字符串对象
- length：获取字符串的长度。如：var len = strObj.length
- toLowerCase()：将字符串中的字母转成全小写。如：strObj.toLowerCase()
- toUpperCase()：将字符串中的字母转成全大写。如：strObj.toUpperCase()
- charAt：返回指定下标位置的一个字符，如果没找到，返回空字符串
语法：strObj.charAt(index)
参数：index是指定的一个索引号，根据索引号返回一个字符
var str = "YY-帆S的JavaScript学习笔记"
for(var i = 0;i<str.length;i++){
document.write(str.charAt(i)+"<br>") //依次打印全部字符
}
- indexOf：返回一个字符串在原始字符串中的索引值，从左到右查找，如果没找到，返回-1
语法：strObj.indexOf(substr)
参数：substr代表要查找的一个子字符串 - lastIndexOf：在原始字符串，从右往左查找某个子字符串。如果没找到，返回-1
语法：strObj.lastIndexOf(substr)
参数：substr代表要查找的子字符串。 - substr：在原始字符串，返回一个子字符串
语法：strObj.substr(startIndex [ , length])
说明：从下标startIndex起，返回length个字符
参数：startIndex表示查找的起始索引号
length可选，返回几个字符。如果省略，一直返回到结尾 - substring：在原始字符串，返回一个子字符串
语法：strObj.substring(startIndex [ , endIndex])
说明：返回从startIndex开始索引值到endIndex结束索引值之间的所有字符，不包含endIndex处的字符
参数：startIndex表示查找的起始索引号
endIndex：可选项，代表结束索引值。如果省略，一般返回到结尾的所有的字符
var str = 'abcdefg'
str.substring(2,3) = “c”
str.substr(2,3) = “cde”
- split：将一个字符串切割成数组
语法：strObj.split(分割号)
参数：参数是一个分割号的字符串。用指定的分割号将字符串切成若干段
var str = 'a,b,c,d'
str.split(',')//arr=['a','b','c','d']
'YY-帆S'.split('') //arr=['Y','Y','-','帆','S']
（2）Array对象：数组对象
- length：获取数组长度
- join：将一个数组转成字符串
语法：arrObj.join(连接号) - reverse:将数组中各元素颠倒顺序
语法：arrObj.reverse() - delete：只能删除数组元素的值，而所占空间还在，总长度没变
- shift()：删除数组中第一个元素，返回删除的那个值，并将长度减1
- unshift()：往数组前面添加一个或多个数组元素，长度要改变。arrObj.unshift(“a” , “b” , “c”)
- push()：往数组结尾添加一个或多个数组元素，长度要改变。arrObj.push(“a” , “b” , “c”)
- pop()：删除数组中最后一个元素，返回删除的那个值，并将长度减1
（3）Date对象：日期时间对象
- 创建当前(现在)日期对象的实例，不带任何参数
var timer = new Date(); - 创建指定时间戳的日期对象实例，参数是时间戳
时间戳：是指某一个时间距离1970年1月1日0时0分0秒，过去了多少毫秒值(1秒=1000毫秒)
var timer = new Date(10000); //时间是 1970年1月1日0时0分10秒 - 指定一个字符串的日期时间信息，参数是一个日期时间字符串
var timer = new Date(“2015/5/25 10:00:00”); - 指定多个数值参数
顺序为：年、月、日、时、分、秒，年、月、日是必须的
var timer = new Date(2015+100,4,25,10,20,0); - getFullYear()：获取四位的年份。
getMonth()：获取月份，取值0-11
getDate()：获取几号，取值1-31
getHours()：获取小时数
getMinutes()：分钟数
getSeconds()：秒数
getMilliseconds()毫秒
getDay()星期
getTime()毫秒值，距离1970年1月1日至今的毫秒值
（4）Number对象：数值对象
- toFixed：将一个数值转成字符串，并进行四舍五入，保留指定位数的小数
语法：numObj.toFixed(n)
n就是要保留的小数位数
var a = 123.456
a.toFixed(2) //123.46
（5）Math对象：数学对象
- Math.PI：圆周率。
- Math.abs()：绝对值。如：Math.abs(-9) = 9
- Math.ceil()：向上取整(整数加1，小数去掉)。如：Math.ceil(10.2) = 11
- Math.floor()：向下取整(直接去掉小数)。如：Math.floor(9.888) = 9
- Math.round()：四舍五入。如：Math.round(4.5) = 5; Math.round(4.1) = 4
- Math.pow(x,y)：求x的y次方。如：Math.pow(2,3) = 8
- Math.sqrt()：求平方根。如：Math.sqrt(121) = 11
- Math.random()：返回一个0到1之间的随机小数。如：Math.random() = 0.12204467732259783
（6）Boolean对象：布尔对象
4.BOM浏览器对象
（1）window：浏览器窗口
- 属性
（1）document.write(“OK”);
（2）document.body.bgColor = “#FF0000”;
（3）name：指浏览器窗口的名字或框架的名字。这个名字是给<a>标记的target属性来用的.获取窗口的名字：document.write(name);
（4）top：代表最顶层窗口。如：window.top
（5）parent：代表父级窗口，主要用于框架
（6）self：代表当前窗口，主要用于框架中
innerWidth/innerHeight：指浏览器窗口的内宽/高(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。
PS：在IE下，使用 document.documentElement.clientWidth 来代替window.innerWidth
var width = window.innerWidth?window.innerWidth:document.documentElement.clientWidth
- 对象方法
（1）alert()：弹出一个警告对话框
（2）prompt()：弹出一个输入对话框
（3）confirm()：弹出一个确认对话框。如果单击“确定按钮”返回true，如果单击“取消”返回false
（4）close()：关闭窗口
（5）print()：打印窗口
（6）open()：打开一个新的窗口
语法：var winObj = window.open([url][,name][,options]);
参数：
url：准备在新窗口中显示哪个文件。url可以为空字符串，表示显示一个空的页面
name：新窗口的名字
options：窗口的规格
1.width/height：新窗口的宽度和高度
2.left/top：新窗口距离屏幕左边和上边的距离
3.menubar：是否显示菜单栏，取值：yes、no
4.toolbar：是否显示工具栏
5.location：是否显示地址栏
6.status：是否显示状态栏
7.scrollbars：是否显示滚动条，不能省略s字母
（7）onload事件：当网页加载完成，指标记的所有内容全部加载完成，才触发该事件。通过onload事件属性，去调用JS的函数。onload属性只有标记才有
（8）onclick事件：当单击时，去调用JS代码。所有HTML标记都具有该事件属性
window.onload = function(){
var time1 = Date.parse(new Date());
var time2 = Date.parse(new Date('2016/05/01'));
// 计算时间差, 单位是毫秒
time=time1-time2;
time=Math.floor(time/86400000);
var wh=document.getElementsByTagName('h2')[0];
wh.innerHTML='和女朋友在一起'+time+'天';
};
- setTimeout：设置一个延时器，即时间一到，执行代码一次
语法：var timer = window.setTimeout(code,millisec)
参数：code：任何合法的JS代码，一般情况下是JS函数，该函数要放在引号内
millisec：毫秒值，1秒=1000毫秒
返回值：返回一个延时器的id变量，这个id变量交给clearTimeout()清除 - clearTimeout：清除延时器id变量
语法：window.clearTimeout(timer)
参数：timer为setTimeout设置的延时器的id变量
<script type="text/javascript">
var sec = 0;//标记时间
var timer;//标记延时器ID
function start_time(){
//获取页面元素并改内容
var time_show = document.getElementById('time_show')
time_show.innerHTML = sec
sec++
//重复调用自己，延时器模拟定时器效果
timer = window.setTimeout('start_time()',1000)
}
function stop_time(){
window.clearTimeout(timer)
}
</script>
<div id="time_show">0</div>秒
<input type="button" value="开始" onclick="start_time()">
<input type="button" value="停止" onclick="stop_time()">
- setInterval：设置一个定时器，周期性重复不断的执行JS代码
语法： var timer = window.setInterval(code , millisec)
参数与延时器一样
返回值：返回一个定时器的id变量，这个id变量交给clearInterval()清除 - clearInterval：清除定时器id变量
语法：window.clearInterval(timer)
参数与延时器一样
<script type="text/javascript">
var sec = 0;//标记时间
var timer;//标记定时器ID
function init(){
timer = window.setInterval('start_time()',1000)
}
function start_time(){
var time_show = document.getElementById('time_show')
time_show.innerHTML = sec
sec++
}
function stop_time(){
window.clearInterval(timer)
}
</script>
<div id="time_show">0</div>秒
<input type="button" value="开始" onclick="init()">
<input type="button" value="停止" onclick="stop_time()">
（2）location：地址栏
- href：获取地址栏中完整的地址。可以实现JS的网页跳转
如location.href = “http://www.sina.com.cn”; - host：主机名
- hostname：主机名
- pathname：文件路径及文件名
- search：查询字符串
如：blog.yyfs.com/?id=6666&title=study 中?号后面就是查询字符串 - protocol：协议，如：http://、ftp://
- hash：锚点名称。如：#top
- reload([true])：刷新网页。true参数表示强制刷新
注意：所有的属性，重新赋值后，网页将自动刷新
<meta http-equiv="refresh" content ="5;url=http://www.sina.com.cn"/>
<input type='button' value='刷新页面' onclick="javascript:location.reload(true)">
（3）history：浏览历史
- length：历史记录的个数
- go(n)：同时可以实现“前进”和“后退。”
history.go(0) 刷新网页
history.go(-1) 后退
history.go(1) 前进一步
history.go(3) 前进三步
- forward()：相当于浏览器的“前进”按钮
- back()：相当于浏览器的“后退”按钮
（4）screen：显示器屏幕
- width/height：屏幕的宽/高度，只读属性
- availWidth/availHeight：屏幕的有效宽/高度，不含任务栏。只读属性
（5）navigator：浏览器软件
- appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器
如果是IE浏览器的话，返回值为：Microsoft Internet Explorer
如果是Firefox浏览器的话，返回值为：Netscape - appVersion：浏览器软件的核心版本号
- systemLanguage：系统语言
- userLanguage：用户语言
- platform：平台
（6）document：网页
5.DOM
（1）节点的属性
- 核心DOM的属性：
（1）nodeName：节点名称
（2）nodeValue：节点的值
（3）first/lastChild：第一个/最后一个节点
（4）childNodes：子节点列表
（5）parentNode：父节点
（6）nextSibling/previousSibling：下一个/上一个兄弟节点 - HTML标记的属性，如：
（1）src：连接地址
（2）width/height：宽/高度
（3）border：
（4）style：样式
（5）id：id的属性值
（6）title：标题
divObj.style.backgroudColor = 'red'
- 元素对象的属性：
（1）tagName：节点名称，与核心DOM的nodeName一样
（2）innerHTML：节点内的所有内容，包括HTML标记
（3）offsetWidth/offsetHeight：元素的可见宽/高度，不带px单位
（4）scrollWidth/scrollHeight：元素对象的总宽/高度，不带px单位，包括滚动条的内容
（5）scrollTop/scrollLeft：指内容向上/左滚动上去了多少距离，默认值为0，有滚动条的时候才有效
（6）clientX/Y、pageX/Y、screenX/Y：指距离窗口、网页、屏幕左边的上边的距离
（2）对节点的属性操作
- setAttribute(name,value)：给某一个节点添加一个属性
- getAttribute(name)：获取某个节点的某一个属性的值
- removeAttribute(name)：删除该节点的name属性的值
（3）节点的创建与追加
- 节点创建：
（1）doucument.createElement(tagName)：创建元素对象，tagName为不带尖括号的HTML标记的名称
（2）document.createTextNode(文本内容)：创建文本节点 - 节点追加：
（1）parentNode.appendChild(childNode)：将创建的节点追加到某个父节点下
（2）parentNode.insertBefore(newNode,oldNode)：将newNode放到oldNode前面
（3）parentNode.replaceChild(newNode,oldNode)：将newNode替换oldNode
var imgObj = document.createElement('img')
document.body.appendChild(imgObj)
- 节点复制：
被复制节点.cloneNode(true/false)
true：深度复制（本身节点和其内部节点）
false：浅层复制（只有本身节点） - 节点删除：
（1）parentNode.removeNode(childNode)
（2）childNode.parentNode.removeNode(childNode)
（4）节点的查找
- getElementById()：查找网页中指定id的元素对象
语法：var obj = doucument.getElementById(id)
参数：id是网页中标记id属性的值
返回值：返回一个元素对象 - getElementsByTagName(tagName)：查找指定的HTML标记，返回一个数组
语法：var obj = doucument.getElementsByTagName(tagName)
参数：tagName是指要查找的标记名称，不带尖括号
返回值：返回一个数组，如果只有一个节点，也是返回一个数组
（4）节点的事件
经典的是onclick，onmouseout，onmouseover
DOM事件集合链接: 菜鸟教程的DOM事件
- 获取事件对象
（1）node.onclick
（2）node.addEventListener（类型，函数[，true/false]）
参数：true：捕捉型，事件从外往内依次执行
false：冒泡型，事件从内往外依次执行
dom1.onclick = function(){alert(' first dom0 ')};
html.addEventListener("click", function(){alert('html')}, false);
6.函数
- arguments：接收实参信息，不用指定形参数量
function f1(){
var len = arguments.length
if(len==1){
console.log('名字'+arguments[0])
}else{
console.log('第二个参数是'+arguments[1])
}
}
f1('yyfs',60,'beijing')
- callee：调用本函数
function f1(){
arguments.callee()
}
f1()
7.阻止浏览器默认行为
如阻止form表单提交，event.preventDefault()
$('form').submit(function(e){
var name = $('#name').val();
var icon = $('#up_0').val();
var flag = 1;
if (name==''){$('#name_error').css('display','inline-block');flag = 0;}
if (icon==''){$('#icon_error').css('display','inline-block');flag = 0;}
if(flag==0){
e.preventDefault();
}
});
15万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
