首页 > 代码库 > JavaScript 知识点01

JavaScript 知识点01

JS基础

  • 页面由三部分组成:
    • html:超文本标记语言,负责页面结构
    • css:层叠样式表,负责页面样式
    • js:轻量级的脚本语言,负责页面的动效和数据交互
      小总结:结构,样式和行为,三者相分离
    • 在html页面中写结构
    • 通过 link标签的href属性,引入css样式
    • 通过script标签的src属性,引入js脚本
  • css引入页面的方式有三种
    • 行内<div style="width:200px;height:300px;"></div>
    • 内嵌:在header里面写一个<style>选择器{key:value}</style>
    • 外链:在header里面写一个<link rel="stylesheet" href="http://www.mamicode.com/css/index.css"/>
  • JS引入页面的方式,同CSS相似
    • 内嵌:在开发过程中,建议把script放在body底部;如果非要把script标签对,放在head里面的话;需要加window.onload

      window.onload=function(){
      document.body.innerHTML=‘XXXXXX‘;
      }
    • 行内:<div onclick="xxxx" onm ouseover="xxxx"></div>
    • 外链:<script src="http://www.mamicode.com/01.js"></script>
      注意:如果script作为JS的外链,一定不要在两个script标签中写代码,写了也没用
  • 属性和方法的区别:属性没括号,方法有括号
  • 字符串和变量的区别:字符串有引号,变量没引号
    • 字符串一般用单引号;为了元素身跟上的属性值区分开来;属性值一般是""
    • 变量,就是别名;var str; 告诉浏览器,定义了str这么一个变量
    • 如果没有定义变量,xxx is not defined
  • JS常见的输出方式7种
    • alert(‘‘) ;
    • confirm(‘确定要删除?‘); 他有两个返回值:true 真, false假
    • console.log(‘‘); 可以在控制台打印出我们想要打印的内容
    • console.dir(); 打印出对象身上的属性和方法
    • document.write()
      如果遇到window.onload会清空页面
    • 元素.innerHTML=xxxx
    • console.table();可以把数组和对象,以表格的形式打印出来
      ```
      var ary2=[
      {
      name:‘a‘,
      age:1,
      sex:‘gril‘
      },
      {
      name:‘王b‘,
      age:2,
      sex:‘boy‘
      }];
      console.table(ary2);
    ```
  • chrome控制台
    • Elements:用来调试html+css的
    • console:用来调试JS的
    • sources:可以拿到该网站相关的资源:images ,html ,css, js

体验JS编程思想

    • 需求:鼠标移入div1的时候,div2显示;鼠标移出div1的时候,div2隐藏
    • 实现思路:
      1. 高度:div2的高度为0; 移入div1后高度为100;移出div1时div2高度0;
      2. display:block显示,none,隐藏;
      3. 透明度:rgba(); opacity();
      4. 定位:left和top;
      5. margin:margin-left和 margin-top;
      6. overflow:hidden和visible;
    • JS获取元素的方式:
      • document.getElementById(‘id名字‘);
        因为id是唯一的,所有拿到的是一个元素
      • document.getElementsByTagName(‘标签名‘);
        标签名拿到的是一个元素集合;即使只有一个元素,也是个集合
        想要取到其中的一个:aDiv[0] aDiv[2]
    • JS中的数据类型
      • 基本数据类型:
        1. 字符串string
        2. 数字 number
        3. 布尔值 boolean
        4. undefined 现在没有,以后也没有
        5. null 空对象,现在没有,以后会有
      • 引用数据类型
        1. 对象数据类型
          • 数组
          • 正则
          • 对象{}
        2. 函数数据类型
          function 函数名(){};
    • 数据类型检测的方式
      1. typeof 可以检测基本数据类型(所有经过typeof的都是字符串),但是对于对象数据类型,检测出来的都是object,无法知道具体属于哪种对象
      2. 对象 instanceof 类; 比如ary instanceof Array 判断这个实例是否属于某个类
      3. 对象.constructor: 比如ary.constructor可以打印出对象所属的类
      4. Object.prototype.toString.call(ary); 出来的结果 ‘[object Array]‘
    • 基本数据类型和引用数据类型的区别:
      • 基本数据类型:是对值的操作
      • 引用数据类型:是对地址的操作
    • 操作属性用的是"." oDiv.style.display=‘block‘
    • 其他数据类型转为number数据类型
      • 强制转换
      • Number()
      • parseInt()
      • parseFloat()
      • 一个严格转换
      • Number()
      • 两个非严格转化
      • parseInt() 只能转化为整数
      • parseFloat() 可以保留小数
      如果转换失败的话,返回的结果是NaN:not a number 不是数字;但是NaN是number数据类型
    • 关于NaN:
      • NaN是number数据类型
      • isNaN() 判断是否为非有效数字; 非有效数字:true; 有效数字:false

JavaScript 知识点01