体验盒子

常用到的一些原生JavaScript函数,比较实用, 今天特地整理一下,分享给大家,希望对大家有用
1. 替代window.onload,可多次调用的加载函数:

function iLoad(func) {
var oLoad=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oLoad();
func();
}
}
}

2. 获取下一个元素节点:

function nextElem(node){
if(node.nodeType==1) return node;
if(node.nextSibling) return nextElem(node.nextSibling);
return null;
}

3. 获取上一个元素节点(此函数须调用第五条中的函数):

function prevElem(node){
if(node.nodeType==1){
return node;
}else if(node.previousSibling){
return nextElem(node.previousSibling);
}else{
return null;
}
}

4. 原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法,怎么办?用如下函数实现:

function insertAfter(newChild,refChild){
var parElem=refChild.parentNode;
if(parElem.lastChild==refChild){
refChild.appendChild(newChild);
}else{
parElem.insertBefore(newChild,refChild.nextSibling);
}
}

5. 为元素添加样式[记住是添加不是替换,相当于jQuery中的addClass(value)]:

function addClass(elem,value){
if(!elem.className){
elem.className=value;
}else{
var oValue=elem.className;
oValue+=" ";
oValue+=value;
elem.className=oValue;
}
}

6. 获取元素的样式:

function getStyle(id,stylename){
var elem=$(id);
var realStyle=null;
if(elem.currentStyle){
realStyle=elem.currentStyle[stylename];
}else if(window.getComputedStyle){
realStyle=window.getComputedStyle(elem,null)[stylename];
}
return realStyle;
}

7. 兼容事件绑定:

function addEventSamp(obj,evt,fn){
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}

8. 移除事件

function removeEventSamp(obj,evt,fn){
if(obj.removeEventListener){
obj.removeEventListener(evt,fn,false);
}else if(obj.detachEvent){
obj.detachEvent('on'+evt,fn);
}
}

9. 检测样式

function hasClass(element, className){
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
return element.className.match(reg);
}

10. 删除样式

function removeClass(element, className){
if (hasClass(element, className)) {
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
element.className = element.className.replace(reg, ' ');
}
}

当我们做一些功能性网站的时候，经常会用到复选框和单选框。
感觉复选框常用的也就是全选，单选框用到的可能就是点击切换会多一点。
今天看到了一个功能网站上的全选实现效果，那就分析备份一下。
DEMO:http://www.uedbox.com/demo/allcheck/allchecked.html

//使用到的地方就是点击文字及可以选中当前的复选框
var secheckbox = function(id){
		if(document.getElementById(id).checked){
			document.getElementById(id).checked = '';
		} else {
			document.getElementById(id).checked ="checked";
		}
	}
//全选按钮
var allBox = function(){
		if(document.getElementById('allbox').checked){
			checkAllBox(1);
		} else {
			checkAllBox(0);
		}
	}
	var checkAllBox = function(flag){
		var myform  = document.getElementById("myform");
		var formlen = myform.elements.length;
		for(var i=0;i<formlen;i++){
			if(flag ==1){
				myform.elements[i].checked = 'checked';
			} else {
				myform.elements[i].checked = '';
			}
		}
	}



私有属性、实例属性、类属性

–这段知识是基于网上流传的李赞红的JS-OOP.ppt讲解的。

• 私有属性只能在构造函数内部定义与使用；
• 实例属性必须在对象实例化后使用；
• 类属性直接通过类名去使用

例：

1、私有属性

var Me={
_name:"Wang Hongjian",
_age:23
}

调用方法：Me._name，假如现在声明另一个空对象Her，由于作用域Her无法调用_name属性。

2、实例属性：实例属性可以有两种声明方式，一是通过原型函数prototype声明；另一种是通过this关键字声明的。

<script type="text/javascript">
var Me=function(){
this._age=23;
this._name="Wang Hongjian";
Me.prototype._sayHi=function(){
alert("Hello,everybody");
}
}
var M=new Me();
alert(M._name + "'s age is " + M._age);
M._sayHi();
</script>

3、类属性：直接通过类名去使用

<script type="text/javascript">
var Me={};
Me.sayHi="Hi,everybody!");
alert(Me.sayHi);
</script>

私有方法、实例方法、类方法

与属性相对应，方法也可分为私有、实例、及类方法。私有方法只可在对象中使用；实例方法必须在对象实例化后才能使用；类方法可以直接通过类名使用。

1、私有方法

<script type="text/javascript">
var Me={
_sayHi:function(){
alert("Hello,everybody!");
}
}
Me._sayHi();
</script>

2、静态方法：语法及使用与静态属性类似

<script type="text/javascript">
var Me=function(){
this.sayHi=function(){
alert("Hello,everybody!");
};
Me.prototype.readBook=function(){
alert("人生若只初相见，何事秋风悲画扇？");
};
}
var M=new Me();
M.sayHi();
M.readBook();
</script>

3、类属性

<script type="text/javascript">
var Me={};
Me.sayHi=function(){
alert("Hi,everybody!");
}
Me.sayHi();
</script>