解析URL
function getUrlParameter(){
var url=location.search;
var obj=new Object();
if(url.indexOf("?")!=-1){
var str=url.substr(1);
strs=str.split("&");
for(var i=0;i<strs.length;i++){
obj[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return obj;
}对一个对象深拷贝
function clone(obj){
var buf;
if(Obj instanceof Array){
buf=[];
var i=Obj.length;
while(i--){
buf[i]=clone(Obj[i]);
}
return buf;
} else if (Obj instanceof Object){
buf={};
for(var k in Obj){
buf[k]=clone(Obj[k]);
}
return buf;
} else {
return Obj;
}
}实现类似百度搜索输入框智能提示功能，包括程序逻辑
$(function(){
var $search=$('#search');
var $searchInput=$search.find('#search-text');
$searchInput.attr('autocomplete','off');
var $autocomplete=$('').hide().insertAfter('#submit');
var clear=function(){$autocomplete.empty().hide();};
$searchInput.blur(function(){setTimeout(clear, 500)});
})()ajax的流程
定义一个全局变量来保存XMLHttpRequest
写一个函数来创建XMLHttpRequest对象
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
} else {
xmlHttp=new XMLHttpRequest();
}
}
function handleStateChang(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
alert("ok");
}
}
}
定义一个回调函数，用于处理你想处理的数据
function doSearch(){
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChang;
xmlHttp.open("GET","dynamicContent.xml",true);
xmlHttp.send(null);
}JS实现循环复制一个DIV
window.onload=function(){
var sourceNode=document.getElementById("div-0");
for(var i=1;i<5;i++){
var clonedNode=sourceNode.cloneNode(true);
cloneNode.setAttribute("id", "div-"+i);
sourceNode.parentNode.appendChild(clonedNode);
}
}用jQuery将页面上所有元素边框设置为2px虚线
$("*").css("border","2px dotted red");用jQuery禁用浏览器的前进后退按钮
$(document).ready(function(){
window.history.forward(1);
window.history.forward(-1);
})获取浏览器URL查询字符串的参数
function getQuery(name){
var reg=new RegExp("(^|&)"+name+"=([^&]*(&|$)");
var r=window.location.search.substr(1).match(reg);
if(r!=null) return unescape(r[2]);return null;
}删除字符串左边空白字符
function leftTrim(str){
return str.replace(/^\s*/g,"");
}- 截取字符串www.baidu.com中的baidu？用substr（用于返回一个从指定位置开始的指定长度的子字符串stringObject.substr(start[,length])）
- 正则表达式{}匹配几位，\w表示任意的字母、数字、下划线。
- 从一个字符串里面找另一个字符串的位置str.indexOf(str1)。
检测一个变量是string类型
function isString(str){
if(typeof str="string"||str.constructor===String){
return true;
}else {
return false;
}
}获取li标签中内容
<body onload="getTestLi()">
<ul id="test">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
<script type="text/javascript">
function getTestLi(){
var objULi=document.getElementById('test').getElementsByTagName('li');
for(var i=0;i<objULi.length;i++){
objULi[i].onclick=function(){
alert(this.innerHTML);
}
}
}
</script>
</body>鼠标单击页面中的任意标签，alert标签名
document.onclick=function(e){
var e=(e||event);
var o=e["target"]||e["srcElement"];
alert(o.tagName.toLowerCase());
}对string对象进行扩展，使其具有删除前后空格的方法
String.prototype.deleteSpace=function () {
var str=this;
while(str[0]==" "){
str=str.substring(1);
}
while(str[str.length-1]==" "){
str=str.substring(0,str.length-1);
}
return str;
}已知对象var obj={~},但对象的属性未知，如何对该对象的属性进行遍历。
function allProps(obj){
var props="";
for(var p in obj){
if(typeof(obj[p])=="function"){
obj[p]();
} else {
props+=p+"="+obj[p]+"t";
}
}
alert(props);
}创建一个对象
**1)原始方法**
// 通过new关键字生成一个对象，然后根据javascript是动态语言的特性来添加属性和方法，构造一个对象，其中的this表示调用该方法的对象，不利于代码的复用。
var obj=new Object();
obj.name="koji";
obj.showName=function(){
alert(this.name);
}
obj.showAge=function(){
alert(this.age);
}
obj.showName();
obj.showAge();
**2)工厂方法**
function createObj(){
var obj=new Object();
obj.name="koji";
obj.age=21;
obj.showName=function(){
alert(this.name);
}
obj.showAge=function(){
alert(this.age);
}
return obj;
}
var obj=createObj();
var obj1=createObj();
obj.showName();
obj1.showName();
**3)改进的工厂模式**
function createObj(name,age){
var obj=new Object();
obj.name=name;
obj.age=age;
obj.showName=function(){
alert(this.name);
}
obj.showAge=function(){
alert(this.age);
}
return obj;
}
var obj=createObj("koij",23);
var obj1=createObj("jfe",33);
obj.showName();
obj1.showName();
该方式虽然提高了代码的重用率，但是和面向对象中类的概念相比，有一个很大缺陷。面向对象强调对象的属性私有，但对象的方法是共存的。而上面的工厂方法在创建对象时，要为每个对象创建各自私有的方法。同时，由于每个对象都创建逻辑相同的方法，所以很浪费内存。改进如下：
4)
function createObj(name,age){
var obj=new Object();
obj.name=name;
obj.age=age;
obj.showName=showName;
obj.showAge=showAge;
return obj;
}
function showName(){
alert(this.name);
}
function showAge(){
alert(this.age);
}
var obj=createObj("koij",23);
var obj1=createObj("jfe",33);
obj.showName();
obj1.showName();
**5)构造函数方式**
function Person(name,age){
obj.name=name;
obj.age=age;
obj.showName=function(){
alert(this.name);
};
obj.showAge=function(){
alert(this.age);
}
return obj;
}
var obj=new Person("koij",23);
var obj1=new Person("jfe",33);
obj.showName();
obj1.showName();
**6)原型方法**
function Person(){}
Person.prototype.name="koji";
Person.prototype.age=22;
Person.prototype.showName=function(){
alert(this.name);
}
Person.prototype.showAge=function(){
alert(this.age);
}
var obj1=new Person();
var obj2=new Person();
**7)混合构造函数方法**
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function(){
alert(this.name);
}
Person.prototype.showAge=function(){
alert(this.age);
}
var obj1=new Person("koij",22);事件监听：IE提供了attachEvent和detachEvent两个接口，Firefox提供了addEventListener和removeEventListener。
function addEvent(elem,eventName,handler){
if(elem.attachEvent){
elem.attachEvent("on"+eventName,function(){
handler.call(elem)
});
} else if (elem.addEventListener){
elem.addEventListener(eventName, handler, false);
}
}
function removeEvent(elem,eventName,handler){
if(elem.detachEvent){
elem.detachEvent("on"+eventName,function(){
handler.call(elem)
});
} else if(elem.removeEventListener){
elem.removeEventListener(eventName, handler, false);
}
}
在Firefox下，事件处理函数中的this指向被监听元素本身，IE下，可使用回调函数call，让当前上下文指向监听的元素。
鼠标位置，IE下有x,y属性，Firefox下有pageX和pageY属性。考虑绝对位置。
function getAbsPoint(e){
var x=e.offsetLeft,y=e.offsetTop;
while(e=e.offsetParent){
x+=e.offsetLeft;
y+=e.offsetTop;
}
}写一个通用的事件监听器
var handleHash={};
var bind=(function(){
if(window.addEventListener){
return function(el,type,fn,capture){
el.addEventListener(type,function(){
fn();
handleHash[type]=handleHash[type]||[];
handleHash[type].push(arguments.callee);
},capture);
};
} else if (window.attachEvent){
return function(el,type,fn,capture){
el.attachEvent("on"+type,function(){
fn();
handleHash[type]=handleHash[type]||[];
handleHash[type].push(arguments.callee);
});
};
}
})();
var unbind=(function(){
if(window.addEventListener){
return function(el,type){
if(handleHash[type]){
var i=0,len=handleHash[type].length;
for(var i;i<len;i+=1){
el.removeEventListener(type, handleHash[type][i]);
}
};
};
} else if(window.attachEvent){
return function(el,type){
if(handleHash[type]){
var i=0,len=handleHash[type].length;
for(i;i<len;i+=1){
el.detachEvent("on"+type, handleHash[type][i]);
}
};
};
}
})();键盘值的取得：Firefox下的event.which与IE下的event.keyCode
function myKeyPress(evt){
evt=(evt)?evt:((window.event)?window.event:"")
var key=evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey &&(key==13|| key==10)){
//do something
}
}当按钮提交时，如何实现两个td值的互换？
function submitBtn(){
var tText1=document.getElementById('txt1');
var submitBtn1=document.getElementById('submitBtn1');
var tText2=document.getElementById('txt2');
var submitBtn2=document.getElementById('submitBtn2');
submitBtn1.onclick=function(){
var temp=tText1.value;
tText1.value=tText2.value;
tText2.value=temp;
}
submitBtn2.onclick=function(){
var temp=tText2.value;
tText2.value=tText1.value;
tText1.value=temp;
}
}
window.onload=function(){
submitBtn();
}如何用javascript获取所有选中的checkbox的值
function getCheckboxValue(checkbox){
if(!checkbox.length && checkbox.type.toLowerCase()=='checkbox'){
return (checkbox.checked)?checkbox.value:'';
}
if(checkbox[0].tagName.toLowerCase()!='input'||checkbox[0].type.toLowerCase()!='checkbox'){
return '';
}
var val=[];
var len=checkbox.length;
for(i=0;i<len;i++){
if(checkbox[i].checked){
val[val.length]=checkbox[i].value;
}
}
return (val.length)?val:'';
}编写一个parseQueryString，把URL函数解析为一个对象。
function parseQueryString(URL){
var str=url.split("?")[1];
var items=str.split("&");
var result={};
var arr=;
for(var i=0;i<items.length;i++){
arr=items.split('=');
result[arr[0]]==arr[1];
}
return result;
}验证用户输入是否是数字
function validate(){
var reg=new RegExp("^[0-9]*$");
var obj=document.getElementById("name");
if(!reg.test(obj.value)){
}
if (!/^[0-9]*$/.test(obj.value)){
}
}将字符串中由空格隔开的每个单词首字母大写
function capitalize(string){
var words=string.split("");
for(var i=0;i<words.length;i++){
words[i]=words[i].charAt(0).toUpperCase()+words[i].slice(1);
}
return words.join(" ");
}加入一个父容器一万个子元素，要给他们全部绑定事件，如何绑定最好？
循环遍历的操作会占用很大的资源，可以使用事件的一些特性，将操作绑定到ul元素上，当事件触发时，自动获取当前事件操作的对象，然后再完成操作。
window.onload=function(){
var ul=document.getElementById('ul');
ul.onclick=function(e){
e=window.event?window.event:e;
var who=e.target?e.target:e.srcElement;
}
}
用到了event对象的target属性，该属性能够获取事件发生所在的元素，在IE下，该功能被srcElement代替。
利用事件冒泡，自己所触发的事件，由它的父元素代替执行。
如何阻止事件冒泡和默认事件
function stopBubble(e){
if(e&&e.stopPropagation){
e.stopPropagation();
} else {
window.event.cancelBubble=true;
}
}
function stopDefault(e){
if(e&&e.preventDefault)
e.preventDefault();
else
window.event.returnValue=false;
return false;
}写一个设置cookie值的封装函数
function setCookie(key,value,t){
var oDate=new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie=key+'='+encodeURI(value)+':expires='+oDate.toUTCString();
}写一个闭包
function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c=a();
c();
函数a中，定义了函数b，a又return了b的值。最后c的值就是a的返回值，最后一行c()实际执行的是b的函数，继续执行c(),可以发现生命周期没结束，a在内存中的栈区依然保留。
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
