jquery常用的12個小功能

PC教程網】關于jquery常用的12個小功能_jquery常用介紹:jquery12個常用功能極好的,快來圍觀! 返回頂部 使用JQuery的animate和scrollTop方法可以創建簡單地返回頂部的動畫: // Back to top$('a.top').click(function (e) { e.preventDefault(); $(document.body).animate,下面小編為您針對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^="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()選擇器可以查找一個包含特定文本的元素,如果文本不存在,元素則隱藏:

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關教程

PHP網站開發中常用的8個小技巧

PHP是一種用于創建動態WEB頁面的服務端腳本語言。如同ASP和ColdFusion,用戶可以混合使用PHP和HTML編寫WEB頁面,當訪 問者瀏覽到該頁面時,服務端會首先對頁面中的PHP命令進行處理,然后 …

PHP開發中常用的8個小技巧

PHP批最取得checkbox的值 1、命名 input type='checkbox' name='checkbox[]' value=$dwmyrow[banzhu] / 2、使用 當計劃當作sql指令的一部分時:如果參與控制的字段是數值型的,則 if(! empty($_POST['checkbox'])) { …

Windows7常用的幾個小技巧詳細介紹

終于拋棄Windows XP,直接跳過Vista,直接使用Winodws 7 Beta。不做小白鼠很久了,因為這需要勇氣。這次之所以敢再次嘗試Beta版的Windows新版系統,只因為太誘惑 方法/步驟 建設改換Windows 7系 …

非常實用的12個jquery代碼片段

jQuery里提供了許多創建交互式網站的方法,在開發Web項目時,開發人員應該好好利用jQuery代碼,它們不僅能給網站帶來各種動畫、特效,還會提高網站的用戶體驗。 本文收集了12段非常 …

15個jquery常用方法、小技巧分享

1.獲取td的行標和列標 教程實例 代碼如下: $(this).prop('cellIndex') 2.判斷是否是回車按下 教程實例 代碼如下: var myEvent = event || window.event; var key = myEvent.keyCode; if(key == 13){ //此時為回車按下 …

最最常用的 100 個 Java類分享

最最常用的 100 個 Java類分享

大部分的 Java 軟件開發都會使用到各種不同的庫。近日我們從一萬個開源的 Java 項目中進行分析,從中提取出最常用的 Java 類,這些類有來自于 Java 的標準庫,也有第三方庫。每個類在 …

最常用的1000個Java類(附代碼示例)

分析Github 3000個開源項目,粗略統計如下。括號內的數字是使用頻率 0-3000. 下面的列表顯示不全,完整的請看 完整列表 。 1. java.util.List (2889) 2. java.util.ArrayList (2831) 3. java.io.IOException …

Android開發中常用的一些小技巧

Activity.startActivities() 常用于在應用程序中間啟動其他的Activity. TextUtils.isEmpty() 簡單的工具類,用于檢測是否為空 Html.fromHtml() 用于生成一個Html,參數可以是一個字符串.個人認為它不是很快 …

jQuery常用的4種加載方式分析 原創

本文實例分析了jQuery常用的4種加載方式。分享給大家供大家參考,具體如下: 1. 頁面加載之前執行,與嵌入的js加載方式一樣: (function($){})(jquery) 示例: (function($){ alert('Hello jb51');}) …

jQuery常用的一些技巧匯總

引子 jQuery的存在,讓學習前端開發的人感到前端越來越容易入門了,用簡單的幾行代碼就可以實現需求,但是,你真的會用jQuery么,當代碼運行后無法看到自己預期的效果,是不是覺得 …

内蒙古十一选五任五推荐号