JavaScript
2016-05-12 16:57
447 查看
JavaScript是嵌入到HTML中在浏览器中的脚本语言，由浏览器介绍执行代码，不进行预编译。
2.嵌入式。
<script type="text/javascript" >
function test() {
alert("hello ,world");
}
</script>
3.文件调用式。 例如：<script src=" test.js" type="text/javascript"></script>
多行：/* */
标识符：规则和Java中变量的命名规则一样。
变量没有类型，统一用关键字var声明，变量所引用的数据是由类型的。
二：内置对象。（Number，String ，Boolean，Function，Array，Math，Date，RegExp）
三：外部对象。（window，document）
四：自定义对象。（Object：自定义对象）
parseInt()；
parseFloat()；
typeof()；
isNaN(is not a number？)
使用Function对象创建函数：
var functionName = new Function(arg1,arg2,...,functionBody);
匿名函数：var func = function(arg1,arg2,..........) {functionBody}
常用的全局函数：parseInt/parseFloat isNaN eval
其中eval函数用于计算表达式字符串，或者用于执行字符串中的JavaScript代码。
例如：var s1 = "1+2"; eval(s1)得到3
外部对象：
window对象：表示浏览器窗口。所有的JavaScript全局对象，函数，变量均自动成为window对象的成员。
常用的属性有：document，history，location，screen，navigator
常用方法：alert()，confirm()，setTimeout()，clearTimeout()，setInterval()，clearInterval()
其中定时器：分为周期性定时器，一次性定时器。
周期性定时器：setInterval(exp,time)，返回启动的定时器对象。 clearInterval(tId)停止启动的定时器。
<!DOCTYPE html>
<html>
<head>
<title>动态时钟</title>
<meta charset="utf-8" />
<script type="text/javascript">
var timer;
function start() {
timer = setInterval(function(){
var now = new Date();
var time = now.toLocaleTimeString();
var c = document.getElementById("clock");
c.innerHTML = time;
}, 1000);
}
function stop() {
clearInterval(timer);
}
</script>
</head>
<body>
<h1>动态时钟</h1>
<p>当前时间：<span id="clock"></span></p>
<p>
<input type="button" value="启动" onclick="start();"/>
<input type="button" value="停止" onclick="stop();"/>
</p>
</body>
</html>
一次性定时器：setTimeout(exp，time) 返回启动的定时器对象。clearTimeout(tID)停止启动的定时器对象。
<!DOCTYPE html>
<html>
<head>
<title>动态提示信息</title>
<meta charset="utf-8" />
<style type="text/css">
#msg {
border:1px solid #ccc;
padding:10px;
text-align:center;
width:200px;
background-color: #eee;
}
.hide {
display:none;
}
.show {
display:block;
}
</style>
<script type="text/javascript">
function del() {
var m = document.getElementById("msg");
m.className = "show";
var timer = setTimeout(function(){
m.className = "hide";
clearTimeout(timer);
}, 2000);
}
</script>
</head>
<body>
<h1>动态提示信息</h1>
<p><input type="button" value="删除" onclick="del();"/></p>
<p id="msg" class="hide">操作成功</p>
</body>
</html
screen 对象：
常用属性：width、height、availWidth、availHeight
history对象：
属性：length
常用方法：back() ，forward()，go(num)
location对象：
属性：href
方法：reload()
navigator：
常用属性：获取客户端浏览器和操作系统信息，navigator.userAgent
DOM：
DOM(Document Object Model)提供了以下操作：
1、查找节点
2、读取节点信息
3、修改节点信息
4、创建节点信息
5、删除节点
节点信息：
nodeName：节点名称（元素节点和属性节点：标签或者属性名称，文本节点：#text，文档节点：#document）
nodeType：节点类型（元素节点 ：1 属性节点：2 文本节点：3 注释节点：8 文档节点 9）
获取节点的内容：
innerText
innerHTML
节点属性：
getAttribute()：根据属性名称获取属性的值。
setAttribute()、removeAttribute()
元素节点的样式：
style属性：（node.style.color node.style.fontSize）
className属性
查询节点：
通过id查询：document.getElementById()
通过层次（节点关系）查询：parentNode，childNodes
通过标签名称查询：getElementByTagName()返回一个节点列表length,【index】具体的元素
通过name的属性查询：
使用方式有3种：
1.事件定义式。 例如：<input type="button" onclick="alert('hello');">2.嵌入式。
<script type="text/javascript" >
function test() {
alert("hello ,world");
}
</script>
3.文件调用式。 例如：<script src=" test.js" type="text/javascript"></script>
注释：
单行：//多行：/* */
标识符：规则和Java中变量的命名规则一样。
变量没有类型，统一用关键字var声明，变量所引用的数据是由类型的。
数据类型：
一：特殊类型。（null，underfined）二：内置对象。（Number，String ，Boolean，Function，Array，Math，Date，RegExp）
三：外部对象。（window，document）
四：自定义对象。（Object：自定义对象）
数据类型转换函数：
toString()；parseInt()；
parseFloat()；
typeof()；
isNaN(is not a number？)
使用Function对象创建函数：
var functionName = new Function(arg1,arg2,...,functionBody);
匿名函数：var func = function(arg1,arg2,..........) {functionBody}
常用的全局函数：parseInt/parseFloat isNaN eval
其中eval函数用于计算表达式字符串，或者用于执行字符串中的JavaScript代码。
例如：var s1 = "1+2"; eval(s1)得到3
外部对象：
window对象：表示浏览器窗口。所有的JavaScript全局对象，函数，变量均自动成为window对象的成员。常用的属性有：document，history，location，screen，navigator
常用方法：alert()，confirm()，setTimeout()，clearTimeout()，setInterval()，clearInterval()
其中定时器：分为周期性定时器，一次性定时器。
周期性定时器：setInterval(exp,time)，返回启动的定时器对象。 clearInterval(tId)停止启动的定时器。
<!DOCTYPE html>
<html>
<head>
<title>动态时钟</title>
<meta charset="utf-8" />
<script type="text/javascript">
var timer;
function start() {
timer = setInterval(function(){
var now = new Date();
var time = now.toLocaleTimeString();
var c = document.getElementById("clock");
c.innerHTML = time;
}, 1000);
}
function stop() {
clearInterval(timer);
}
</script>
</head>
<body>
<h1>动态时钟</h1>
<p>当前时间：<span id="clock"></span></p>
<p>
<input type="button" value="启动" onclick="start();"/>
<input type="button" value="停止" onclick="stop();"/>
</p>
</body>
</html>
一次性定时器：setTimeout(exp，time) 返回启动的定时器对象。clearTimeout(tID)停止启动的定时器对象。
<!DOCTYPE html>
<html>
<head>
<title>动态提示信息</title>
<meta charset="utf-8" />
<style type="text/css">
#msg {
border:1px solid #ccc;
padding:10px;
text-align:center;
width:200px;
background-color: #eee;
}
.hide {
display:none;
}
.show {
display:block;
}
</style>
<script type="text/javascript">
function del() {
var m = document.getElementById("msg");
m.className = "show";
var timer = setTimeout(function(){
m.className = "hide";
clearTimeout(timer);
}, 2000);
}
</script>
</head>
<body>
<h1>动态提示信息</h1>
<p><input type="button" value="删除" onclick="del();"/></p>
<p id="msg" class="hide">操作成功</p>
</body>
</html
<!DOCTYPE html>
<html>
<head>
<title>图片轮播</title>
<meta charset="utf-8" />
<style type="text/css">
.photo {
list-style-type: none;
border: 2px solid #ccc;
width: 480px;
height: 360px;
margin:0;
padding:0;
}
.photo li {
width: 480px;
height: 360px;
margin: 0;
padding: 0;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
<script type="text/javascript">
var timer;
var index = 0;
function start() {
timer = setInterval(function(){
var ul = document.getElementById("photo");
var lis = ul.getElementsByTagName("li");
for(var i=0;i<lis.length;i++) {
lis[i].className = "hide";
}
index++;
lis[index%lis.length].className = "show";
}, 1000);
}
function stop() {
clearInterval(timer);
}
</script>
</head>
<body onload="start();">
<h1>图片轮播</h1>
<ul class="photo" id="photo"
onmouseover="stop();" onmouseout="start();">
<li class="show">
<img src="../images/f1.jpg">
</li>
<li class="hide">
<img src="../images/f2.jpg">
</li>
<li class="hide">
<img src="../images/f3.jpg">
</li>
<li class="hide">
<img src="../images/f4.jpg">
</li>
</ul>
</body>
</html>screen 对象：
常用属性：width、height、availWidth、availHeight
history对象：
属性：length
常用方法：back() ，forward()，go(num)
location对象：
属性：href
方法：reload()
navigator：
常用属性：获取客户端浏览器和操作系统信息，navigator.userAgent
DOM：
DOM(Document Object Model)提供了以下操作：
1、查找节点
2、读取节点信息
3、修改节点信息
4、创建节点信息
5、删除节点
节点信息：
nodeName：节点名称（元素节点和属性节点：标签或者属性名称，文本节点：#text，文档节点：#document）
nodeType：节点类型（元素节点 ：1 属性节点：2 文本节点：3 注释节点：8 文档节点 9）
获取节点的内容：
innerText
innerHTML
节点属性：
getAttribute()：根据属性名称获取属性的值。
setAttribute()、removeAttribute()
元素节点的样式：
style属性：（node.style.color node.style.fontSize）
className属性
查询节点：
通过id查询：document.getElementById()
通过层次（节点关系）查询：parentNode，childNodes
通过标签名称查询：getElementByTagName()返回一个节点列表length,【index】具体的元素
通过name的属性查询：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jsonp跨域调用
- 利用jsp+uploadify插件实现删除上传到ftp服务器里面的文件
- phantomjs使用说明
- JS函数的定义与调用方法推荐
- 图解JSP与Servlet的关系
- JSP应用导出Excel报表的简单实现以及中文乱码彻底解决（HTML）
- pyspider 爬虫教程（三）：使用 PhantomJS 渲染带 JS 的页面
- 2016.5.12 JavaScript笔记
- servlet jsp 经典总结
- JavaScript性能优化技巧之函数节流
- JS定义类的六种方式详解
- 程序源弃坑之路7（js软键盘）
- My97DatePicker日期插件WdatePicker.js的使用方法
- 面试-javascript知识
- ExtJS中DragDrop插件的一些使用实例
- CetOs6.5下 jsoncpp安装 NCURSES的安装
- JavaScript——1（基本语法，类型，变量与运算符，控制流程，函数）
- extjs gridpanel 操作行 得到选中行
- 判断JS对象是否拥有某属性的方法推荐
- javascript学习——引用类型总结