javascript语言基础2

1、了解事件对象。
    IE支持全局事件对象。FF不支持
    为了兼容,可以将event作为参数传递
    
2、事件对象的属性:
        浏览器窗口坐标:clientX,clientY
        获得发生事件的组件
            注意IE与firefox    获得发生事件的组件的方式不一样
            IE:srcElement
            FireFox:target
3、了解事件冒泡机制:
        浏览器中, 事件触发后会由子元素向父元素逐级传播, 这种传播方式称为”事件冒泡”
        采用 event.cancelBubble = true; 阻止事件的传播。
4、掌握样式对象
        style和currentStyle(IE)的区别
        组件对象的style属性只可以获取内联样式;获得所有的样式可以采用currentStyle属性
        getComputedStyle(FF)
        在FireFox中不支持currentStyle,使用window.getComputedStyle代替        
5、理解HTML DOM模型,掌握几个常见对象的方法和属性。
    Window对象 window
    open方法
        打开一个新的窗口,例如:
        window.open
        ('1.html', 'new', 'height=100, width=200, top=0, left=0,
        toolbar=no, menubar=no,
        scrollbars=no, resizable=no, location=no, status=no');
        '1.html' 弹出窗口的文件名;
        'new' 弹出窗口的名字;如果该参数指定了一个已经存在的窗口,则 open() 方法不再创建一个新窗口,而只是返回对指定窗口的句柄。
        height=100 窗口高度;
        width=200 窗口宽度;
        top=0 窗口距离屏幕上方的象素值;
        left=0 窗口距离屏幕左侧的象素值;
        toolbar=no 是否显示工具栏,yes为显示;
        menubar 是否显示菜单栏。
        scrollbars 是否显示滚动栏。
        resizable=no 是否允许改变窗口大小,yes为是 。
        location=no 是否显示地址栏,yes为是。
        status=no 是否显示状态栏内的信息。
    close方法
        关闭窗口
        返回值为窗口对象句柄
    status 属性
        设置或返回窗口状态栏中的文本。
    document属性
        获得Document对象
    location属性
        获得Location对象
    alert方法
        弹出一个警告对话框
    confirm方法
        弹出一个选择对话框,返回用户是否确认。
    prompt方法
        弹出一个供用户输入信息的对话框,返回用户输入信息。
    setTimeout方法
        setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
    clearTimeout方法
        clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
    setInterval方法
        按照指定的周期(以毫秒计)来调用函数或计算表达式。
    setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 
    返回的 ID 值可用作 clearInterval() 方法的参数。
    clearInterval方法
        clearInterval() 方法可取消由 setInterval() 设置的 timeout。
        clearInterval() 方法的参数必须是由 setInterval() 返回的 ID
Document对象
    write方法
        write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。
    getElementById
        根据id获得元素对象    
    属性
    
    forms
        forms[] 返回对文档中所有 Form 对象的引用
Form对象
    onsubmit
    onreset
    属性
        elements
            elements[] 包含表单中所有元素的数组
Select对象
    length
l        length 属性可返回下拉列表中选项的数目。
    selectedIndex
        selectedIndex 属性可设置或返回下拉列表中被选选项的索引号
    options
        返回包含 <select> 元素中所有 <option> 的一个数组。
        如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除; 
        如果 options.length 属性的值比当前值小,出现在数组尾部的元素就会被丢弃。;
        如果把 options[] 数组中的一个元素设置为 null,那么选项就会从 Select 对象中删除.
    onchange
        当改变选择时调用。
        Select 对象的 onchange 属性引用了一个事件句柄函数。当用户选中一个选项,
        或者取消了对一个选项的选定时,就会调用该句柄。这个事件不会指定新的选项是什么,
        必须通过 Select 对象的 selectedIndex 属性,或者各个 Option 对象的 selected 属性来确定.
        
        组件对象的style属性只可以获取内联样式;获得所有的样式可以采用currentStyle属性
        getComputedStyle(FF)
        在FireFox中不支持currentStyle,使用window.getComputedStyle代替


Table对象
属性
    rows 属性
rows 集合返回表格中所有行的一个数组,该集合包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行。
    tBodies属性
tBodies[] 返回包含表格中所有 tbody 的一个数组。
    tFoot
返回表格的 TFoot 对象。如果不存在该元素。
    tHead
返回表格的 THead 对象。如果不存在该元素。
方法
     insertRow
insertRow(index) 方法用于在表格中的指定位置插入一个新行。
返回一个 TableRow,表示新插入的行。
该方法创建一个新的 TableRow 对象,表示一个新的 <tr> 标记,并把它插入表中的指定位置。
新行将被插入 index 所在行之前。若 index 等于表中的行数,则新行将被附加到表的末尾。如果表是空的,则新行将被插入到一个新的 <tbody> 段,该段自身会被插入表中。后续可以使用TableRow.insertCell() 方法给新创建的行添加内容。为该行添加单元格。
    deleteRow方法
deleteRow(index) 方法用于从表格删除指定位置的行。
TableRow对象
属性
cells
cells[] 返回包含行中所有单元格的一个数组
rowIndex
返回该行在表中的位置。
方法
deleteCell方法
deleteCell(index) 方法用于删除表格行中的单元格(<td> 元素)。
insertCell方法
insertCell(index) 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。
返回值
一个 TableCell 对象,表示新创建并被插入的 <td> 元素。
该方法将创建一个新的 <td> 元素,把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的
表元之前。如果 index 等于行中的单元格数,则新单元格被附加在行的末尾。后续可以调用
TableCell的innerHTML属性指定单元格中的内容.


w3c dom
1、继承关系图
    Node 
        Document
            HTMLDocument
                HTMLBodyElement
        Element
            HTMLElement
                HTMLFormElement
                    HTMLInputElement
                    HTMLSelectElement
                        HTMLOptionElement
                HTMLDivElement
                HTMLTableElement
                    HTMLTableCaptionElement
                    HTMLTableRowElement
                    HTMLTableCellElement
2、操作
    (1)查找
            document.getElementById()
            或者遍历
                parentNode previousSibling nextSibling childNodes firstChild lastChild
                getElementsByTagName(tagName)
    (2)创建
            document.createElement(Tag)
    (3)添加
            appendChild
            insertBefore
            replaceChild
    (4)删除
            removeChild

 

posted @ 2012-08-21 17:21  欢歌911  阅读(230)  评论(0编辑  收藏  举报