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. 在表单中禁用“回车键”

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

4. 将表单中的按钮禁用
下面的代码对于ajax操作非常有用，你可以有效的避免用户多次提交数据：
禁用按钮：

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

启动按钮：

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

5. 高亮显示目前聚焦的输入框标示
有时候你需要提示用户目前操作的输入框，你可以使用下面代码高亮显示标示：

$("form :input").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});

6.判断一个复选框是否被选中

$('#checkBox').attr('checked');

7.创建一个嵌套的过滤器

.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素

8.jQuery.toggleClass() 函数详解

toggleClass()函数用于切换当前jQuery对象所匹配的每一个元素上指定的css类名。

所谓”切换”，就是如果该元素上已存在指定的类名，则移除掉；如果不存在，则添加该类名。

该函数属于jQuery对象(实例)。

$element.toggleClass( className );
// 相当于
if( $element.hasClass( className ) ){
    $element.removeClass( className );
}else{
    $element.addClass( className ); 
}
//上面的className均表示单个css类名，如果是空格分隔的多个css类名，则等价部分的代码是需要循环执行的

/* ********** 分割线 ********** */

$element.toggleClass( className, true );
//相当于
$element.addClass( className ); 

/* ********** 分割线 ********** */

$element.toggleClass( className, false );
//相当于
$element.removeClass( className );

9.绑定一个函数到一个事件

$('#foo').bind('click', function() {  
  alert('User clicked on "foo."');  
}); 

10.使用过滤器过滤多属性

var elements = $('#someid input[type=sometype][value=somevalue]').get(); 

11. 隐藏包含特定值的元素

$("p.value:contains('thetextvalue')").hide();

12.自动的滚动到页面特定区域

$('.back_top').click(function () {
        $('html,body').animate({ scrollTop: 0 }, 500);
    })

13. 替换字符串中的单词

var el = $('#id');
el.html(el.html().replace(/word/ig, ''));

14.使用jQuery判断鼠标的左右键点击

$("#someelement").live('click', function(e) {
    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
        alert("Left Mouse Button Clicked");
    }
    else if(e.button == 2)
        alert("Right Mouse Button Clicked");
});

15.测试一个元素在jQuery中是否可见

if($(element).is(':visible') == 'true') { //The element is Visible }

16.元素屏幕居中

jQuery.fn.center = function () {
  this.css('position','absolute');
    this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');//（窗体高度-元素高度）/2+滚动高度
  this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;//（窗体的宽度-元素的宽度）/2+滚动宽度
}
//Use the above function as: $('#gbin1div').center();

17.使用closest来得到父元素

$('#searchBox').closest('div');

18.判断值是否为空

var $loginEmail =$(“#loginEmail”);
if (!$loginEmail.val()) { 如果是空$loginEmail.focus();
}
19.获取焦点focus()
$loginEmail.focus();

20.判断是否符合正则式test()
var regular = /^[a-z0-9]+([._\-][a-z0-9])@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/; if (!regular.test($loginEmail.val())) {
//如果不符合
}