Web基础之JavaScript（三）

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

Paste_Image.png

Select对象
1）Select对象代表HTML表单中的一个下拉列表，

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 text
    
    //如下操作可兼容各浏览器
    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（三）

Web基础之JavaScript（三）

你可能感兴趣的:(Web基础之JavaScript（三）)