jquery常用的12個小功能，jquery常用12功能

jquery常用的12個小功能，jquery常用12功能

jquery12個常用功能極好的，快來圍觀！

返回頂部
使用JQuery的animate和scrollTop方法可以建立簡單地返回頂部的動畫：

// Back to top$('a.top').click(function (e) { e.preventDefault(); $(document.body).animate({scrollTop: 0}, 800);});

HTML中得有一個按鈕：

<!-- Create an anchor tag --><a class="top" href="#">Back to top</a>

可以改變scrollTop的值來定位捲軸的位置。

圖片預先載入
如果頁面使用了很多不是最初載入便可見的圖片，有必要進行預先載入：

$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('img').attr('src', arguments[i]); }};$.preloadImages('img/hover-on.png', 'img/hover-off.png');

判斷圖片是否完全載入
有時需要圖片完全載入才能進行後面的操作，下面的這段指令碼可以實現：

$('img').load(function () { console.log('image load successful');});

你也可以通過帶id或者class的img標籤來判斷某張特定的圖片是否完全載入

自動修複損壞圖片
如果圖片損壞，可以用另外一張進行替換：

$('img').on('error', function () { $(this).prop('src', 'img/broken.png');});

Hover狀態的類切換
當使用者的滑鼠指標懸浮在一個可以點擊的元素上時，你可以通過添加一個class改變它的視覺效果，滑鼠指標離開該元素時，就移開剛剛添加的class：

$('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); });

一個更簡單的方式是使用toggleClass：

$('.btn').hover(function () { $(this).toggleClass('hover');});

Note: CSS may be a faster solution in this case but it's still worthwhile to know this.輸入框的不可編輯
有時，你想要表單的提交按鈕或者文字框變的不可編輯，直到使用者完成某個特定的動作，通過修改input元素的disabled屬性來實現：
$('input[type="submit"]').prop('disabled', true);
再次調用prop方法將disabled值改為false，就可以更改元素狀態：
$('input[type="submit"]').prop('disabled', false);

停止連結載入
若你不想點選連結跳轉到另一個頁面或者重新載入頁面，僅僅只想讓它做點別的事情，如觸發其它指令碼，則需要阻止連結的預設行為:

$('a.no-link').click(function (e) { e.preventDefault();});

Fade/Slide切換
Slideing 和 fading 是很常用的 JQuery 動畫。如果你想要在使用者產生點擊事件時顯示一個元素，可以用fadeIn或者slideDown，若要實現第一次點擊顯示元素而第二次點擊隱藏元素的效果，可以參考下面的指令碼：

// Fade$('.btn').click(function () { $('.element').fadeToggle('slow');});// Toggle$('.btn').click(function () { $('.element').slideToggle('slow');});

簡單地手風琴
下面的這段指令碼可以簡單實現手風琴效果：

// Close all panels$('#accordion').find('.content').hide();// Accordion$('#accordion').find('.accordion-header').click(function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false;});

讓兩個Div等高
有時，需要讓兩個Div保持等高，而不管兩個Div的內容如何：

$('.div').css('min-height', $(.main-div).height());var $columns = $('.column');var height = 0;$columns.each(function () { if ($(this).height() > height) { height = $(this).height(); }});$columns.height(height);

在上述的樣本中，會迴圈一個元素集合，並將元素的高度設定成元素集合中高度最高的。若要所有 column 保持同樣地高度，則可以這樣：

var $rows = $('.same-height-columns');$rows.each(function () { $(this).find('.column').height($(this).height());});

在新的Tab/Window開啟外鏈
在瀏覽器的新Tab/Window開啟外鏈，並且在同一個Tab/Window開啟同源的連結：

$('a[href^="http"]').attr('target','_blank');$('a[href^="//"]').attr('target','_blank');$('a[href^="'+window.location.origin+'"]').attr('target','_self');

Note: window.location.origin doesn't work in IE10. This fix takes care of the issue.
通過文本尋找元素
利用 JQuery 的contains()選取器可以尋找一個包含特定文本的元素，如果文本不存在，元素則隱藏：

var search = $('#search').val();$('div:not(:contains("'+search+'"))').hide();

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。