js 基础 属性+简易留言板

1,属性

       事物所具有的不可缺少的性质

       利用属性可以描述一个对象的特性和功能

2,属性操作

          增加属性、删除属性、改写属性、查找属性

3,操作属性的方式

        点(。)

                元素的自身属性,并且符合命名规则

      中括号([  ])

               属性名不符合命名规则,或者属性名存在变量中

4,注意事项

               属性名要符合变量命名规则

5,元素的style属性

          用来操作行间样式

          样式名不符合命名规则

                         通过 [ ] 的方式操作

                         通过  驼峰   的方式(去掉 - ,- 后的首字母大写)

6,元素的其他属性

            id、className、value、innerHTML以上属性都可以进行读写操作

       innerHTML      获取当前元素下的所有字符

简易留言板

1、获取元素(输入框、按钮、列表)
 *         输入框输入的内容,获取value
 *         按钮添加事件,点击后新增留言
 *         列表,放新增留言内容
 * 
 *     2、给按钮添加点击事件
 * 
 *     3、获取输入框的value
 * 
 *     4、通过设置ul的innerHTML新增留言内容

<body>

          <input   type = "text"      id = "text"/>

           <input   type = "button "  id = "btn"   value = "留言板"/ >

            <ul    id = "list">   </ul>

        <script>

            // 1、获取元素(输入框、按钮、列表)
                     window.onload = function(){
                           var text = document.getElementById('text');
                             var btn = document.getElementById('btn');
                              var list = document.getElementById('list');
    
            // 2、给按钮添加点击事件
    
                         btn.onclick = function() {
                      // 3、获取输入框的value
                                console.log(text.value)
                      // 4、通过设置ul的innerHTML新增留言内容
                               console.log('在innerHTML之前:'+list.innerHTML);
                         list.innerHTML += '<li>'+ text.value +'</li>';
                         console.log('在innerHTML之后:'+list.innerHTML);
                                  // 5、清空当前输入框的value
                                     text.value = '';
                      }
                }

      </script>

</body>

猜你喜欢

转载自blog.csdn.net/quxiaojiao_39/article/details/89762427