20170709 笔记

属性操作的两种方式

1、"." oDiv.style.background window.console.log()
+ []的写法： oDiv["style"]["background"]
2、[]
+ 数字不能用点，只能用[ ]; 变量必须用[ ];
+ 所有"."能操作的属性，都能用[]来写；

=

• "=" 等号是用来赋值的
• "==" 双等用来比较的，他是非严格比较
  • 非严格比较：只比较结果，不比较数据类型 比如 "2"==2 true
• "===" 三等用来比较的，他是严格比较
  • 严格比较：即比较结果，也比较数据类型 比如 "2" == 2 false

请实现左边宽度固定为200，右边宽度自适应； 最少用三种

• 思路1：左边浮动，右边margin-left

• 思路2：绝对定位
  *{
  margin: 0;
  padding: 0;
  }
  body{
  overflow: hidden;
  }
  .container div{
  position: absolute;
  left: 0;
  top: 0;
  font-size: 30px;
  }
  .left{
  width: 200px;
  height: 400px;
  background: #ff0000;
  word-break: break-all;
  }
  .right{
  width: 100%;
  height: 400px;
  background: #ff00ff;
  margin-left: 200px;
  word-break: break-all;
  }

• 思路3 :绝对定位
  *{
  margin: 0;
  padding: 0;
  }
  body{
  overflow: hidden;
  }
  .container div{
  position: absolute;
  height: 400px;
  word-break: break-all;
  top: 0;
  font-size: 30px;
  }
  .left{
  width: 200px;
  left: 0;
  background: #ff0000;
  }
  .right{
  background: #ff00ff;
  left: 200px;
  }

• 思路4 :flex布局
  *{
  margin: 0;
  padding: 0;
  }
  body{
  overflow: hidden;
  font-size: 50px;
  }
  .container{
  display: flex;
  flex-direction:row;
  }
  .left{
  width: 200px;
  height: 400px;
  background: #f00;
  }
  .right{
  width: 100%;
  height: 400px;
  background: #ffff00;
  }

出现省略号的样式

white-space: nowrap;  不折行
text-overflow: ellipsis;   当文本溢出的时候，以什么形式来展示，ellipsis代表省略号
overflow: hidden;  内容溢出隐藏

switch的坑

• 注意：switch是严格比较

数据类型

• 数据类型的判断 type of
• 数据类型包含：
  • 基本数据类型：string ,number ,boolean,null,undefined
  • 引用数据类型:
    • 对象数据类型：object array Date RegExp
    • 函数数据类型: function
• null和undefined
  • null代表的是现在没有，以后会有

    var data=null;
    只有等到请求结束的时候，才能给data赋值； data=[{},{}....]
    
    

  • undefined 代表现在没有，以后也没有
    • 函数没有返回值
      • 没写return
      • 写了return但没有返回值
    • 对象的某个属性不存在的时候，我们拿到的值就是undefined；
    • 定义了形参，但没有赋值；
• 对象object {}
  • 语法{k:v,k:v}
  • 对象的遍历，用 for..in

  for(var attr in obj){
      attr -> 属性名
      obj[attr] -> 属性值
  }
  

  • 对象的增删改查
    • 增 obj.xxx=xxxx;
    • 改 obj.xxx=xxxxx; 区别，如果属性名不存在，属于增加，如果属性名存在，属于更改；
    • 查 obj.xxx
    • 删除
      • 真删除
        delete obj.xxx
      • 假删除
        obj.xxx=null;
  • 数组的语法:[x,x,x,x]
  • 数组的循环：
    • for循环 常用！！！！
    • for...in 循环
  • 数组的增删改查
    • 增加 ary[x]=xxxx;
    • 更改 ary[x]=xxxx;
    • 查：通过数组的索引进行查找 ary[x]
    • 删除：通过delete不能删除，只能通过数组常用的方法来删除
      • splice
        • 如果是两个参数 代表删除
        • 如果是三个参数，且第二个参数为0 ，插入
        • 如果是三个参数，且第二个参数不为0， 替换
• 运算符：
  • "+" 具备两个功能：
    • 字符串拼接 优先
    • 运算

运算符

• 算术运算符： + - * ／ %
  • %的小技巧：有几种情况就%几；
  • 除了+法，其他几个都有隐式数据类型转换的功能
• 比较运算符： > < >= <= == === != !==
• 逻辑运算符： && || !
  • 常用&&代替if

  bOk && alert('真真');
  

  • 常用||代替else

  bOk || alert('假假');
  

• 赋值运算符： + - += -= *= ／= %=
• 运算符的优先级 算术> 比较 > 逻辑 > 赋值

数字 number

• 常用的方法 toFixed(保留几位小数) 可以四舍五入的保留小数
• 字符串转数字的方法中，有一个严格转换，两个非严格转换
  • 一个严格：Number()
  • 两个非严格:
    • parseInt() 整数
    • parseFloat() 保存小数
• 布尔值转数字： true-》1 false-》0
• 对象也能转数字： []->toString()转成""字符串 -》 把""字符串通过Number() 转成0

什么是真？什么是假？

• 除了这几个为假的，其他都是真：
  • false "" 0 NaN null undefined

== 数据类型之间的比较

1）对象和对象比较，按照地址进行比较 [] == [] 引用数据类型，是对地址的比较
2）对象和布尔值进行比较,按照数字进行比较 []==![]
3）对象和字符串进行比较,转成数字 []==""

4. 对象和数字进行比较，转成数字 []==0
5. 字符串和数字进行比较，转成数字 ""==0
6. 字符串和布尔值进行比较，转成数字 ""==false
7. 数字和布尔值进行比较 1==true false==0
8. null==undefined true; null===undefined false
9. NaN==NaN NaN跟谁都不相等，包括他自己