jQuery使用总结
记录在项目中用到的jQuery使用技巧(也许不叫做技巧)，以备不时之需1、页面初始化加载
这个从最早的在body标签中加入：。或直接在页面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).scrollHeight;scrollTop = $(this).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").attr("value", "");
5、表格相关
表格下的checkbox根据head中的选择改变
$("#checkBoxAll").bind("click", function(){ $("#tbodyId input").attr("checked", $(this).attr("checked")); });表格删除、内容、长度判断
$("#deleteBtn").bind("clcik", function() {// 删除的个数var dellength = 0;// 表格下总的行数，如果dellength = index表示全部删除var index = 0;// 删除行的记录，一般为数据的idvar selectedIds = [];$("#tbodyId input").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
页:
[1]