精心收藏的14個開發人員方便的jQuery代碼片段

jQuery可以被定義為一個跨瀏覽器的JavaScript庫。它基本上是旨在簡化客戶端腳本的HTML，在實際的web開發當中，我們經常要處理元素的屬性，表單的值，鍵盤事件等等，如果沒有好的習慣，遇到這些問題的時候往往有時候不知所措，

你是否也在尋找

向web開發人員推薦15個非常優秀的jquery工具提示插件
創建可視化優秀網站的40個精美jquery插件推薦
提高頁面響應的20款傑出的jquery插件推薦
開發人員應該知道的15個吸引力的jquery lightbox插件推薦
提高前端開發水平的30個新鮮實用的jquery插件推薦

今天就分享14個有用的jQuery代碼片段，您可以保存並復制。您可以編輯改變自己的腳本變量和參數匹配。即使是經驗豐富的開發人員可能會發現這些片段是非常熟悉和屢試不爽的

 

1. 控制鼠標懸停

$("a").hover(
  function () {
    // code on hover over
  },
  function () {
    // code on away from hover
  }
);

示例

 

2. 載入的時候防止錨鏈接

$("a").on("click", function(e){
  e.preventDefault();
});

 

示例

該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動作（如果存在這樣的動作）這通常是用於觸發某些類型的動態效果，如一個隱藏的菜單或Ajax調用。通過使用事件對象，我們可以操作數據發回給瀏覽器的URL。在這種情況下，停止HREF加載任何東西！

3. 滾動到頂部

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

示例

你可能已經看到這個功能的在新的社交網站越來越受歡迎

4. Ajax Template

$.ajax({
  type: 'POST',
  url: 'backend.php',
  data: "q="+myform.serialize(),
  success: function(data){
    // on success use return data here
  },
  error: function(xhr, type, exception) { 
    // if ajax fails display error alert
    alert("ajax error response type "+type);
  }
});

 

示例

通過Ajax表單數據傳遞，是jQuery的最常見的用途之一。作為Web開發人員我們肯定記不住已經用過這個方法多少次了，語法非常簡單，每次用到的時候都需要這段代碼復制過去

5. 動畫動作

$('p').animate({
    left: '+=90px',
    top: '+=150px',
    opacity: 0.25
  }, 900, 'linear', function() {
    // function code on animation complete
});

示例

正如我們所看到的動畫的方法，這是非常強大的，用於創建您的網頁上的動畫運動。

 

6. 切換CSS類

$('nav a').toggleClass('selected');

 

示例

添加或刪除css類在html元素當中是一種相當普遍的動作. 這種技術經常運用在菜單切換，或者想用不用的顏色顯示出某一行，或者頁面的輸入元素進行變化。 他經常結合addClass()和removeClass()方法來使用 你可以把所有的代碼放到一個函數調用

7. 切換可見性

$("a.register").on("click", function(e){
  $("#signup").fadeToggle(750, "linear");
});

 

示例

經常我們打開網址的時候。有的頁面會彈出框或通知，需要幾秒鍾顯示，然后隱藏。使用fadeToggle功能，您可以快速隱藏和顯示任何DOM對象。

8. 載入外部內容

$("#content").load("somefile.html", function(response, status, xhr) {
  // error handling
  if(status == "error") {
    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

 

示例

不需要使用ajax技術，就能夠解析一個外部的html文件中的任何內容，這個新的內容可以加載到DOM在頁面中的任何地方。非常的實用

9. 鍵盤事件

$('input').keydown(function(e) {
  // variable e contains keystroke data
  // only accessible with .keydown()
  if(e.which == 11) {
     e.preventDefault();
  }
});

$('input').keyup(function(event) {
  // run other event codes here                              
});

 

示例

處理用戶輸入是我們開發當中所遇到的比較頭疼的難題。幸運的是jQuery的 keydown和keyup事件偵聽是解決用戶輸入比較完美的解決方案。無論實用哪一張方法，你都要先確認用戶將要產生的行為，再決定實用那個方法；

10.等高等寬

var maxheight = 0;
$("div.col").each(function(){
  if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$("div.col").height(maxheight);

示例

 

11. 追加新的html

var sometext = "here is more HTML";
$("p#text1").append(sometext); // added after
$("p#text1").prepend(sometext); // added before

 

示例

使用的append（）方法，我們可以快速地將任何HTML代碼直接到DOM中。這跟前面提到的load（）方法是類似的，

 

12. 設置和獲取屬性

var alink = $("a#user").attr("href"); // 獲取鏈接的屬性值
$("a#user").attr("href", "http://www.google.com/"); // 重新賦值
$("a#user").attr({
  alt: "the classiest search engine",
  href: "http://www.google.com/"
}); // set more than one attribute to new values

示例

此屬性是相對簡單的，但是如果處理不好經常會返回stackoverflow，attr（）方法在任何HTML元素和屬性的字符串值傳遞。結果是返回該屬性值，所有的HTML屬性可通過訪問語法，所以是web開發當中必須要記住的

13. 檢索內容值

$("p").click(function () {
  var htmlstring = $(this).html(); // 獲取html字符串
  $(this).text(htmlstring); // 覆蓋掉原來的html字符串
});
    
var value1 = $('input#username').val(); // 獲取input的值
var value2 = $('input:checkbox:checked').val(); // 獲取checkbox的值
var value3 = $('input:radio[name=bar]:checked').val(); // 獲取button的值

示例

VAL（）屬性是用來獲取輸入字段和表單元素的值

14. 遍歷DOM

$("div#home").prev("div"); // find the div previous in relation to the current div
$("div#home").next("ul"); // find the next ul element after the current div
$("div#home").parent(); // returns the parent container element of the current div
$("div#home").children("p"); // returns only the paragraphs found inside the current div

 

示例

 

本文鏈接：分享14個對開發人員方便的jQuery代碼片段