jQuery简单操作

页面导航:首页 > 网络编程 > JavaScript > jQuery简单操作

jQuery简单操作

来源: 作者: 时间:2016-02-04 09:15 【

jQuery简单操作一:简介在前端方面一直很小白、只了解一些基本的JS、还不是太熟悉、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).() == $(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:

 


项目名称 监控类型 子项目名 日志信息
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 += ''+list.PRO_TITLE+'';
	str += ''+list.SUB_PROJECT_NAME+'';
	str += ''+list.TASK_NAME+'';
		
	if(list.TIP_VALUE == 'no'){
		list.TIP_VALUE = '无新日志';
		str += ''+list.TIP_VALUE+'';
	}else if(list.TIP_VALUE == 'yes'){
		list.TIP_VALUE = '有新日志';
		str += ''+list.TIP_VALUE+'';
	}
	$(str).appendTo($('#logDetailInfo'));
}


 

c) 测试效果:

\

 

 

 


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<