分享一些在项目用到的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, :)