JS小技巧总结

可以封装一个函数来获取父元素下不同类名称的元素数组

例如，有下面这样一种结构：

<div id="main">
     <div class="box">
       <div class="pic">
          <img class="img" src="">
       </div>
     </div>
</div>

在操作元素时，我们想获取id为main下不同类名称的元素的集合，那么我们可以用下面这种方法来实现

//首先获取到最外层的盒子
var oParent = document.getElementById("main");
//通过class来获取元素
function getByClass(parent,clsName){
   var boxArr = new Array();//用来存储获取到的所有class为clsName的元素
   oElements = parent.getElementsByTagName('*');//将父元素下所有的元素都获取到
   for(var i = 0;i<oElements.length;i++){
      if(oElements[i].className == clsname){
        boxArr.push(oElements[i]);
      }
   }
   return boxArr;
}
获取到oparent元素下所有className为box的元素
var oBoxs = getByClass(oParent,box);

scrollWidth,clientWidth,offsetWidth的区别

在做瀑布流的时候要获取元素的宽度，使用了offsetWidth这个属性，于是看了一下和其他两个获取对象宽度的方法的区别

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。

在页面内放入一个textarea元素，采用默认宽高显示，举例说明：

情况1：

元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。

scrollWidth=clientWidth，两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2：

元素的内容超过可视区，滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

简便方法求数组中的最小值

存在一个数组var array = [17,6,1,9];
如何快速的求得数组中的最小元素？
我们知道使用Math.min()方法可以取得一组数中最小值
console.log(Math.min(3,1,5));//1
但是该方法接受的是一组数，而不能将数组作为参数直接传入
我们可以使用下面这种方法：
Math.min.apply(null,array);

瀑布流：