JS基础知识总结

Posted 2020-07-19

1. 隐藏元素

   1. display:none;
   2. visibility:hidden;
   3. width:0;height:0;
   4. 透明度
   5. left \ top
   6. 拿一个白色的DIV盖住它
   7. margin负值

2. 事件

   1. 鼠标事件
      1. onclick
      2. onmouseover
      3. onmouseout
      4. onmousedown
      5. onmouseup
   2. 键盘事件
   3. 系统事件
      1. onload 加载完以后再执行
      2. window.onload = 事件
      3. img.onload =
      4. body.onload =
   4. 表单事件

3. 函数

   • 命令 - 做一些事儿
   • function abc(){...//不会主动执行}
   • 函数执行
     1. 直接调用：abc()
     2. 事件调用: 元素.事件 = 函数名
     3. 元素.事件 = function(){...匿名函数}

4. 测试

   • alert(123)  边写边测试

5. html属性

   • 属性名：属性值
   • 操作：
     • 属性读操作
       • 获取、找到
       • 元素.属性名
     • 属性写操作
       • (‘添加‘)替换、修改
       • 元素.属性名 = 新的属性值
   • innerHTML  读取元素内所有HTML的内容
   • JS不允许出现 ‘-‘
   • 保留字、关键字：var function
   • JS中允许把  ‘.‘ 替换成 ‘[]‘

6. 判断

   1. 所有的相对路径都别拿来做判断！！！
   2. 颜色值也不要拿来做判断！！！
   3. innerHTML值不要拿来做判断！！！

7. 兼容性问题

   1. oDiv.type = ‘type‘ -- 为元素添加新的属性和属性值  //IE6 IE7 IE8不支持
   2. IE - oDiv.style.styleFloat = "left";
   3. 非IE - oDiv.style.cssFloat = "left";
   4. 注意：
      • 技术上：必须能做到掌握兼容性
      • 需求上：提供最好的呈现方案

8. 实现按钮只能按一次的效果

   1. 按钮
      • oBtn.disabled = "true";
      • oBtn.style.display = "none";
   2. 先清空 再生成 （条件语句）
   3. 利用old进行过渡