分享jQuery技巧

dnnsun@gmail.com — Tue, 04 Aug 2009 03:12:44 GMT

分享一些在项目用到的jQuery小技巧, 对自己做个记录，对别人也许有些帮助:

1) DatePicker设置特定问日期, 有时我们可能需要特定的默认日期或重新设置值, 而不是Today, 代码如下:

// set the specific date value from the hidden element 'defaultDate'
if ($("#LBRGCalendar").length)
    $("#LBRGCalendar").datepicker('setDate', $.datepicker.parseDate('yy-mm-dd', $('#defaultDate').val()));

// 错误的做法，因为DatePicker的setDate接收的日期必须是Date对象而非字符串
$("#LBRGCalendar").datepicker('setDate','2009-07-31');

2) 判断所获取的文档节点(element)是否存在:

// id为你所要获取的节点id
if ($(id).length) {
    // 对该节点进行操作
}

3) 当你在一链接(link)上注册某一事件(比如ajax请求)时不要忘了取消默认的链接行为, 因为点击一个链接时, 执行完捕获/冒泡动作后, 会触发链接的默认事件: 跳转到指定链接地址, 比如href="#"则在IE下有时会跳到页面顶端, 以往我们为了兼容所有的浏览器, 可以封装一个如下的函数:

function stopDefault(e) {
    // Prevent the default browser action (W3C)
    if (e && e.preventDefault)
        e.preventDefault();
    // A shortcut for stoping the browser action in IE
    else
        window.event.returnValue = false;
    
    return false;
}

如今如果你在使用jQuery框架那你就幸福不少, 因为jQuery已经为你封装了这一函数, 原理一样但更精妙, 你可以直接如此用即可:

$('#SendToFriend').click(function(e) {
    // do somthing 比如: $('#EmailToFriendForm').dialog('open');
    
    // 阻止该链接的默认行为
    e.preventDefault();
});

4) 如何进行下拉框或下拉菜单(dropDown, select)等的相关操作, 不妨看看你之前写过一篇文章如何借助JQuery封装HTML SELECT操作?

5) 如何判断Checkbox是否选中, 目前的常见方式有三种, 不妨作为参考参考:

// First way   
$('#checkBox').attr('checked');   
  
// Second way   
$('#edit-checkbox-id').is(':checked');   
  
 // Third way   
$("[:checkbox]:checked").each( function() {   
       // Insert code here   
    }
 );

6) 利用jQuery创建自动等高的列(元素)布局, 在此分享一个更为简便的函数, 更详细的关于此话题的讨论请查看我之前的一篇文章jQuery插件开发: equalizeCols Plugin:

///<summary>
/// Take a group of elements and make them all the same height
///</summary>
function equaliseHeights(arrayOfIds){
    var maxh = 0, i = arrayOfIds.length, id;
    while(i--){
        id = arrayOfIds[i];
        $(id).each(function(){
            if($(this).height() > maxh){
                maxh = $(this).height();
            }
        });
        $(id).height(maxh);
        maxh = 0;
    }
}

//如下使用即可, 接收的参数是一组需要设置等高的元素
equaliseHeights(['.feature .component-container']);

Enjoy jQuery, :)

Baldwin's DNN

分享jQuery技巧