返回旧版| 微信建站| 建站之家论坛| 我要建站 | 建站学习 | 加入收藏
jquery教程当前位置:首页 > HTML教程 > jquery教程 > 正文

推荐几个非常实用的jQuery代码片段

发布时间:2015-12-15 09:02:41   来源:   点击:
概述:jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可,jQuery已经成为最流行的javaScript库。

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、事件、实现动画效果,并且方便地为网站提供AJAX交互。javaScript还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择,下面给大家推荐几款常用的jQuery代码。

1、管理搜索框的值
现在各大网站都有搜索输入框,而输入框通常都有默认值,当输入框获取信息时,那么默认值就会消失;而一旦输入框失去信息,并且没有输入新的值,那么输入框就会恢复成默认值,但如果往输入框里输入了新值,那么输入框的值就是新输入的值。这种特效用javascript很容易实现:
  1. $("#searchbox" 
  2.  
  3. .focus(function(){$(this).val('')}) 
  4.  
  5. .blur(function(){ 
  6.  
  7. var $this = $(this); 
  8.  
  9. // '请搜索...'为搜索框默认值 
  10.  
  11. ($this.val() ==='')? $this.val('请搜索...') :null
  12.  
  13. }); 
2、反序访问jQuery对象里的元素
在某些场景下,我们可能需要通过jQuery选择器来反序访问页面获到的元素,这个怎么实现呢?看下面代码:

  1. //要掌握jQuery对象的get方法以及数组的reverse方法即可 
  2.  
  3. var arr = $('#nav').find('li').get().reverse(); 
  4.  
  5. $.each(arr,function(index,ele){ 
  6.  
  7. .... ... 
  8.  
  9. }); 
3、复制table header到表格的最下面
为了让table具有更好的可读性,我们可以将表格的header信息复制一份到表格的底部,这种特效通过jQuery就很容易实现:
  1. var $tfoot = $(''); 
  2.  
  3. $($('thead').clone(true,true).children().get().reverse()).each(function(){ 
  4.  
  5. $tfoot.append($(this)); 
  6.  
  7. }); 
  8.  
  9. $tfoot.insertAfter('table thead'); 
4、使用jQuery重绘图片的大小
关于图片大小的重绘,你可以在服务端来实现,也可以通过jQuery在客户端实现。

  1. $(window).bind("load",function() { 
  2.  
  3. // IMAGE RESIZE 
  4.  
  5. $('#product_cat_list img').each(function() { 
  6.  
  7. var maxWidth = 120; 
  8.  
  9. var maxHeight = 120; 
  10.  
  11. var ratio = 0; 
  12.  
  13. var width = $(this).width(); 
  14.  
  15. var height = $(this).height(); 
  16.  
  17. if(width > maxWidth){ 
  18.  
  19. ratio = maxWidth / width; 
  20.  
  21. $(this).css("width", maxWidth); 
  22.  
  23. $(this).css("height", height * ratio); 
  24.  
  25. height = height * ratio; 
  26.  
  27.  
  28. var width = $(this).width(); 
  29.  
  30. var height = $(this).height(); 
  31.  
  32. if(height > maxHeight){ 
  33.  
  34. ratio = maxHeight / height; 
  35.  
  36. $(this).css("height", maxHeight); 
  37.  
  38. $(this).css("width", width * ratio); 
  39.  
  40. width = width * ratio; 
  41.  
  42.  
  43. }); 
  44.  
  45. //$("#contentpage img").show(); 
  46.  
  47. // IMAGE RESIZE 
  48.  
  49. }); 
5、用滚动加载动态页面的内容
有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码:

  1. var loading =false
  2.  
  3. $(window).scroll(function(){ 
  4.  
  5. if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ 
  6.  
  7. if(loading ==false){ 
  8.  
  9. loading =true
  10.  
  11. $('#loadingbar').css("display","block"); 
  12.  
  13. $.get("load.php?start="+$('#loaded_max').val(),function(loaded){ 
  14.  
  15. $('body').append(loaded); 
  16.  
  17. $('#loaded_max').val(parseInt($('#loaded_max').val())+50); 
  18.  
  19. $('#loadingbar').css("display","none"); 
  20.  
  21. loading =false
  22.  
  23. }); 
  24.  
  25.  
  26.  
  27. }); 
  28.  
  29. $(document).ready(function() { 
  30.  
  31. $('#loaded_max').val(50); 
  32.  
  33. }); 

版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814