8个jQuery方法,你应该知道!

原创
2011/03/16 23:26
阅读数 388

jQuery已经成为最著名的JS框架了,因为它的简便。之前讨厌javascript繁琐的开发者,也应该因为jQuery而改变主意了。它节省了大量的时间。

jQuery文档有助于jQuery的成功,它真的有帮助和简洁。通过这些文档,我发现了一些很好的、有趣的方法,希望不要有遗漏。

1 .data()

.data()方法来代替。$.data( element, key, value )可以对DOM元素附加任何类型的数据,但应避免循环引用而导致的内存泄漏问题

通过HTML5,我们可以将它按照类来使用,举例如下:

< div data-type = "page" data-hidden = "true" data-options = '{"name":"John"}' ></ div >
 
//We can call it via:
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

下面同上面一样效果:

$("div").data("role", "page");
$("div").data("hidden", "true");
$("div").data("role", {name: "John"});

说明: jQuery Documentation - .data()

2 .stop( [ clearQueue ], [ jumpToEnd ] )

当处理动画时,这个方法非常之有用。它可以结束所有现存的动画,并播放当前的一个。

$(this).find('img').stop(true, true).fadeOut();

说明: jQuery Documentation - .stop()

3 .toggleClass()

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

1
$('#home').toggleClass('active');

同上一致:

if ($('#home').hasClass('active')) {
     $('#home').removeClass('active');
   }
   else {
     $('#home').addClass('active');
   }
说明: jQuery Documentation - .toggleClass()

4 .delay( duration, [ queueName ] )

该方法在一系列动画中做一些延时,很奏效。

$('#content').slideUp(300).delay(800).fadeIn(400);
说明: jQuery Documentation - .delay()

5 .each()

jquery中的each函数很方便,$.each()函数封装了十分强大的遍历功能,它可以遍历一维数组、多维数组、DOM, JSON 等等,在javascript开发过程中使用$each可以大大的减轻我们的工作量。

/Given this HTML Structure
< ul >
     < li >Apple</ li >
     < li >Orange</ li >
     < li >Mango</ li >
     < li >Blueberry</ li >
     < li >Watermelon</ li >
</ ul >
 
//We can retrieve the value with:
$('li').each(function(index) {
     alert(index + ': ' + $(this).text());
});
 
 
//Alternatively, loop through JSON
var data = "{ name: "John", lang: "JS" }";
 
$.each( data, function(k, v){
    alert( "Key: " + k + ", Value: " + v );
});
说明: jQuery Documentation - .each()

6 .size()

它很容易被了解和记住。

//Given this HTML Structure
< ul >
     < li >Apple</ li >
     < li >Orange</ li >
     < li >Mango</ li >
     < li >Blueberry</ li >
     < li >Watermelon</ li >
</ ul >
 
var size1 = $("li").size();
var size2 = $("li").length;
上面的例子返回5。

说明: jQuery Documentation - .size()

7 .closest(selector)

用于匹配元素的选择器字符串

$('li.item-a').closest('ul').css('background-color', 'red');
说明: jQuery Documentation - .closest()

8 .position()

获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性:top 和 left。

var p = $("p:first");
var position = p.position();
alert("left: " + position.left + ", top: " + position.top);
说明: jQuery Documentation - .position()
展开阅读全文
打赏
0
4 收藏
分享
加载中
收藏了!
2011/03/17 11:09
回复
举报
长见识了。。。
2011/03/17 00:43
回复
举报
更多评论
打赏
2 评论
4 收藏
0
分享
返回顶部
顶部