码迷,mamicode.com
首页 > 编程语言 > 详细

JavaWeb-04(BOM&DOM)

时间:2015-03-31 16:11:28      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:javaweb

JavaWeb-04

JavaWeb-BOM&DOM

BOM

一、知识回顾

* BOM 概述
* BOM 的各个对象
    * window对象
        innerHeight,innerWidth 
        document.body.clientWidth,document.body.clientHeight,
        self
        opener:超链和window.open() 
        parent : iframe和frame
        frames[]:
        三种对话框: alert(),prompt(),confirm()
        定时器: setTimeout(),setInterval() 
        模态窗口: showModalDialog() ,showModelessDialog() 
    *  History对象
        forward() ,back(),go()
    *  Location对象.

二、内容

事件(掌握,明白每个事件发生的时机)

1、鼠标移动事件

* onmousemove(event) : 鼠标移动事件event是事件对象。名字固定 
* onmouseover : 鼠标悬停事件,当鼠标移动到某个控件上面的时候发生
    this: 把this写在那个标签里面就代表那个标签对象
    this.style.backgroundColor : 当调用样式表中的属性的时候,如果属性中间有横杠,则应去掉.
        示例: 当鼠标移动到p标签上的时候,p标签改变样式
* onmouseout : 鼠标移出事件,当鼠标从控件上移开的时候  

2、鼠标点击事件

onclick : 当鼠标单击某个控件时发生
    示例: 当单击按钮时,在<p>中显示字符串 "冠希哥来了" 。

3、加载与卸载事件 ####

*加载事件(onload) : 在整个页面的元素加载完毕之后发生
*卸载事件(onunload) : 是在页面关闭时发生 
    注意: onload和onunload事件必须写在body或者图片标签里面

4、聚焦与离焦事件

*聚焦事件onfocus:是在控件获得焦点的时候发生
*离焦事件onblur:是在控件失去焦点的时候发生
        示例: 文本框获得焦点的时候改变样式,失去焦点时变回原样

5、键盘事件

onkeypress,onkeyup,onkeydown

*onkeypress: 按下键盘按键并松开
*onkeydown : 按下按键发生
*onkeyup: 松开按键

6、提交与重置事件

onsubmit,onreset
*提交事件: 是在点击提交按钮后发生。(必须写在form表单中)
*重置事件: 是在点重置交按钮后发生。
        示例: 提交表单中的数据(检查):如果是陈冠希:通过,否则不能提交数据。

Demo

    <!doctype html>
    <html lang="en">
     <head>
      <title>重置与提交事件</title>
     </head>
    <script type="text/javascript">
    <!--
        /*
            提交事件:点击提交按钮时发生,函数在去目的地之前调用,根据结果决定是否去目标页面。
            注意:必须写在form标签中

        */
        function fun(from){
            //判断姓名
            var username = form.username.value;
            if(username==""){
                alert("姓名不能为空");
                return false;
            }
            //判断年龄
            var age = document.forms[0].age.value;
            if(age=="")
            {
                alert("年龄不能为空");
                return false;
            }
            if(isNaN(age)){
                alert("age必须是整数");
                return false;
            }
            if(age<0 || age>100){
                alert("年龄必须在0~100");
                return false;
            }
            return true;
        }
        function fun1(form){
            return false;
        }

    //-->
    </script>
     <body>
        <form method="post" action="#a.html" onsubmit="return fun(this)" onreset="return fun1(this)">
            姓名:<input type="text" name="username"><br>
            年龄:<input type="text" name="age"><br>
            <input type="submit" value="提交"><input type="reset" value="重置">
        </form>
     </body>
    </html>

技术分享

7、选择与改变事件

onselect: 只能用于输入框. 当选择输入框中的文本时发生
onchange: 用于select和文本框.对于下拉框是在选项发生变化的时候发生,对于文本框是在文本框的内容发生变化并且失去焦点时发生。
    示例: 当选择文本框的内容时,弹出文本框的内容
    下拉框的selectedIndex属性:代表选中某项的索引 

DOM技术

一、Dom概述?

1、什么是DOM?

document object model 文档对象模型

2、它的作用?

重构整个HTML 文档。可以添加、移除、改变或重排页面上的项目。

3、分类?

Core DOM :   定义了一套标准的针对任何结构化文档的对象 
XML  DOM :   定义了一套标准的针对 XML 文档的对象 
HTML DOM :   定义了一套标准的针对 HTML 文档的对象。 

4、xml介绍?

expensible markup language : 可扩展标记语言.
        <penson>
            <name>张无忌</name>
            <age>23</age>
        </person>

技术分享

技术分享

二、DOM树

1、结点 :

 文档中的每个成分都是一个节点.(包括文本也是节点)

2、结点的属性

a. nodeName(节点名称)

元素节点的 nodeName 是标签名称 
属性节点的 nodeName 是属性名称 
文本节点的 nodeName 永远是 #text 
文档节点的 nodeName 永远是 #document 

b. nodeValue(节点值)

对于文本节点,nodeValue 属性包含文本。
对于属性节点,nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。

c. nodeType(节点类型) : nodeType 属性可返回节点的类型。

标签节点的类型值是 1
属性节点的类型值是 2
文本节点的类型值是 3

Dom节点的属性.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>Dom节点的属性</title>
     </head>
     <body>
        <p id="p">p节点的属性</p>
        <script type="text/javascript">
        <!--
            var p = document.getElementById("p");
            alert(p.nodeType);//标签节点的类型值是 1
            var txt = p.firstChild;
            alert(txt.nodeType);//文本节点的类型值是 3
        //-->
        </script>
     </body>
    </html>

技术分享技术分享

dom导航节点属性.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>Document</title>
     </head>

     <body>
        <table border = 1>
            <tr>
                <td>凌志玲</td>
                <td>女</td>
                <td>23</td>
            </tr>
            <tr>
                <td>大s</td>
                <td>女</td>
                <td>28</td>
            </tr>
            <tr>
                <td>小s</td>
                <td>女</td>
                <td>20</td>
            </tr>
        </table>
     </body>
    </html>
    <script type="text/javascript">
        <!--
            /*
                问题: 拿到大s的年龄
            */
            //拿到根节点
            var html = document.documentElement ;
            //alert(html.nodeName) ;
            //拿到body节点
            var body = html.lastChild ;
            //alert(body.nodeName) ;

            //拿到table节点
            var table = body.firstChild ;
            //alert(table.nodeName) ;

            var value =  table.firstChild.firstChild.nextSibling.lastChild.firstChild.nodeValue ;
            alert(value) ;
            //如何准确拿出?需要结合浏览器中的DOM模型来查看每一个节点的细节,以至于不会拿错你想获取的目标节点
        //-->
        </script>
    <!--由于该示例涉及具体的IE浏览器,所以不截图-->

通过方法获得标签节点对象.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>通过方法获得标签节点对象</title>
     </head>
        <script type="text/javascript">
        <!--
            /*
                通过方法获得标签节点对象:
                        1.getElementById():
                        2.getElementsByTagName() ;
                        3.getElementsByName(): 只能用于表单控件
            */
        //-->
        </script>
     <body>
        <div name = "d">刘德华</div>
        <div name = "d" id = "div">成龙</div>
        <div name = "d">陈冠希</div>
        <input type="text" name="name" value="弹出我吧"><br>
        <input type="text" name="name"><br>
        <input type="text" name="name"><br>
        <input type="text" name="name"><br>
     </body>
    </html>
    <script type="text/javascript">
    <!--
        var div = document.getElementById("div");
        alert(div.innerText);
        var divs = document.getElementsByName("d");
        alert(divs[0].innerText);
        var names = document.getElementsByTagName("input");
        alert(names[0].value);
    //-->
    </script>

技术分享技术分享技术分享

获取节点内容的方法.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>获取节点内容的方法</title>
     </head>
     <body>
        <h1 id = "h">明天休息</h1>
        <script type="text/javascript">
        <!--
            var h = document.getElementById("h");

            //第一种方法
            alert(h.firstChild.nodeValue);
            //第二种方法
            alert(h.lastChild.nodeValue);
            //第三种方法
            var nodes = h.childNodes
            alert(nodes[0].nodeValue);
            //第四种方法
            alert(h.innerText);

        //-->
        </script>
     </body>
    </html>

技术分享

打印ul中的值(教你如何解决不同IE给你附加的节点而取出你想要的节点内容).html

    <!doctype html>
    <html lang="en">
     <head>
      <title>5打印ul中的值(教你如何解决不同IE给你附加的节点而取出你想要的节点内容)</title>
     </head>
     <body>
         <ul>
            <li id="bj" value="beijing">
                北京
                <h1>海淀</h1>
                奥运
            </li>
            <li id="sh" value="shanghai">
                上海
            </li>
            <br/>
            <input type="button" value="li取值" onclick="getLi()"/>
        </ul>
        <script type="text/javascript">
        <!--
            function getLi(){
                var bjNode = document.getElementById("bj") ;
            //alert(bjNode.nodeName + ":" + bjNode.nodeValue +":" + bjNode.nodeType) ;
            var txts = bjNode.childNodes ;
            for(var i = 0 ;i <txts.length;i++){
                if(txts[i].nodeType == 3)
                    alert(txts[i].nodeValue) ;
                else if(txts[i].nodeType == 1)
                   alert(txts[i].firstChild.nodeValue) ;    
            }

            }
        //-->
        </script>
     </body>
    </html>

技术分享技术分享技术分享

打印select的值.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>打印select的值</title>
     </head>
     <body>
        <select name="edu" id="edu">
            <option value="本科">本科</option>
            <option value="专科">专科</option>
            <option value="高中">高中</option>
            <option value="小学">小学</option>
            <option value="幼儿园">幼儿园</option>
        </select>
     </body>
    </html>
    <script type="text/javascript">
    <!--
        //取出方式1
        var edu = document.getElementById("edu");
        var opt = edu.childNodes ;
        for(var i = 0;i<opt.length;i++){
         //注意:浏览器添加了很多空行,所以要判断
            if(opt[i].nodeType==1){
            alert(opt[i].firstChild.nodeValue);}
        }
        //取出方式2(推荐)
        var ops = edu.options;
        for(var i = 0;i<ops.length;i++){
            alert(ops[i].innerText);
        }
    //-->
    </script>

技术分享

3、结点的分类

    整个文档是一个文档节点 
    每个 XML 标签是一个元素节点 
    包含在 XML 元素中的文本是文本节点 
    每一个 XML 属性是一个属性节点 
    注释属于注释节点 

4、结点的关系

    只有父子和兄弟关系
        parentNode  : 父节点
        childNodes  :所有的子标签
        firstChild  :第一个儿子
        lastChild  :最后一个儿子
        nextSibling :下一个兄弟节点
        previousSibling : 上一个兄弟节点

5、对结点进行CRUD操作(重点)

5.1、查找结点?

两种方式: 
    a. 采用节点之间的关系去拿根节点:
        document.documentElement ;
    b. 采用方法去拿
        getElementById() : 根据标签的ID拿到此标签节点
        getElementsByTagName() : 根据标签的名字拿到此标签节点数组
        getElementsByName(): 适用于表单控件。根据标签的name属性值拿到控件的数组。 

5.2、删除结点?

removeChild() : 采用父节点删除子节点

5.3、创建节点:

document.createElement()  : 创建一个标签节点
docuemnt.createTextNode("内容") :创建一个文本节点
节点的setAttribute() :添加属性节点

5.4、添加结点?

appendChild() : 添加子节点

5.5、修改或替换结点?

replaceNode(): 替换节点(适用于IE)
replaceChild() : 替换子节点

替换节点和克隆节点.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>替换节点和克隆节点</title>
     </head>
     <script type="text/javascript">
     <!--
        function changeNode(){
            //拿到bj节点
            var bjNode = document.getElementById("bj") ;
            //拿到game节点  
            var gameNode = document.getElementById("game") ;

            //替换
            //第一种方式(不推荐)
            //bjNode.replaceNode(gameNode) ; 
            //第二种
            //克隆节点
            var kNode = gameNode.cloneNode(true) ;  //有一个参数是boolean类型的,如果是true,表示连子节点一起复制,如果是false,则再复制本节点,不复制内容
            //bjNode.replaceNode(kNode) ;
            //第三种方式(推荐)
            bjNode.parentNode.replaceChild(kNode,bjNode) ;

        }
     //-->
     </script>
     <body>
         <ul >
            <li id="bj" onclick="changeNode()">北京</li>
            <li>湖南</li>
            <li>山东</li>
        </ul>
        <ul>
            <li  id="game">打<p>灰机</p></li>
            <li>抓泥鳅</li>
            <li>斗地主</li>
        </ul>

     </body>
    </html>

技术分享技术分享

创建节点.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>创建节点</title>
     </head>
        <script type="text/javascript">
        <!--
            function addOptions(){
                //拿到下拉框对象
                var sel = document.getElementsByTagName("select")[0] ;
                //创建一个节点
                // 创建option第一种方法
                //var option = document.createElement("option") ;
                //option.text = "小学" ;

                // 创建option第二种方法
                //var option = new Option("小学","小学") ;
                // 创建option第三种方法
                /*var option = new Option() ;
                option.value = "小学" ;
                option.text = "小学" ;
                sel.options.add(option) ;*/


                //第二种添加方式
                var option = new Option("小学","小学") ;
                //sel.appendChild(option) ;    //IE有问题

                //第三种方式
                sel.innerHTML = sel.innerHTML + "<option value = ‘小学‘>小学</option>" 


            }
        //-->
        </script>
     <body>
        <input type="button" value="添加选项" onclick="addOptions()"/>
        <select>
            <option>本科</option>
            <option>专科</option>
            <option>高中</option>
            <option>初中</option>
        </select>
     </body>
    </html>

技术分享技术分享

操作节点的属性.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>操作节点属性</title>
     </head>
        <script type="text/javascript">
        <!--
            /*
                功能: 按钮只能点击一次
                操作节点属性:
                    1. setAttribute() :设置某个属性的值
                     2.  getAttribute(): 获得属性的值
                     3.  removeAttribute() : 删除属性
            */
            function fun(){
                //拿到btn对象
                var btn = document.getElementById("btn") ;
                //删除disabled属性
                //btn.removeAttribute("disabled") ;

                btn.onclick =  function(){
                    fun1(this) ;
                } ;

            }


            function fun1(btn){
                //第一种方式
                //btn.setAttribute("disabled","disabled") ;

                //第二种方式
                //btn.disabled = "disabled" ;
                alert("我只会弹出一次哦") ;
                btn.removeAttribute("onclick") ;
            }
        //-->
        </script>
     <body>
         <input type="button" value="只能点击一次" id = "btn"  onclick = "fun1(this)" >
         <input type="button" value="恢复" onclick = "fun()">
     </body>
    </html>

技术分享

添加表格行(练习),导购常用.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>添加表格行</title>
     </head>
        <script type="text/javascript">
        <!--
            function addtr(){
                //拿到单元格的内容
                var name = document.getElementById("name").value ;
                var email = document.getElementById("email").value ;
                var age = document.getElementById("age").value ;

                //创建tr,td,并赋值
                var nametd = document.createElement("td") ;
                nametd.innerHTML = name ;
                var emailtd = document.createElement("td") ;
                emailtd.innerHTML = email ;
                var agetd = document.createElement("td") ;
                agetd.innerHTML = age ;
                var btntd = document.createElement("td") ;
                btntd.innerHTML = "<input type = ‘button‘  value = ‘删除‘ onclick = ‘delTr(this)‘> " ;

                //创建tr并组合
                var tr = document.createElement("tr") ;
                tr.appendChild(nametd) ;
                tr.appendChild(emailtd) ;
                tr.appendChild(agetd) ;
                tr.appendChild(btntd) ;

                //将tr加入到table中
                var table = document.getElementById("table") ;
                table.firstChild.appendChild(tr) ;
            }

            function delTr(btn){
                //爷爷干掉儿子
                btn.parentNode.parentNode.parentNode.removeChild(btn.parentNode.parentNode) ;
            }
        //-->
        </script>
     <body>
       <table width = 600 height = 100 align = center>
          <tr>
            <td>姓名:</td>
            <td><input type="text" name="" id = "name"></td>
            <td>邮箱:</td>
            <td><input type="text" name="" id = "email"></td>
            <td>年龄</td>
            <td><input type="text" name="" id = "age"></td>
          </tr>
          <tr>
            <td align = "center" colspan = "6"> <input type="button" value="添加" onclick="addtr()"></td>     
          </tr>
          </table>
          <br>
          <br>
          <br>
          <br>
          <hr>
          <table width = "500" border =1 align = center id = "table">
              <tr>
                <td>姓名</td>
                <td>邮箱</td>
                <td>年龄</td>
                <td>操作</td>
              </tr>
          </table>

     </body>
    </html>

技术分享

全选全不选:选择你的爱好.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>选择你的爱好</title>
     </head>
        <script type="text/javascript">
        <!--
            function checkAll(flag){
                //拿到所有的选项
                var hobbys = document.getElementsByName("hobby") ;
                for(var i = 0;i < hobbys.length ;i ++){
                    hobbys[i].checked = flag ;
                }
            }

            function reverseCheck(){
                //拿到所有的选项
                var hobbys = document.getElementsByName("hobby") ;
                for(var i = 0;i < hobbys.length ;i ++){
                    hobbys[i].checked = !hobbys[i].checked ;
                }
            }
        //-->
        </script>
     <body>
         <h1>请选择你的爱好:</h1>
      全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)" /><br/>
     <input type="checkbox" name="hobby" value="football" />足球
     <input type="checkbox" name="hobby" value="basketball"/>篮球
     <input type="checkbox" name="hobby" value="swim" />游泳
     <input type="checkbox" name="hobby" value="singing" />唱歌<br/>

     <input type="button" value="全选" onclick="checkAll(true)"/>
     <input type="button" value="全不选" onclick="checkAll(false)"/>
     <input type="button" value="反选" onclick="reverseCheck()"/> </body>
     </body>
    </html>

技术分享

下拉框选项的移动(多项).html

    <!doctype html>
    <html lang="en">
     <head>
      <title>下拉框选项的移动(多项)</title>
     </head>
     <script type="text/javascript">
     <!--
            function removeLeft(){
                //获取下拉框的所有的选项数组
                var ops = document.getElementById("left").options ;
                //获得右边下拉框
                var rightsel = document.getElementById("right") ;
                //循环判断每一个选项是否选中
                for(var i =0 ;i<ops.length ;i++){
                    if(ops[i].selected){
                        rightsel.appendChild(ops[i]) ;
                        i-- ;
                    }
                }

            }

            function removeLeftAll(){
                //获取左边下拉框的所有的选项数组
                var ops = document.getElementById("left").options ;
                //获得右边下拉框
                var rightsel = document.getElementById("right") ;
                //循环添加
                var length  = ops.length ;
                for(var i = 0 ;i <length;i++){
                    rightsel.appendChild(ops[0]) ;
                }
            }
     //-->
     </script>
     <body>
       <table align="center">
            <tr>
                <td>
                    <select size="10" id="left" multiple>
                        <option>选项1</option>
                        <option>选项2</option>
                        <option>选项3</option>
                        <option>选项4</option>
                        <option>选项5</option>
                        <option>选项6</option>
                        <option>选项7</option>
                        <option>选项8</option>
                    </select>
                </td>
                <td>
                    <input type="button" value="--->" onclick="removeLeft()"/><br/>
                    <input type="button" value="===>" onclick="removeLeftAll()"/><br/>
                    <input type="button" value="<---" onclick=""/><br/>
                    <input type="button" value="<===" onclick=""/><br/>
                </td>
                <td>
                    <select size="10" id="right">

                        <option>选项9</option>
                    </select>
                </td>
            </tr>
        </table>
     </body>
    </html>

技术分享技术分享

超链.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>Document</title>
     </head>
         <script type="text/javascript">
         <!--
             function fun(){
                alert("哈哈,我来了") ;
                return false ;
             }
         //-->
         </script>
     <body>
        <a href="http://blog.163.com/faith_yee/blog/demo03-dom节点的属性.html" onclick = "return false ;">demo03-dom节点的属性.html</a><br>
        <a href = "javascript: void(0)">demo03-dom节点的属性.html</a>
     </body>
    </html>

技术分享

表单数据的判断.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>Document</title>
        <style type="text/css">
            .one{
                border:2px solid red ;

            }

            .two{
                background-image:url("images/error.jpg");
                background-position:right;
                background-repeat:no-repeat;
            }
        </style>
     </head>
        <script type="text/javascript">
        <!--
            function checkInfo(form){
                //判断通行证名称 
                var username = form.username.value ;
                if(username == ""){

                    form.username.className = "two" ;

                    var span = document.getElementById("susername") ;
                    span.className = "one" ;
                    span.innerHTML = "<img src=‘http://blog.163.com/faith_yee/blog/images/error.jpg‘>通行证用户姓名不能为空" ;
                    return false ;
                }
                return true ;
            }
        //-->
        </script>
     <body>
        <form method = "post" action = "" onsubmit = "return checkInfo(this)">
            <fieldset>
                <table>
                <tr>
                    <td align = "right">通行证名称:</td>
                    <td><input type="text" name="username">@163.com</td>
                    <td><span id = "susername"></span></td>
                </tr>
                <tr>
                    <td align = "right">密码:</td>
                    <td><input type="password" name="pass"></td>
                    <td><span id = "spass"></span></td>
                </tr>
                <tr>
                    <td align = "right">确认密码:</td>
                    <td><input type="password" name="repass"></td>
                    <td><span id = "srepass"></span></td>
                </tr>
                <tr>
                    <td colspan = "3"><input type="submit" value = "提交"></td>
                </tr>
                </table>
            </fieldset>
        </form>
     </body>
    </html>

技术分享技术分享

javascript模拟类的实现.html

    <!doctype html>
    <html lang="en">
     <head>
      <title>javascript模拟类的实现</title>
     </head>
        <script type="text/javascript">
        <!--
            /*
                1.定义类并创建类的实例对象
                2.定义公有属性和私有属性
                3.定义公有方法和私有方法
                4.静态属性和静态方法
                5.构造函数(无参,有参)
                6.原型方式声明属性与方法
                7.直接用Object或函数对象加属性与方法
            */
            //----------------------------------------------------------
            //1.定义类并创建类的实例对象
            /*function Person(){

            }
            var p = new Person() ;*/

            //------------------------------------------------------------
            //2.定义公有属性和私有属性
            /*
                定义私有属性:
                     1.在函数里: var name = ‘张三‘ ;
                     2.在函数外:  采用对象.属性名

                定义公有属性:
                     1.在函数里:this.name = ‘张三‘ ;
                     2.在函数外  类名.prototype.属性名
            */
            /*function Person(){
                var name = "张三" ;
                this.age = 20 ;
            }

            var p = new Person() ;
            //alert(p.name) ;  //name是私有属性,只能在函数中访问
            //alert(p.age);
            //p.weight = 100 ;  //定义一个私有属性
            //alert(p.weight) ;
            Person.prototype.height = 180 ;
            alert(p.height) ;
            var p1 = new Person() ;
            //alert(p1.age) ;
            //alert(p1.weight) ;  //访问不了weight,因为weight是专属于p对象的私有属性
            alert(p1.height) ;*/

            //-----------------------------------------------------------------
            //3.定义公有方法和私有方法
            /*
                定义私有方法:
                     1.在函数里: var say = function() ;
                     2.在函数外: 采用对象.方法名

                定义公有方法:
                     1.在函数里:this.name = function() ;
                     2.在函数外:类名.prototype.方法名
            */
            /*function Person(){
                var say = function(){
                    alert("我是私有方法") ;
                }

                this.show = function(){
                    say() ;
                }
            }

            var p = new Person() ;

            //p.show() ;   
            p.sing = function(){   //采用匿名函数的方式定义私有方法
                alert("我想唱忘情水") ;
            }

            //p.sing() ;
            Person.prototype.eat = function(a){
                alert("我想吃" + a) ;
            }
            p.eat("鸡肉") ;
            var p1 = new Person() ;
            //p1.sing() ;  //不能调用,因为sing方法是p对象的专属方法,私有的
            p1.eat("鸭肉") ;*/

            //--------------------------------------------------------------
            //4.静态属性和静态方法 : 注意: 不能通过对象来调用
            /*function Person(){}
            Person.name = "张无忌" ;  //定义一个静态属性
            Person.show = function(){ //定义一个静态方法
                alert("我是静态方法") ;
            } ;  

            alert(Person.name) ;   
            Person.show() ;*/

            //---------------------------------------------
            //5.构造函数(无参,有参)
             //注意: 不要起同名的函数
            /*function Person(name){
                this.name = name ;
            }
            function Person(name,age){
                alert("我被调用了") ;
                this.name = name ;
                this.age = age ;
            }

            var p = new Person("张无忌",20) ;
            alert(p.name + ":" + p.age) ;

            var p1 = new Person("张三丰") ;
            alert(p1.name) ;*/

            //------------------------------------------------
            //5.创建对象的方式
            /*
                创建对象的三种方式:
                     1. 采用new 函数名()
                     2. new Object() ;
                     3. json
            */
            // var a = new Object() ;
            // alert(typeof(a)) ;

            //json格式
            var json = {"a":"中国","b":"美国","c":"日本"} ;

            //alert(typeof(json));
            //alert(json["b"]) ;
            //alert(json.b) ;

            var json1 = {1:"中国",2:"美国",3:"日本"} ;
            //alert(json1[2]) ; //此种情况下只能采用中括号去拿值

            //如果想都拿到
            /*for(var x in json){
                alert(x + ":" + json[x]) ;
            }*/

            //扩展:foreach循环是拿到对象的所有的属性
            /*function fun(p){
                for(var a in p){
                    alert(a) ;
                }
            }*/

            //---------------------------------------------------
            //给数组添加方法
            //功能:获取数组中的最大值
            /*Array.prototype.getMax= function(arr){
                var max  = arr[0] ;
                for(var i = 1 ;i<arr.length ;i++){
                    if(arr[i] > max)
                       max = arr[i] ;           
                }
                return max ;
            }

            var arr = [2,6,12,67,58] ;
            var max = arr.getMax(arr) ;
            alert(max) ;*/

            //改造document.getElementById();
            /*function $(id){
                if(arguments.length > 1){
                    alert("传递的参数个数不对") ;
                    return ;
                }
                var obj = document.getElementById(id) ;
                if(obj == null){
                    alert("传递的参数必须是id的值") ;
                    return ;
                }
                return  obj ;
            }

            function func(){
                //var p = $("a,","b") ;
                var p = $("p") ;
                p.innerHTML = "刘德华" ;
                p.onclick = function(){
                    alert(this.innerHTML);
                }
            }*/

            //--------------------------------------------
            //继承
            /*function Person(){
                this.name = "张无忌" ;
                this.show = function(a){
                    alert(a) ;
                }
            }

            function Student(){ 
                this.name = "张三丰" ;
                this.show =function(){
                    alert("我是子类的方法");
                }
            }

            Student.prototype = new Person() ;  //student继承了Person
            var s = new Student() ;
            //alert(s.name) ;
            s.show("aaaa") ;*/

            //------------------------------------------
            //with(对象的名字)
            //设定p标签的样式
            function func(){
                var p = document.getElementById("p") ;
                //p.style.color = "red" ;
                //p.style.border="1px solid green" ;
                //p.style.fontSize = "50px" ;
                with(p){
                    style.color = "red" ;
                    style.border = "1px solid green" ;
                    style.fontSize="50px" ; 
                }
            }
        //-->
        </script>
     <body>
        <p id = "p" onclick = "fun(this)" name = "p1">李德华</p><input type="button" value="拿取p标签的内容" onclick="func()">
     </body>
    </html>

技术分享


资料下载

JavaWeb-04(BOM&DOM)

标签:javaweb

原文地址:http://blog.csdn.net/faith_yee/article/details/44779431

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!