学习 jquery-1.9 的API -

keimon

浏览: 74787 次
性别:
来自: 上海

最近访客更多访客>>

Jessy_橙子

yw8886484

LuWeiFeng

ntanita

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

学习 jquery-1.9 的API

博客分类：

jquery

jquery

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

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>

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

未完待续……

分享到：

仿天猫图片展示效果2 | 常见三级菜单

2013-02-04 17:13
浏览 1026
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

学习 jquery-1.9 的API

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

学习 jquery-1.9 的API

评论

发表评论

相关推荐

元素的拖拽与重排

iframe的一些用法

模拟下拉框

2中跨浏览器placeholder实现

XMLHttpRequestd对象的abort()方法

通过$.data判断，并执行函数

live,on,bind执行顺序

jquery插件的编写（放置于Github）

页面滚动定位效果

jquery-简单插件编写

jquery-选择城市

鼠标移动形成选择框-选择checkbox

仿天猫图片展示效果2

常见三级菜单

综合图片展示效果

两种瀑布流实现

解析json数据

分享到各网站-bshare

列举jquery插件

搜索提示

最近访客更多访客>>