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

2016-11-10 1209 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()); 

});

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联