Web阶段：第三章：JavaScript语言（下）-阿里云开发者社区

JS中的自定义对象（扩展内容）

Object形式的自定义对象

var 变量名 = new Object(); 创建一个对象实例（空）

变量名.属性名 = 值; 给对象实例，定义了一个属性

变量名.函数名 = function(){} 给对象实例，添加一个方法

如何访问对象：变量名.属性名/方法名()

<script type="text/javascript">
      var obj = new Object();
      obj.name = "国哥好帅！";
      obj.age = 18;
      obj.fun = function(){
        alert("姓名：" + this.name + ",年龄：" + this.age);
      }
      // 访问对象
//      alert( obj.name );
      obj.fun();
</script>

{}花括号形式的自定义对象

var 变量名 = { //定义一个空对象

属性名 : 值, //定义了一个属性

函数名 : function(){} // 定义一个函数

};

如何访问对象：变量名.属性名/方法名()

<script type="text/javascript">
      var obj = { 
          name:"华仔",
          age:18,
          fun:function(){
            alert("姓名：" + this.name + ",年龄：" + this.age);
          } 
      };
      alert(obj.name);
      obj.fun();
</script>

js中的事件（重要）

什么是事件？

事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

onload加载完成事件常用于页面被浏览器加载完成之后自动做一些初始化工作。

onclick单击事件常用于按钮被单击之后的响应工作

onblur失去焦点事件常用于输入框失去焦点后，验证其中的内容是否合法

onchange内容发生改变事件常用于输入框或下拉列表内容发生改变后响应

onsubmit表单提交事件常用于表单提交，在提交之前验证所有表单项是否合法。只要有一个不合法，就阻止表单提交。

事件的注册又分为静态注册和动态注册两种：

注册事件和绑定事件是一个东西

注册事件，就是告诉浏览器，当事件触发后，需要执行哪些代码。

静态注册事件：静态注册是指通过事件属性直接赋于事件响应后的代码，这种方式我们称之为静态注册。

动态注册事件：动态注册是指，通过先获取标签对象。然后再通过标签对象.事件名 = function(){}的方式赋值，这种操作叫动态注册。

window.onload = function(){

1 查找标签对象

2 通过标签对象.事件名 = function(){}

}

onload事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      window.onload = function(){
        alert("页面加载完成==动态");
      }
    </script>
  </head>
  <!-- 静态注册
  <body "alert('页面加载完成！');">   -->
  <body>
  </body>
</html>

onclick事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      function onclickFun(){
        alert("这是单击事件静态注册");
      }
      //动态注册单击事件
      window.onload = function(){
//        1 查找标签对象
        // getElementById 通过id属性值获取标签对象
        //  get 是获取
        //  Element是元素（元素就是标签）
        //  by  由..通过 
        //  id  id属性
        var btnObj = document.getElementById("btn01");
//        alert( btnObj );
//        2 通过标签对象.事件名 = function(){}
        btnObj.onclick = function(){
          alert("这是动态注册的onclick事件");
        }
      }     
    </script>
  </head>
  <body>
    <!-- 
      静态注册单击事件：
     -->
    <input type="button" value="按钮1" onclick="onclickFun();"/>
    <button id="btn01">按钮2</button>
  </body>
</html>

onblur失去焦点事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      function onblurFun(){
        // console这是js中提供的一个专门用于调试的对象。表示控制台
        // log方法就是输出内容。可以传递任意参数
        console.log("这是静态注册onblur事件");
      }
      window.onload = function(){       
        //1 获取标签对象
        var passObj = document.getElementById("password");
        //2 通过标签对象.事件名 = function(){}
        passObj.onblur = function(){
          console.log("这是动态注册的onblur事件");
        }
      }
    </script>
  </head>
  <body>
    用户名：<input type="text" onblur="onblurFun();"/><br/>
    密码：<input id="password" type="password" /><br/>
  </body>
</html>

onchange内容发生改变事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      function onchangeFun(){
        alert("静态注册onchange事件");
      }     
      window.onload = function(){
        //1 获取标签对象
        var selObj = document.getElementById("sel01");
//        alert( selObj );
        //2 通过标签对象.事件名 = function(){}
        selObj.onchange = function(){
          alert("动态注册onchange事件");
        }
      }     
    </script>
  </head>
  <body>
    请选择你心中的女神：
    <select onchange="onchangeFun();">
      <option>--请选择--</option>
      <option>刘奕菲</option>
      <option>迪丽热巴</option>
      <option>杀那啦</option>
    </select>
    <br/>
    请选择你心中的男神：
    <select id="sel01">
      <option>--请选择--</option>
      <option>国哥</option>
      <option>龙哥</option>
      <option>华仔</option>
      <option>强哥</option>
    </select>   
  </body>
</html>

onsubmit表单提交事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      function onsubmitFun(){
        alert("开始验证表单项，发现不合法");
        return false;
      }
      // 
      window.onload = function(){
        // 获取标签
        var formObj = document.getElementById("form01");
//        alert(formObj);
        // 通过标签对象.事件名=function(){}
        formObj.onsubmit = function(){
          alert("动态注册==开始验证表单项，发现不合法");
          return false;
        }
      }
    </script>
  </head>
  <body>
    <!-- 
      onsubmit事件，return false。就会阻止表单提交
     -->
    <form action="http://www.baidu.com" onsubmit="return onsubmitFun();">
      <input type="submit" value="静态注册"/> 
    </form>
    <form action="http://www.baidu.com" id="form01">
      <input type="submit" value="动态注册"/> 
    </form>
  </body>
</html>

DOM 模型

DOM 全称是Document Object Model 文档对象模型，把文档中的标签，属性，文本，转换成为对象来管理。

Document 对象的理解：

第一点：Document它管理了所有的Html文档内容。

第二点：document它是一种树结构的文档。有层级关系。

第三点：它让我们把所有的标签都对象化

第四点：我们可以通过document访问所有的标签对象。

什么是对象化？？

我们基础班已经学过面向对象。请问什么是对象化？

举例：

有一个人有年龄：18岁，性别：女，名字：张某某

我们要把这个人的信息对象化怎么办！

Class Person {
private int age;
private String sex;
private String name;
}

那么 html 标签要对象化怎么办？

  <body>
  <div id="div01">div01</div>
  </body>

模拟对象化，相当于：

class Dom{

private String id; // id属性

private String tagName; //表示标签名

private Dom parentNode; //父亲

private List children; // 孩子结点

private String innerHTML; // 起始标签和结束标签中间的内容

}

Document对象中的方法介绍（*****重点）

1.document.getElementById(elementId)通过标签的id属性查找标签dom对象，elementId是标签的id属性值

2.document.getElementsByName(elementName)通过标签的name属性查找标签dom对象，elementName标签的name属性值

3.document.getElementsByTagName(tagname)通过标签名查找标签dom对象。tagname是标签名

4.document.createElement( tagName )方法，通过给定的标签名，创建一个标签对象。tagName是要创建的标签名

如果标签对象有id属性，优先使用getElementById查找标签对象

如果标签没有id属性，只有name属性，则使用getElementsByName方法进行查找

如果标签即没有id属性，也没有name属性，最后才使用getElementsByTagName

getElementById和getElementsByName和getElementsByTagName都需要在页面加载完成之后执行。才能得到标签对象。

getElementById方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    // 需求，当用户点击 【验证】 按钮的时候，帮我验证一下，输入框中的内容是否合法
    // 验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位       
    // 1、绑定单击事件
    function onclickFun(){
      // 2 获取输入框中的内容
      // 当我们要操作一个标签对象的时候。一定要先获取到这个标签对象。
      var usernameObj = document.getElementById("username");
      var usernameText = usernameObj.value;
      // 获取用来输出验证结果的span标签对象
      var spanObj = document.getElementById("usernameSpan");
      // innerHTML表示起始标签和结束标签中的内容
      // 这个属性，可读可写
//      spanObj.innerHTML = "帅哥讲的真细";
      // 3 使用正则表达式去验证
      var patt = /^\w{5,12}$/;//验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
//      正则对象有一个test方法。可以用来验证一个字符串是否匹配正则表达式
//      匹配就返回ture，不匹配就返回false
      if (patt.test(usernameText)) {
//        spanObj.innerHTML = "用户名合法";
        spanObj.innerHTML = "<img alt=\"\" src='right.png' width='15' height='15' />";
      } else {
//        spanObj.innerHTML = "用户名不合法";
        spanObj.innerHTML = "<img alt=\"\" src='wrong.png' width='15' height='15' />";
      }
    }   
    </script>
  </head>
  <body>
    用户名：<input type="text" id="username" value="wzg168"/>
    <span style="color: red;" id="usernameSpan"></span>
    <button onclick="onclickFun()">验证</button>
  </body>
</html>

getElementsByName方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      // 全选事件
      function checkAll(){
        // 当我们要操作一个标签对象的时候。一定要先获取到这个标签对象。
        //getElementsByName是根据name属性查找返回对象的集合。
        //这个集合的操作跟数组一样
        //这个集合中的元素顺序刚好是它们在html页面中，从上到下的顺序
        var hobbies = document.getElementsByName("hobby");
        // checked属性表示单选，复选框的选中状态。
        // 这个属性可读，可写
        for (var i = 0; i < hobbies.length; i++) {
          hobbies[i].checked = true;
        }
      }
      // 全不选
      function checkNo(){
        var hobbies = document.getElementsByName("hobby");
        // checked属性表示单选，复选框的选中状态。
        // 这个属性可读，可写
        for (var i = 0; i < hobbies.length; i++) {
          hobbies[i].checked = false;
        }
      }
      // 反选
      function checkReverse(){
        var hobbies = document.getElementsByName("hobby");
        // checked属性表示单选，复选框的选中状态。
        // 这个属性可读，可写
        for (var i = 0; i < hobbies.length; i++) {
//          if (hobbies[i].checked) {
//            hobbies[i].checked = false;
//          } else {
//            hobbies[i].checked = true;
//          }
          hobbies[i].checked = !hobbies[i].checked;
        }
      }
    </script>
  </head>
  <body>
    兴趣爱好：
    <input type="checkbox" name="hobby" checked="checked" value="hj"/>喝酒
    <input type="checkbox" name="hobby" value="cy"/>抽烟
    <input type="checkbox" name="hobby" value="tt"/>汤头
    <br/>
    <button onclick="checkAll();">全选</button>
    <button onclick="checkNo();">全不选</button>
    <button onclick="checkReverse();">反选</button>
  </body>
</html>

getElementsByTagName方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
      // 全选事件
      function checkAll(){
        //getElementsByTagName是通过指定的标签名查找返回全部的标签对象集合。
        //这个集合的操作跟数组一样
        //这个集合中的元素顺序跟他们在html页面中，从上到下的顺序一致！
        var inputObjs = document.getElementsByTagName("input");
        for (var i = 0; i < inputObjs.length; i++) {
          inputObjs[i].checked = true;
        }
      }
    </script>
  </head>
  <body>
    兴趣爱好：
    <input type="checkbox" checked="checked" value="hj"/>喝酒
    <input type="checkbox" value="cy"/>抽烟
    <input type="checkbox" value="tt"/>汤头
    <br/>
    <button onclick="checkAll();">全选</button>
  </body>
</html>

createElement方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
    window.onload = function(){
    //    需求：通过代码创建标签：<div>帅哥棒棒哒！</div>,并添加到body标签中去显示
      var divObj = document.createElement("div"); //<div></div>
//      alert( divObj );
      //divObj.innerHTML = "帅哥萌萌哒！"; //<div>帅哥萌萌哒！</div>      
      var textNode = document.createTextNode("帅哥萌萌哒！");
      divObj.appendChild( textNode );     
      //appendChild给body标签添加子元素
      document.body.appendChild( divObj );      
    }
    </script>
  </head>
  <body>
  </body>
</html>

节点的常用属性和方法

所谓节点，就是前面讲的标签对象。

方法：

通过具体的元素节点调用

getElementsByTagName()

方法，获取当前节点的指定标签名孩子节点

appendChild( oChildNode )

方法，可以添加一个子节点，oChildNode是要添加的孩子节点

属性：

childNodes属性，获取当前节点的所有子节点

firstChild属性，获取当前节点的第一个子节点

lastChild属性，获取当前节点的最后一个子节点

parentNode属性，获取当前节点的父节点

nextSibling属性，获取当前节点的下一个节点

previousSibling属性，获取当前节点的上一个节点

className属性，用于获取或设置标签的class属性值

innerHTML 属性，表示获取/设置起始标签和结束标签中的内容

innerText属性，表示获取/设置起始标签和结束标签中的文本

练习：05.DOM查询练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
  window.onload = function(){
    //1.查找#bj节点
    document.getElementById("btn01").onclick = function(){
      alert( document.getElementById("bj").innerHTML );
    }       
    //2.查找所有li节点
    var btn02Ele = document.getElementById("btn02");
    btn02Ele.onclick = function(){
      alert( document.getElementsByTagName("li").length ); 
    };
    //3.查找name=gender的所有节点
    var btn03Ele = document.getElementById("btn03");
    btn03Ele.onclick = function(){
      alert( document.getElementsByName("gender").length );
    };
    //4.查找#city下所有li节点
    var btn04Ele = document.getElementById("btn04");
    btn04Ele.onclick = function(){
      //1 先查找id为city的标签
      //2 再查找city的li子元素
      alert( document.getElementById("city").getElementsByTagName("li").length );
    };
    //5.返回#city的所有子节点
    var btn05Ele = document.getElementById("btn05");
    btn05Ele.onclick = function(){
      //1 先查找id为city
      alert( document.getElementById("city").childNodes.length );
      //2 再通过city对象。获取所有子节点
    };
    //6.返回#phone的第一个子节点
    var btn06Ele = document.getElementById("btn06");
    btn06Ele.onclick = function(){
      //1 先查找id为phone的标签对象
      alert( document.getElementById("phone").firstChild.innerHTML );
      //2 再根据phone标签对象，查找第一个子节点
    };
    //7.返回#bj的父节点
    var btn07Ele = document.getElementById("btn07");
    btn07Ele.onclick = function(){
      //1先查找id为bj的节点
      alert( document.getElementById("bj").parentNode.innerHTML );
      //2再通过bj节点找到父节点
    };
    //8.返回#android的前一个兄弟节点
    var btn08Ele = document.getElementById("btn08");
    btn08Ele.onclick = function(){
      alert( document.getElementById("android").previousSibling.innerHTML );
    };
    //9.读取#username的value属性值
    var btn09Ele = document.getElementById("btn09");
    btn09Ele.onclick = function(){
      alert( document.getElementById("username").value );
    };
    //10.设置#username的value属性值
    var btn10Ele = document.getElementById("btn10");
    btn10Ele.onclick = function(){
      document.getElementById("username").value = "帅哥帅不要不要的";
    };
    //11.返回#bj的文本值
    var btn11Ele = document.getElementById("btn11");
    btn11Ele.onclick = function(){
//      alert( document.getElementById("bj").innerText );
      alert( document.getElementById("city").innerText );
    };
  };
</script>
</head>
<body>
<div id="total">
  <div class="inner">
    <p>
      你喜欢哪个城市?
    </p>
    <ul id="city">
      <li id="bj">北京</li>
      <li>上海</li>
      <li>东京</li>
      <li>首尔</li>
    </ul>
    <br>
    <br>    
    <p>
      你喜欢哪款单机游戏?
    </p>    
    <ul id="game">
      <li id="rl">红警</li>
      <li>实况</li>
      <li>极品飞车</li>
      <li>魔兽</li>
    </ul>    
    <br />
    <br />    
    <p>
      你手机的操作系统是?
    </p>    
    <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
  </div>    
  <div class="inner">
    gender:
    <input type="radio" name="gender" value="male"/>
    Male
    <input type="radio" name="gender" value="female"/>
    Female
    <br>
    <br>
    name:
    <input type="text" name="name" id="username" value="abcde"/>
  </div>
</div>
<div id="btnList">
  <div><button id="btn01">查找#bj节点</button></div>
  <div><button id="btn02">查找所有li节点</button></div>
  <div><button id="btn03">查找name=gender的所有节点</button></div>
  <div><button id="btn04">查找#city下所有li节点</button></div>
  <div><button id="btn05">返回#city的所有子节点</button></div>
  <div><button id="btn06">返回#phone的第一个子节点</button></div>
  <div><button id="btn07">返回#bj的父节点</button></div>
  <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
  <div><button id="btn09">返回#username的value属性值</button></div>
  <div><button id="btn10">设置#username的value属性值</button></div>
  <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

Web阶段：第三章：JavaScript语言（下）

热门文章

最新文章

相关课程

相关电子书

相关实验场景