jQuery使用总结

记录在项目中用到的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