文章目录
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();
}
});