jQuery代碼開發技巧收集,jquery常用的開發代碼

2016-11-10 1433 0 編輯:網頁程序開發永勝 來源:網站程序開發書籍

jQuery代碼開發技巧收集,jquery常用的開發代碼

1. 使用siblings()來處理同類元素

// Rather than doing this

$('#nav li').click(function(){

  $('#nav li').removeClass('active');

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

});

// Do this instead

$('#nav li').click(function(){

  $(this).addClass('active').siblings().removeClass('active');

});


2. 選擇或者不選頁面上全部復選框

var tog = false; // or true if they are checked on load

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

  $("input[type=checkbox]").attr("checked",!tog);

  tog = !tog;

});


3. 基于輸入文字過濾頁面元素

//If the value of the element matches that of the entered text

//it will be returned

$('.gbin1Class').filter(function() {

  return $(this).attr('value') == $('input#gbin1Id').val() ;

})


4. 取得鼠標的X和Y坐標

$(document).mousemove(function(e){

  $(document).ready(function() {

    $().mousemove(function(e){

    $('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);

  });

});


5. 使得整個列表元素(LI)可點擊

$("ul li").click(function(){

  window.location=$(this).find("a").attr("href"); return false;

});

<ul>

  <li><a href="#">GBin1 Link 1</a></li>

  <li><a href="#">GBin1 Link 2</a></li>

  <li><a href="#">GBin1 Link 3</a></li>

  <li><a href="#">GBin1 Link 4</a></li>

</ul>


6. 使用jQuery來解析XML

function parseXml(xml) {

  //find every Tutorial and print the author

  $(xml).find("Tutorial").each(function()

  {

  $("#output").append($(this).attr("author") + "");

  });

}


7. 判斷一個圖片是否加載完全

$('#theGBin1Image').attr('src', 'image.jpg').load(function() {

  alert('This Image Has Been Loaded');

});


8. 使用jQuery命名事件

//Events can be namespaced like this

$('input').bind('blur.validation', function(e){

    // ...

});

//The data method also accept namespaces

$('input').data('validation.isValid', true);


9. 判斷cookie是否激活或者關閉

var dt = new Date();

dt.setSeconds(dt.getSeconds() + 60);

document.cookie = "cookietest=1; expires=" + dt.toGMTString();

var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;

if(!cookiesEnabled)

{

  //cookies have not been enabled

}


10.強制過期cookie

var date = new Date();

date.setTime(date.getTime() + (x * 60 * 1000));

$.cookie('example', 'foo', { expires: date });


11. 使用一個可點擊的鏈接替換頁面中所有URL

$.fn.replaceUrl = function() {

  var regexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi;

  this.each(function() {

    $(this).html(

      $(this).html().replace(regexp,'<A href="$1">$1</A>')

    );

  });

  return $(this);

}

//usage

$('#GBin1div').replaceUrl(); 


12. 在表單中禁用“回車鍵”

大家可能在表單的操作中需要防止用戶意外的提交表單,那么下面這段代碼肯定非常有幫助:

$("#form").keypress(function(e) {

  if (e.which == 13) {

    return false;

  }

});


13. 清除所有的表單數據

可能針對不同的表單形式,你需要調用不同類型的清楚方法,不過使用下面這個現成方法,絕對能讓你省不少功夫。

function clearForm(form) {

  // iterate over all of the inputs for the form

  // element that was passed in

  $(':input', form).each(function() {

    var type = this.type;

    var tag = this.tagName.toLowerCase(); // normalize case

    // it's ok to reset the value attr of text inputs,

    // password inputs, and textareas

    if (type == 'text' || type == 'password' || tag == 'textarea')

      this.value = "";

    // checkboxes and radios need to have their checked state cleared

    // but should *not* have their 'value' changed

    else if (type == 'checkbox' || type == 'radio')

      this.checked = false;

    // select elements need to have their 'selectedIndex' property set to -1

    // (this works for both single and multiple select elements)

    else if (tag == 'select')

      this.selectedIndex = -1;

  });

};


14. 將表單中的按鈕禁用

下面的代碼對于ajax操作非常有用,你可以有效的避免用戶多次提交數據,個人也經常使用:

禁用按鈕:

$("#somebutton").attr("disabled", true);

啟動按鈕:

$("#submit-button").removeAttr("disabled");

可能大家往往會使用.attr(‘disabled’,false);,不過這是不正確的調用。


15. 輸入內容后啟用遞交按鈕

這個代碼和上面類似,都屬于幫助用戶控制表單遞交按鈕。使用這段代碼后,遞交按鈕只有在用戶輸入指定內容后才可以啟動。

$('#username').keyup(function() {

  $('#submit').attr('disabled', !$('#username').val()); 

});

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾