Java知识整理（十六）之JavaScript
2015-09-19 10:26
645 查看
JS(JavaScript):核心思想:一切都是对象
在浏览器运行的客户端语言,大小写敏感,一般使用分号结束,换行也行
所有的变量都用关键字var声明
注释: 单行://
多行:/* */
boolean isNaN();不是一个数字
==只要值相等 ===不但值相等,类型也要相等 !==值不相等或者类型不相等
超链接在新窗口中打开,可重复:<a href="#" onclick="window.open('URL')">跳转超链接</a>
超链接在新窗口中打开,不可重复:<a href="#" onclick="window.open('URL'.'name')">跳转超链接</a>
数组排序:array.sort(compare);
1.function compare(a,b){return a-b;}
2. var compare=function(a,b){return a-b;};
3. var compare=new Function("a","b","return a-b;");
html调用js：
1.js插入html页面:<input type="button" onclick="alert('HelloWorld');">
2.嵌入式:<head><script type="text/javascript" language="javascript">
alert("HelloWorld");
</script></head>
3.文件调用方式:
<head><script tyle="text/javascript" language="javascript" src="myjs.js">
</script></head> html页面可以调用myjs里面的方法
数据类型的隐式转换:
数字+字符串:数字转换成字符串
数字+布尔值:true转换为1,false转换为0
字符串+布尔值:布尔值转换为字符串true或false
布尔值+布尔值:布尔值转换为数值1或0
数据类型转换函数:toString;parseInt("6.12");parseFloat;如果不能转换,则返回NaN(not a number)
null:可以通过给变量赋值null来清除变量的内容
undefined:声明了变量但从未赋值或变量属性不存在
==数值相等;===类型相等,数值相等
str.length;str.toLowerCase;str.toUpperCase;str.charAt(index);str.split(",");
str.charCodeAt(index); 返回指定位置字符的Unicode编码
str.indexOf(findstr,index); index为开始查找的位置索引,可以省略
str.lastIndexOf(findstr,index);
str.substring(start,end); 截取子字符串,包头不包尾
str.replace(findstr,tostr); 替换子字符串
str.match(regexp); 返回匹配字符串的数组
str.search(regexp); 返回匹配字符串的首字符位置索引
var strArray = str.split(bystr,howmany); 返回分割后的字符串数组,howmany是返回数组最大长度可以省略
Array:
var week = new Array(7); var test = new Array(100,"dhsj",true);
var test1 = [100,200,300];
week.length;二维数组 arr.join("-");arr.toString();arr.reverse();arr.slice(start,[end]);
获取子数组
data.toFixed(num);数值转换为字符串,并保留小数点后num位
正则表达式:
var regExp = /pattern/flags; var regExp = new RegExp("pattern",["flags"]);
flags:g:设定当前匹配为全局模式;i:忽略匹配中的大小写检测;m:多行搜索模式
var isRight = reg.test(str); 检索str中指定的值返回true或false
Date对象:
var now = new Date(); var now2 = new Date("2013/3/20 11:20");
getDate();getFullYear();setDate();setDay();setFullYear();toString();
toLocaleTimeString();toLocaleDateString();getDay();星期中的某一天，返回值为0(日)-6(六)
函数:function func(){}
arguments:函数的参数数组 arguments.length:函数的参数个数
arguments[i]:第i个参数
Function对象:new Function(arg1,arg2,..,functionBody);
匿名函数:var func = function(arg1,arg2,...){func_body;};
eval(字符串计算):var str = "2+3"; eval(str);//5
Math.random(); //[0,1)
window.location.href="https://www.baidu.com"; 当前窗口打开窗口
window.open("https://www.baidu.com"); 新开窗口打开窗口;
window.close();关闭当前窗口
2个return:onclick="return method27();" var result = confirm("您确定要删除吗?");return result;
encodeURI:把字符串作为URI进行编码 var r1 = encodeURI(str);
decodeURI:对encodeURI()函数编码 var r2 = decodeURI(r1);
eval函数:用于计算某个字符串,以得到结果;或用于执行其中的JavaScript代码
函数触发动作:onmouseover,onmouseout,onclick,onfocus,onblur,onchange
定时器:
周期性:window.setInterval(func,1000); func:函数,执行语句;1000:时间周期,单位为毫秒;返回已经启动的定时器对象
window.clearInterval(tID):停止启动的定时器
一次性:window.setTimeout(func,1000);window.clearTimeout(tID);
DOM节点树:一切皆节点;var obj = document.getElementById("d1");
obj.nodeName;obj.nodeType;节点名称:nodeName;节点类型:nodeType;obj.innerText;obj.innerHTML;
obj.getAttribute("name");根据属性名称获取属性值obj.setAttribute();obj.removeAttribute();
obj.src="clock.jpg";(将HTML标记,属性和CSS样式都对象化)obj.style.color="red";obj.style.fontSize = 20;
innerText:设置或获取位于对象起始和结束标签内的文本
innerHTML:设置或获取位于对象起始和结束标签内的HTML obj.innerHTML="new text";
页面加载时调用方法:<body onload="method();">
页面加载后启动:window.addEventListener('load',timestart(函数名),false);
每个载入浏览器的HTML文档都会成为document对象,通过使用document对象,可以
从脚本中对HTML页面中的所有元素进行访问
标准DOM实现:var newNode = document.createElement("img");
HTML DOM实现(提供了封装好的对象):var newNode = new Image();Select,Option
var o = new Option(text,value);
Table对象:table.rows/cells.length;table.insertRow(index);返回Table对象table.deleteRow(index);
TableRow对象:table.rows[0].cells.length;table.rows[0].rowIndex/cells[0]/innerHTML/insertCell(index)/deleteCell(index);
TableCell对象:table.rows[0].cells[0].innerHTML/colSpan/rowSpan/cellIndex;
screen对象:
history对象:history.forward();前进按钮history.back();后退按钮history.go(-2);后退2次按钮
location对象:location.reload();location.href="https://www.baidu.com";location.replace("https://www.baidu.com");
DOM操作-查询:查询节点:
通过id查询:document.getElementById("d1");
通过层次(节点关系)查询:obj.firstChild;obj.lastChild;obj.previousSibling;obj.nextSibling;同级前后节点
obj.parentNode;obj.childNodes;查找多个节点,数组
通过标签名称查询:var pNodes = document(obj).getElementsByTagName("p");数组;pNodes[1].innerHTML;
通过name属性查询:
创建新节点:var newNode = document.createElement("p");返回新创建的节点
添加新节点:parentNode.appendChild(newNode); 新节点作为父节点的最后一个子节点存在
parentNode.insertBefore(newNode,refNode);
新节点位于refNode之前
删除节点:node.removeChild(childNode);删除某个节点,childNode必须是node的子节点
childNode.parentNode.removeChild(childNode);
删除自身
js代码中动态事件:btnObj.onclick = method;
事件:事件出发后将会产生一个event对象
鼠标事件:onclick/ondblclick/onmousedown/onmouseup/onmouseover/onmouseout/onmousemove(事件中实现显示坐标) = "method();";
键盘事件:onkeydown/onkeyup
状态事件:onload/onunload/onchange/onfocus/onblur/onresize/onsubmit
取消事件:onXXX = "return false;";
事件冒泡取消:event.cancelBubble = true;(js代码中不能直接使用event关键字，func(event))
在浏览器运行的客户端语言,大小写敏感,一般使用分号结束,换行也行
所有的变量都用关键字var声明
注释: 单行://
多行:/* */
boolean isNaN();不是一个数字
==只要值相等 ===不但值相等,类型也要相等 !==值不相等或者类型不相等
超链接在新窗口中打开,可重复:<a href="#" onclick="window.open('URL')">跳转超链接</a>
超链接在新窗口中打开,不可重复:<a href="#" onclick="window.open('URL'.'name')">跳转超链接</a>
数组排序:array.sort(compare);
1.function compare(a,b){return a-b;}
2. var compare=function(a,b){return a-b;};
3. var compare=new Function("a","b","return a-b;");
html调用js：
1.js插入html页面:<input type="button" onclick="alert('HelloWorld');">
2.嵌入式:<head><script type="text/javascript" language="javascript">
alert("HelloWorld");
</script></head>
3.文件调用方式:
<head><script tyle="text/javascript" language="javascript" src="myjs.js">
</script></head> html页面可以调用myjs里面的方法
数据类型的隐式转换:
数字+字符串:数字转换成字符串
数字+布尔值:true转换为1,false转换为0
字符串+布尔值:布尔值转换为字符串true或false
布尔值+布尔值:布尔值转换为数值1或0
数据类型转换函数:toString;parseInt("6.12");parseFloat;如果不能转换,则返回NaN(not a number)
null:可以通过给变量赋值null来清除变量的内容
undefined:声明了变量但从未赋值或变量属性不存在
==数值相等;===类型相等,数值相等
str.length;str.toLowerCase;str.toUpperCase;str.charAt(index);str.split(",");
str.charCodeAt(index); 返回指定位置字符的Unicode编码
str.indexOf(findstr,index); index为开始查找的位置索引,可以省略
str.lastIndexOf(findstr,index);
str.substring(start,end); 截取子字符串,包头不包尾
str.replace(findstr,tostr); 替换子字符串
str.match(regexp); 返回匹配字符串的数组
str.search(regexp); 返回匹配字符串的首字符位置索引
var strArray = str.split(bystr,howmany); 返回分割后的字符串数组,howmany是返回数组最大长度可以省略
Array:
var week = new Array(7); var test = new Array(100,"dhsj",true);
var test1 = [100,200,300];
week.length;二维数组 arr.join("-");arr.toString();arr.reverse();arr.slice(start,[end]);
获取子数组
data.toFixed(num);数值转换为字符串,并保留小数点后num位
正则表达式:
var regExp = /pattern/flags; var regExp = new RegExp("pattern",["flags"]);
flags:g:设定当前匹配为全局模式;i:忽略匹配中的大小写检测;m:多行搜索模式
var isRight = reg.test(str); 检索str中指定的值返回true或false
Date对象:
var now = new Date(); var now2 = new Date("2013/3/20 11:20");
getDate();getFullYear();setDate();setDay();setFullYear();toString();
toLocaleTimeString();toLocaleDateString();getDay();星期中的某一天，返回值为0(日)-6(六)
函数:function func(){}
arguments:函数的参数数组 arguments.length:函数的参数个数
arguments[i]:第i个参数
Function对象:new Function(arg1,arg2,..,functionBody);
匿名函数:var func = function(arg1,arg2,...){func_body;};
eval(字符串计算):var str = "2+3"; eval(str);//5
Math.random(); //[0,1)
window.location.href="https://www.baidu.com"; 当前窗口打开窗口
window.open("https://www.baidu.com"); 新开窗口打开窗口;
window.close();关闭当前窗口
2个return:onclick="return method27();" var result = confirm("您确定要删除吗?");return result;
encodeURI:把字符串作为URI进行编码 var r1 = encodeURI(str);
decodeURI:对encodeURI()函数编码 var r2 = decodeURI(r1);
eval函数:用于计算某个字符串,以得到结果;或用于执行其中的JavaScript代码
函数触发动作:onmouseover,onmouseout,onclick,onfocus,onblur,onchange
定时器:
周期性:window.setInterval(func,1000); func:函数,执行语句;1000:时间周期,单位为毫秒;返回已经启动的定时器对象
window.clearInterval(tID):停止启动的定时器
一次性:window.setTimeout(func,1000);window.clearTimeout(tID);
DOM节点树:一切皆节点;var obj = document.getElementById("d1");
obj.nodeName;obj.nodeType;节点名称:nodeName;节点类型:nodeType;obj.innerText;obj.innerHTML;
obj.getAttribute("name");根据属性名称获取属性值obj.setAttribute();obj.removeAttribute();
obj.src="clock.jpg";(将HTML标记,属性和CSS样式都对象化)obj.style.color="red";obj.style.fontSize = 20;
innerText:设置或获取位于对象起始和结束标签内的文本
innerHTML:设置或获取位于对象起始和结束标签内的HTML obj.innerHTML="new text";
页面加载时调用方法:<body onload="method();">
页面加载后启动:window.addEventListener('load',timestart(函数名),false);
每个载入浏览器的HTML文档都会成为document对象,通过使用document对象,可以
从脚本中对HTML页面中的所有元素进行访问
标准DOM实现:var newNode = document.createElement("img");
HTML DOM实现(提供了封装好的对象):var newNode = new Image();Select,Option
var o = new Option(text,value);
Table对象:table.rows/cells.length;table.insertRow(index);返回Table对象table.deleteRow(index);
TableRow对象:table.rows[0].cells.length;table.rows[0].rowIndex/cells[0]/innerHTML/insertCell(index)/deleteCell(index);
TableCell对象:table.rows[0].cells[0].innerHTML/colSpan/rowSpan/cellIndex;
screen对象:
history对象:history.forward();前进按钮history.back();后退按钮history.go(-2);后退2次按钮
location对象:location.reload();location.href="https://www.baidu.com";location.replace("https://www.baidu.com");
DOM操作-查询:查询节点:
通过id查询:document.getElementById("d1");
通过层次(节点关系)查询:obj.firstChild;obj.lastChild;obj.previousSibling;obj.nextSibling;同级前后节点
obj.parentNode;obj.childNodes;查找多个节点,数组
通过标签名称查询:var pNodes = document(obj).getElementsByTagName("p");数组;pNodes[1].innerHTML;
通过name属性查询:
创建新节点:var newNode = document.createElement("p");返回新创建的节点
添加新节点:parentNode.appendChild(newNode); 新节点作为父节点的最后一个子节点存在
parentNode.insertBefore(newNode,refNode);
新节点位于refNode之前
删除节点:node.removeChild(childNode);删除某个节点,childNode必须是node的子节点
childNode.parentNode.removeChild(childNode);
删除自身
js代码中动态事件:btnObj.onclick = method;
事件:事件出发后将会产生一个event对象
鼠标事件:onclick/ondblclick/onmousedown/onmouseup/onmouseover/onmouseout/onmousemove(事件中实现显示坐标) = "method();";
键盘事件:onkeydown/onkeyup
状态事件:onload/onunload/onchange/onfocus/onblur/onresize/onsubmit
取消事件:onXXX = "return false;";
事件冒泡取消:event.cancelBubble = true;(js代码中不能直接使用event关键字，func(event))
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程（二）
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象