12個(gè)jquery常用功能，極好的，分享給大家，幫助大家更好的進(jìn)行jQuery開發(fā)，感興趣的小伙伴們可以參考一下

返回頂部

使用JQuery的animate和scrollTop方法可以創(chuàng)建簡單地返回頂部的動(dòng)畫：

// Back to top

$('a.top').click(function (e) {

 e.preventDefault();

 $(document.body).animate({scrollTop: 0}, 800);

});

HTML中得有一個(gè)按鈕：

<!-- Create an anchor tag -->

<a class="top" href="#">Back to top</a>

可以改變scrollTop的值來定位滾動(dòng)條的位置。

圖片預(yù)加載

如果頁面使用了很多不是最初加載便可見的圖片，有必要進(jìn)行預(yù)加載：

$.preloadImages = function () {

 for (var i = 0; i < arguments.length; i++) {

 $('img').attr('src', arguments[i]);

 }

};

$.preloadImages('img/hover-on.png', 'img/hover-off.png');

判斷圖片是否完全加載

有時(shí)需要圖片完全加載才能進(jìn)行后面的操作，下面的這段腳本可以實(shí)現(xiàn)：

$('img').load(function () {

 console.log('image load successful');

});

你也可以通過帶id或者class的img標(biāo)簽來判斷某張?zhí)囟ǖ膱D片是否完全加載

自動(dòng)修復(fù)損壞圖片

如果圖片損壞，可以用另外一張進(jìn)行替換：

$('img').on('error', function () {

 $(this).prop('src', 'img/broken.png');

});

Hover狀態(tài)的類切換

當(dāng)用戶的鼠標(biāo)指針懸浮在一個(gè)可以點(diǎn)擊的元素上時(shí)，你可以通過添加一個(gè)class改變它的視覺效果，鼠標(biāo)指針離開該元素時(shí)，就移開剛剛添加的class：

$('.btn').hover(function () {

 $(this).addClass('hover');

 }, function () {

 $(this).removeClass('hover');

 });

一個(gè)更簡單的方式是使用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.輸入框的不可編輯

有時(shí)，你想要表單的提交按鈕或者文本框變的不可編輯，直到用戶完成某個(gè)特定的動(dòng)作，通過修改input元素的disabled屬性來實(shí)現(xiàn)：

$('input[type="submit"]').prop('disabled', true);

再次調(diào)用prop方法將disabled值改為false，就可以更改元素狀態(tài)：

$('input[type="submit"]').prop('disabled', false);

停止鏈接加載

若你不想點(diǎn)擊鏈接跳轉(zhuǎn)到另一個(gè)頁面或者重新加載頁面，僅僅只想讓它做點(diǎn)別的事情，如觸發(fā)其它腳本，則需要阻止鏈接的默認(rèn)行為:

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

 e.preventDefault();

});

Fade/Slide切換

Slideing 和 fading 是很常用的 JQuery 動(dòng)畫。如果你想要在用戶產(chǎn)生點(diǎn)擊事件時(shí)顯示一個(gè)元素，可以用fadeIn或者slideDown，若要實(shí)現(xiàn)第一次點(diǎn)擊顯示元素而第二次點(diǎn)擊隱藏元素的效果，可以參考下面的腳本：

// Fade

$('.btn').click(function () {

 $('.element').fadeToggle('slow');

});

// Toggle

$('.btn').click(function () {

 $('.element').slideToggle('slow');

});

簡單地手風(fēng)琴

下面的這段腳本可以簡單實(shí)現(xiàn)手風(fēng)琴效果：

// 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;

});

讓兩個(gè)Div等高

有時(shí)，需要讓兩個(gè)Div保持等高，而不管兩個(gè)Div的內(nèi)容如何：

$('.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);

在上述的示例中，會(huì)循環(huán)一個(gè)元素集合，并將元素的高度設(shè)置成元素集合中高度最高的。若要所有 column 保持同樣地高度，則可以這樣：

var $rows = $('.same-height-columns');

$rows.each(function () {

 $(this).find('.column').height($(this).height());

});

在新的Tab/Window打開外鏈

在瀏覽器的新Tab/Window打開外鏈，并且在同一個(gè)Tab/Window打開同源的鏈接：

$('a[href^="http"]').attr('target','_blank');

$('a[href^="http://"]').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()選擇器可以查找一個(gè)包含特定文本的元素，如果文本不存在，元素則隱藏：

var search = $('#search').val();

$('div:not(:contains("'+search+'"))').hide();

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助