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

笔记目录
详细内容

笔记目录

本文为原创，转载请注明：https://blog.xinpapa.com/2017/12/08/zhinengshe1-5/

详细内容

1.鼠标移入和移出事件的提示框

代码如下：

<!--提示框div1的样式-->
#div1{
  width: 150px;
  height: 50px;
  background: gray;
  border: 1px black solid;
  display: none;
}

  <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"/>
  <div id="div1">提示内容...</div>
  <!--document.getElementById('div1').style.display='block'可以直接写成 div1.style.display='block'，但是兼容性不好，有些浏览器不支持。-->

2.鼠标移入和移出事件改变div大小和颜色

代码如下：

<!--div1的样式-->
#div1{
  width: 200px;
  height:200px;
  background: red;
}

  <div id="div1" onmouseover="toBlack();" onmouseout="toRed();"></div>

//toBlack()方法用于改变div1的样式
function toBlack(){
  var div1Style=document.getElementById("div1").style;
  div1Style.width="300px";
  div1Style.height="300px";
  div1Style.background="black";
}
//toRed()方法用于还原div1的样式
function toRed(){
  var div1Style=document.getElementById("div1").style;
  div1Style.width="200px";
  div1Style.height="200px";
  div1Style.background="red";
}

3.点击按钮更改link标签中引入的css文件路径

网站的点击按钮换肤和开灯关灯功能，可以用更改引入的css文件来实现，代码如下：

  <head>
      <link id="skin" rel="stylesheet" type="text/css" href="style1.css" />
  </head>
  <body>
      <input type="button" value="皮肤1" onclick="skin1();" />
      <input type="button" value="皮肤2" onclick="skin2();" />
  </body>

//点击按钮更改link标签中的css文件路径
function skin1(){
  document.getElementById("skin").href="style1.css";
}
function skin2(){
  document.getElementById("skin").href="style2.css";
}

4.在js中用style修改样式的注意事项

通过document.getElementById("xxx").style.属性=("xxx")这种方法修改、增加或得到样式属性，操作的都是行间属性，而不是css样式表中的属性。
所以在操作同一个元素时，尽量统一使用.style.操作行间属性或者操作css样式表，避免因为两者优先级不同而出现的问题。

5.style[param]用法例子

有如下代码：

#div1{
  width: 200px;
  height: 200px;
  background: red;
}

  <input type="button" value="变宽" onclick="toWidth();" />
  <input type="button" value="变高" onclick="toHeight();" />
  <input type="button" value="变黑" onclick="toBlack();" />
  <div id="div1"></div>

//变宽的方法
function toWidth(){
  document.getElementById("div1").style.width="300px";
}
//变高的方法
function toHeight(){
  document.getElementById("div1").style.height="300px";
}
//变颜色的方法
function toBlack(){
  document.getElementById("div1").style.background="black";
}

如果要将以上代码中js的三个方法优化成一个方法，按正常思路，可以写成如下代码：

<input type="button" value="变宽" onclick="setStyle('width','300px');" />
<input type="button" value="变高" onclick="setStyle('height','300px');" />
<input type="button" value="变黑" onclick="setStyle('background','black');" />

//优化合并后的方法
function setStyle(name,value){
  document.getElementById("div1").style.name=value;
}

但是发现方法并不能执行，原因是style.name这段代码执行时，代码将name当作是style中的一个样式属性来执行，而不是方法的参数name，所以不能写成style.name，正确的js代码如下：
```
//将style.name更改为style[name]即可正常运行
function setStyle(name,value){
  document.getElementById("div1").style[name]=value;
}
```
总结：
在js中，所有“.”之后的属性，都可以用“[]”代替，比如document.getElementById("div1")可以写成document["getElementById"]("div1")

6.提取行间事件

代码：

var btn=document.getElementById("btn1");
  btn.onclick=function(){
}

7.使用window.onload让页面加载完成后再加载js

代码：

window.onload=function (){
  //执行的代码...
};

8.实现input复选框的全选功能

代码：

  <body>
      <input id="checkAll" type="checkbox"ch />全选<br/>
      <div id="div1">
          <input type="checkbox" />1<br/>
          <input type="checkbox" />2<br/>
          <input type="checkbox" />3<br/>
          <input type="checkbox" />4<br/>
          <input type="checkbox" />5<br/>
          <input type="checkbox" />6<br/>
          <input type="checkbox" />7<br/>
      </div>
  </body>

window.onload=function (){
  var checkAll=document.getElementById("checkAll");
  var div=document.getElementById("div1");
  var inputs=div.getElementsByTagName("input");
  checkAll.onclick=function(){
      if(checkAll.checked==true){
          for(var i=0;i<inputs.length;i++){
              inputs[i].checked=true;
          }
      }else{
          for(var i=0;i<inputs.length;i++){
              inputs[i].checked=false;
          }
      }
  };
};

9.选项卡功能

效果如下：

代码如下：

#div1 .active{
  background: yellow;
}
#div1 div{
  width: 200px;
  height: 200px;
  background: #ccc;
  border: 1px #999 solid;
  display: none;
}

  <body>
      <div id="div1">
          <input class="active" type="button" value="教育" />
          <input type="button" value="培训" />
          <input type="button" value="招生" />
          <input type="button" value="出国" />
          <div style="display: block;">教育</div>
          <div>培训</div>
          <div>招生</div>
          <div>出国</div>
      </div>
  </body>

window.onload=function (){
  var oDiv=document.getElementById("div1");
  var aBtn=oDiv.getElementsByTagName("input");
  var aDiv=oDiv.getElementsByTagName("div");
  for(var i=0;i<aBtn.length;i++){
      //给每个button增加index属性，用于显示时找到当前点击的button
      aBtn[i].index=i;
      //给每个button添加点击事件
      aBtn[i].onclick=function(){
          //点击button时清除所有button的class属性和隐藏所有aDiv
          for(var j=0;j<aBtn.length;j++){
              aBtn[j].className="";
              aDiv[j].style.display="none";
          }
          //当前点击的button的class赋值为active，用于高亮显示
          this.className="active";
          //点击button对应的选项卡显示
          aDiv[this.index].style.display="block";
      };
  }
};

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

目录

笔记目录

详细内容

1.鼠标移入和移出事件的提示框

2.鼠标移入和移出事件改变div大小和颜色

3.点击按钮更改link标签中引入的css文件路径

4.在js中用style修改样式的注意事项

5.style[param]用法例子

6.提取行间事件

7.使用window.onload让页面加载完成后再加载js

8.实现input复选框的全选功能

9.选项卡功能