js 笔记

###JS 02

----



###console对象常用函数

    alert与console相比

    alert因为是弹出窗体, 类似Java中的接收用户输入, 会造成线程的等待

    console现在支持的浏览器也很多 (支持IE)

    普通日志输出:
        log(1-n个元素)

    异常调试输出:
        debug(1-n个元素)
        在代码中使用的话, 在控制台的打印会附带超链接, 连接到debug代码编写的位置

    带有信息图标的提示:
        info(1-n个元素)
    带有警告图标的提示:
        warn(1-n个元素)
    带有错误图标的提示:
        error(1-n个元素)


    在输出时 . 使用格式化字符串占位置

    格式化字符串            类型

        %s            可以填充字符串
        %d          可以填充整型
        %f          可以填充浮点型
        %o          可以填充连接对象


    如果存在格式化字符串, 则后面的参数 默认填充到格式化字符串位置, 超出部分正常打印

    举例:

        console.log("这个人叫: %s ,他今年 %d 岁了,性别为 %s","哈哈"); 
        

###DOM对象

    什么是HTML DOM对象

    HTML  Document Object Model : 文档对象模型

###JS中对于属性值的获取与设置

    属性值的获取:

        -    var par1 = elementObject.属性;

    属性值的设置:
        -    elementObject.属性= 值;

###获取元素对象

    1.    document.getElementById(id);
        -    通过元素的id , 获取元素对象

    2.    document.getElementsByTagName(tagName);
        -    通过元素的标签名称, 获取一个元素对象数组

    3.    document.getElementsByName(name)
        -    通过元素的name属性值 , 获取一个元素对象数组

    4.    document.getElementsByClassName(className);
        -    通过元素的class属性值, 获取一个元素对象数组
        -    新版api  ie9和以上支持

###修改元素的属性和内容

    修改图片的src

        1.    找到图片的对象
        2.    更改它的src属性


    innerHTML : 修改元素的文本内容


    className : 修改元素class属性值 


###用户名验证案例:

    CSS部分
        .span1{
            color:#f00;
            font-size:12px;
        }
        .span2{
            color:#0f0;
            font-size:12px;
        }
##
    HTML部分
        帐号:<input type="text" id="uname" onblur="test()">&nbsp;&nbsp;
        <span class="span1" id="uname_log"></span><br><br>
        
##
    JS部分

        function test(){
            var uname  = document.getElementById("uname");
            var uname_val = uname.value;
            var uname_log = document.getElementById("uname_log");
            if(uname_val.length>=6){
                //颜色绿色
                uname_log.className="span2";
                //显示文本为: 用户名可用
                uname_log.innerHTML = "用户名可用";
            }else{
                //颜色红色
                uname_log.className="span1";
                //显示文本为: 用户名过短, 请重新输入
                uname_log.innerHTML = "用户名过短,请重新输入";
            }
            
        }


###通过一个节点 根据 层次从查找节点
    遵循文档的层次结构，查找单个节点
        -    parentNode  查找父节点
        -    firstChild 查找第一个子节点
        -    lastChild 查找最后一个子节点

    遵循文档的层次结构，查找多个节点
        -    childNodes 获取所有子节点 

    获取元素/属性的名称/值/节点类型
        -    noteName 元素节点返回标签名;属性节点返回属性名;文本节点返回#text
        -    nodeValue 属性节点返回属性值;文本节点返回内容;元素节点返回null
        -    nodeType 1表示元素节点;2表示属性节点;3表示文本节点

    遵循文档的层次结构，查找多个属性
        attributes  获取元素的所有属性



    
    



###创建新的节点: 

    var elementObject = document.createElement("节点的名称");


###通过父元素 添加子元素

    //追加子元素
    父元素.appendChild(elementObject);
    //插入到参考元素之前:
    父元素.insertBefore(新元素,要参考的元素);

###删除元素

    父元素.removeChild(子元素对象);


###元素对象Select

    属性: 

        options 

        selectedIndex : 获取被选中的元素的下标

    函数: 

        add(option对象) 添加一个下拉选项

        remove(index) 移除一个选项

    事件:

        当选中的元素发生变化
        onchange


###元素对象option

    创建对象: 

        new Option("文本内容","提交服务器的value值");

    常用的属性:

        1.    获取下标: index
        2.    获取文本内容: text
        3.    获取提交的value值: value
        4.    获取选中状态: selected


###元素对象table

    表格
    
    属性: 

        rows  cells

    常用方法:

        插入一行 var tr = insertRow(index);
            指定索引插入一行 , 并返回TableRow对象

        删除一行 deleteRow(index);
            指定索引删除行


###元素对象TableRow
    表格行 <tr>

    常用属性: 

        cells

        rowIndex : 获取当前tr的索引值


    常用函数: 

        插入一列 var tr = insertCell(index);
            指定索引插入一行 , 并返回TableCell对象

        删除一列 deleteCell(index);
            指定索引删除行


###元素对象 tableCell

    表格中的单元格<td>

    常用属性: 

        1.    获取当前列的索引 cellIndex
        2.    当前单元格占用的列数 colSpan
        3.    当前单元格占用的行数 rowSpan



###作业

    参考网址: 

    http://itdage.cn/buy/book.jsp