【一】jquery .extend()详解：
①扩展方法：
$.extend({
hello:function(){alert('hello');}
});
................................................................................................................................................
②
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
result={name:"Jerry",age:21,sex:"Boy"}
................................................................................................................................................
③
深度拷贝：
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
result={name:"John",last:"Resig",
location:{city:"Boston",state:"MA",county:"China"}}
................................................................................................................................................
④
var result=$.extend( false, {},
{ name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} } );
result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}
................................................................................................................................................
【二】jquery .bind：
将事件和函数绑定到元素 规定向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。
$(selector).bind(event,data,function)
PS:
1、 $("#inputTest").bind({
"click":function(){alert("click")},
"mouseover":function(){alert("mouseover")}
})
2、 $("#inputTest").bind("click",function(){alert("click")}).bind("mouseover",function(){alert("mouseover")});
................................................................................................................................................
【三】利用.call()来移花接木
调用一个对象的方法，以另一个对象代替当前对象。
/**
*selector 需要统计字数的对象
*callback 回填字数信息的对象或方法
*options 参数设置，可以是一个对象数组，数组的长度必须跟上面的对象个数一致
*/
function(selector, callback, options)
if(typeof(callback)=="function"){
callback.call(this,count(this.value));
}else{
$(callback).eq(i).html(count(this.value)); //对象则显示数值
}
................................................................................................................................................
【四】
call()与apply()效果一样，call(obj,args1,args2,args3) apply(obj,argumengs[]) 参数不一样
function showMessage(){
console.log(arguments.length)
for(var i in arguments){
console.log(arguments[i]);
}
}
function enterMessageObj(){
var name = 'renming'
showMessage.call(this,name);
}
function enterMessageArray(){
var message =[1,2,3,4,5,6,7,8];
showMessage.apply(this,message);
}
enterMessageObj(); // 2 ren ming
enterMessageArray(); // 8 1 2 3 4 5 6 7 8
例如： foo.call(this, arg1, arg2, arg3)
也就是说 this 并没有作为参数传过去 this是方法执行时上下文相关对象(必须的),arg1, arg2, arg3是传给foo方法的参数
这个this变量永远指向当前代码所处的对象中.
******把我的参数传给你的方法*****
callback就是执行完当前再执行 a(b);
function a(callback){
alert("a");
callback();
}
function b(){
alert("b");
}
* a(b); ==》 a b
function a(){console.log('a')}
function b(){console.log('b')}
* a(b()) ==> b a
................................................................................................................................................
【五】
javascript是单线程任务，执行顺序是st0000->st500->while(true)。由于在while(true)时候死循环，st2000没有机会执行。
<script>
setTimeout(function(){while(true){}},1000);
setTimeout(function(){document.write("st2000");},2000);
setTimeout(function(){document.write("st500")},500);
document.write("st0000");
</script>
................................................................................................................................................
【六】
document.cookie 获取cookie值
encodeURIComponent()函数可把字符串作为 URI 组件进行编码。
decodeURIComponent()对上述编码进行解码
java下，cookie的【空格】会被格式化为【加号】
................................................................................................................................................
【七】
.match() 与 .test()
var str = "1989-12-23"; var str = "150.23"
var RegExp = /\d{4}-{1}\d{2}-{1}\d{2}$/g; var RegExp = /^[0-9]+.?[0-9]+$/g;
document.write( str.match(RegExp) ); document.write( RegExp.test(str) );
................................................................................................................................................
【八】
Object.prototype.toString.call(obj) === "[object Function]" / "[object Array]" / "[object Object]"
=== 类型 值 地址 都一样才true
== 会自动转型 只保证值相等
................................................................................................................................................
【九】
在每一个匹配元素的resize事件中绑定一个处理函数。
当文档窗口改变大小时触发
var x = 10000;
$(window).resize(x,function(){
$("span").text(x+=1);
});
$(window).resize(function(){
$("span").text(window.innerHeight);
});
................................................................................................................................................
【十】
document.body.scrollHeight是body元素的滚动高 度，document.documentElement.scrollHeight为页面的滚动高度，且 document.documentElement.scrollHeight在IE和Firefox下还有点小差异。
IE : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度 + 上下border宽度
firefox : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度(marginMax)
document.body/documentElement. clientHeight / scrollHeight / offsetHeight
window.innerHeight
................................................................................................................................................
【十一】
使用Trident内核的浏览器：IE、Maxthon、TT、The World等；
使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；
使用Presto内核的浏览器：Opera7及以上版本； （渲染最快）
使用Webkit内核的浏览器：Safari、Chrome。
................................................................................................................................................
【十二】
缓慢置顶
$("#goTop").click(function(){
$("html,body").animate({scrollTop:$("body").offset().top + "px"},{duration:500})
});
................................................................................................................................................
【十三】
var par = {title:"hello"};
var a ='<div class="text condition">${title}</div>';
document.write(a.replace(/\${\w+}/g,function(s){return par["$[title]".replace(/[^a-zA-Z0-9]/g,"")]}));
function(s)里面的s，接收的是/\${w+}/g匹配得到的结果，利用par[]可以动态取得所要的par属性。/[^a-zA-Z0-9]/g
................................................................................................................................................
【十四】
/*
*IE下,换行是\r\n,当jquery的val()方法会将\r删除
*当使用表单提交(非AJAX)提交时,可能造成提交的长度与验证的长度不一致,引起数据库长度溢出
*因此,除select外,使用原生的value方法
* jQuery1.6+ attr("tagName") > [attr]("tagName")
*/
var _value;
switch(obj[attr]("tagName")){
case "SELECT":
_value=obj.val();
break;
default:
_value=obj[0].value;
}
................................................................................................................................................
【十五】
正则表达式 $1 $2 表示匹配前面正则表达式里面()内的查询内容
var a = 1; a.toString().replace(/^(\d)$/, "0$1") $1的结果就是1
................................................................................................................................................
【十六】
typeof ： object string number undefined function boolean
instanceof : Date Array Function Object
................................................................................................................................................
【十七】
每个元素都有事件处理程序属性 例如onclick onmouseover onmouseout 通常都是小写
要使用javascript指定事件处理程序，首先必须获取到一个操作对象的引用。
................................................................................................................................................
【十八】
if(obj.length == undefined){ //obj是对象 例：name:"ming"
for(i in obj){
a.push(i); //a push 进去的 i 是obj的属性名字 name
b.push(obj[i]); //b push 进去的 obj[i]是内容： ming
}
}else{ //obj是数组
for(i in obj){
c.push(i) // i 只是obj数组的下标 index
d.push(obj[i]) // obj[i]即数组对应的内容
}
}
................................................................................................................................................
【十九】
setTimeout（fn，time） time时间后执行fn方法
................................................................................................................................................
【二十】
javascript 存在insertBefore()；不存在insertAfter
jQuery .before();
................................................................................................................................................
【二十一】
元素.ownerDocument 返回的事document对象
document.documentElement 得到的是下属的 <html>xxxxxxxxxxxxxx</html>
................................................................................................................................................
【二十二】
οncοntextmenu='return false' 取消鼠标右键事件
document.oncontextmenu = function (event)
{
var event = event || window.event;
var style = oMenu.style;
style.display = "block";
style.top = event.clientY + "px";
style.left = event.clientX + "px";
return false;
};
可以自定义右键内容
................................................................................................................................................
【二十三】
null == undefined (true) null int float这些用关键字表示的类型都不属于Object；
Object是Function的事例，Function又是Object的实例。
Function是函数的构造函数，Object是函数，Function也是函数。
................................................................................................................................................
【二十四】
inline-block他是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。它主要配合A、SPAN...这些行内元素标签使用，
当这些行内元素设置为inline-block的时候、他将这些行内元素呈现为块元素（这时候margin、padding、width、height都有用），但他这时候可以在不使用float的情况下是
多个伪块元素（A、SPAN这些行内元素设置inline-block）在一行排列，从而避免了块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，以及这些元素的对齐，就可以直
接设置父容器的text-align使这些标签相对于父容器绝对的居中、居左、居右对齐...
................................................................................................................................................
【二十五】
通过jquery实现异步较好的方式：
var wait = function(dtd){
var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
var tasks = function(){
alert("执行完毕！");
dtd.resolve(); // 改变Deferred对象的执行状态
};
setTimeout(tasks,5000);
return dtd.promise(); // 返回promise对象
};
$.when(wait())
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });
（1） $.Deferred() 生成一个deferred对象。
（2） deferred.done() 指定操作成功时的回调函数
（3） deferred.fail() 指定操作失败时的回调函数
（4） deferred.promise() 没有参数时，返回一个新的deferred对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署deferred接口。
（5） deferred.resolve() 手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。
（6）deferred.reject() 这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。
（7） $.when() 为多个操作指定回调函数。
除了这些方法以外，deferred对象还有二个重要方法，上面的教程中没有涉及到。
（8）deferred.then()
有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。
$.when($.ajax( "/main.php" ))
.then(successFunc, failureFunc );
如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。
（9）deferred.always()
这个方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。
$.ajax( "test.html" )
.always( function() { alert("已执行！");} );
................................................................................................................................................
【二十六】
jQuery(function(){ });
全写为
jQuery(document).ready(function(){
................................................................................................................................................
【二十七】
Chrome 比 Safari 多一个 window.MessageEvent，但要注意排除 Firefox。
if(document.all){ //IE浏览器
window.external.addFavorite(url,name);
}
else if(window.sidebar){ //FireFox浏览器
window.sidebar.addPanel(name,url,"");
}
else if(window.MessageEvent && !document.getBoxObjectFor){ //Chrome浏览器
alert('对不起，您的浏览器不支持此操作!\n请您使用菜单栏或Ctrl+D收藏本站。');
}
................................................................................................................................................
【二十八】
为了指示IE浏览器（客户端）不要缓存页面，服务器端的JSP程序可以编写如下：response.sehHeader("Cache-Control","no-cache");
................................................................................................................................................
【二十九】
html <input type="text" maxlength="20">
即：输入框最多输入20个字符（中文字符/英文字符都是20个）
................................................................................................................................................
【三十】
传统的ajax new->open->send
var oHttp = new XMLHttpRequest();
oHttp.open('GET','http://www.baidu.com');
OHttp.send();
................................................................................................................................................
【三十一】
$.load() 载入远程 HTML 文件代码并插入至 DOM 中 也可以加载php
$.getScript()
跨域：
浏览器“同源策略”，只允许和同协议、同域名、同端口的脚本进行交互。（包括共享与传递变量）
cookie也遵循“同源策略”
jquery 的 jsonp 客户端设置？jsonp=callback 服务器端callback()
$.ajax({
dataType: 'jsonp',
data: 'id=10',
jsonp: 'jsonp_callback',
url: 'http://www.yiwuku.com/getdata',
success: function () {}
});
................................................................................................................................................
【三十二】
<attr title=""></attr> 省略
<acronym title=""></acronym> 缩写
................................................................................................................................................
【三十三】
1.绝对居中
父元素 position：absolute;width:100%; 子元素： margin:0 auto;
2.外边距重叠
两个/以上块级元素（木有设置float） 毗邻的外边距会重叠成一个单一的外边距 a margin-right:10px ; b margin-left:10px; a与b相距10px 而不是20xp；
................................................................................................................................................
【三十四】
1. 使checkbox失效 document.getElementById('xxx').disabled = true;
2. form中的input可以设置为readonly和disable，请问2者有什么区别？
readonly不可编辑，但可以选择和复制；值可以传递到后台
disabled不能编辑，不能复制，不能选择；值不可以传递到后台
3. js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口） : alert confirm prompt
4. input 类型 ： button image text password hidden checkbox radio file reset submit
5. JS 基本数据类型：String Number Boolean ； 复合数据类型： Object Array ； 特殊数据类型：null（Object） undefined(undefined)
6. .getMonth() 从0开始
7. innerText 与 outerText 在获取值时候是一样的结果 text的标签不会被解释
设置的时候： outerText的范围包括了其自身的标签 <span>xxxxxxxxx</span> 例如这就是outerText的范围
innerHTML 与 outerHTML 的范围也是这样理解
................................................................................................................................................
【三十五】
监控当前页面 performance 这套API
监控其他资源 ResourceTiming 这套API
................................................................................................................................................
【三十六】
IE： attachEvent() / detachEvent()
FF: addEventListener() / removeEventListener()
IE: 9以下 可以直接 ele.value 获取 value的属性
IE9（或以上） FF Chrome 是 ele.getAttribute('value')
................................................................................................................................................
【三十七】
this
1、正在执行的函数本身
2、正在执行的 指向该函数 所属的当前对象
................................................................................................................................................
【三十八】
focusin 与 focus 的区别在于 focusin可以在 父元素检测子元素获取到焦点的情况
focusout 与 blur 的区别在于 focusout可以在 父元素检测子元素失去焦点的情况
................................................................................................................................................
【三十九】
Jquery ：
.width() .height()
.innerWidth() .innerHeight() 包括 padding 不包括border
.outerWidth() .outerHeight() 包括 padding border 如果传入参数true 则包括margin
................................................................................................................................................
【四十】
iframe时候 js：
window.top 最顶级的iframe父窗口
window.parent父窗口
window.self 本窗口
................................................................................................................................................
【四十一】
location
protocol : 协议 "http:"
hostname/host : 服务器的名字 "baidu.com"
port : 端口 "88"
pathname : URL中主机名后,"?"前的部分 "/index.php"
search : "?"后的部分，又称为查询字符串 "?name=kang&when=2011"
hash : 返回"#"之后的内容 "#first"
host : 等于hostname + port "baidu.com:88"
href : 当前页面的完整URL "http://www.a.com:88/index.php?name=kang&when=2011#first"
document.cookie 每一“组”Cookies 有规定的总大小（大约 2KB 每“组”），一超过最大总大小，则最早失效的 Cookie 先被删除，来让新的 Cookie“安家”。
................................................................................................................................................
【四十二】
indexOf(a,b) b参数是开始的位置，可有可无。
................................................................................................................................................
【四十三】
服务器访问网页的时候，大部分服务器在访问 http://xxxxxxxxxxx/ 的时候，尝试访问http://xxxxxxxxxxx/favicon.ico 。所以服务器端可以看到两次的reuquest。
................................................................................................................................................
【四十四】
setTimeout是异步延迟，并不会造成阻塞。
................................................................................................................................................
【四十五】
IE -> Trident ; Firefox -> Geoko ; Chrome safari Opera -> webkit ;
解析html构建dom树 -》 构建render树 -》 布局render树 -》 绘制render树
Chrome为每个tab分配独立的渲染引擎实例，也就是每个tab都是一个独立的进程。
................................................................................................................................................
【四十六】
统计文本框输入字数，可以 绑定 keyup 事件，取input的value即可。
................................................................................................................................................
【四十七】
seajs ：
其他文件的路径是相对于sea.js来决定的，
<script src="static/seajs/sea-debug.js" id="seajsnode" data-main="application.js"></script>
application.js的路径是 static/application.js
................................................................................................................................................
【四十八】
var a = new Function('alert(1)'); ======> var a = function(){alert(1)}
setTimeout('a()',16) ======> setTimeout(a,16)
................................................................................................................................................
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
