《智能社：JavaScript教程——从入门到精通》第6~10集笔记-黄运鑫的博客

笔记目录
详细内容

笔记目录

本文为原创，转载请注明：https://blog.xinpapa.com/2017/12/09/zhinengshe6-10/

详细内容

1.JavaScript组成

组成
- ECMAScript：解释器、翻译，将代码翻译成机器语言和将机器语言翻译成代码，是JavaScript的核心；
- DOM：DocumentObject Model，操作HTML的能力；
- BOM：BrowserObject Model，和浏览器之间的操作；
兼容性：
- ECMA：几乎没有兼容性问题
- DOM：有一些操作不兼容
- BOM：完全不兼容

2.数据类型转换

用alert(typeof param);可以知道param的参数类型
显式类型转换（强制类型转换）
- parseInt()：将字符转换成int型参数，比如parseInt(“12px34”)得到值12；
- parseFloat()：将字符转换成float型参数;
- NaN的意义和检测：全称是Not a Number，意思是非数字；用isNaN(a)，可以判断一个参数是不是NaN；
隐式类型转换（自动类型转换）
- ==：不比较参数类型，只比较值，比如：alert(5=="5");结果为true；
- ===：参数类型和值都比较，比如：alert(5==="5");结果为false；
- 减法：先自动转换再运算，比如：alert("5"-"3");结果为2；

3.变量作用域和闭包

变量作用域
- 局部变量：只能在定义它的函数里面使用；
- 全局变量：任何地方都能用，定义在方法外；
闭包
- 子函数可以使用父函数中的局部变量

4.秒转时间

代码如下：

var s = 1345;
alert(parseInt(s / 60) + "分" + s % 60 + "秒");

5.Json

Json没有length；

用for in输出json；

var json = {a: 12, b: 5, c: 7};
for (var i in json) {
  alert(json[i]);
}

6.可变参数（不定参arguments）

arguments是一个数组，代码如下：

function test() {
  //得到并输出传递的参数
  alert(arguments[0]);
  alert(arguments[1]);
  alert(arguments[2]);
}
test(1, 2, 3);//调用方法并传递不定数量的参数

7.CSS函数操作元素样式

代码如下：

  <body>
      <div id="div1" style="width: 200px;height: 200px;background: red;"></div>
  </body>

function css(obj, name, value) {
  //如果参数是两个，则获取元素样式
  if (arguments.length == 2) {
      return obj.style[name];
  } else {//否则设置元素样式
      obj.style[name] = value;
  }
}
window.onload = function () {
  var oDiv = document.getElementById("div1");
  alert(css(oDiv, "width"));//获取样式
  css(oDiv, "background", "green");//设置样式
};

8.获取非行间的样式（只能获取，不能设置）

obj.currentStyle[attr]（只有IE和最新的chrome兼容），代码如下：

var oDiv = document.getElementById("div1");
alert(oDiv.currentStyle.width);

getComputedStyle(obj,false)[attr]（低版本IE不支持）
此方法是获取计算后的样式，就是获取同一个样式中优先级最高的，代码如下：
```
var oDiv = document.getElementById("div1");
alert(oDiv.getComputedStyle(oDiv, null).width);
```

解决浏览器兼容性代码如下（js中大部分兼容问题，使用if-else来解决）:

window.onload = function () {
  var oDiv = document.getElementById("div1");
  //如果浏览器不支持，则oDiv.currentStyle的返回值是undefined
  if (oDiv.currentStyle) {//如果不是undefined则浏览器支持
      //IE
      alert(oDiv.currentStyle.width);
  } else {//如果是undefined则浏览器不支持，执行另一段代码
      //FF
      alert(getComputedStyle(oDiv, null).width);
  }
};

以上代码优化后如下：

function getStyle(obj, name) {
  if (obj.currentStyle) {
      return obj.currentStyle[name];
  } else {
      return getComputedStyle(obj, null)[name];
  }
};
window.onload = function () {
  var oDiv = document.getElementById("div1");
  alert(getStyle(oDiv, "width"));
};

9.数组的方法和属性

添加
- push(元素)，从尾部添加
- unshift(元素)，从头部添加
- splice(开始索引,0,元素1,元素2,…)，将开始索引处插入元素1、2…
- splice(开始索引,2,元素1,元素2,…)，将索引之后的2个属性替换成元素1、2…
删除
- pop()，从尾部删除
- shift()，从头部删除
- splice(开始索引,长度)，删除指部分

排序

sort([比较函数])，排序一个数组

排序一个字符串数组
```
var a = ['b', 'c', 'a'];
a.sort();
```

排序一个数字数组（错误的代码演示）

var a = [12, 8, 99, 19, 112];
a.sort();
alert(a);
//结果为：“112,12,19,8,99”，因为sort是按字符串来排序；

正确代码如下：

var a = [12, 8, 99, 19, 112];
a.sort(function (n1, n2) {
  if (n1 < n2) {
  return -1;
  } else if (n1 > n2) {
  return 1;
  } else {
  return 0;
  }
});
alert(a);
//优化后:
var a = [12, 8, 99, 19, 112];
a.sort(function (n1, n2) {
  return n1 - n2;
});
alert(a);

转换类
- concat(数组)
  - 连接两个数组，代码如下：
    var a = [1, 2, 3]; var b = [4, 5, 6]; alert(a.concat(b));
- join(分隔符)
  - 用分隔符、组合数组元素、生成字符串
    var a = [1, 2, 3]; var b = [4, 5, 6]; alert(a.join("-")); //输出结果是“1-2-3”
  - 字符串split：把一个字符串分割成字符串数组
- length属性:
  - length既可以获取，又可以设置
  - length赋值0，可以快速清空数组
  - 数组中应该只存一种类型的变量

10.定时器的作用

开启定时器

setInterval：间隔型，无限次执行

function show() {
  alert(123);
}
setInterval(show, 1000);

setTimeout：延时型，只执行一次

function show() {
  alert(123);
}
setTimeout(show, 1000);

停止定时器

clearInterval

var test = setInterval(show, 1000);
clearInterval(test);

clearTimeout

var test = setTimeout(show, 1000);
clearTimeout(test);

11.延时提示框（类似鼠标悬停QQ头像的效果）

代码如下：

div{float: left; margin: 10px;}
#div1{width: 50px; height: 50px; background: red;}
#div2{width: 200px; height: 200px; background: #ccc; display: none;}

  <body>
      <div id="div1"></div>
      <div id="div2"></div>
  </body>

window.onload = function () {
  var oDiv1 = document.getElementById("div1");
  var oDiv2 = document.getElementById("div2");
  var timer = null;
  oDiv1.onmouseover = function () {
      clearTimeout(timer);
      oDiv2.style.display = "block";
  };
  oDiv1.onmouseout = function () {
      timer = setTimeout(function () {
          oDiv2.style.display = "none";
      }, 500);
  };
  oDiv2.onmouseover = function () {
      clearTimeout(timer);
  };
  oDiv2.onmouseout = function () {
      timer = setTimeout(function () {
          oDiv2.style.display = "none";
      }, 500);
  };
};

优化后的js如下:

window.onload = function () {
  var div1 = document.getElementById("div1");
  var div2 = document.getElementById("div2");
  var timer1 = null;
  var timer2 = null;
  div1.onmouseover = div2.onmouseover = function () {
      clearInterval(timer2);
      timer1 = setTimeout(function () {
          div2.style.display = "block";
      }, 500);
  };
  div1.onmouseout = div2.onmouseout = function () {
      clearTimeout(timer1);
      timer2 = setTimeout(function () {
          div2.style.display = "none";
      }, 500);
  };
};

12.无缝滚动

offsetLeft/offsetTop：获取元素的左边距和上边距

offsetWidth/offsetHeight：获取元素的宽度和高度

*{
  margin: 0;
  padding: 0;
}
#div1{
  width: 600px;
  height: 150px;
  margin: 100px auto;
  position: relative;
  background: red;
  overflow: hidden;
}
#div1 ul{
  position: absolute;
  left: 0;
  top: 0;}
#div1 ul li{
  float: left;
  width: 150px;
  height: 150px;
  list-style: none;}
img{width: 100%; height: 100%;}

  <body>
      <a href="javascript:void(0);">向左</a>
      <a href="javascript:void(0);">向右</a>
      <div id="div1">
          <ul>
              <li><img src="images/1.png" /></li>
              <li><img src="images/2.png" /></li>
              <li><img src="images/3.png" /></li>
              <li><img src="images/4.png" /></li>
          </ul>
      </div>
  </body>

window.onload = function () {
  var oDiv = document.getElementById("div1");
  var oUl = oDiv.getElementsByTagName("ul")[0];
  var aLi = oUl.getElementsByTagName("li");
  //拼接两个ul的内容
  oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
  //将ul宽度设置为拼接后的宽度
  oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
  var speed = -2;//用于控制滚动的方向
  //让Ul移动的方法
  function move() {
      //向左滚动的判断，如果滚动到一半，就将Ul移到初始位置
      if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
          oUl.style.left = "0";
      }
      //向右滚动的判断，如果滚动到一半，就将Ul移到初始位置
      if (oUl.offsetLeft > 0) {
          oUl.style.left = -oUl.offsetWidth / 2 + "px";
      }
      oUl.style.left = oUl.offsetLeft + speed + "px";
  }

  var timer = setInterval(move, 30);//重复调用方法实现Ul移动
  oDiv.onmouseover = function () {//鼠标进入则停止滚动
      clearInterval(timer);
  };
  oDiv.onmouseout = function () {//鼠标移出则继续滚动
      timer = setInterval(move, 30);
  };
  document.getElementsByTagName("a")[0].onclick = function () {
      speed = -2;//向左滚动
  };
  document.getElementsByTagName("a")[1].onclick = function () {
      speed = 2;//向右滚动
  };
};

做你害怕做的事情，然后你会发现，不过如此。

目录

笔记目录

详细内容

1.JavaScript组成

2.数据类型转换

3.变量作用域和闭包

4.秒转时间

5.Json

6.可变参数（不定参arguments）

7.CSS函数操作元素样式

8.获取非行间的样式（只能获取，不能设置）

9.数组的方法和属性

10.定时器的作用

11.延时提示框（类似鼠标悬停QQ头像的效果）

12.无缝滚动