JavaScript(二)-精简

十三　DOM(文档对象模型)

　　　１　作用　：　可访问javascript HTML文档的所有元素．

　　　２　功能：　(1)　改变html输出流

　　　　　　　　　　　eg: <script>
                        document.write(Date());
                      </script>

　　   (2)　改变HTML内容

eg: <p id="p1">Hello World!</p>
            <script>
            document.getElementById("p1").innerHTML="新文本!";
            </script>
            <p>以上段落通过脚本修改文本。</p>

　　   (3)　改变HTML属性

eg:
      <img id="image" src="smiley.gif" width="160" height="120">
      <script>
          document.getElementById("image").src="landscape.jpg";
      </script>

(4) 改变css样式

<p id="p1">Hello World!</p>
      <p id="p2">Hello World!</p>
      <script>
      document.getElementById("p2").style.color="blue";
      document.getElementById("p2").style.fontFamily="Arial";
      document.getElementById("p2").style.fontSize="larger";
      </script>
      <p>以上段落通过脚本修改。</p>

(5)使用的事件

　　　１　元素被点击

　　eg:
          <h1 id="id1">我的标题 1</h1>
          <button type="button"
          onclick="document.getElementById(‘id1‘).style.color=‘red‘">
          点我!</button>

２　如需向ＨTML元素分配事件，可以使用事件属性

　eg：
       <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
       <button onclick="displayDate()">点这里</button>
       <script>
       function displayDate(){
            document.getElementById("demo").innerHTML=Date();
       }
       </script>
       <p id="demo"></p>

３　onload 和　onunload 事件

　　用于在进入或离开页面时被触发，
     　　onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
　　　　　onload 和 onunload 事件可用于处理 cookie。

　　　　　eg:
            function mymessage(){
                alert("消息在 onload 事件触发后弹出。");
            }

<body ></body>

　　　４　onchange事件　

　　　　　onchange事件常结合对输入字段的验证来输入，

　          function myFunction(){
                  var x=document.getElementById("fname");
                  x.value=x.value.toUpperCase();
           }

输入你的名字: <input type="text" id="fname" onchange="myFunction()">

5  onfocus事件（当输入字段获得焦点时，改变其背景色）

　　　　　eg:
             function myFunction(x){
             　　 x.style.background="yellow";
             }

　　输入你的名字:
             <input type="text" onfocus="myFunction(this)">　
     　

6  onmouseover 和　onmouseout 事件
　
　　     　　可用在用户的鼠标移至HTML元素上方或移出元素时触发的函数．

　　　　eg:
          <style>
             div{
                 background-color:#D94A38;
                 width:120px;
                 height:20px;
                 padding:40px;
             }
          </style>
          <div onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</div>
            <script>
            function mOver(obj){
               obj.innerHTML="Thank You"
            }
            function mOut(obj){
               obj.innerHTML="Mouse Over Me"
            }
            </script>

7  onmousedown , onmouseup, onclick　事件

　　　  nmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
  　　　　首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，　
　　　　  最后，当完成鼠标点击时，会触发 onclick 事件。

十四　EventListener 方法　

一　语法

　　　　　　element.addEventListener(event,function,useCapture);

１　第一个参数是事件的类型（如 "click"或 "mousedown").
              2  第二个参数是事件触发后调用的函数．
            　３　第三个参数是布尔值用于描述事件是冒泡还是捕获(该参数可选)　

二　事件冒泡或事件捕获

　　　　　　事件传递的两种方式　：　冒泡　和　捕获

　　　　　　　
    　　　　

　　三　 addEventListener()方法　

作用：　１　用于指定元素添加事件句柄
           eg:
              <button id="myBtn">点我</button>
              document.getElementById("myBtn").addEventListener("click", function(){
              alert("Hello World!");
              });
　　　　　
　　　　
　　　　２　可以向一个元素添加多个事件句柄，也可以添加同类型的事件句柄，，且不会覆盖已存在的事件．
　　　　　　例如 (1)（两个"click事件"同类型事件）

<button id="myBtn">点我</button>
                var x = document.getElementById("myBtn");
                x.addEventListener("click", myFunction);
                x.addEventListener("click", someOtherFunction);
                function myFunction() {
                     alert ("Hello World!")
                }
                function someOtherFunction() {
                     alert ("函数已执行!")
                }

(2) 向同个元素添加不同类型的事件

<button id="myBtn">点我</button>
                <p id="demo"></p>
                var x = document.getElementById("myBtn");
                x.addEventListener("mouseover", myFunction);
                x.addEventListener("click", mySecondFunction);
                x.addEventListener("mouseout", myThirdFunction);
                function myFunction() {
                    document.getElementById("demo").innerHTML += "Moused over!<br>"
                  }
                function mySecondFunction() {
                    document.getElementById("demo").innerHTML += "Clicked!<br>"
                  }
                function myThirdFunction() {
                    document.getElementById("demo").innerHTML += "Moused out!<br>"
                  }

　 　３　removeEventListener() 方法来移除事件的监听．

eg:

<div>
        <p>点击按钮移除 DIV 的事件句柄。</p>
        <button onclick="removeHandler()" id="myBtn">点我</button>
      </div>
      <p id="demo"></p>

<script>

document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
        document.getElementById("demo").innerHTML = Math.random();
      }

function removeHandler() {
        document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
      }

　　　４　向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。
       　如： window 对象，Html元素, Html文档．

　５　传递参数

　eg:　　<button id="myBtn">点我</button>
            <p id="demo"></p>
            var p1 = 5;
            var p2 = 7;
            document.getElementById("myBtn").addEventListener("click", function(){
                myFunction(p1, p2);
            });
            function myFunction(a, b) {
                var result = a * b;
                document.getElementById("demo").innerHTML = result;
            }

　 -->

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
          div{
              width: 300px;
              height: 300px;
              background-color: red;
              font-size: 30px;
              color:yellow;
          }
      </style>
      <script>

function dian(){

document.getElementById(‘aa‘).innerHTML="您被点击了";
               document.getElementById(‘aa‘).style.background="blue";

}

function fang(){

var x = document.getElementById(‘aa‘).innerHTML="您被放开了";
               document.getElementById(‘aa‘).style.background="black";

}

</script>
      <style>
      div{
              /*background-color: coral;
              border: 1px solid;
              padding: 50px;*/
        }
      </style>
    </head>
    <body>
<!--
       <div id="aa" onmousedown="dian()" onmouseup="fang()">Thank You</div>

<h1 onmouseover="style.color=‘red‘"onmouseout="style.color=‘black‘">
           将鼠标移至文部上
       </h1> -->

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>

<div id="myDiv">
        <!-- 在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，
        即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。 -->
          <!-- <p id="myP">点击段落，我是冒泡。</p> -->
      </div><br>

<div id="myDiv2">
        <!-- 在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，
        即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。 -->
          <!-- <p id="myP2">点击段落，我是捕获。 </p> -->
      </div>

<script>
      // document.getElementById("myP").addEventListener("click", function() {
      //     alert("你点击了 P 元素!");
      // }, false);
      //
      // document.getElementById("myDiv").addEventListener("click", function() {
      //     alert(" 你点击了 DIV 元素 !");
      // }, false);
      //
      // document.getElementById("myP2").addEventListener("click", function() {
      //     alert("你点击了 P2 元素!");
      // }, true);
      //
      // document.getElementById("myDiv2").addEventListener("click", function() {
      //     alert("你点击了 DIV2 元素 !");
      // }, true);

</script>

<!--

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
          <title>DOM对象</title>
          <style>
              #div{
                  width: 200px;
                  height: 200px;
                  background-color: bisque;
              }
          </style>

<script>
              function fn_a(){
                  document.write("hello world!");
              }
      //        变 HTML 元素的内容
              function fn_b(){
                  document.getElementById("hh").innerHTML="我是地球人";
              }
      //        改变 HTML 元素的属性
              function fn_c(){
                  document.getElementById("a").href="http://www.qq.com";
              }
      //        改变 HTML 元素的样式
              function fn_d(){
                  document.getElementById("div").style.backgroundColor="blue";
              }
      //        向 HTML 元素分配事件
              function fn_e(){
                  document.getElementById("div").onclick=function(){
                      document.getElementById("div").style.backgroundColor="red";
                  }
              }

</script>
      </head>
      <body >
          <h1 id="hh">我是中国人</h1>
          <a href="http://baidu.com" id="a">搜我一下</a><br><br>
          <div id="div">我是div</div>
          <button onclick="fn_b()">改变文本内容</button><br><br>
          <button onclick="fn_c()">改变属性</button><br><br>
          <button onclick="fn_d()">改变css样式</button><br><br>
      </body>
      </html>
     -->

</body>
  </html>

时间： 2024-10-25 05:33:37

JavaScript(二)-精简的相关文章

从头开始学JavaScript (二)——变量及其作用域

原文:从头开始学JavaScript (二)--变量及其作用域 一.变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符. 定义:var firstDemo; 二.变量的作用域 2.1基本概念 使用var 定义变量:定义该变量的作用域的局部变量,这种定义变量的方法也被成为显式声明. 这么说不理解的话可以看看下面这个简单粗暴的例子: test();function test(){var firstDemo="hello

javascript二维矩阵的乘法。

百度&谷歌竟然搜不到"javascript二维矩阵的乘法",那我就自己写一个分享给大家.(我写的是两个n*n的二维矩阵的乘法) 下面又到了贴代码的时候了: function matrixMultiplication(a,b){ var len=a.length,arr=[]; for(var i=0;i<len;i++){ arr[i]=[]; for(var j=0;j<len;j++){ arr[i][j]=0;//每次都重新置为0 for(var k=0;k&

JavaScript二(第一个js程序)

一.<script>xxxx</script>标签解析 1.charset :可选,表示通过src属性指定的字符集,由于大多数浏览器忽略它,所以很少有人用它2.defer:可选.表示脚本可以延迟到文档完全解析和显示之后再执行,由于大多数浏览器不支持,故很少用3.language:已经废弃.原来用于代码使用的脚本语言,由于大多数的浏览器都忽略它,所以不要用4.src:可选,表示包含要执行代码的外部文件5.type:必需,可以看作是language的替代品,表示代码使用的脚本语言的内容

轻松学习JavaScript二十九：JavaScript中的this详解

这几天在看很多的JS的代码,多次出现this关键字,有时候表示不理解,就仔细看了这一方面的知识. 在JavaScript语言中,this的定义是:this是包含它的函数作为方法被调用时所属的对象.说明:这句话有点咬 嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它:1包含它的函数.2作为方法被调用时.3所 属的对象.随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那 个对象. this是Javascript语言的一个关键字,它代

轻松学习JavaScript二十三：DOM编程学习之操作表格

一使用HTML标签创建表格: 代码: <span style="font-size:18px;"><table border="1px"width="300px"> <caption>人员表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th>

轻松学习JavaScript二十一：DOM编程学习之获取元素节点的子节点和属性节点

我们这里所说的获取元素节点的所有子节点包含元素子节点和文本节点两种.还是拿上一篇博文的代码实例进行 分析: <span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

轻松学习JavaScript二十四：DOM编程学习之操作CSS样式(一)

CSS样式作为HTML的辅助,可以增强页面的显示效果.前面学了DOM操作HTML,因此也要学DOM操作CSS 样式的方法.在学习CSS的时候,已经知道了CSS插入到HTML文档有三种情况,分别为:行内式,内嵌式和外联式 (这是我们最常用的).下面就来看怎么操作这三种情况: 一操作行内式 先来写一个HTML文档: <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

javascript二维数组

注:1.此实例是验证二维数组两种赋值方式:1)先声明后赋值.2)声明的同时赋值. 2.将数组元素输出到表格中.(表格的一个关键属性:border-collapse:collapse:合并表格单元格边框.) <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script type="text/javascript

轻松学习JavaScript二十：DOM编程学习之获取节点

我们这里所说的获取节点包含元素节点,属性节点和文本节点.通常,通过DOM我们就能够操作HTML元素.为 了做到这件事情,您必须首先找到该元素.W3C提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节 点进行操作. 我们先来写一个简单的HTML文档以供我们进行测试,并且JS代码都是写在window.onload事件中: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w