16-进阶|16-进阶 javascript初体验

2021-09-02

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

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

在#mainXXX 中添加元素

在标签中添加内容：

divXXX.textContent = 'hi'

监听键盘按键事件：

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

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

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

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

在元素上添加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']，

prompt()
测试结果如下：

文章图片
js-16-01.png
如果需要获得输入的内容，可以用户一个容器接收x = prompt('允许你输入一个网址')。【16-进阶|16-进阶 javascript初体验】
在代码：

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知识点

之前用过需要复习的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.

新知识点

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

推荐阅读

上一篇：中原焦点解决网络中级第19期吕娟坚持分享第725天

下一篇：复盘Day5|复盘Day5 2019-12-16