前端实用代码合集

无论代码写的好与坏，都在心里默念3遍：

• 写的就是坨屎；
• 写的就是坨屎；
• 写的就是坨屎；

这样你会有源源不断的动力完善自己的代码，反正我就是这样。同事A君：真是个欠货。

JavaScript

Tab切换

//eg1
var tabs=document.getElementById("tab").getElementsByTagName("li");
var divs=document.getElementById("tabCon").getElementsByTagName("div");
 
for(var i=0;i<tabs.length;i++){
 tabs[i].onclick=function(){change(this);}
}
 
function change(obj){
    for(var i=0;i<tabs.length;i++){
     if(tabs[i]==obj){
         tabs[i].className="fli";
         divs[i].className="fdiv";
    }else{
         tabs[i].className="";
         divs[i].className="";
     }
   }
}

//这是我最认可的实现方式，你也可以通过传参实现，但那造成结构与功能的不分离。

//eg2
$('.box li').mouseover(function(){
	var $this = $(this);
	var $num = $this.index();
	$('.box section').css('display','none');
	$('.box section').eq($num).css('display','block');
});

//eg3
$('.tab').css('display','none').eq(0).css('display','block');
$('li').click(function (){
	$(this).addClass('active').siblings().removeClass('active');
	for (var i=0;i<3;i++) {
		$('#content div').eq(i).css('display','none')
	}
	$('#content div').eq($(this).index()).css('display','block')
});

手风琴效果

//eg1
for(var j=0;j<4;j++){
	show[j].onclick=function (){
	  var ul=this.getElementsByTagName('ul')[0];
	  var h2=this.getElementsByTagName('h2')[0];
	  arr();
	  h2.className="bg";
      ul.style.height="170px";
	}
}
function arr(){
	for(var i=0;i<show.length;i++){
		show[i].getElementsByTagName('h2')[0].className='';
		show[i].getElementsByTagName('ul')[0].style.height='0';
	}
}

//eg2
$(this).parent().siblings().find('ul').removeClass('on');
$(this).parent().find('ul').toggleClass('on');
//你也可以通过动态添加类来实现。

轮播图

//无缝轮播
$(".oraign").clone().appendTo('.list');
if(!$('.list').is(":animated") ){
	if($('.list').css('left')=='-3294px'){
		$('.list').css({left:'-0px'},500)
	}
	$('.list').stop(true,true).animate({left:'-='+$width},500)
}
//这里要注意的一点是结构一定要正确，它应该是这样：
<div>
  <div>
    <ul>
      <li></li>
      ...
    </ul>
  </div>
</div>

至于其他嘛，无论是通过fadeIn、fadeOut实现还是通过定位实现，还是使用其他控件实现都无可厚非，完成功能就OK。但自己还是喜欢通过自己写的代码实现，这是件很有成就感的事情。

使用FileReader实现前端图片预览

<input type="file"><br>
<img src="" height="200" alt="Image preview area..." title="preview-img">

var fileInput = document.querySelector('input[type=file]');
var previewImg = document.querySelector('img');
fileInput.addEventListener('change', function () {
    var file = this.files[0];
    var reader = new FileReader();
    reader.addEventListener('load', function () {
        previewImg.src = reader.result;
    }, false);
    reader.readAsDataURL(file);
}, false);

取到页面中所有的checkbox

var doc = document,
    domList = doc.getElementsByTagName('input'),
    checkBoxList = [],
    len = domList.length;
while (len--) {
    if (domList[len].type === 'checkbox') {
        checkBoxList.push(domList[len]);
    }
}

判断某变量是否为数组数据类型

if (typeof Array.isArray === "undefined") {
    Array.isArray = function (arg) {
        return Object.prototype.toString.call(arg) === "[object Array]"
    };
}

对象拷贝与赋值

var obj = {
    name: 'xiaoming',
    age: 23
};
var newObj = obj;
newObj.name = 'xiaohua';
console.log(obj.name);//xiaohua
console.log(newObj.name);//xiaohua
//newObj对象获得的只是一个内存地址，而不是真正的拷贝。

深拷贝

var obj = {
    name: 'xiaoming',
    age: 23
};
var newObj = Object.create(obj);
newObj.name = 'xiaohua';
console.log(obj.name);//xiaoming
console.log(newObj.name);//xiaohua
//Object.create()方法可以创建一个具有指定原型对象和属性的新对象。

闭包实现封装

var person = function () {
    var name = "Default";
    return {
        getName: function () {
            return name;
        },
        setName: function (newName) {
            name = newName;
        }
    }
}();
console.log(person.name);//undefined
console.log(person.getName());//Default
person.setName("GoodMan");
console.log(person.getName());//GoodMan

写到这里又让我想到了之前遇到的一个问题：获取li的索引

var liArr = document.querySelectorAll('li');
var len = liArr.length;
for (var i = 0; i < len; i++) {
    btns[i].onclick = function (index) {
        // 闭包可以将变量驻留在内存中，防止被垃圾回收机制回收
        return function () {
            console.log(index);
        }
    }(i);
}

//也可以这样
window.onload=function(){
    var ul=document.getElementById('test');
    var ul_lis=ul.getElementsByTagName('li');
    for (var i = 0;i < ul_lis.length; i++) {
      ul_lis[i].index = i;
      ul_lis[i].onclick=function(){
        var j=this.index+1;
        alert(j);
      }
    }
};

//还可以这样
$(this).index();

条条大路通罗马，选择最高效的，遵循最佳实践。

jQuery

设置等高的列

<div class="equalHeight" style="border: 1px solid">
    <p>First Line</p>
    <p>Second Line</p>
    <p>Third Line</p>
</div>
<div class="equalHeight" style="border: 1px solid">
    <p>Column Two</p>
</div>


$(function () {
    equalHeight(".equalHeight");
});
var maxHeight = 0;
function equalHeight(col) {
    col = $(col);
    col.each(function () {
        if ($(this).height() > maxHeight) {
            maxHeight = $(this).height()
        }
    });
    col.height(maxHeight);
}

参考文章