jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，并且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html里面插入一堆js來調用命令了，只需要定義id即可，jQuery已經成為最流行的javascript庫，下面給大家推薦幾款常用的JQuery代碼。

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到表格的最下面

為了讓table具有更好的可讀性，我們可以將表格的header信息克隆一份到表格的底部，這種特效通過JQuery就很容易實現：

var $tfoot = $('<tfoot></tfoot>'); $($('thead').clone(true, true).children().get().reverse()).each(function(){$tfoot.append($(this)); }); $tfoot.insertAfter('table thead');

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); });

原文地址：https://segmentfault.com/a/1190000016895814

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的几个非常实用的JQuery代码片段的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。