16-进阶 javascript初体验

一. 本节中遇到的js知识点

1. 在指定元素内添加子元素：

<header></header>

<main>
    <div id="mainXXX"></div>    
</main>

<footer></footer>

在#mainXXX 中添加元素

<script type="text/javascript">
    var divXXX = document.createElement('div')
    divXXX.textContent = 'hi'
    mainXXX.appendChild(divXXX) 
</script>

2. 在标签中添加内容：

divXXX.textContent = 'hi'

3. 监听键盘按键事件：

    document.onkeypress = function(wefwwfg){
        var key = wefwwfg['key']

        var website = hash[key]
        location.href = 'http://'+website
        window.open('http://'+website,'_blank')
    }

其中容器wefwwfg很重要，所有按键事件发生时产生的所有信息都在容器里，wefwwfg['key']里存的就是按键值

4. 打开新的链接，在当前/新窗口：

window.open('http://www.baidu.com','_blank')

5. 在元素上添加click事件：
   本节中设计到此方法的代码片段如下：

        buttonX = document.createElement('button')
        buttonX.textContent = '编辑'
        buttonX.id = row[index]
        buttonX.onclick = function(dcve){
            key2 = dcve['target']['id']
            x = prompt('允许你输入一个网址')
            hash[key2] = x
        }

所有与buttonX.onclick事件产生的相关信息都存储在容器dcve中，比如获取触发click元素的id：dcve['target']['id']，

6. prompt()
   测试结果如下：
   

   js-16-01.png
   如果需要获得输入的内容，可以用户一个容器接收x = prompt('允许你输入一个网址')。

7. 在代码：

            buttonX.onclick = function(dcve){
                key2 = dcve['target']['id']
                x = prompt('允许你输入一个网址')
                hash[key2] = x
                // console.log(key2)
            }

中存在一个问题，每次出发click事件引起的hash的变更在重新刷新网页后hash都会重新初始化为最初在html里声明的hash，怎么保存有click引起的变化？？？？？
此处选择的方法为：将变化后的hash存储在浏览器上，脱离了原js，

            buttonX.onclick = function(dcve){
                key2 = dcve['target']['id']
                x = prompt('允许你输入一个网址')
                hash[key2] = x
//将hash存放在 localStorage  中的一个叫 zzz 的容器里
                localStorage.setItem('zzz',JSON.stringify(hash)) 
            }

使用时如下：

    hash = {'q':'qq.com','w':'weibo.com','e':'ele.me','r':'renren.com'}
    // 取出localStorage 中的 zzz 对应的 hash
    hashInLocalStorage = JSON.parse(localStorage.getItem('zzz')||'null')
    if (hashInLocalStorage) {
        hash = hashInLocalStorage
    }

二. 本节中遇到的css知识点

1. 之前用过需要复习的css知识点：

• 居中问题，3个方法，
  1-需要居中的为inline元素，直接在其父元素（为block元素）上使用text-align: center;
  2-需要居中的元素为block，若width固定，则用margin-left: auto; margin-right: auto;，若非定宽，则转换为display: inline-block;再参考方法1；
  3-需要居中的为inline元素，直接给其套一个div/block元素，然后在div上设置text-align: center; 即又回到了方法1.

2. 新知识点

• text-transform: uppercase;将小写转换为大写
• display: none;