zoukankan      html  css  js  c++  java
  • JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    1. 带有Element和不带的区别

        a)  带Element的获取的是元素节点

        b)  不带可能获取文本节点和属性节点

    1. 获取所以子节点

        a)   . childNodes

        b)   . children

        c)   . parentNode . children [索引]

    1. . children:获取所有子节点
    2. opacity:0-1;透明度
    3. alpha(opacity:百分数);IE6/7/8透明度
    4. 先绑定事件再进行循环
    5. previousNode()上一个兄弟节点
    6. alert(变量名)可测试变量名是否可以使用
    7. 获取body,var body = document.body;

     设置样式的两种方式

    style

    1. 行内式可以获取打印出来
    2. 内嵌和外链的获取不了
    3. 样式少的时候使用
    4. 驼峰命名规则
    5. style属性是对象属性
    6. 值是字符串类型,没设置的时候是“空字符串”
    7. .style. cssText = “字符串形式的样式”

        

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>Title</title>
      6     <style>
      7         #list li {
      8             list-style-type: none;
      9              80px;
     10             height: 30px;
     11             line-height: 30px;
     12             background-color:beige;
     13             text-align: center;
     14             float: left;
     15             margin-left: 5px;
     16         }
     17 
     18         #list li.current {
     19             background-color: burlywood;
     20         }
     21 
     22         #list li a {#list li {
     23             list-style-type: none;
     24              80px;
     25             height: 30px;
     26             line-height: 30px;
     27             background-color:beige;
     28             text-align: center;
     29             float: left;
     30             margin-left: 5px;
     31         }
     32 
     33         #list li.current {
     34             background-color: burlywood;
     35         }
     36 
     37         #list li a {
     38             text-decoration: none;
     39         }#list li {
     40             list-style-type: none;
     41              80px;
     42             height: 30px;
     43             line-height: 30px;
     44             background-color:beige;
     45             text-align: center;
     46             float: left;
     47             margin-left: 5px;
     48         }
     49 
     50         #list li.current {
     51             background-color: burlywood;
     52         }
     53 
     54         #list li a {
     55             text-decoration: none;
     56         }#list li {
     57             list-style-type: none;
     58              80px;
     59             height: 30px;
     60             line-height: 30px;
     61             background-color:beige;
     62             text-align: center;
     63             float: left;
     64             margin-left: 5px;
     65         }
     66 
     67         #list li.current {
     68             background-color: burlywood;
     69         }
     70 
     71         #list li a {
     72             text-decoration: none;
     73         }#list li {
     74             list-style-type: none;
     75              80px;
     76             height: 30px;
     77             line-height: 30px;
     78             background-color:beige;
     79             text-align: center;
     80             float: left;
     81             margin-left: 5px;
     82         }
     83 
     84         #list li.current {
     85             background-color: burlywood;
     86         }
     87 
     88         #list li a {
     89             text-decoration: none;
     90         }
     91             text-decoration: none;
     92         }
     93     </style>
     94     <script src="tools.js"></script>
     95     <script>
     96         window.onload = function () {
     97             //需求:点击a链接,让a链接对应的li标签添加类。
     98             //思路:点击a链接,让他的父亲添加类,其他的li标签类名清空。
     99             //步骤:
    100             //1.获取事件源
    101             //2.绑定事件
    102             //3.书写事件驱动程序
    103 
    104 
    105             //1.获取事件源
    106             var ul = getEle("list");
    107             var aArr = ul.getElementsByTagName("a");
    108 
    109             for(var i=0;i<aArr.length;i++){
    110                 aArr[i].onclick = function () {
    111                     //点击哪个a链接,让他的父亲添加类
    112                     this.parentNode.className = "current";
    113                     //设置他的父元素的其他所有兄弟节点类名为空
    114                     var otherArr = getAllSiblings(this.parentNode);
    115                     for(var j=0;j<otherArr.length;j++){
    116                         otherArr[j].className = "";
    117                     }
    118                 }
    119             }
    120 
    121 //            //1.获取事件源
    122 //            var ul = getEle("list");
    123 //            var liArr = ul.children;
    124 //            //2.绑定事件
    125 //            for(var i=0;i<liArr.length;i++){
    126 //                var a = getFirstNode(liArr[i]);
    127 //                a.onclick = function () {
    128 //                    //3.书写事件驱动程序
    129 //                    //排他思想
    130 //                    for(var j=0;j<liArr.length;j++){
    131 //                        liArr[j].className = "";
    132 //                    }
    133 //                    this.parentNode.className = "current";
    134 //                }
    135 //            }
    136         }
    137     </script>
    138 </head>
    139 <body>
    140 
    141     <div id="menu">
    142         <ul id="list">
    143             <li class="current"><a href="#">首页</a></li>
    144             <li><a href="javascript:void(0)">播客</a></li>
    145             <li><a href="javascript:void(0)">博客</a></li>
    146             <li><a href="javascript:void(0)">相册</a></li>
    147             <li><a href="javascript:void(0)">关于</a></li>
    148             <li><a href="javascript:void(0)">帮助</a></li>
    149         </ul>
    150     </div>
    151 
    152 </body>
    153 </html>
    菜单的简单练习
      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <title>Title</title>
      6     <style>
      7         #list li {
      8             list-style-type: none;
      9              80px;
     10             height: 30px;
     11             line-height: 30px;
     12             background-color:beige;
     13             text-align: center;
     14             float: left;
     15             margin-left: 5px;
     16         }
     17 
     18         #list li.current {
     19             background-color: burlywood;
     20         }
     21 
     22         #list li a {#list li {
     23             list-style-type: none;
     24              80px;
     25             height: 30px;
     26             line-height: 30px;
     27             background-color:beige;
     28             text-align: center;
     29             float: left;
     30             margin-left: 5px;
     31         }
     32 
     33         #list li.current {
     34             background-color: burlywood;
     35         }
     36 
     37         #list li a {
     38             text-decoration: none;
     39         }#list li {
     40             list-style-type: none;
     41              80px;
     42             height: 30px;
     43             line-height: 30px;
     44             background-color:beige;
     45             text-align: center;
     46             float: left;
     47             margin-left: 5px;
     48         }
     49 
     50         #list li.current {
     51             background-color: burlywood;
     52         }
     53 
     54         #list li a {
     55             text-decoration: none;
     56         }#list li {
     57             list-style-type: none;
     58              80px;
     59             height: 30px;
     60             line-height: 30px;
     61             background-color:beige;
     62             text-align: center;
     63             float: left;
     64             margin-left: 5px;
     65         }
     66 
     67         #list li.current {
     68             background-color: burlywood;
     69         }
     70 
     71         #list li a {
     72             text-decoration: none;
     73         }#list li {
     74             list-style-type: none;
     75              80px;
     76             height: 30px;
     77             line-height: 30px;
     78             background-color:beige;
     79             text-align: center;
     80             float: left;
     81             margin-left: 5px;
     82         }
     83 
     84         #list li.current {
     85             background-color: burlywood;
     86         }
     87 
     88         #list li a {
     89             text-decoration: none;
     90         }
     91             text-decoration: none;
     92         }
     93     </style>
     94     <script src="tools.js"></script>
     95     <script>
     96         window.onload = function () {
     97             //需求:点击a链接,让a链接对应的li标签添加类。
     98             //思路:点击a链接,让他的父亲添加类,其他的li标签类名清空。
     99             //步骤:
    100             //1.获取事件源
    101             //2.绑定事件
    102             //3.书写事件驱动程序
    103 
    104 
    105             //1.获取事件源
    106             var ul = getEle("list");
    107             var aArr = ul.getElementsByTagName("a");
    108 
    109             for(var i=0;i<aArr.length;i++){
    110                 aArr[i].onclick = function () {
    111                     //点击哪个a链接,让他的父亲添加类
    112                     this.parentNode.className = "current";
    113                     //设置他的父元素的其他所有兄弟节点类名为空
    114                     var otherArr = getAllSiblings(this.parentNode);
    115                     for(var j=0;j<otherArr.length;j++){
    116                         otherArr[j].className = "";
    117                     }
    118                 }
    119             }
    120 
    121 //            //1.获取事件源
    122 //            var ul = getEle("list");
    123 //            var liArr = ul.children;
    124 //            //2.绑定事件
    125 //            for(var i=0;i<liArr.length;i++){
    126 //                var a = getFirstNode(liArr[i]);
    127 //                a.onclick = function () {
    128 //                    //3.书写事件驱动程序
    129 //                    //排他思想
    130 //                    for(var j=0;j<liArr.length;j++){
    131 //                        liArr[j].className = "";
    132 //                    }
    133 //                    this.parentNode.className = "current";
    134 //                }
    135 //            }
    136         }
    137     </script>
    138 </head>
    139 <body>
    140 
    141     <div id="menu">
    142         <ul id="list">
    143             <li class="current"><a href="#">首页</a></li>
    144             <li><a href="javascript:void(0)">播客</a></li>
    145             <li><a href="javascript:void(0)">博客</a></li>
    146             <li><a href="javascript:void(0)">相册</a></li>
    147             <li><a href="javascript:void(0)">关于</a></li>
    148             <li><a href="javascript:void(0)">帮助</a></li>
    149         </ul>
    150     </div>
    151 
    152 </body>
    153 </html>
    style属性的练习
     1 <body>
     2 <div style=" 100px;height: 100px;background-color: pink;"></div>
     3 <script>
     4 
     5     var div = document.getElementsByTagName("div")[0];
     6     div.onmouseover = function () {
     7         div.style.width = "200px";
     8         div.style.height = "200px";
     9         div.style.backgroundColor = "black";
    10         div.style.opacity = "0.2";
    11         div.style.filter = "alpha(opacity=20)";
    12     }
    13 
    14 </script>
    15 
    16 </body>
    改变盒子的大小和透明度
     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <style>
     7         input {
     8             display: block;
     9         }
    10     </style>
    11 </head>
    12 <body>
    13 <ul>
    14     <input type="text"/>
    15     <input type="text"/>
    16     <input type="text"/>
    17     <input type="text"/>
    18     <input type="text"/>
    19     <button>设置</button>
    20 </ul>
    21 <script>
    22     //需求:点击设置按钮,让所有的input标签获取焦点后高亮显示
    23     //步骤:
    24     //1.获取事件源
    25     //2.绑定事件
    26     //3.书写事件驱动程序
    27 
    28     //1.获取事件源
    29     var inpArr = document.getElementsByTagName("input");
    30     var button = inpArr[inpArr.length-1].nextElementSibling || inpArr[inpArr.length-1].nextSibling ;
    31     //2.绑定事件
    32     button.onclick = function () {
    33         //3.书写事件驱动程序
    34         for(var i=0;i<inpArr.length;i++){
    35             //当button按钮被点击以后,所有的input标签被绑定事件,onfocus事件
    36             inpArr[i].onfocus = function () {
    37                 this.style.border = "2px solid red";
    38                 this.style.backgroundColor = "#ccc";
    39             }
    40             //绑定onblur事件,取消样式
    41             inpArr[i].onblur = function () {
    42                 this.style.border = "";
    43                 this.style.backgroundColor = "";
    44             }
    45         }
    46     }
    47 
    48 
    49 
    50 </script>
    51 </body>
    52 </html>
    文本框获取焦点高亮显示
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
                text-align: center;
            }
    
            .wrap {
                 500px;
                margin: 100px auto 0;
            }
    
            table {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #c0c0c0;
                 500px;
            }
    
            th,
            td {
                border: 1px solid #d0d0d0;
                color: #404060;
                padding: 10px;
            }
    
            th {
                background-color: #09c;
                font: bold 16px "微软雅黑";
                color: #fff;
            }
    
            td {
                font: 14px "微软雅黑";
            }
    
            tbody tr {
                background-color: #f0f0f0;
                cursor: pointer;
            }
            
            .current {
                background-color: red!important;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>课程</th>
                        <th>成绩</th>
                    </tr>
                </thead>
                <tbody id="target">
                    <tr>
                        <td>
                            1
                        </td>
                        <td>吕不韦</td>
                        <td>语文</td>
                        <td>100</td>
    
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                        <td>吕布</td>
                        <td>日语</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>吕蒙</td>
                        <td>营销学</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>
                            4
                        </td>
                        <td>吕尚</td>
                        <td>数学</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>
                            5
                        </td>
                        <td>吕雉</td>
                        <td>英语</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>
                            6
                        </td>
                        <td>吕超</td>
                        <td>体育</td>
                        <td>100</td>
                    </tr>
                </tbody>
            </table>
        </div>
    
        <script>
            //需求:让tr各行变色,鼠标放入tr中,高亮显示。
    
            //1.隔行变色。
            var tbody = document.getElementById("target");
            var trArr = tbody.children;
            //循环判断并各行赋值属性(背景色)
            for(var i=0;i<trArr.length;i++){
                if(i%2!==0){
                    trArr[i].style.backgroundColor = "#a3a3a3";
                }else{
                    trArr[i].style.backgroundColor = "#ccc";ß
                }
    
                //鼠标进入高亮显示
                //难点:鼠标移开的时候要回复原始颜色。
                //计数器(进入tr之后,立刻记录颜色,然后移开的时候使用记录好的颜色)
                var color = "";
                trArr[i].onmouseover = function () {
                    //赋值颜色之前,先记录颜色
                    color = this.style.backgroundColor;
                    this.style.backgroundColor = "#fff";
                }
                trArr[i].onmouseout = function () {
                    this.style.backgroundColor = color;
                }
            }
    
    
        </script>
    
    
    </body>
    </html>
    高级隔行变色
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            body {
                background: url(image/1.jpg) no-repeat;
            }
            .box {
                height: 165px;
                padding-top: 35px;
                text-align: center;
                background: rgba(255,255,255,0.3);
            }
            img {
                cursor: pointer;
                margin: 0 10px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="image/1.jpg" alt="" width="200px"/>
            <img src="image/2.jpg" alt="" width="200px"/>
            <img src="image/3.jpg" alt="" width="200px"/>
            <img src="image/4.jpg" alt="" width="200px"/>
            <img src="image/5.jpg" alt="" width="200px"/>
        </div>
    
        <script>
            //需求:点击图片,body的背景图修改。
            //步骤:
            //1.获取事件源
            //2.绑定事件
            //3.书写事件驱动程序
    
            //1.获取事件源
            var box = document.getElementsByTagName("div")[0];
            //body的获取js内部帮我们优化完毕
            var body = document.body;
            var imgArr = box.children;
            //2.绑定事件
            for(var i=0;i<imgArr.length;i++){
                imgArr[i].index = i;
                imgArr[i].onclick = function () {
                    //3.书写事件驱动程序
                    //改body的背景
    //                body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)";
                    body.style.backgroundImage = "url("+this.src+")";
                }
            }
        </script>
    
    </body>
    </html>
    百度皮肤
     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <style>
     7         * {
     8             padding: 0;
     9             margin: 0;
    10         }
    11         body {
    12             background: url(image/1.jpg) no-repeat;
    13         }
    14         .box {
    15             height: 165px;
    16             padding-top: 35px;
    17             text-align: center;
    18             background: rgba(255,255,255,0.3);
    19         }
    20         img {
    21             cursor: pointer;
    22             margin: 0 10px;
    23         }
    24     </style>
    25 </head>
    26 <body>
    27     <div class="box">
    28         <img src="image/1.jpg" alt="" width="200px"/>
    29         <img src="image/2.jpg" alt="" width="200px"/>
    30         <img src="image/3.jpg" alt="" width="200px"/>
    31         <img src="image/4.jpg" alt="" width="200px"/>
    32         <img src="image/5.jpg" alt="" width="200px"/>
    33     </div>
    34 
    35     <script>
    36         //需求:点击图片,body的背景图修改。
    37         //步骤:
    38         //1.获取事件源
    39         //2.绑定事件
    40         //3.书写事件驱动程序
    41 
    42         //1.获取事件源
    43         var box = document.getElementsByTagName("div")[0];
    44         //body的获取js内部帮我们优化完毕
    45         var body = document.body;
    46         var imgArr = box.children;
    47         //2.绑定事件
    48         for(var i=0;i<imgArr.length;i++){
    49             imgArr[i].index = i;
    50             imgArr[i].onclick = function () {
    51                 //3.书写事件驱动程序
    52                 //改body的背景
    53 //                body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)";
    54                 body.style.backgroundImage = "url("+this.src+")";
    55             }
    56         }
    57     </script>
    58 
    59 </body>
    60 </html>
    隐藏盒子的方式
     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <style>
     7         div {
     8             margin-top: 20px;
     9              200px;
    10             height: 200px;
    11             background-color: red;
    12             position: absolute;
    13             top: 100px;
    14             left: 10px;
    15             z-index: 1;
    16         }
    17         img {
    18             position: absolute;
    19             top: 100px;
    20             left: 10px;
    21         }
    22     </style>
    23 </head>
    24 <body>
    25     <button>进化吧,皮卡丘!!!</button>
    26     <div></div>
    27     <img src="image/mm.png" alt="" width="200px"/>
    28 
    29     <script>
    30         //需求:点击按钮,让盒子和图片同事移开,并且,图片压住盒子.
    31         var btn = document.getElementsByTagName("button")[0];
    32         var div = document.getElementsByTagName("div")[0];
    33         var img = document.getElementsByTagName("img")[0];
    34 
    35         //绑定事件
    36         btn.onclick = function () {
    37             div.style.top = "300px";
    38             div.style.left = "300px";
    39 
    40             img.style.top = "300px";
    41             img.style.left = "300px";
    42             img.style.zIndex = "2";
    43         }
    44     </script>
    45 
    46 </body>
    47 </html>
    定位和层级

    dom元素的创建方法

      1.documrnt.write(“<li></li>”)

          A)  script写在那就创建在那

          B)  会被覆盖

      2.parentNode.innerHTML += “<li></li>”

      3.已有节点.appendChild(创建的节点);追加新节点到已有节点的最后面

    var ul = document.getElementsByTagName('ul')[0];          //获取已有元素
    var li = document.createElement('li');                            //创建一个li标签
    var liText = document.createTextNode('我是一个LI标签'); //创建一个文本节点
    ul.appendChild(li);                                                    //把li标签追加到ul最后面
    li.appendChild(liText);                                            //把文本节点追加到li标签中

      4.已有节点.insertBefore(创建的节点,已有节点的子节点节点);在已有节点的子节点之前创建一个新的节点

    var ul = document.getElementsByTagName('ul')[0];                 //获取已有元素
    var li = document.createElement('li');                              //创建一个li标签
    var liText = document.createTextNode('我是一个LI标签');   //创建一个文本节点
    li.appendChild(liText);                                               //把文本节点追加到li标签中
    var list = document.getElementsByTagName('li')[2];     //获取ul的一个子节点
    ul.insertBefore(li,list);                                           //添加在list标签之前

      5.删除   父节点.removeChild(要删除的子节点);

    A)  var ul = document.getElementsByTagName('ul')[0];      //获取已有元素
    var li = document.createElement('li');                            //创建一个li标签
    var liText = document.createTextNode('我是一个LI标签'); //创建一个文本节点
    var list = document.getElementsByTagName('li')[2];     //获取ul的一个子节点
    ul.removeChild(list);                                               //删除ul里的list节点

    list.parentNode.removeChild(list);                       //现照到list的父元素,在进行删除,可以不定义父元素

      6.替换  父节点.replaceChild(新节点,老节点);

    A)  var ul = document.getElementsByTagName('ul')[0];     //创建一个文本节点
    var li = document.createElement('li');                            //创建一个li标签
    var liText = document.createTextNode('我是一个LI标签'); //创建一个文本节点
    li.appendChild(liText);                                                //把文本节点追加到li标签中
    var list = document.getElementsByTagName('li')[2]; //replaceChild 替换节点
    ul.replaceChild(liText,list);                                      //liText替换叼list

      7.克隆  var 变量 = 被克隆的节点.cloneNode(true);  (如果true改为false,那么将克隆一个空节点)

    var newNode = li.cloneNode(true);              //克隆一个li节点给变量newNode

    ul.appendChild (newNode);                         //将克隆的节点添加到ul之后

        

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body>
     8 <button>创建</button>
     9 <ul>
    10     aaaaa
    11 </ul>
    12 <script>
    13     //第一种创建方式:document.write();
    14     document.write("<li>我是document.write创建的</li>");
    15 
    16     var btn = document.getElementsByTagName("button")[0];
    17     var ul = document.getElementsByTagName("ul")[0];
    18 //    btn.onclick = function () {
    19 //        document.write("<li>我是document.write创建的</li>");
    20 //    }
    21 
    22     //第二种:直接利用元素的innerHTNL方法。(innerText方法不识别标签)
    23     ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>";
    24 
    25 
    26     //第三种:利用dom的api创建元素
    27     var newLi = document.createElement("li");
    28     newLi.innerHTML = "我是createElement创建的";
    29 //    console.log(newLi);
    30     //在父元素的最后面添加元素。
    31 //    ul.appendChild(newLi);
    32     //指定位置添加
    33     var li1 = document.getElementById("li1");
    34     ul.insertBefore(newLi,li1);
    35 
    36 
    37 </script>
    38 
    39 
    40 </body>
    41 </html>
    dom元素的创建
     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body>
     8 <ul>
     9     <li id="li1">我是参照标签</li>
    10 </ul>
    11 
    12 <script>
    13     //document.write();不常用,因为容易覆盖原来的页面。
    14     //innerHTML;用的比较多。绑定属性和内容比较方便。(节点套节点)
    15     //document.createElement;也是比较多的,指定数量的时候一般用它。
    16 
    17     var ul = document.getElementsByTagName("ul")[0];
    18     var li1 = document.getElementById("li1");
    19 
    20     //创建,添加,删除,替换
    21     var li2 = document.createElement("li");
    22     li2.innerText = "我是createElement创建的标签,用的是appendChild的方法添加的";
    23     ul.appendChild(li2);
    24     //用insertBefore添加
    25     var li3 = document.createElement("li");
    26     li3.innerText = "我是createElement创建的标签,用的是insertBefore的方法添加的"
    27     //父节点.insertBefore(新节点,参照节点);
    28     ul.insertBefore(li3,li1);
    29 
    30 
    31     //删除,替换
    32     ul.removeChild(li3);
    33     //父节点.replaceChild(newNode,oldNode);
    34     ul.replaceChild(li3,li2);
    35 
    36     //克隆node.cloneNode(true);深层复制。
    37     for(var i=0;i<=3;i++){
    38         var newLi = li3.cloneNode(true);
    39         ul.appendChild(newLi);
    40     }
    41 
    42 
    43 </script>
    44 </body>
    45 </html>
    元素的操作
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            li {
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <button>创建列表</button>
        <ul></ul>
    
        <script>
            //需求:点击列表,添加四大名人,然后鼠标放到谁上面,谁高亮显示。
            //思路:创建一个数组,添加内容。利用for循环穿件li标签在添加内容,高亮显示。
            //步骤:(指定多少个元素的创建最好用for循环)
            //老三步
            var btn = document.getElementsByTagName("button")[0];
            //获取相关元素并定义内容
            var arr = ["黑崎一护","乌尔奇奥拉","冰轮丸","名侦探柯南"];
            var ul = document.getElementsByTagName("ul")[0];
            btn.onclick = function () {
    //            ul.innerHTML = "";
                for(var i=0;i<arr.length;i++){
                    //创建li元素
                    var newLi = document.createElement("li");
                   newLi.innerHTML += "<li>"+arr[i]+"</li>";
                    //添加到ul中
                    ul.appendChild(newLi);
                }
                //获取所有的li标签然后,为他绑定事件,排他思想,高亮显示
                var liArr = ul.children;
                //为所有的li绑定事件
                for(var i=0;i<liArr.length;i++){
                    liArr[i].onmouseover = function () {
                        //排他思想,高亮显示
                        for(var j=0;j<liArr.length;j++){
                            liArr[j].style.backgroundColor = "";
                        }
                        this.style.backgroundColor = "red";
                    }
                }
            }
    
    
        </script>
    
    
    </body>
    </html>
    创建列表,高亮显示
      1 <!DOCTYPE html>
      2 <html>
      3 <head lang="en">
      4     <meta charset="UTF-8">
      5     <title></title>
      6     <style>
      7         body {
      8             margin: 0 auto;
      9             padding: 0px;
     10             font-size: 12px;
     11             background: url(image/bg.gif) repeat center 36px;
     12             text-align: center;
     13             background-color: #c30230;
     14         }
     15         #content {
     16             margin: 0 auto;
     17              960px;
     18             background: url(image/content_bg.jpg) no-repeat left top;
     19             height: 627px;
     20             position: relative;
     21         }
     22 
     23         #content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 {
     24             position: absolute;
     25              227px;
     26             left: 200px;
     27             top: 100px;
     28         }
     29 
     30         #content .tip1 .tip_h {
     31             background: url(image/tip1_h.gif) no-repeat left top;
     32         }
     33 
     34         #content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, #content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h, #content .tip7 .tip_h, #content .tip8 .tip_h {
     35              227px;
     36             padding-top: 45px;
     37             height: 23px;
     38             text-align: left;
     39             cursor: move;
     40         }
     41         #content .tip1 .tip_c {
     42             background: url(image/tip1_c.gif) repeat-y;
     43         }
     44 
     45         #content .tip1 .tip_c, #content .tip2 .tip_c, #content .tip3 .tip_c, #content .tip4 .tip_c, #content .tip5 .tip_c, #content .tip6 .tip_c, #content .tip7 .tip_c, #content .tip8 .tip_c {
     46              200px;
     47             padding-left: 12px;
     48             padding-right: 15px;
     49             min-height: 40px;
     50             text-align: left;
     51             line-height: 20px;
     52             max-height: 160px;
     53             word-wrap: break-word;
     54             word-break: break-all;
     55             overflow: hidden;
     56         }
     57 
     58         #content .tip1 .tip_f {
     59             background: url(image/tip1_f.gif) no-repeat left top;
     60         }
     61 
     62         #content .tip1 .tip_f, #content .tip2 .tip_f, #content .tip3 .tip_f, #content .tip4 .tip_f, #content .tip5 .tip_f, #content .tip6 .tip_f, #content .tip7 .tip_f, #content .tip8 .tip_f {
     63              227px;
     64             height: 53px;
     65             padding-top: 20px;
     66         }
     67         #content .close, #content .close2 {
     68             float: left;
     69             font-size: 12px;
     70             cursor: pointer;
     71             color: #000000;
     72         }
     73         .clr {
     74             clear: both;
     75             overflow: auto;
     76             display: block;
     77             height: 0px;
     78         }
     79         #content .icon {
     80             float: left;
     81              35px;
     82             padding-left: 15px;
     83             height: 35px;
     84             text-align: center;
     85         }
     86         #content .name {
     87             float: right;
     88             padding-right: 15px;
     89             text-align: right;
     90             font-size: 14px;
     91             line-height: 35px;
     92             color: #C0F;
     93         }
     94         #content .num {
     95             float: left;
     96             padding-left: 7px;
     97              195px;
     98         }
     99     </style>
    100 </head>
    101 <body>
    102 <!--纸条墙-->
    103 <div id="content">
    104     <!--纸条-->
    105     <div class="tip1" id="tip" >
    106         <div class="tip_h" title="双击关闭纸条">
    107             <div class="num">第[49568]条 2016-07-7 22:51:52</div>
    108             <div class="close" title="关闭纸条" >×</div>
    109             <div class="clr"></div>
    110         </div>
    111         <div class="tip_c">
    112             普天同庆,天下大同!
    113         </div>
    114         <div class="tip_f">
    115             <div class="icon">
    116                 <img src="image/bpic_1.gif" alt="" title="">
    117             </div>
    118             <div class="name">不愿意透露姓名的吕先生</div>
    119             <div class="clr"></div>
    120         </div>
    121     </div>
    122 </div>
    123 
    124 <script>
    125     //需求:克隆盒子,然后随机位置,点击纸条的时候压住其他的纸条。
    126     //思路:获取纸条,克隆,随机数值绑定到纸条上,添加到父盒子中,然后绑定事件层级最高。
    127     //步骤:
    128     //1.获取纸条,克隆
    129     //2.随机数值绑定到纸条上
    130     //3.添加到父盒子中
    131     //4.然后绑定事件层级最高
    132 
    133     //0.创建多张纸条
    134     for(var i=1;i<=10;i++){
    135         //1.获取纸条,克隆
    136         var tip = document.getElementById("tip");
    137         var content = document.getElementById("content");
    138         var newTip = tip.cloneNode(true);
    139         //问题:id问题。
    140         newTip.id = newTip.id+i;
    141         //2.随机数值绑定到纸条上(top不要超过400,left不要超过700)
    142         var topValue = parseInt(Math.random()*400);//(取值是0-1,那么乘以400,取值就是0-400)
    143         var leftValue = parseInt(Math.random()*700);//小数取整
    144         newTip.style.top = topValue+"px";
    145         newTip.style.left = leftValue+"px";
    146         //3.添加到父盒子中
    147         content.appendChild(newTip);
    148 
    149         //4.然后绑定事件层级最高
    150         newTip.onclick = fn;
    151     }
    152     //tip本身有问题,没有绑定事件。(1.删除。   2.在绑定一次)
    153     tip.onclick = fn;
    154 //    tip.parentNode.removeChild(tip);
    155     //获取所有类名叫做的tip1标签,然后绑定事件。
    156     var index = 1;
    157     function fn() {
    158         //计数器
    159         this.style.zIndex = index;
    160         index++;
    161     }
    162 
    163      
    164     // 点击关闭 隐藏盒子
    165 
    166     var close = document.getElementsByClassName("close");
    167     for (i=0;i<close.length;i++) {
    168         close[i].onclick = function () {
    169             this.parentNode.parentNode.style.display = "none";
    170         }
    171     }
    172 
    173 </script>
    174 
    175 
    176 
    177 </body>
    178 </html>
    祝愿墙
     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <style>
     7         select {
     8              180px;
     9             height: 240px;
    10             font-size: 16px;
    11             background-color: #7dff51;
    12         }
    13     </style>
    14     <script>
    15         window.onload = function () {
    16             //需求:点击>>>左边的所有选项全部进入右边,
    17                  //点击<<<右边的所有选项全部进入左边。
    18             //思路:获取所有的子元素,然后直接添加到另一侧。
    19 
    20             //获取相关元素
    21             var sel1 = document.getElementById("sel1");
    22             var sel2 = document.getElementById("sel2");
    23             var btnArr = document.getElementsByTagName("button");
    24 
    25             //绑定事件
    26             btnArr[0].onclick = function () {
    27                 //获取左侧的select标签的所有子元素
    28                 var arr = sel1.children;
    29                 //遍历添加到右侧(随着左侧标签内元素的减少,数组的长度也会减少,那么)
    30                 for(var i=arr.length-1;i>=0;i--){
    31                     //push()是操作数组的。要往一个标签中添加元素,要用appendChild();
    32                     //而往另外一个标签中添加元素原来的数组长度容易变化,为了防止跳出循环,我们使用反向遍历数组
    33                     sel2.appendChild(arr[arr.length-1-i]);
    34                 }
    35             }
    36 
    37            btnArr[1].onclick = function () {
    38                //获取左侧的select标签的所有子元素
    39                var arr = sel2.children;
    40                //遍历添加到右侧(随着左侧标签内元素的减少,数组的长度也会减少,那么)
    41                for(var i=arr.length-1;i>=0;i--){
    42                    //push()是操作数组的。要往一个标签中添加元素,要用appendChild();
    43                    //而往另外一个标签中添加元素原来的数组长度容易变化,为了防止跳出循环,我们使用反向遍历数组
    44                    sel1.appendChild(arr[arr.length-1-i]);
    45                }
    46            }
    47 
    48                btnArr[2].onclick = function () {
    49                 var arr = sel1.children;
    50                 sel2.appendChild(arr[arr.length-1]);
    51             };
    52             btnArr[3].onclick = function () {
    53                 var arr = sel2.children;
    54                 sel1.appendChild(arr[arr.length-1]);
    55             }
    56 
    57 
    58         }
    59     </script>
    60 </head>
    61 <body>
    62 <!--   multiple -->
    63     <select name="" size="10" id="sel1" multiple>
    64         <option value="">香蕉</option>
    65         <option value="">苹果</option>
    66         <option value="">鸭梨</option>
    67         <option value="">葡萄</option>
    68     </select>
    69     <button>>>></button>
    70     <button><<<</button>
    71     <button>></button>
    72     <button><</button>
    73     <select name="" size="10" id="sel2" multiple>
    74 
    75     </select>
    76 </body>
    77 </html>
    选择水果

    作者:明明
    出处: http://www.cnblogs.com/mingm/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意,必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

  • 相关阅读:
    6、深入理解计算机系统笔记:存储器层次结构,存储技术(1)
    流程图【占无内容】
    程序的三种基本控制架构【只有提纲】
    Console算法[for]穷举法:百钱买百鸡
    Logic算法(狼羊白菜)
    Console算法continue与break的区别?
    Console算法[for]简单画图
    Console算法[for]输出等腰三角形
    Console算法[for]国王与老人的六十四格
    Console算法[for]素数
  • 原文地址:https://www.cnblogs.com/mingm/p/6637702.html
Copyright © 2011-2022 走看看