（转载）推荐几个非常实用的JQuery代码片段

文章转载自：慧都控件网 [http://www.evget.com]
原文地址：http://www.evget.com/article/2015/11/3/22874.html

1. 管理搜索框的值

现在各大网站都有搜索框，而搜索框通常都有默认值，当输入框获取焦点时，默认值消失。而一旦输入框失去焦点，而输入框里又没有输入新的值，输入框里的值又会恢复成默认值，如果往输入框里输入了新值，则输入框的值为新输入的值。这种特效用JQuery很容易实现：

$("#searchbox")   .focus(function(){$(this).val('')})   .blur(function(){       var $this = $(this);      // '请搜索...'为搜索框默认值      ($this.val() === '')? $this.val('请搜索...') : null; });

---

2. 反序访问JQuery对象里的元素

在某些场景下，我们可能需要反序访问通过JQuery选择器获取到的页面元素对象，这个怎么实现呢？看下面代码：

//要掌握JQuery对象的get方法 以及数组的reverse方法即可var arr = $('#nav').find('li').get().reverse();$.each(arr,function(index,ele){     .... ... });

---

3. 克隆table header到表格的最下面

在某些场景下，我们可能需要反序访问通过JQuery选择器获取到的页面元素对象，这个怎么实现呢？看下面代码：

//要掌握JQuery对象的get方法 以及数组的reverse方法即可var arr = $('#nav').find('li').get().reverse();$.each(arr,function(index,ele){     .... ... });

---

4. 使用JQuery重绘图片的大小

关于图片大小的重绘，你可以在服务端来实现，也可以通过JQuery在客户端实现。

$(window).bind("load", function() {     // IMAGE RESIZE     $('#product_cat_list img').each(function() {          var maxWidth = 120;          var maxHeight = 120;          var ratio = 0;          var width = $(this).width();          var height = $(this).height();          if(width > maxWidth){           ratio = maxWidth / width;           $(this).css("width", maxWidth);           $(this).css("height", height * ratio);           height = height * ratio;          }          var width = $(this).width();          var height = $(this).height();          if(height > maxHeight){           ratio = maxHeight / height;           $(this).css("height", maxHeight);           $(this).css("width", width * ratio);           width = width * ratio;          }     });     //$("#contentpage img").show();     // IMAGE RESIZE});

---

5. 滚动时动态加载页面内容

有些网站的网页内容不是一次性加载完毕的，而是在鼠标向下滚动时动态加载的，这是怎么做到的呢？看下面代码：

var loading = false;$(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){      if(loading == false){           loading = true;           $('#loadingbar').css("display","block");           $.get("load.php?start="+$('#loaded_max').val(), function(loaded){                $('body').append(loaded);                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);                $('#loadingbar').css("display","none");                loading = false;           });      } }});$(document).ready(function() { $('#loaded_max').val(50);});