jQuery技术

document.documentElement的一些使用技巧(2)

字号+ 作者:H5之家 来源:H5之家 2017-02-01 12:03 我要评论( )

div buttonClose/button /div $('#panel').fadeIn(function(){ // this points to #panel $('#panel button').click(function(){ // this points to the button $(this).fadeOut(); }); 10.}); 嵌套的二个回调函数t


<div >
<button>Close</button>
</div>
$('#panel').fadeIn(function(){
// this points to #panel
$('#panel button').click(function(){
// this points to the button
$(this).fadeOut();
});
10.});


嵌套的二个回调函数this指向是不同的!现在我们希望this的指向是#panel的元素。代码如下:

代码如下:


$('#panel').fadeIn(function(){
// Using $.proxy to bind this:

$('#panel button').click($.proxy(function(){
// this points to #panel
$(this).fadeOut();
},this));
});


10.快速获取节点数
这是个常用的技巧,代码如下:

代码如下:


console.log( $('*').length );


11.构建个jquery插件

代码如下:


(function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);


关于jquery插件的构建,明河曾发过系列教程,传送门:制作jquery文字提示插件—jquery插件实战教程(1)。
这里就不再详述。

12.设置ajax全局事件
关于ajax全局事件,明河曾发过完整的介绍文章,传送门:《jquery的ajax全局事件详解—明河谈jquery》。

13.延迟动画

代码如下:


// This is wrong:
$('#elem').animate({width:200},function(){
setTimeout(function(){
$('#elem').animate({marginTop:100});
},2000);
});

// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});


当存在多个animate动画时,如何处理动画的执行顺序是个烦心事,原文作者是建议使用delay()函数,如上面的代码,但明河的建议是使用queue()方法,因为delay你要考虑延迟多少时间,而queue没有这个问题,进入队列的函数会一个个顺序执行。可以看明河以前的文章queue和dequeue—明河谈jquery。

15.jquery的本地存储
本地存储在现在web应用中使用越来越频繁,jquery有个专门用于本地存储的插件叫$.jStorage jQuery plugin。

代码如下:


// Check if "key" exists in the storage
var value = $.jStorage.get("key");
if(!value){
// if not - load the data from the server
value = load_data_from_server();
// and save it
$.jStorage.set("key",value);
}

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery实现字符串全部替换的方法

    jQuery实现字符串全部替换的方法

    2016-12-15 13:07

  • [幻灯片代码] jQuery将任何HTML内容转换为水平或垂直的类似旋转木马样式的幻灯片特效代码

    [幻灯片代码] jQuery将任何HTML内容转换为水平或垂直的类似旋转木马

    2016-12-14 14:02

  • jquery $.trim()去除字符串空格详解

    jquery $.trim()去除字符串空格详解

    2016-03-07 15:00

  • jquery对象和JavaScript对象即DOM对象相互转换

    jquery对象和JavaScript对象即DOM对象相互转换

    2016-03-06 17:00

网友点评
m