1、deffered对象:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
--------------------------------------------------------------------------------------------------------------------------------------------------
2、focusin,focusout与focus,blur的区别:focusin,focusout可以在父元素上检测子元素失去焦点的情况(换而言之,它支持事件冒泡);例子如下:
<body>
<p>
<input type="text" />
</p>
<div id="f1">focusin: 0</div>
<div id="f2">focus: 0</div>
<div id="b1">focusout: 0</div>
<div id="b2">blur: 0</div>
<script>
//focusin,focusout可以在父元素上检测子元素失去焦点的情况(换而言之,它支持事件冒泡);
$(function(){
var i=0,ii=0,j=0,jj=0;
$('p').focusin(function(){ //注意此处是input的父元素p;
i++;
$('#f1').text('focusin: '+i);
}).focus(function(){
ii++;
$('#f2').text('focus: '+ii);
}).focusout(function(){
j++;
$('#b1').text('focusout: '+j);
}).blur(function(){
jj++;
$('#b2').text('blur: '+jj);
})
})
</script>
</body>
-------------------------------------------------------------------------------------------------------------------------------------------------
3、keyDown, keyUp, keyPress的区别:
(1) keydown 和 keyup提供一个代码,显示哪一个键被按下,而keypress显示的哪个字符被输入。
例如,一个小写的“a”通过keydown和keyup将被报告为65,但通过 keypress 显示的是97。
由于这种区别,当捕捉特殊按键,如箭头,.keydown()或.keyup()是较好的选择。
当捕获实际输入文本时, .keypress()可能是一个更好的选择。
(2) 组合键(如Shift)会触发keydown事件,但不会触发keypress事件。
-------------------------------------------------------------------------------------------------------------------------------------------------
4、$.param()的用法:
$.param的参数可以是对象也可以是数组;
如果是数组必须是用.serializeArray() 格式化后返回的一个数组,即数组中的内容由对象组成,每个对象都拥有name和value值;
例子如下:
<body>
<div id="results"></div>
<script>
//$.param的参数可以是对象也可以是数组;
//如果是数组必须是用.serializeArray() 格式化后返回的一个数组,即数组中的内容由对象组成,每个对象都拥有name和value值;
//参数是对象
/*
var params = { width:1680, height:1050 };
var str = $.param(params);
$("#results").text(str);
*/
//参数是数组
var b=[{name:"first",value:"Rick"},
{name:"last",value:"Astley"}];
var str = $.param(b)
$('#results').text(str);
</script>
</body>
-------------------------------------------------------------------------------------------------------------------------------------------------
5、attr、prop、is方法的区别(返回值):
例子如下:
<body>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
<script>
//attr,prop.is方法的区别
$("input").change(function() {
var $input = $(this);
$("p").html(".attr('checked'): <b>" + $input.attr('checked') + "</b><br>" //checked
+ ".prop('checked'): <b>" + $input.prop('checked') + "</b><br>" //true
+ ".is(':checked'): <b>" + $input.is(':checked') ) + "</b>"; //true
}).change();
</script>
</body>
-------------------------------------------------------------------------------------------------------------------------------------------------
6、data和removeData方法:
例子如下:
<body>
<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
<script>
//在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
$("button").click(function(e) {
var value;
switch ($("button").index(this)) {
case 0 :
value = $("div").data("blah"); //取存在div的blah中的data值;
break;
case 1 :
$("div").data("blah", "hello"); //在blah中存入字符串‘hello’
value = "Stored!"; //注:data中可用存储各种数据类型;
break; //例-> 存:$("div").data("blah",{"one":1,"two":2}),取:$("div").data("blah").one;
case 2 :
$("div").data("blah", 86);
value = "Stored!";
break;
case 3 :
$("div").removeData("blah"); //删除存储在div的blah中的数据;
value = "Removed!";
break;
}
$("span").text("" + value);
});
</script>
</body>
-------------------------------------------------------------------------------------------------------------------------------------------------
7、eq()与nth-child的区别:
(1) 前者从0开始,后者从1开始;
(2) 前者对全部符合条件的对象排序,后者对各个子集进行排序
例子如下:
<body>
<ul class="nav">
<li>List 1, item 1</li>
<li>List 1, item 2</li>
<li>List 1, item 3</li>
</ul>
<ul class="nav">
<li>List 2, item 1</li>
<li>List 2, item 2</li>
<li>List 2, item 3</li>
</ul>
<script>
/* applies yellow background color to a single <li> */
$("ul.nav li:eq(1)").css( "backgroundColor", "#ff0" );
/* applies italics to text of the second <li> within each <ul class="nav"> */
$("ul.nav").each(function(index) {
$(this).find("li:eq(1)").css( "fontStyle", "italic" );
});
/* applies red text color to descendants of <ul class="nav"> */
/* for each <li> that is the second child of its parent */
$("ul.nav li:nth-child(2)").css( "color", "red" );
</script>
</body>
-------------------------------------------------------------------------------------------------------------------------------------------------
8、nth-of-type()与nth-Child()的区别:
例子如下:
<body>
<div>
<span>Corey,</span>
<span>Yehuda,</span>
<span>Adam,</span>
<span>Todd</span>
</div>
<div>
<b>Nobody,</b>
<span>Jarn,</span>
<span>Scott,</span>
<span>Timo</span>
</div>
<script>
$("span:nth-of-type(3)").addClass("fot1");
$("div span:nth-Child(2)").addClass('fot2')
</script>
</body>
-------------------------------------------------------------------------------------------------------------------------------------------------
未完待续……