记录在项目中用到的jQuery使用技巧(也许不叫做技巧)，以备不时之需
?
1、页面初始化加载
这个从最早的在body标签中加入：onload="function()"。或直接在页面script中加入：
<script type="javascript">
window.onload=function(){
//要初始化的东西
}
</script>
都可以实现，当然这里是使用了页面外部引入js文件。上面就会被覆盖掉，当然这样也不利于风格的统一，这样比较喜欢采用闭包的风格初始化。如在当前页面引入了外部文件：
<script type="text/javascript" src="$!assetModule.getTarget("/js/pages/login/index.js")"></script>
在index.js中：
$(function() {
//初始化消息显示
(window.initMsgAlert = function(){
var msg = $("#hmsg").val();
if(msg != ""){
//do something
errorPlace("", "username");
}
})();
});
?
?
2、一个简单的错误消息显示框
这是借鉴jquery-validation中的错误消息显示，对我这样一个不懂css的来说还是值得一记。简单来说就是获取当前元素的长和宽，在对其相对位置处理后生成一个div显示消息：
function errorPlace(error, element) {
var l = $("#"+element).offset().left;
var t = $("#"+element).offset().top;
var eBox = $('<div class="msg msg-error"></div>');
eBox.css({
'position' : 'absolute',
'top' : t + 2,
'left' : l + 250
});
if (!error.length <= 0) {
eBox.text(error);
$("#"+element).after(eBox);
} else {
$("#"+element).parent().children().remove("div");
}
}
当然如果传入的error为空就清空该消息div。对其中的css：
.msg{
height:18px;
line-height:18px;
padding: 2px 0 2px 25px;
background-image:url(images/ico.png);
background-repeat:no-repeat;
}
.msg.msg-error{
border:1px solid #cc6666;
background-color:#ffeaea;
background-position:3px -51px;
}
?
?
3、拖动滚动条加载页面数据
就是页面显示数据时不采用分页条，在数据展示区域用上下的滚动条，如果到当前区域底部时去加载更多消息。
首先，得有滚动条的出现，在这个数据展现的容器上加入样式：
<div id="contentTable" style="overflow-y:auto; overflow-x:hidden; height:300px;"> .... </div>
jQuery处理相应的事件，当然每次查询还是必须或得相应的页码、数据信息的
var scrollHight = 0;
var scrollTop = 0;
var divHight = $("#contentTable").height();
$("#contentTable").bind("scroll", function() {
scrollHight = $(this)[0].scrollHeight;
scrollTop = $(this)[0].scrollTop;
if (parseInt(divHight) + parseInt(scrollTop) >= parseInt(scrollHight)) {
var curPage = parseInt($("#currentPageId") .val());
var totalPage = parseInt($("#totalPageId") .val());
if (curPage < totalPage) {
asynchLoadMoreData();
}
}
});
以上就是一个简单的实现，当然能够封装成plugin，做到更通用就不错了，还有就是有个缺点如果页面加载的数据量过大如何处理也没考虑
?
?
4、jQuery使用备忘
都是些常见的，但是不用的时候也会忘记，懒得翻API了
a、绑定多个事件
$("#deleteBtn").bind({
click : function() {
// dosomething
},
mousemove : function() {
// dosomething
}
});
b、获取下拉框的name
//获取某个id的下拉框的name
$("#proviceId").find("option:selected").text()
//在下拉框change事件中获取name并设置到otherId的区域显示
$("#otherId").val(($(this).find("option:selected").text()));
c、清空某一区域下的值
$("#areaId input[type='text']").attr("value", "");
?
?
?
5、表格相关
表格下的checkbox根据head中的选择改变
$("#checkBoxAll").bind("click", function(){
$("#tbodyId input[type='checkbox']").attr("checked", $(this).attr("checked"));
});
表格删除、内容、长度判断
$("#deleteBtn").bind("clcik", function() {
// 删除的个数
var dellength = 0;
// 表格下总的行数，如果dellength = index表示全部删除
var index = 0;
// 删除行的记录，一般为数据的id
var selectedIds = [];
$("#tbodyId input[type='checkbox']").each(function(i, n) {
index++;
if ($(this).attr("checked")) {
dellength++;
selectedIds.push($(this).attr("value"));
}
});
// do something
});
表格在删除后重新排序
// 表单数据重新排序:第一列为序号
$("#tbodyId tr td:nth-child(1)").each(function(i, n) {
if ($(this).text() != "") {
$(this).text(i + 1);
}
});
其中可以用td:nth-child(n)获取第n列数据，n从1开始
接下来是与上面的情况不一样的，在选中表格的某一行后，再获取该行的某列数据：
// 校验选中的记录是否与目标月份一致
function valiSameMonth() {
var targetMonth = $("#settleApplySubmitMonthId").val();
var valiIndex = 0;
$("#settleApplyQueryTbodyId > tr").each(function(index) {
if ($(this).find("td:eq(0)>input:checkbox").is(":checked") == true) {
var tempTime = $.trim($(this).find("td:eq(4)").text());
if (tempTime == "" || tempTime.length < 7) {
valiIndex++;
}
var tmepMonthTime = tempTime.substring(0, 7);
if (targetMonth == "") {
$("#settleApplySubmitMonthId").val(tmepMonthTime);
targetMonth = tmepMonthTime;
} else {
if (targetMonth != tmepMonthTime) {
valiIndex++;
}
}
}
});
return valiIndex > 0;
}
?
?
to be?continuedto be?continuedto be?continuedto be?continuedto be?continuedto be?continuedto be?continued