JavaScript

来源：互联网发布：centos安装iso文件编辑：程序博客网时间：2024/05/22 03:41

JavaScript是嵌入到HTML中在浏览器中的脚本语言，由浏览器介绍执行代码，不进行预编译。

使用方式有3种：

1.事件定义式。例如：<input type="button" onclick="alert('hello');">

2.嵌入式。

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的属性查询：

0 0