Web基础之JavaScript（三）

DOM+ 概念： 1）HTML DOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法 2）HTML标签对象化：将网页中的每个元素都看作一个对象。 3）常用HTML DOM对象：

Paste_Image.png

Select对象
1）Select对象代表HTML表单中的一个下拉列表，<select>标签即表示一个Select对象。
2）常用属性：options（选项数组）、selectedIndex（索引从0开始）、size
3）常用方法：add(option)、remove(index)
4）事件：onchange

Option对象
1）Option对象代表HTML表单中下拉列表中的一个选项，<option>标签表示一个Option对象
2）创建对象：var obj=new Option(text,value);
3）常用属性：index、text、value、selected

Table对象
1）Table对象代表一个HTML表格，<table>标签表示一个Table对象。
2）常用属性：rows（返回所有行数组）、cells（返回所有单元格数组）
3）常用方法：
—> table.insertRow(index)：返回TableRow对象（插入新行）。
—> table.deleteRow(index)：删除TableRow对象（删除行）。

TableRow对象
1）TableCell对象代表一个HTML表格单元格，<td>标签表示一个TableCell对象。
2）常用属性：cellIndex、innerHTML、colSpan、rowSpan

window其他子对象(DHTML模型)
screen对象
1）包含有关客户端显示屏幕的信息（封装了屏幕相关的信息，供读取）。
2）常用属性：width/height、availWidth/availHeight、colorDepth(颜色位数)、pixelDepth(颜色位数)
浏览器窗口可视区域大小在各浏览器兼容的方法：

var w= document.documentElement.clientWidth  || document.body.clientWidth;
var h= document.documentElement.clientHeight  || document.body.clientHeight;

网页尺寸scrollHeight/offsetHeight在各浏览器兼容的方法:

var w=document.documentElement.scrollWidth || document.body.scrollWidth;
var h=document.documentElement.scrollHeight || document.body.scrollHeight;

history对象

1）包含用户在浏览器窗口中访问过的URL（封装了历史访问记录）。
2）length属性：浏览器历史列表中的URL数量。
3）方法：
—> history.back()：单击后退按钮。
—> history.forward()：单击向前按钮。
—> history.go(n)：前进到历史列表中的第几个页面，1表示前进，-1表示后退。

location对象
1）包含有关当前URL的信息（地址栏），常用于获取和改变当前浏览的网址。
2）href属性：完整的url。
host：URL端口号； hostname:主机名； hash:从#开始的URL(锚)
pathname：路径部分; protocol：url协议； search：从?开的url(查询部分)
3）方法：
—> location.href="url"：在当前页面打开，保留历史访问记录。
—> location.replace(“url")：在当前页面打开url，不保留历史访问记录。
—> location.reload()：重新载入当前网址，等同于按刷新。
—> location.assign()：加载新的文档
【注意：location.href=“url”也等同于location["href"]，但很少这么用；location="url"好像也可以。】

navigator对象
1）包含浏览器软件的相关信息，常用于获取客户端和操作系统信息。
2）属性：appCodeName：浏览器代码名的字符串表示；
appName：浏览器名称； appVersion：浏览器平台和版本信息
platform：运行浏览器的操作系统平台；
userAgent：由客户机发送服务器的user-agent头部的值
【注意：可用window.userAgent.indexOf(“Firefox”)>-1来判断是否是某种浏览器】

事件
指DHTML对象在状态改变、鼠标操作或键盘操作时触发的动作。
1）事件的类别：
①鼠标事件：onclick/ondblclick/onmouseover/onmouseout ……
②键盘事件：onkeydown/onkeyup ……
③状态改变事件：onblur/onfocus/onchange/onload（body里）/onsubmit（form里） ……
④内容事件：onselect/onchange/
⑤body里内容加载 ：onload/ 窗口关闭事件： window.onunload
2）定义事件：
①<标签里 onXXX=“代码">：静态，写在html代码中
②obj.onclick = function(){}：动态，在JavaScript代码中定义
3）取消事件：onXXX = "return false;"
4）事件处理机制(冒泡机制)：当处于DHTML对象模型底部的对象事件发生时，会依次激活上面对象定义的同类事件处理（即当有层次关系，且定义了相同事件时，会发生）。如：

<div style="width:100px;height:100px;border:1px solid red;" onclick="alert('3');">
          <p onclick="alert('2');">p text
          <input type="button" value="1" onclick="alert('1');" />
          </p>
<div>

Paste_Image.png

【注意：使用event对象可以禁止事件冒泡】

event对象
1）任何事件触发后将会产生一个event对象。
2）event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息（获得event对象后，可以获得相关信息）。
3）常用属性：clientX/clientY/cancelBubble=true（取消冒泡） ……
4）获取event对象：
—> IE/Chrome等浏览器：直接使用event关键字。
—> Firefox浏览器：在事件定义中，使用event关键字将事件对象作为参数传入方法。
【注意：在Firefox里直接在JavaScript中使用event，则不行！不认识！即只能在html页面获得event对象！其他浏览器既可以在JavaScript中获得，也可以在html页面中获得。】
5）获取事件源：
—> IE/Chrome等浏览器：event.srcElement
—> Firefox浏览器：event.target
【注意：两种获得事件源对象的方式最新的Chrome浏览器都支持。】

 <div onclick="func(event);">div text</div>
    <!--注意把event传入方法中！这样也可以在JavaScript中写复杂代码了！-->
    //如下操作可兼容各浏览器
    function func(e){ alert(e.clientX+":"+e.clientY);
                var obj=e.srcElement || e.target;
                alert(obj.nodeName);//DIV（大写的） }

面向对象基础
对象是一种特殊的数据类型，由属性和方法封装而成；
1）属性：对象名.属性名
2）方法：对象名.方法名()
3）定义对象：
① 创建对象的实例：使用Object创建，可以实现简单的封装，但不方便重用。

function TestObject(){ //创建对象，封装数据和行为
      var s=new Object();  s.name="mary";  s.age=18;  s.sing=function(){alert("hello");};
             //匿名方法，赋进去一个function，所以sing是个方法
      alert(s.name); alert(s.age); s.sing();

② 创建对象的模版：可重用的封装；定义构造函数，以创建自定义的对象。

—>语法：function ObjName(参数1,参数2,…){}
③ 使用JSON（相当于Java中的Map）

  function Student(n1,a1){//定义一个对象的模版：Student
        this.name=n1;//用了this关键字，就认为Student是一个类，而不是方法
        this.age=a1;  this.introduceSelf=function(){
       alert("i am "+this.name+", i am "+this.age +" year old");  }  }
   function testOwnObject(){//测试自定义的Student对象
     var p1=new Student("mary",18);
     var p2=new Student("join",20);
     alert(p1.name);  alert(p2.age);  p1.introduceSelf();   p2.introduceSelf();
  }

JSON（ JavaScript Object Notation ）
是一种轻量级的数据交换格式。使用名 / 值对的方式定义。名称需要使用 “” 引起来。多对定义之间使用 “ ， ” 隔开。
1）数据的传递：
① 数据在 JavaScript 范围里传递，使用 Object 创建对象或者创建对象的模版，两种都可用。
② 数据传递到服务器端，采用一种通用的格式， Xml 或者 JSON 。
2）操作：
① var name=obj["name"];// 相当于 [obj.nam]，取键所对应的值
② obj[“score"]=99;// 放入一个新的键值对【注意：名称可以是属性，需要使用“”引起来；】

博客地址：Web基础之JavaScript（三）