jQuery代码开发技巧收集,jquery常用的开发代码

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()); 

});