几个比较经典常用的jQuery小技巧

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了几个比较经典常用的jQuery小技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3190字，纯文字阅读大概需要5分钟。

内容图文

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 
type="text/javascript"></script> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
 
2. Load() 函数： 

> 这个也是很不错的喔，很多地方都可以用上。 
> 比如想在某些图片没有载入之前加个提示之类的。 
> 或者对页面载入过程最后一个元素使用，则可以提供整页面的载入提示。 
> 下面只是一个简单的例子，选择器选择的是 Img 标签。 
> 然后搜索属性，只是属性类型为 Src 即图片地址，后面则是图片地址的内容。 
> 在图片载入完成之后则会弹出一个提示框表示图片已经载好。 
> 注意！！请一定要填入与目标元素内填的完全相同的 Src，否则会杯具的。 
 代码如下:

<script> 
jQuery(document).ready(function($){ 
$('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg') 
        .load(function() { 
alert('Image Loaded'); 
}); 
}); 
</script> 
 
> 演示页面传送门：http://www.evlos.org/global/demo/jquery_load 

3. 简单的垂直居中： 

> 这里使用的是 Height() 函数，选择器里的 document 表示整个页面。 
> 下面查找的是 Class 为 Move 的元素，It_height 定义为元素高度。 
> 然后将变量 Global_height 定义为整个页面的高度，即页顶至页底的距离。 
> 然后将此元素的至顶部的距离调整为整个页面的高度的一半即可。 

> 呵呵，相信有兴趣的童鞋已经可以举一反三咯。 
> jQuery 对 CSS 进行调整的能力是灰常强大的 O(∩_∩)O。 
 代码如下:

<script> 
jQuery(document).ready(function($){ 
    var global_height = $(document).height(); 
    var it_height = $('.move').height(); 
    $('.move').css({'position' : 'absolute' , 'top' : 
        global_height/2 - it_height/2}); 
}); 

 
> 演示页面传送门：http://www.evlos.org/global/demo/jquery_height 

4. jQuery 与 Onclick 事件结合： 
 代码如下:

<div onclick="var global_height = $(document).height(); 
    var it_height = $('.move').height(); 
    $('.move').css({'position' : 'absolute' , 'top' : 
    global_height/2 - it_height/2});">Move It !</div> 
 
> 把上面的代码放到这里来，则鼠标点击此 DIV 之后执行代码。 

5. ReplaceWith 函数： 

> 下面的代码是寻找 Class 为 Demo 的元素，然后将其整个替换掉。 
> 整个的意思，是包含了前后的标签的，所以替换函数内别忘记写标签喔。

  代码如下:

<script> 
jQuery(document).ready(function($){ 
    $('.demo').replaceWith('<div style="padding-top:30px">Replaced !</div>'); 
}); 
</script> 
 
> 演示页面传送门：http://www.evlos.org/global/demo/jquery_replace 

6. Load() 函数的运用（页面载入提示）： 

> 首先写好 CSS，绝对定位到页面右上角。 

 代码如下:

#loading { 
    position:absolute;    z-index:900;text-align:center; 
    background-color:#eef2fa;border:1px solid #d8e3e8; 
    color:#000;font-size:12px;padding:3px;width:80px; 
    right:0;top:0; 
} 
 
> 然后用 jQuery 然后在所有图片载入完成之后，隐藏 Loading DIV。 
> 别忘记载入 jQuery 库哈，刚才测试代码的时候地址写错了，差点疯掉。 
 代码如下:

<script> 
jQuery(document).ready(function($){ 
$('img').load(function(){ 
        $('#loading').css("display","none"); 
}); 
}); 
</script> 
 
> 随便某处插入一个 DIV 即可，O(∩_∩)O 哈哈。 

<div id="loading">Loading ...</div> 

            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的几个比较经典常用的jQuery小技巧全部内容，希望文章能够帮你解决几个比较经典常用的jQuery小技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端