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