您现在的位置是:首页 > 电脑技术查询 > web开发

jQuery简略操作

编辑:chaxungu时间:2022-10-10 23:23:27分类:web开发

jQuery简单操作

jQuery简单操作


一:简介

在前端方面一直很小白、只了解一些基本的JS、还不是太熟悉、jQuery也是、用的时候有时候很简单的用法还要去查、系统的学习一下、把常用的记录一下做个备忘、也是笔记。不断更新。。。

二:常用函数

1、$(‘#id’).remove()——移除id为id的元素。

2、$(‘#id’).empty()—— 移除id为id的元素中的内容。

三:实用插件

1、table中合并相同内容的单元格:

a)内容:

//封装的一个JQuery小插件、实现相同内容合并单元格的代码jQuery.fn.rowspan = function(colIdx) {return this.each(function() {var that;$('tr', this).each(function(row) {$('td:eq(' + colIdx + ')', this).filter(':visible').each(function(col) {if (that != null&& $(this).html() == $(that).html()) {rowspan = $(that).attr("rowSpan");if (rowspan == undefined) {$(that).attr("rowSpan", 1);rowspan = $(that).attr("rowSpan");}rowspan = Number(rowspan) + 1;$(that).attr("rowSpan", rowspan);$(this).hide();} else {that = this;}});});});}

b)测试内容:动态生成数据table、页面和js:

<body onload="init();"><div align="center"><table id="logDetailTable" width="99%" border="1" collapse="collapse"><thead><tr><th width="20%" height="40px">项目名称</th><th width="20%" height="40px">监控类型</th><th width="35%" height="40px">子项目名</th><th width="25%" height="40px">日志信息</th></tr></thead><tbody id="logDetailInfo"></tbody></table></div></body>
function init(){//获取数据集result...//构建table:for (var i in result){fillShowLogTable(result[i]);}//指定要合并的table的那些行$('#logDetailTable').rowspan(0);$('#logDetailTable').rowspan(1);}function fillShowLogTable(list){var str = '';str += '<tr><td style="width:20%;text-align:center">'+list.PRO_TITLE+'</td>';str += '<td style="width:20%;height:30px;text-align:center">'+list.SUB_PROJECT_NAME+'</td>';str += '<td style="width:35%;height:30px;text-align:center">'+list.TASK_NAME+'</td>';if(list.TIP_VALUE == 'no'){list.TIP_VALUE = '无新日志';str += '<td class="noNewLog" style="width:25%;height:30px;text-align:center">'+list.TIP_VALUE+'</td></tr>';}else if(list.TIP_VALUE == 'yes'){list.TIP_VALUE = '有新日志';str += '<td class="hasNewLog" style="width:25%;height:30px;text-align:center">'+list.TIP_VALUE+'</td></tr>';}$(str).appendTo($('#logDetailInfo'));}

c)测试效果:


总结:

学以致用。实践是最快的捷径!