学习 jquery-1.9 的API

最新推荐文章于 2022-10-11 15:59:56 发布

iteye_6992

最新推荐文章于 2022-10-11 15:59:56 发布

阅读量81

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

jquery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

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>

-------------------------------------------------------------------------------------------------------------------------------------------------

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>

-------------------------------------------------------------------------------------------------------------------------------------------------

未完待续……

iteye_6992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习 jquery-1.9 的API

1、deffered对象：http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html-------------------------------------------------------------------------------------------...
复制链接

扫一扫

专栏目录