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(三)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容