JavaScript

最新推荐文章于 2024-04-28 11:43:36 发布

baidu_25833003

最新推荐文章于 2024-04-28 11:43:36 发布

阅读量227

点赞数

分类专栏： WEB

WEB 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

使用方式有3种：

1.事件定义式。例如：<input type="button" οnclick="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="启动" οnclick="start();"/>
      <input type="button" value="停止" οnclick="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="删除" οnclick="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 οnlοad="start();">
    <h1>图片轮播</h1>
    <ul class="photo" id="photo"
      οnmοuseοver="stop();" οnmοuseοut="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的属性查询：

baidu_25833003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

JavaScript是嵌入到HTML中在浏览器中的脚本语言，由浏览器介绍执行代码，不进行预编译。使用方式有3种：1.事件定义式。例如：2.嵌入式。 function test() { alert("hello ,world"); } 3.
复制链接

扫一扫

专栏目录