『总结』web前端开发代码块
HTTP Status Code
常见的状态码:
HTTP: Status 200 – 服务器成功返回网页
HTTP: Status 404 – 请求的网页不存在
HTTP: Status 503 – 服务不可用
详解:
说明:
HTTP Status 1xx (临时响应)
->表示临时响应并需要请求者继续执行操作的状态代码。
详细代码及说明:
HTTP: Status 100 (继续)
-> 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
HTTP: Status 101 (切换协议)
-> 请求者已要求服务器切换协议，服务器已确认并准备切换。
说明:
HTTP Status 2xx (成功)
->表示成功处理了请求的状态代码;
详细代码及说明:
HTTP Status 200 (成功)
-> 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
HTTP Status 201 (已创建)
-> 请求成功并且服务器创建了新的资源。
HTTP Status 202 (已接受)
-> 服务器已接受请求，但尚未处理。
HTTP Status 203 (非授权信息)
-> 服务器已成功处理了请求，但返回的信息可能来自另一来源。
HTTP Status 204 (无内容)
-> 服务器成功处理了请求，但没有返回任何内容。
HTTP Status 205 (重置内容)
-> 服务器成功处理了请求，但没有返回任何内容。
HTTP Status 206 (部分内容)
-> 服务器成功处理了部分 GET 请求。
HTTP Status 3xx (资源不存在重定向)
->301是说访问的资源已经永久删除啦，客户端要根据新的URI访问重定向；
->302的意思就是说访问的资源可能暂时先用location的URI访问，但旧资源还在的，下次你再来访问的时候可能就不用重定向了。
常用应用场景:
场景一 :
想换个域名，旧的域名不用啦，这样用户访问旧域名时用301就重定向到新的域名。其实也是告诉搜索引擎收录的域名需要对新的域名进行收录。
场景二 : 登录后重定向到指定的页面，这种场景比较常见就是登录成功跳转到具体的系统页面。
场景三 : 有时候需要自动刷新页面，比如5秒后回到订单详细页面之类。
场景四 : 有时系统进行升级或者切换某些功能时，需要临时更换地址。
场景五 : 像微博之类的使用短域名，用户浏览后需要重定向到真实的地址之类。
HTTP Status 4xx (请求错误)
->这些状态代码表示请求可能出错，妨碍了服务器的处理。
详细代码说明:
HTTP Status 400 （错误请求）
->服务器不理解请求的语法。
HTTP Status 401 （未授权）
->请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
HTTP Status 403 （禁止）
-> 服务器拒绝请求。
HTTP Status 404 （未找到）
->服务器找不到请求的网页。
HTTP Status 405 （方法禁用）
->禁用请求中指定的方法。
HTTP Status 406 （不接受）
->无法使用请求的内容特性响应请求的网页。
HTTP Status 407 （需要代理授权）
->此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
HTTP Status 408 （请求超时）
->服务器等候请求时发生超时。
HTTP Status 409 （冲突）
->服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。
HTTP Status 410 （已删除）
-> 如果请求的资源已永久删除，服务器就会返回此响应。
HTTP Status 411 （需要有效长度）
->服务器不接受不含有效内容长度标头字段的请求。
HTTP Status 412 （未满足前提条件）
->服务器未满足请求者在请求中设置的其中一个前提条件。
HTTP Status 413 （请求实体过大）
->服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
HTTP Status 414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法
处理。
HTTP Status 415 （不支持的媒体类型）
->请求的格式不受请求页面的支持。
HTTP Status 416 （请求范围不符合要求）
->如果页面无法提供请求的范围，则服务器会返回此状态代码。
HTTP Status 417 （未满足期望值）
->服务器未满足”期望”请求标头字段的要求。
说明
HTTP Status 5xx(服务器错误)
->这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
代码详细及说明:
HTTP Status 500 （服务器内部错误）
->服务器遇到错误，无法完成请求。
HTTP Status 501 （尚未实施）
->服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。
HTTP Status 502 （错误网关）
->服务器作为网关或代理，从上游服务器收到无效响应。
HTTP Status 503 （服务不可用）
-> 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。
HTTP Status 504 （网关超时）
->服务器作为网关或代理，但是没有及时从上游服务器收到请求。
HTTP Status 505 （HTTP 版本不受支持）
-> 服务器不支持请求中所用的 HTTP 协议版本。
浏览器相关&兼容性问题：
1. IE条件注释
条件注释简介
1. IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
条件注释只能用于IE5以上，IE10以上不支持。
2. 如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
3. 条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
4. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
条件注释使用方法示例
<!–-[if IE 5]>仅IE5.5可见<![endif]–->
<!–-[if gt IE 5.5]>仅IE 5.5以上可见<![endif]–->
<!–-[if lt IE 5.5]>仅IE 5.5以下可见<![endif]–->
<!–-[if gte IE 5.5]>IE 5.5及以上可见<![endif]–->
<!–-[if lte IE 5.5]>IE 5.5及以下可见<![endif]–->
<!–-[if !IE 5.5]>非IE 5.5的IE可见<![endif]–->2. js判断用户访问的是PC还是mobile
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
var sUserAgent = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
isChrome: u.indexOf("chrome") > -1,
isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1,
iPad: u.indexOf('iPad') > -1,
iWinPhone: u.indexOf('Windows Phone') > -1
};
}()
}
if(browser.versions.mobile || browser.versions.iWinPhone){
window.location = "http:/www.baidu.com/m/";
}3. js如何判断用户是否是用微信浏览器
根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。判断函数如下：
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}4. 判断浏览器的简单有效方法
function getInternet(){
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE"; //IE浏览器
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox"; //Firefox浏览器
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari"; //Safan浏览器
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino"; //Camino浏览器
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko"; //Gecko浏览器
}
}5. 如何在手机上禁止浏览器的网页滚动
方法一：
<body ontouchmove="event.preventDefault()" ></body>方法二：
<script type="text/javascript">
document.addEventListener('touchmove', function(event) {
event.preventDefault();
});
</script>6. 针对IE6，7的hack，该怎么写
你可能会这么回答：使用 “>”，“_”，“*”等各种各样的符号来写hack。是的，这样做没错，但是需要记住每个符号分别被哪些浏览器识别，并且如果写的太乱将造成代码 阅读起来十分困难。学习CSS必须抱有一种质疑精神，有没有一种hack方法可以不写这些乱七八糟的符号，并且代码易维护易读呢？我们可以看看好搜首页是怎么做的：在页面顶端有这样一句话：
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="w3c"><!--<![endif]-->
<head>
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>在页面的CSS中，会看到这样的规则：
.ie7 #hd_usernav:before, .ie8 #hd_usernav:before {
display: none
}
.ie6 .skin_no #hd_nav li, .ie7 .skin_no #hd_nav li, .ie8 .skin_no #hd_nav li {
border-right-color: #c5c5c5
}
.ie6 .skin_no #hd_nav a, .ie7 .skin_no #hd_nav a, .ie8 .skin_no #hd_nav a {
color: #c5c5c5
}7. js 加入收藏代码
function addFavorite(title, url) {
url = encodeURI(url);
try {
window.external.addFavorite(url, title);
}
catch (e) {
try {
window.sidebar.addPanel(title, url, "");
}
catch (e) {
alert("加入收藏失败,Ctrl+D进行添加");
}
}
}
addFavorite(document.title,window.location);
打印方法：（整个页面 window.print()）
//id-str 内容中的id
function Printpart(id_str){
var el = document.getElementById(id_str);
var iframe = document.createElement('IFRAME');
var doc = null;
iframe.setAttribute('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
doc.write('<div>' + el.innerHTML + '</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0){
document.body.removeChild(iframe);
}
}参考地址：
http://www.cnblogs.com/yeming...
http://www.cnblogs.com/jikey/...
8. 跨浏览器添加事件
//跨浏览器添加事件
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){//IE
obj.attchEvent('on'+type,fn);
}
}9. 跨浏览器移除事件
//跨浏览器移除事件
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){//兼容IE
obj.detachEvent('on'+type,fn);
}
}10. 跨浏览器阻止默认行为
//跨浏览器阻止默认行为
function preDef(ev){
var e = ev || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue =false;
}
}跨浏览器获取目标对象
//跨浏览器获取目标对象
function getTarget(ev){
if(ev.target){//w3c
return ev.target;
}else if(window.event.srcElement){//IE
return window.event.srcElement;
}
}跨浏览器获取滚动条位置
//跨浏览器获取滚动条位置，sp == scroll position
function getSP(){
return{
top: document.documentElement.scrollTop || document.body.scrollTop,
left : document.documentElement.scrollLeft || document.body.scrollLeft;
}
}跨浏览器获取可视窗口大小
//跨浏览器获取可视窗口大小
function getWindow () {
if(typeof window.innerWidth !='undefined') {
return{
width : window.innerWidth,
height : window.innerHeight
}
} else {
return {
width : document.documentElement.clientWidth,
height : document.documentElement.clientHeight
}
}
}11. js获取屏幕坐标
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta name="auther" content="fq" />
<title>获取鼠标坐标</title>
</head>
<body>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
<script type="text/javascript">
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById('xxx').value = mousePos.x;
document.getElementById('yyy').value = mousePos.y;
}
document.onmousemove = mouseMove;
</script>
</body>
</html> 注释：
1.documentElement 属性可返回文档的根节点。
2.scrollTop() 为滚动条向下移动的距离
3.document.documentElement.scrollTop 指的是滚动条的垂直坐标
4.document.documentElement.clientHeight 指的是浏览器可见区域高度
DTD已声明的情况下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话
IE
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度Firefox
document.documentElement.scrollHeight ==> 浏览器所有内容高度
document.body.scrollHeight ==> 浏览器所有内容高度
document.documentElement.scrollTop ==> 浏览器滚动部分高度
document.body.scrollTop ==>始终为0
document.documentElement.clientHeight ==>浏览器可视部分高度
document.body.clientHeight ==> 浏览器所有内容高度Chrome
document.documentElement.scrollHeight ==> 浏览器所有内容高度
document.body.scrollHeight ==> 浏览器所有内容高度
document.documentElement.scrollTop==> 始终为0
document.body.scrollTop==>浏览器滚动部分高度
document.documentElement.clientHeight ==> 浏览器可视部分高度
document.body.clientHeight ==> 浏览器所有内容高度浏览器所有内容高度即浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和
浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。
综上:
1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop
2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement，未声明的情况下用body
clientHeight在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。
12. PageX和clientX
PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.
可是悲剧的是,PageX只有FF特有,IE则没有这个，所以在IE下使用这个：
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
scrollTop代表的是被浏览器滑动条滚过的长度
offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值
只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.
最给力的是，chrome和safari一条龙通杀!完全支持所有属性
13. js拖拽效果
<!doctype html>
<html lang="zn-CN">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#login{
height: 100px;
width: 100px;
border: 1px solid black;
position: relative;
top:200px;
left: 200px;
background: red;
}
</style>
</head>
<body>
<div id="login"></div>
<script type="text/javascript">
var oDiv = document.getElementById("login");
oDiv.onmousedown = function(e){
var e = e || window.event;//window.event兼容IE,当事件发生时有效
var diffX = e.clientX - oDiv.offsetLeft; //获取鼠标点击的位置到所选对象的边框的水平距离
var diffY = e.clientY - oDiv.offsetTop;
document.onmousemove = function(e){ //需设为document对象才能作用于整个文档
var e = e||window.event;
oDiv.style.left = e.clientX - diffX + 'px';//style.left表示所选对象的边框到浏览器左侧距离
oDiv.style.top = e.clientY -diffY + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;//清除鼠标释放时的对象移动方法
document.onmouseup = null;
}
}
</script>
</body>
</html>offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
14. 新窗口居中打开
Js代码：
function getNewWin(openUrl,iWidth,iHeight){
//var openUrl ="messageAdvisory.html";//弹出窗口的url
//var iWidth=510; //弹出窗口的宽度;
//var iHeight=650; //弹出窗口的高度;
var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;
var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;
window.open(openUrl,'newwindow','width='+iWidth+',height='+iHeight+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no, status=no');
}
$('#sa3').on('click', function(e){
e.preventDefault();
getNewWin('serviceInstall.html',510,650);
//window.open('serviceInstall.html','newwindow','height=650,width=510,top=0,left=400,toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no, status=no');
});
15. Div窗口居中打开
Html代码：
//拖拽窗口--在线维修与安装
var oDrag = document.getElementById("InstallationBox");
var oTitle = get.byClass("title", oDrag)[0];
drag(oDrag, oTitle);
Js代码：
//窗口拖拽
function drag(oDrag,oTitle){
var posX=0;
var posY=0;
oTitle.onmousedown=function(event){
oTitle.style.cursor = "move";
var event = event || window.event;
var disX=event.clientX-oDrag.offsetLeft;
var disY=event.clientY-oDrag.offsetTop;
//鼠标移动，窗口随之移动onmousemove在有物体移动是才执行alert事件；
document.onmousemove=function(event){
var event = event || window.event;
maxW=document.documentElement.clientWidth-oDrag.offsetWidth;
maxH=document.documentElement.clientHeight-oDrag.offsetHeight;
posX=event.clientX-disX;
posY=event.clientY-disY;
if(posX<0){
posX=0;
}else if(posX>maxW){
posX=maxW;
}
if(posY<0){
posY=0;
}
/*if(posY<0){
posY=0;
}else if(posY>maxH){
posY=maxH;
}*/
oDrag.style.left=posX+'px';
oDrag.style.top=posY+'px';
};
//鼠标松开，窗口将不再移动
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
}
// 获取id, class, tagName
var get = {
byId: function(id) {
return typeof id === "string" ? document.getElementById(id) : id;
},
byClass: function(sClass, oParent) {
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = this.byTagName("*", oParent);
for (var i = 0; i < aElem.length; i++) {
reClass.test(aElem[i].className) && aClass.push(aElem[i]);
}
return aClass;
},
byTagName: function(elem, obj) {
return (obj || document).getElementsByTagName(elem);
}
}
16. div可拖曳
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简单实用的可拖曳窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
</head>
<body>
<div id="drag"></div>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
//样式
$("#drag").css({"position":"absolute","top":"100px","left":"100px","border":"1px solid #789","width":"150px","height":"90px","background":"#988f82","cursor":"move"})
/*+++++ 拖曳效果 ++++++
*原理：标记拖曳状态dragging，坐标位置iX、iY
* mousedown:fn(){dragging = true：记录起始坐标位置，设置鼠标捕获}
* mouseover:fn(){判断如果dragging = true，则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}
* mouseup:fn(){dragging = false：释放鼠标捕获，防止冒泡}
*/
var dragging = false;
var iX, iY;
$("#drag").mousedown(function(e) {
dragging = true;
iX = e.clientX - this.offsetLeft;
iY = e.clientY - this.offsetTop;
this.setCapture && this.setCapture(); //拖拽捕获开始
return false;
});
document.onmousemove = function(e) {
if (dragging) {
var e = e || window.event;
var oX = e.clientX - iX;
var oY = e.clientY - iY;
$("#drag").css({"left":oX + "px", "top":oY + "px"});
return false;
}
};
$(document).mouseup(function(e) {
dragging = false;
$("#drag")[0].releaseCapture(); //拖拽捕获结束
e.cancelBubble = true;
});
})
</script>
</body>
</html>
17. JS,Jquery获取各种屏幕的宽度和高度
javascript:
文档可视区域宽： document.documentElement.clientWidth
文档可视区域高： document.documentElement.clientHeight
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidthJQuery:
$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})
Form表单：
18. jquery对文本框只读状态与可读状态的相互转化
$('input').removeAttr('Readonly');
$('input').attr('Readonly','true');
19. js/jquery实现密码框输入聚焦，失焦问题
js实现方法：
html代码：
<input id="i_input" type="text" value='会员卡号/手机号' />js代码：
window.onload = function(){
var oIpt = document.getElementById("i_input");
if(oIpt.value == "会员卡号/手机号"){
oIpt.style.color = "#888";
}else{
oIpt.style.color = "#000";
}
oIpt.onfocus = function(){
if(this.value == "会员卡号/手机号"){
this.value="";
this.style.color = "#000";
this.type = "password";
}else{
this.style.color = "#000";
}
};
oIpt.onblur = function(){
if(this.value == ""){
this.value="会员卡号/手机号";
this.style.color = "#888";
this.type = "text";
}
};
}jquery实现方法:
html代码：
<input type="text" class="oldpsw" id="showPwd" value="请输入您的注册密码"/>
<input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/>jquery代码：
$("#showPwd").focus(function() {
var text_value=$(this).val();
if (text_value =='请输入您的注册密码') {
$("#showPwd").hide();
$("#password").show().focus();
}
});
$("#password").blur(function() {
var text_value = $(this).val();
if (text_value == "") {
$("#showPwd").show();
$("#password").hide();
}
});20. 改变type=file默认样式，"浏览"等字体
<input type="file" id="browsefile" style="visibility:hidden" onchange="filepath.value=this.value">
<input type="button" id="filebutton" value="" onclick="browsefile.click()">
<input type="textfield" id="filepath">21. jquery获得select中option的索引
html代码：
<select class="select-green">
<option value="0">高级客户经理</option>
<option value="1">中级客户经理</option>
</select>jquery代码：
$(".select-green").change(function(){
var _indx = $(this).get(0).selectedIndex;
$(".selectall .selectCon").hide();
$(".selectall .selectCon").eq(_indx).fadeIn();
});注：其中(this).get(0)与(this)[0]等价
22. form表单提交时设置编码格式
<form name="form" method="post" action="XXXX" accept-charset="utf-8" onsubmit="document.charset='utf-8';">
//内容
</form>23. jQuery中radio和checkbox的选中的另一种方式
$("input[name=sports]").val(["足球", "篮球"]);
$("input[name=gender]").val(["男"]);
$('input:radio:first').attr('checked', 'checked');
$('input:checkbox:first').prop('checked', true);
$('input[type="checkbox"]').eq(1).prop('checked', true);
$('input:checkbox:eq(2)').attr('checked', 'true');
$('input:checkbox').eq(4).attr('checked', true);
日期时间相关功能代码块：
24. 获取当前日期
var calculateDate = function(){
var date = new Date();
var weeks = ["日","一","二","三","四","五","六"];
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 星期"+weeks[date.getDay()];
}
$(function(){
$("#dateSpan").html(calculateDate());
})25. 时间倒计时（固定倒计时的结束时间）
function countdown() {
var endtime = new Date("Jan 18, 2015 23:50:00");
var nowtime = new Date();
if (nowtime >= endtime) {
document.getElementById("_lefttime").innerHTML = "倒计时间结束";
return;
}
var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
if (leftsecond < 0) {
leftsecond = 0;
}
__d = parseInt(leftsecond / 3600 / 24);
__h = parseInt((leftsecond / 3600) % 24);
__m = parseInt((leftsecond / 60) % 60);
__s = parseInt(leftsecond % 60);
document.getElementById("_lefttime").innerHTML = __d + "天" + __h + "小时" + __m + "分" + __s + "秒";
}
countdown();
setInterval(countdown, 1000);
26. 10秒倒计时跳转
html代码：
<div id="showtimes"></div>js代码：
//设定倒数秒数
var t = 10;
//显示倒数秒数
function showTime(){
t -= 1;
document.getElementById('showtimes').innerHTML= t;
if(t==0){
location.href='error404.asp';
}
//每秒执行一次,showTime()
setTimeout("showTime()",1000);
}
//执行showTime()
showTime();
27. 每隔0.1s改变图片的路径
<div id="tt"><img src="images/1.jpg" alt=""/></div>js代码：
(function(){
function chagesimagesrc(t){
document.getElementById("tt").childNodes[0].src="images/"+t+".jpg";
}
setInterval(function(){
for(var i=0;i<2;i++){
setTimeout((function(t){
return function(){
chagesimagesrc(t);
}
})(i+1),i*100)
}
},1000);
})()28. js获取某年某月的哪些天是周六和周日
<p id="text"></p>
<script type="text/javascript">
function time(y,m){
var tempTime = new Date(y,m,0);
var time = new Date();
var saturday = new Array();
var sunday = new Array();
for(var i=1;i<=tempTime.getDate();i++){
time.setFullYear(y,m-1,i);
var day = time.getDay();
if(day == 6){
saturday.push(i);
}else if(day == 0){
sunday.push(i);
}
}
var text = y+"年"+m+"月份"+"<br />"
+"周六："+saturday.toString()+"<br />"
+"周日："+sunday.toString();
document.getElementById("text").innerHTML = text;
}
time(2014,7);
</script>
29. Date 对象
启用基本存储器并取得日期和时间。
dateObj = new Date()
dateObj = new Date(dateVal)
dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])说明：
Date 对象保存以毫秒为单位表示特定时间段。如果某个参数的值大于其范围或为负数，则存储的其他值将做相应的调整。例如，如果指定 150 秒，JScript 将该数字重新定义为 2 分 30 秒。
如果数字为 NaN，则表示该对象不代表特定的时间段。如果未向 Date 对象传递参数，它将被初始化为当前时间 (UTC)。在能够使用该对象前必须为其赋值。
Date 对象能够表示的日期范围约等于 1970 年 1 月 1 日前后各 285,616 年。
Date 对象具有两个不创建 Date 对象就可以调用的静态方法。它们是 parse 和 UTC。
Date.UTC(year, month, day[, hours[, minutes[, seconds[,ms]]]])
返回全球标准时间 (UTC) (或 GMT) 的 1970 年 1 月 1 日到所指定日期之间所间隔的毫秒数。
new Date("2015") //Thu Jan 01 2015 08:00:00 GMT+0800 (中国标准时间)
new Date(2015) //Thu Jan 01 1970 08:00:02 GMT+0800 (中国标准时间)
new Date("2015-2-1") //Sun Feb 01 2015 00:00:00 GMT+0800 (中国标准时间)
new Date("2015/2/1") //Sun Feb 01 2015 00:00:00 GMT+0800 (中国标准时间)
new Date("20150201") //Invalid Date
new Date(2015,1,2) //Mon Feb 02 2015 00:00:00 GMT+0800 (中国标准时间)
new Date("2015","1","2") //Mon Feb 02 2015 00:00:00 GMT+0800 (中国标准时间)
new Date(2015,1,2,25,2) //Tue Feb 03 2015 01:02:00 GMT+0800 (中国标准时间)
new Date(2015,13,2,25,2) //Wed Feb 03 2016 01:02:00 GMT+0800 (中国标准时间)方法：
getDate 方法（日期） | getDay 方法（星期） | getFullYear 方法（年份） | getHours 方法（时） | getMilliseconds 方法（本地时间毫秒数） | getMinutes 方法（分钟） | getMonth 方法（月份） | getSeconds 方法（秒） | getTime 方法（返回1970年开始的毫秒数） | getTimezoneOffset 方法 | getUTCDate 方法 | getUTCDay 方法 | getUTCFullYear 方法 | getUTCHours 方法 | getUTCMilliSeconds 方法 | getUTCMinutes 方法 | getUTCMonth 方法 | getUTCSeconds 方法 | getVarDate 方法 | getYear 方法 | setDate 方法 | setFullYear 方法 | setHours 方法 | setMilliSeconds 方法 | setMinutes 方法 | setMonth 方法 | setSeconds 方法 | setTime 方法 | setUTCDate 方法 | setUTCFullYear 方法 | setUTCHours 方法 | setUTCMilliseconds 方法 | setUTCMinutes 方法 | setUTCMonth 方法 | setUTCSeconds 方法 | setYear 方法 | toGMTString 方法 | toLocaleString 方法 | toUTCString 方法 | toString 方法 | valueOf 方法 | parse 方法 | UTC 方法
字符串相关功能代码块：
30. js实现Java的endWith方法：以某字符串结尾
在操作字符串（String）类型的时候，startsWith(anotherString)和endsWith(anotherString)是非常好用的方法。其中startsWith判断当前字符串是否以anotherString作为开头，而endsWith则是判断是否作为结尾。举例：
"abcd".startsWith("ab"); // true
"abcd".startsWith("bc"); // false
"abcd".endsWith("cd"); // true
"abcd".endsWith("e"); // false
"a".startsWith("a"); // true
"a".endsWith("a"); // true
但不幸的是，Javascript中没有自带这两个方法，需要的话只能自己写。当然写起来也不难就是了。
if (typeof String.prototype.startsWith != 'function') {
String.prototype.startsWith = function (prefix){
return this.slice(0, prefix.length) === prefix;
};
}String.slice()和String.substring()类似，都是获得一段子串，但有评测说slice的效率更高。这里不使用indexOf()的原因是，indexOf会扫描整个字符串，如果字符串很长，indexOf的效率就会很差。
if (typeof String.prototype.endsWith != 'function') {
String.prototype.endsWith = function(suffix) {
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
}和startsWith不一样，endsWith中可以使用indexOf。原因是它只扫描了最后的一段字符串，而比起slice的优势是它不用复制字符串，直接扫描即可，所以效率更高。
采用正则表达式实现startWith、endWith效果函数
String.prototype.startWith=function(str){
var reg=new RegExp("^"+str);return reg.test(this);
}
//测试ok，直接使用str.endWith("abc")方式调用即可
String.prototype.endWith=function(str){
var reg=new RegExp(str+"$");
return reg.test(this);
}
Ajax-相关功能代码块：
31. 保留后端传递到前端页面的空格
var objt = {
name:' aaaa 这是一个空格多的标签 这是一个空格多的标签'
}
objt.name = objt.name.replace(/\s/g,' ');
console.log(objt.name);
32. js 异步加载和同步加载
异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。
在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了：
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();同步加载
平常默认用的都是同步加载。如：
<script src="http://yourdomain.com/script.js"></script>
同步模式又称阻塞模式，会阻止流览器的后续处理。停止了后续的文件的解析，执行，如图像的渲染。浏览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。
通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。
同步加载流程是瀑布模型，异步加载流程是并发模型。
json相关功能代码块：
33. JSON.stringify()
异常--解析数据：
JSON 不能存储 Date 对象。
JSON.stringify() 会将所有日期转换为字符串。
var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;之后你可以再将字符串转换为 Date 对象。
异常--解析函数：
JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。
var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生：
var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;不建议在 JSON 中使用函数。
34. 将对象转成字符串赋值给节点属性，如果值中有空格，则会从这个地方开始被截断，出现未知问题，报错
文件上传&图片音频相关功能代码块：
35. 获取上传文件的大小
html代码：
<input type="file" id="filePath" onchange="getFileSize(this)"/>js代码：
//兼容IE9低版本获取文件的大小
function getFileSize(obj){
var filesize;
if(obj.files){
filesize = obj.files[0].size;
}else{
try{
var path,fso;
path = document.getElementById('filePath').value;
fso = new ActiveXObject("Scripting.FileSystemObject");
filesize = fso.GetFile(path).size;
}
catch(e){
//在IE9及低版本浏览器，如果不容许ActiveX控件与页面交互，点击了否，就无法获取size
console.log(e.message); //Automation 服务器不能创建对象
filesize = 'error'; //无法获取
}
}
return filesize;
}36. 限制上传文件的类型
如果是高版本浏览器，一般在HTML代码中写就能实现，如：
<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf">如果限制上传文件为图片类型，如下：
<input type="file" class="file" value="上传" accept="image/*"/>但是在其它低版本浏览器就不管用了，需要js来判断。
html代码：
<input type="file" id="filePath" onchange="limitTypes()"/>js代码：
/* 通过扩展名，检验文件格式。
*@parma filePath{string} 文件路径
*@parma acceptFormat{Array} 允许的文件类型
*@result 返回值{Boolen}：true or false
*/
function checkFormat(filePath,acceptFormat){
var resultBool= false,
ex = filePath.substring(filePath.lastIndexOf('.') + 1);
ex = ex.toLowerCase();
for(var i = 0; i < acceptFormat.length; i++){
if(acceptFormat[i] == ex){
resultBool = true;
break;
}
}
return resultBool;
};
function limitTypes(){
var obj = document.getElementById('filePath');
var path = obj.value;
var result = checkFormat(path,['bmp','jpg','jpeg','png']);
if(!result){
alert('上传类型错误，请重新上传');
obj.value = '';
}
}37. 预加载音频
//预加载声音
var shakeAudio = new Audio();
shakeAudio.src = 'http://img-q1.taikang.com/christmas/music/2.mp3';
shakeAudio.loop = true;
shakeAudio.play();
var shake_options = {
preload : 'auto'
};
$(".music").on('touchstart', function(event) {
if ($(this).hasClass('off')) {
shakeAudio.play();
$(this).removeClass('off').addClass('on');
}else{
shakeAudio.pause();
$(this).removeClass('on').addClass('off');
};
});38. 预加载图片
//预加载图片
var imgobj=new Image();
var _this=$(this);
var src=path+imglistObj[index];
imgobj.onload=function(){
var ih=imgobj.height;
var iw=imgobj.width;
console.log("ih="+ih+"&iw="+iw);
if(ih<iw){
_this.css({"background-size":"auto 100%"});
}else{
_this.css({"background-size":"100% auto"});
}
};
imgobj.onerror=function(){
alert("预加载失败");
};
imgobj.src=src;39. 图片加载错误时显示默认图片
//加载图片错误时显示默认图片
function checkImgLoad(){
var imgs = document.images;
for(var i = 0;i < imgs.length;i++){
imgs[i].onerror = function(){
this.src = "<%=request.getContextPath()%>/resource/newui/images/loading.jpg";
};
}
}40. 为什么Image对象的src属性要写在onload事件后面？
var image = new Image();
image.onload = funtion(){
var imgwidth = this.width; //图片实际宽度
var imgheight = this.height; //图片实际高度
};
image.src = '图片路径';js内部是按顺序逐行执行的，可以认为是同步的；
给image赋值src时，去加载图片这个过程是异步的，这个异步过程完成后，如果有onload，则执行onload；
如果先赋值src，那么这个异步过程可能在你赋值onload之前就完成了（比如图片缓存，或者是js由于某些原因被阻塞了），那么onload就不会执行；
反之，js同步执行确定onload赋值完成后才会赋值src,可以保证这个异步过程在onload赋值完成后才开始进行，也就保证了onload一定会被执行到。
功能代码块：
41. html代码用js动态加载进页面
<script type="text/html" id="T-pcList">
//这里面是你要放的html代码，例如放一个div的内容
</script>把上面的js动态加入到页面中
$(function(){
var s=$("#T-pcList").html(); //获得js的html内容
$(".picScroll-left .bd").html(s); //把s的内容放到class为bd内
thisstyle(); //执行某个函数
});
42. 点击某个div区域之外，隐藏该div
一般写法：
$(document).on("click",function(e){
var target = $(e.target);
if(target.closest(".city_box,#city_select a.selected").length == 0){
$(".city_box").hide();
}
})更全的方式：
$(document).click(function(e){
var _con = $(' 目标区域 '); // 设置目标区域
if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
some code... // 功能代码
}
});/* Mark 1 的原理：
判断点击事件发生在区域外的条件是：
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/
43. js判断变量是否未定义的代码
一般如果变量通过var声明，但是并未初始化的时候，变量的值为undefined，而未定义的变量则需要通过 "typeof 变量"的形式来判断，否则会发生错误。
实际应用：
variable有的页面我们不定义,但有的页面定义了，就可以需要这样的判断方法，没有定义的就不执行。
if("undefined" != typeof variable){
if(variable=="abc"){
console.log('成功');
}
}44. 行内级元素可以设置宽高吗？有哪些？
在面试时，当被问到行内级元素可否设置宽高时，根据我们的经验往往会回答不能。但是这样往往着了面试官的道，因为有一些特殊的行内元素，比如img，input，select等等，是可以被设置宽高的。一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。比如img是一个置换元素，当不对它设置宽高时，它会按照本身的宽高进行显示。所以这个问题的正确答案应该是置换元素可以，非置换元素不可以。
45. js动态创建css样式添加到head内
function addCSS(cssText){
var style = document.createElement('style');
var head = document.head || document.getElementsByTagName('head')[0];
style.type = 'text/css';
if(style.styleSheet){ //IE
var func = function(){
try{
//防止IE中stylesheet数量超过限制而发生错误
style.styleSheet.cssText = cssText;
}catch(e){
}
}
//如果当前styleSheet还不能用，则放到异步中则行
if(style.styleSheet.disabled){
setTimeout(func,10);
}else{
func();
}
}else{ //w3c
//w3c浏览器中只要创建文本节点插入到style元素中就行了
var textNode = document.createTextNode(cssText);
style.appendChild(textNode);
}
//把创建的style元素插入到head中
head.appendChild(style);
}
//使用
addCSS('#demo{ height: 30px; background:#f00;}');在IE8以及其低版本浏览器下，IE独有属性styleSheet.cssText。所以一般的兼容简单写法：
var style = document.createElement('style');
style.type = "text/css";
if (style.styleSheet) { //IE
style.styleSheet.cssText = '/*..css content here..*/';
} else { //w3c
style.innerHTML = '/*..css content here..*/';
}
document.getElementsByTagName('head')[0].appendChild(style);46. js强制手机页面横屏显示
$( window ).on( "orientationchange", function( event ) {
if (event.orientation=='portrait') {
$('body').css('transform', 'rotate(90deg)');
} else {
$('body').css('transform', 'rotate(0deg)');
}
});
$( window ).orientationchange();47. 随机产生lowwer - upper之间的随机数
function selectFrom(lower, upper) {
var sum = upper - lower + 1; //总数-第一个数+1
return Math.floor(Math.random() * sum + lower);
}48. js 对象冒充
<script type = 'text/javascript'>
function Person(name , age){
this.name = name ;
this.age = age ;
this.say = function (){
return "name : "+ this.name + " age: "+this.age ;
} ;
}
var o = new Object() ;//可以简化为Object()
Person.call(o , "zhangsan" , 20) ;
console.log(o.say() );//name : zhangsan age: 20
</script>49. 简单的文本弹出提示框，适用移动web
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>简单的文本弹出提示框,适用移动web</title>
</head>
<body>
<script>
//调用代码:
//msgText.init(text,timer)
//text：提示框显示文本,类型String
//timer:提示框显示时间,不设置为永久显示 单位为毫秒ms
var msgText={
init:function(text,timer){
var _cssText="position: fixed;top: 50%;margin: 0 auto;background: rgba(0, 0, 0, 0.63);color: #fff;padding: 2px 15px;left: 50%;margin:-16px 0 0 -85px;line-height: 2;border-radius: 5px;width: 170px;-webkit-transition:all 0.3s linear;transition:all 0.3s linear";
this.oP=document.createElement("p");
this.oP.innerHTML=text;
this.setCss(_cssText);
this.show();
timer&&(this.hide(timer));
},
show:function(){
document.body.appendChild(this.oP);
},
hide:function(timer){
var _this=this;
setTimeout(function(){
_this.oP.style.opacity="0";
setTimeout(function(){
document.body.removeChild(_this.oP);
},300)
},timer)
},
setCss:function(csstext){
this.oP.style.cssText=csstext;
}
}
//调用代码
msgText.init("主题不存在或已被删除",3000)
</script>
</body>
</html>
50. Js&jquery阻止默认行为，阻止事件冒泡
jquery中，return false等效于同时调用e.preventDefault()和e.stopPropagation()
return false除了阻止默认行为之外，还会阻止事件冒泡。如果手上有一份jquery源代码的话，可查看其中有如下代码：
if (ret===false){
event.preventDefault(); //阻止默认行为
event.stopPropagation(); //阻止事件冒泡
}
51. jQuery中的gt和lt
/*gt，lt计数都是下标从0开始，而且不论大于小于，都不包括它自己本身
要注意的是，tr:gt(0):lt(3)=======gt(0)以后，索引为0的已经被排除了，那么剩下的有重新计数，下标又从0开始。*/
$("#tabletest tr:lt(3)").css("backgroundColor", "#f00");
$("#tabletest tr:gt(0):lt(3)").css("backgroundColor", "#0f0");52. jQuery内置函数map和each的用法
$.map的运用
var arr1 = [0, 3, 5];
var arr2 = $.map(arr1, function (item) { return item * 2 });
alert(arr2); //结果:0 6 10$.each的运用
普通数组
var arr1 = [0, 3, 5];
$.each(arr1,function (i) {
alert(arr1[i]); //结果:0，3，5
});json对象
var jsonData = {"tom": 20, "jerry": 21 };
$.each(jsonData,function (key, value) {
alert(key + "_" + value); //结果:tom_20, jerry_21
});
$.each(jsonData,function (i) {
alert(jsonData[i]); //结果:20,21
});
53. 列表选项置顶，置底，上移，下移
<ul class="demo">
<li>001 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
<li>002 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
<li>003 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
<li>004 <a href="#" class="up">上移</a><a href="#" class="down">下移</a><a href="#" class="top">置顶</a><a href="#" class="bottom">置底</a></li>
</ul><script>
$(".demo").on('click', 'a', function(event) {
event.preventDefault;
var parent=$(this).parent();
var parents=$(this).parents(".demo");
var len=parents.children().length;
if(($(this).is(".up") || $(this).is(".top")) && parent.index()==0){
alert("已经置顶！");
return false;
}else if(($(this).is(".down") || $(this).is(".bottom")) && parent.index()==len-1){
alert("已经置底！");
return false;
}
switch (true) {
case $(this).is(".up"):
var prev = parent.prev();
parent.insertBefore(prev);
break;
case $(this).is(".down"):
var next = parent.next();
parent.insertAfter(next);
break;
case $(this).is(".top"):
parents.prepend(parent);
break;
case $(this).is(".bottom"):
parents.append(parent);
}
}
</script>54. jQuery在HTML中动态插入节点的常用方法
| 方法 | 描述 | 示例 |
| append() | 向每个匹配的元素内部追加内容 | HTML代码：<p>我想说:</p> jQuery代码： $("p").append("<b>你好</b>"); 结果： <p>我想说:<b>你好</b></p> |
| appendTo() | 将所有匹配的元素追加到指定的元素中 。实际上，使用该方法是颠倒了常规 的$(A).append(B)的操作，是将A追加到B中。 | HTML代码：<p>我想说:</p> jQuery代码： $("<b>你好</b>").appendTo("p") 结果： <p>我想说:<b>你好</b></p> |
| prepend() | 向每个匹配的元素内部前置内容 | HTML代码：<p>我想说:</p> jQuery代码： $("p").prepend("<b>你好</b>") 结果： <p><b>你好</b>我想说：</p> |
| prependTo() | 将所有匹配的元素前置到指定的元素中 。实际上，使用该方法是颠倒了 常规$(A).prepend(B)操作。 | HTML代码：<p>我想说:</p> jQuery代码： $("<b>你好</b>").prependTo("p") 结果： <p><b>你好</b>我想说：</p> |
| after() | 在每个匹配的元素后插入内容 | HTML代码：<p>我想说:</p> jQuery代码： $("p").after("<b>你好</b>") 结果： <p>我想说：</p><b>你好</b> |
| insertAfter() | 将所有匹配的元素插入到指定元 素的后面，实际上，使用该方法 是颠倒了常规的$(A).after(B)操作 | HTML代码：<p>我想说:</p> jQuery代码： $("<b>你好</b>").insertAfter("p") 结果： <p>我想说：</p><b>你好</b> |
| before() | 在每个匹配的元素之前插入内容 | HTML代码：<p>我想说:</p> jQuery代码： $("p").before("<b>你好</b>") 结果： <b>你好</b><p>我想说：</p> |
| insertBefore() | 将所有匹配的元素插入到指 定的元素的前面。实际上， 使用该方法是颠倒了常规 的$(A).before(B)的操作。 | HTML代码：<p>我想说:</p> jQuery代码： $("<b>你好</b>").insertBefore("p") 结果： <b>你好</b><p>我想说：</p> |
55. 添加动画结束监听
//捕捉webkitAnimationEnd事件
element.addEventListener('webkitAnimationEnd', end, false);
//捕捉webkitTransitionEnd事件
element.addEventListener('webkitTransitionEnd', end, false);56. js滚动到底部
/*滚动加载处理*/
function setScroll(elem,callback){
document.addEventListener("scroll",function(){
var listElem = elem,
clientHeight = document.documentElement.clientHeight,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
scrollHeight = listElem.scrollHeight,
offsetTop = listElem.offsetTop;
if ((clientHeight+scrollTop) >= (scrollHeight+offsetTop)) {
console.log("滚动到底部");
callback();
}
},false);
}57. jQuery的load方法：
========load方法的成功回调函数里，只能获取到静态页面内容，如果source.html中含有需要执行的js，则不适用
$("目标节点").load("source.html"[ "节点选择器"],function(){
//成功回调
})58. null & undefined
当要声明一个变量并进行初始化，但又不想指定任何特殊值，可以赋值为 JScript 值 null。
如果声明了一个变量但没有对其赋值，该变量存在，其值为Jscript 值 undefined。
注意在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0，而 undefined 的操作象特殊值NaN （不是一个数字）。对 null 值和 undefined 值作比较总是相等的。
任何值为0、null、未定义或空字符串的表达式被解释为 false。其他任意值的表达式解释为 true。
Null 数据类型
在 Jscript 中数据类型 null 只有一个值：null。关键字 null 不能用作函数或变量的名称。
包含 null 的变量包含“无值”或“无对象”。换句话说，该变量没有保存有效的数、字符串、boolean、数组或对象。可以通过给一个变量赋 null 值来清除变量的内容。
请注意，在 Jscript 中，null 与 0 不相等（与在 C 和 C++ 中不同）。同时应该指出的是，Jscript中 typeof 运算符将报告 null 值为 Object 类型，而非类型 null。这点潜在的混淆是为了向下兼容。
Undefined 数据类型
如下情况使返回 undefined 值：
对象属性不存在，
声明了变量但从未赋值。
注意不能通过与 undefined 做比较来测试一个变量是否存在，虽然可以检查它的类型是否为“undefined”。在以下的代码范例中，假设程序员想测试是否已经声明变量 x ：
if (x == undefined) // 这种方法不起作用
if (typeof(x) == undefined) // 这个方法同样不起作用- 必须检查// 字符串 "undefined"
if (typeof(x) == "undefined") // 这个方法有效
59. 条件运算符
写 OR 表达式时，先写最有可能为 true 的条件。写 AND 表达式时，先写最有可能为 false 的条件。
60. Break｜continue｜return
在 Microsoft Jscript 中当某些条件得到满足时，用 break; 语句来中断一个循环的运行。（请注意，也用 break; 语句退出一个 switch 块。）。
如果是一个 for 或者 for...in 循环，在更新计数器变量时使用 continue; 语句越过余下的代码块而直接跳到下一个循环中。
方法中，进行表单等校验功能时，使用return;终止退出该方法。
如果是在ajax请求回调函数中，则使用return false;终止执行后面的语句。
61. 构造函数
要创建自己的对象实例，必须首先为其定义一个构造函数。构造函数创建一个新对象，赋予对象属性，并在合适的时候赋予方法。例如，下面的示例为 pasta 对象定义了构造函数。注意 this 关键字的使用，它指向当前对象。
// pasta 是有四个参数的构造器。
function pasta(grain, width, shape, hasEgg){
this.grain = grain; // 是用什么粮食做的？
this.width = width; // 多宽？（数值）
this.shape = shape; // 横截面形状？（字符串）
this.hasEgg = hasEgg; // 是否加蛋黄？（boolean）
}
pasta.prototype.foodgroup = "carbohydrates"定义了对象构造器后，用 new 运算符创建对象实例。
var spaghetti = new pasta("wheat", 0.2, "circle", true);62. Number 对象
Number.NaN 是一个特殊的属性，被定义为“不是数值”。例如被 0 除返回 NaN。试图解析一个无法被解析为数字的字符串同样返回 Number.NaN。把 NaN 与任何数值或本身作比较的结果都是不相等。不能通过与 Number.NaN 比较来测试 NaN 结果，而应该使用 isNaN() 函数。
63. 按值和按引用的比较
Numbers 和 Boolean 类型的值 (true 和 false) 是按值来复制、传递和比较的。当按值复制或传递时，将在计算机内存中分配一块空间并将原值复制到其中。然后，即使更改原来的值，也不会影响所复制的值（反过来也一样），因为这两个值是独立的实体。
对象、数组以及函数是按引用来复制、传递和比较的。 当按地址复制或传递时，实际是创建一个指向原始项的指针，然后就像拷贝一样来使用该指针。如果随后更改原始项，则将同时更改原始项和复制项（反过来也一样）。实际上只有一个实体；“复本”并不是一个真正的复本，而只是该数据的又一个引用。
当按引用比较时，要想比较成功，两个变量必须参照完全相同的实体。例如，两个不同的 Array 对象即使包含相同的元素也将比较为不相等。要想比较成功，其中一个变量必须为另一个的参考。要想检查两个数组是否包含了相同的元素，比较 toString() 方法的结果。
最后，字符串是按引用复制和传递的，但是是按值来比较的。请注意，假如有两个 String 对象（用 new String("something") 创建的），按引用比较它们，但是，如果其中一个或者两者都是字符串值的话，按值比较它们。
注意 鉴于 ASCII和 ANSI 字符集的构造方法，按序列顺序大写字母位于小写字母的前面。例如 "Zoo" 小于 "aardvark"。如果想执行不区分大小写的匹配，可以对两个字符串调用 toUpperCase() 或 toLowerCase()。
检验数据
当按值进行检验时，是比较两个截然不同的项以查看它们是否相等。通常，该比较是逐字节进行的。当按引用进行检验时，是看这两项是否是指向同一个原始项的指针。如果是，则比较结果是相等；如果不是，即使它们每个字节都包含完全一样的值，比较结果也为不相等。
var arr1 = ["a1","b1","c1"];
var arr2 = arr1;
arr1[3] = "d1";
console.log(arr1,arr2); //["a1", "b1", "c1", "d1"] ["a1", "b1", "c1", "d1"]
arr2[3] = "d2";
console.log(arr1,arr2); //["a1", "b1", "c1", "d2"] ["a1", "b1", "c1", "d2"]
var obj1 = {"name":"小明","grade":"1"};
var obj2 = obj1;
obj2.age = 14;
console.log(obj1,obj2); //Object {name: "小明", grade: "1", age: 14} Object {name: "小明", grade: "1", age: 14}
arr1 == arr2; //true
obj1 == obj2; //true
var testArr1 = ["a1","b1"];
var testArr2 = ["a1","b1"];
testArr1 == testArr2; //false
testArr1.toString() == testArr2.toString(); //true
var testArr3 = ["a1b","b1"];
var testArr4 = ["a1","bb1"];
testArr3.toString() == testArr4.toString(); //false64. length 属性 (Function)
返回函数定义的参数数目。
functionName.length
所必须的functionName 参数是被讨论的函数的名称。
说明：
函数的 length 属性是在创建函数实例时由 Scripting 引擎初始化的，值是函数定义中参数的数目。
如果调用函数时参数的数目和它的 length 属性值不同，那么这时发生的情况将依赖于函数本身。
下面的例子说明了 length 属性的用法：
function ArgTest(a, b){
var numargs = ArgTest.arguments.length; //调用函数时实际入参个数
var expargs = ArgTest.length; //函数需要入参个数
}
ArgTest(2,3,4); //函数调用65. 正则表达式语法
一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。
这里有一些可能会遇到的正则表达式示例：
| JScript | VBScript | 匹配 |
| /^\[ \t]*$/ | "^\[ \t]*$" | 匹配一个空白行。 |
| /\d{2}-\d{5}/ | "\d{2}-\d{5}" | 验证一个ID 号码是否由一个2位数字，一个连字符以及一个5位数字组成。 |
| /<(.*)>.*<\/\1>/ | "<(.*)>.*<\/\1>" | 匹配一个 HTML 标记。 |
下表是元字符及其在正则表达式上下文中的行为的一个完整列表：
| 字符 | 描述 |
| \ | 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。 |
| ^ | 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\n' 或 '\r' 之后的位置。 |
| $ | 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\n' 或 '\r' 之前的位置。 |
| * | 匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。 |
| + | 匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。 |
| ? | 匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。 |
| {n} | n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。 |
| {n,} | n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 |
| {n,m} | m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。刘， "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。 |
| ? | 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。 |
| . | 匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用象 '[.\n]' 的模式。 |
| (pattern) | 匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '\(' 或 '\)'。 |
| (?:pattern) | 匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。 |
| (?=pattern) | 正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。 |
| (?!pattern) | 负向预查，在任何不匹配Negative lookahead matches the search string at any point where a string not matching pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始 |
| x|y | 匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。 |
| [xyz] | 字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。 |
| [^xyz] | 负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'。 |
| [a-z] | 字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。 |
| [^a-z] | 负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。 |
| \b | 匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。 |
| \B | 匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。 |
| \cx | 匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。 |
| \d | 匹配一个数字字符。等价于 [0-9]。 |
| \D | 匹配一个非数字字符。等价于 [^0-9]。 |
| \f | 匹配一个换页符。等价于 \x0c 和 \cL。 |
| \n | 匹配一个换行符。等价于 \x0a 和 \cJ。 |
| \r | 匹配一个回车符。等价于 \x0d 和 \cM。 |
| \s | 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。 |
| \S | 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。 |
| \t | 匹配一个制表符。等价于 \x09 和 \cI。 |
| \v | 匹配一个垂直制表符。等价于 \x0b 和 \cK。 |
| \w | 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。 |
| \W | 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。 |
| \xn | 匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如， '\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。. |
| \num | 匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)\1' 匹配两个连续的相同字符。 |
| \n | 标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。 |
| \nm | 标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。 |
| \nml | 如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。 |
| \un | 匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \u00A9 匹配版权符号 (?)。 |
66. js计算小数乘法除法会出现错误。
bug问题描述：js计算10.2*100=1019.999999999
解决方案：将小数的小数部分，化成整数再进行乘除计算
67. ajax问题：
aysnc设置为false异步后，loading动画很快消失甚至不显示
68. jQuery1.4.2中关于:not(:first)一个问题
问题：$(".afuge:not(:first)").hide();悲剧发生了，所有.afuge类都被隐藏了
解决方法1：$(".afuge:not(.afuge:first)").hide();
解决方法2：$(".afuge").not(":first").hide();
就是这么简单，但是就是让人很纠结的，据说是jQuery1.3.2也存在这个问题，各位多注意；
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
