JS基本语法+实例

JS基本语法

parseInt() 将字符串 转换为整型

var str = '100cm';var val = parseInt(str);console.log(val+'---------'+typeof val);//100---------number

parseFloat() 将字符串转换为浮点型

var str = '1.2';var val = parseFloat(str);console.log(val+'---------'+typeof val);//1.2---------number

Number() 将任意类型转换 为数字类型

var val=null;var newVal = Number(val);console.log(newVal+'--------'+typeof newVal);//0--------number

Boolean() 强制将其他类型转换为布尔值

var val = null;var newVal = Boolean(val);console.log(newVal+'--------'+typeof newVal);//false--------boolean

String() 将其他数据类型转换为字符串值

var val = undefined; var newVal = String(val);console.log(newVal+'--------'+typeof newVal);//undefined--------string

toString() 返回对象的字符串格式

var now=new Date();console.log(now.toString());

() 返回对象的本地字符串格式

var now=new Date();console.log(now.toLocaleString());

valueOf() 返回对象的原始值.
var now=new Date();console.log(now.valueOf());

pop() 在数组的结尾处弹出一个元素

var arr = ['a','b','c'];var last=arr.pop();console.log(last);//c

push() 在数组的结尾处添加元素

var arr = ['a','b','c'];var num=arr.push('d');console.log(num);//4

shift() 在数组的开头处移除一个元素

var arr = ['a','b','c'];var first=arr.shift();console.log(first);//a

unshift()在数组的开头处添加元素 父

var arr = ['a','b','c'];var num=arr.unshift(1,2,3);console.log(num);//6

concat() 数组连接方法

var arr1=['a','b','c'];var arr2=['d','e'];var newArr=arr1.concat(arr2,'f'); console.log(newArr);//["a", "b", "c", "d", "e", "f"]

join() 数组元素连接方法,使用指定的字符串将数组元素进行连接

var arr1=['a','b','c'];var str=arr1.join('--');console.log(str);//a--b--c

reverse() 数组反转方法

var arr1=['a','b','c'];var newArr=arr1.reverse();console.log(newArr);//["c", "b", "a"]

slice() 返回数组中的一段

var arr1=['a','b','c','d','e'];var newArr = arr1.slice(2,4);console.log(newArr);//["c", "d"]

sort() 数组排序函数

var arr = ['Z','A','q','S','a',3,'D','T','M',1,32,6,1,];var arr1 = arr.sort();console.log(arr1);//[1, 1, 3, 32, 6, "A", "D", "M", "S", "T", "Z", "a", "q"]

splice() 数组的万能方法

 增删改    
var arr = ['关羽','张飞','赵云','黄忠','马超'];添加var ele=arr.splice(2,0,'刘备','刘婵');
console.log(arr);//["关羽", "张飞", "刘备", "刘婵", "赵云", "黄忠", "马超"]
删var ele=arr.splice(2,2);console.log(ele);//["赵云", "黄忠"] 
改var ele=arr.splice(2,1,'赵cloud','张fly');console.log(arr);//["关羽", "张飞", "赵cloud", "张fly", "黄忠", "马超"]

getFullYear() 获取完整的时间年份

var now = new Date();var year=now.getFullYear();

getYear() 获取三位数或者两位数的时间年份

var year=now.getYear();

getMonth() 获取月份 0-11

var mon=now.getMonth();

getDate() 获取月中第几天 1-31

var date=now.getDate();

getHours() 获取小时数 0-23 24开始进入下一天

var hour=now.getHours();

getMinutes() 获取分钟数 0-59

var min=now.getMinutes();

getSeconds() 获取秒数0-59

var sec=now.getSeconds();

getMilliseconds() 获取毫秒数0-999

var msec=now.getMilliseconds();

getDay() 获取星期几 0-6 表示 周天-周六

var day=now.getDay();

setFullYear() 设置完整的时间年份

now.setFullYear(1999);

setMonth() 设置月份 0-11

now.setMonth(11);

setDate() 设置月中第几天 1-31

now.setDate(30);

setHours() 设置小时数 0-23 24开始进入下一天

now.setHours(12);

setMinutes() 设置分钟数 0-59

now.setMinutes(34);

setSeconds() 设置秒数0-59

    now.setSeconds(45);

setMilliseconds() 设置毫秒数0-999

    now.setMilliseconds(123);

getTime() 获取当前的时间戳(毫秒)

    console.log(now.getTime());

setTime() 设置当前的时间戳(毫秒)

now.setTime(192391234);

parse() 将时间格式字符串解析为时间戳.

var datestring = "November 1, 1997 10:15 AM";Date.parse(datestring)

toDateString() 返回完整时间的日期部分 年月日

console.log(now.toDateString())

toTimeString() 返回完整时间的时间部分 时分秒 时区

    console.log(now.toTimeString())

getTimezoneOffset() 获取当前时区的偏移值

"function TZDemo(){
   var d, tz, s = "" The current local time is "";
   d = new Date();
    tz = d.getTimezoneOffset();
   if (tz < 0)
  s += tz / 60 + "" hours before GMT"";
   else if (tz == 0)
  s += ""GMT"";
   else
  s += tz / 60 + "" hours after GMT"";
   return(s);
}
"

eval() 将JS代码字符串当做代码来执行

var str='window.alert("1111");';eval(str);

Math对象 固有对象

abs() 获取绝对值的方法  Math.abs(-99);//99
ceil() 向上取整方法   Math.ceil(250.51325123);//251
floor() 向下取整方法  Math.floor(250.51325123);//250
round() 四舍五入方法  Math.round(250.51325123*10000)/10000;//250.5133
max() 获取N个数值中的最大值   Math.max(123,3,634,23,454,123,56,124,3457);//3457
min() 获取N个数值中的最小值   Math.min(123,3,634,23,454,123,56,124,3457);//3
random() 随机获取0-1之间的小数,包含0但是不包含1.    Math.random();
sqrt() 开平方根 Math.sqrt(4);//2
pow() 计算一个数的N次方 Math.pow(2,10);//1024
String对象原型  
charAt() 返回指定位置的字符  var str='ABCDEFGHIJKLMNOPQRSTUVWXYZ';var result=str.charAt(4);//E
charCodeAt() 返回指定位置的字符的ASCII码   var result=str.charCodeAt(0);//65

concat() 字符串连接方法

var str = '6月8日魔兽电影开播';var str2= '没有时间去看,怎么办';var result=str.concat(str2);//6月8日魔兽电影开播没有时间去看,怎么办

indexOf() 获取第一次出现指定字符的位置

var url='https://www.kengni.com/abc/efg/doubi.php';var pos=url.indexOf(':');//5

lastIndexOf() 获取最后一次出现指定字符的位置.

var pos=url.lastIndexOf('.');

slice() 字符串切割方法,使用方法和数组的slice一致

var str='ABCDEFGHIJKLMNOPQRSTUVWXYZ';var result=str.slice(10,5);

substr() 字符串切割方法

var result=str.substr(5,10);

substring() 字符串切割方法

    var result=str.substring(10,5);

match() 进行一次正则匹配操作

"function MatchDemo(){
   var r, re;         // 声明变量。
   var s = ""The rain in Spain falls mainly in the plain"";
   re = /ain/i;    // 创建正则表达式模式。
   r = s.match(re);   // 尝试匹配搜索字符串。
   return(r);         // 返回第一次出现 ""ain"" 的地方。
}
"

replace() 正则或者字符串替换操作

var r, re = "Spain";r = "The rain in Spain".replace(re, "Canada");

search() 返回正则表达式匹配的第一个字符串的位置

"function SearchDemo(){
   var r, re;                   // 声明变量。
   var s = ""The rain in Spain falls mainly in the plain."";
   re = /falls/i;            // 创建正则表达式模式。
   r = s.search(re);            // 查找字符串。
   return(r);                   // 返回 Boolean 结果。
}
"

BOM中常用的方法和属性

resizeTo() 将浏览器调整到制定的大小

window.resizeTo(300,300);

resizeBy() 将浏览器在当前大小的情况下调整制定的高度和宽度

window.resizeBy(-100,-100);

moveTo() 将浏览器调整到制定的坐标

moveTo(-200,-200);

moveBy() 将浏览器的位置在当前位置基础上调整制定的长度

moveBy(100,0);

setInterval() 循環執行方法

setInterval(function(){ document.write('<HR />');},1000);

clearInterval() 终止循环的办法

clearInterval(循环变量);

setTimeout() 定時執行方法

setTimeout(function(){ console.log('到点了,该吃药了!');},10000);

clearTimeout(); 终止定时执行

clearTimeout(定时变量);

scrollTo() 将滚动条移动到制定的位置

 window.scrollTo(0,1500);

scrollBy() 将滚动条在当前位置基础上移动制定长度

"setInterval(function(){
scrollBy(0,1);
   },50);"

open() 打开一个新页面

window.open('2.html','_blank','height=300,width=300,left=300,top=300,location=no,resizable=no');

close() 关闭也一个打开的页面

"setTimeout(function(){
window.close();
   },5000);"

focus() 获取焦点方法

"setTimeout(function(){
//3秒后页面获取焦点
window.focus();
   },3000);"

blur() 失去焦点方法

"setTimeout(function(){
//3秒后页面失去焦点
//window.blur();
   },3000);"

属性

innerWidth 表示页面视窗的宽度(白色区域)

alert(innerWidth+'---'+innerHeight);

innerHeight 表示页面视窗的高度(白色区域)

alert(innerWidth+'---'+innerHeight);

history子对象

history 浏览器历史记录对象
    "setTimeout(function(){
history.go(1);
   },5000)"

length 表示当前页面的浏览历史个数

document.write(history.length);

forward() 打开历史记录前第N个页面

/history.forward(1)

back()打开历史记录后第N个页面

history.back(2)

go() 打开当前页面的前后N各页面

history.go(1);

DOM

节点的成员属性

firstChild 获取节点的第一个子节点

var text=love.firstChild;

lastChild 获取节点的最后一个子节点

var e = txt.lastChild;  

childNodes 获取节点的所有节点集合

"var relation=document.getElementById('relation');
   console.log(relation.childNodes.length);"

parentNode 获取一个节点的父节点

console.log(relation.parentNode.nodeName);

previousSibling 获取上一个兄弟节点

console.log(relation.previousSibling.firstChild.nodeValue);

nextSibling 获取下一个兄弟节点

console.log(relation.nextSibling);

节点的成员方法

appendChild() 在节点的子节点列表的最后添加一个子节点.

"var method=document.getElementById('method');
   var input = document.createElement('input');
   method.appendChild(input);"

insertBefore() 在节点的子节点列表的制定节点之前添加一个子节点

method.insertBefore(input,method.childNodes[1]);

hasChildNodes() 检测一个节点是否具有子节点

method.hasChildNodes()

removeChild() 移除节点的指定子节点

method.removeChild(method.childNodes[1])

replaceChild() 使用指定节点替换另一个制定的子节点

method.replaceChild(input,method.childNodes[1]);

cloneNode() 克隆节点

"var relation =document.getElementById('relation');
   var newRel=relation.cloneNode(true);"

document文档节点

获取元素节点的方法

getElementById() 通过ID获取元素节点

var ele=document.getElementById('ele');

getElementsByTagName() 通过标签名获取节点列表集合

"var divs=document.getElementsByTagName('div');
   console.log(divs.length);"

getElementsByName() 通过Name属性获取元素节点集合

"var sexs=document.getElementsByName('user');

console.log(sexs);”

创建节点的方法

createElement() 创建一个元素节点

var b=document.createElement('b');

createAttribute() 创建一个属性节点

"var classAttr=document.createAttribute('class');
   classAttr.value='on';"

createTextNode() 创建一个文本节点

var newtext=document.createTextNode('First');

文档流操作

write() 向页面中输入文本流

document.write('哈哈');

writeln() 向页面中输入文本流,并且添加

\n  document.writeln('哈哈');

open() 打开一个文档流

document.open();

close() 关闭一个文档流

document.close();