锐客网

  1. 首页 > it技术 > >

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

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

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

在#mainXXX 中添加元素

  1. 在标签中添加内容：
divXXX.textContent = 'hi'

  1. 监听键盘按键事件：
document.onkeypress = function(wefwwfg){ var key = wefwwfg['key']var website = hash[key] location.href = 'http://'+website window.open('http://'+website,'_blank') }

其中容器wefwwfg很重要，所有按键事件发生时产生的所有信息都在容器里，wefwwfg['key']里存的就是按键值
  1. 打开新的链接，在当前/新窗口：
window.open('http://www.baidu.com','_blank')

  1. 在元素上添加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']，
  1. prompt()
    测试结果如下：

    16-进阶|16-进阶 javascript初体验
    文章图片
    js-16-01.png
    如果需要获得输入的内容，可以用户一个容器接收x = prompt('允许你输入一个网址')。【16-进阶|16-进阶 javascript初体验】
  2. 在代码：
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.
  1. 新知识点
  • text-transform: uppercase; 将小写转换为大写
  • display: none;

    推荐阅读


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

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