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())) {
//如果不符合
}