好用的jQuery

最新推荐文章于 2020-06-19 15:52:42 发布

种下星星的日子

最新推荐文章于 2020-06-19 15:52:42 发布

阅读量491

点赞数

分类专栏：【Web前端】

本文链接：https://blog.csdn.net/hongwei15732623364/article/details/53427713

版权

【Web前端】专栏收录该内容

21 篇文章 1 订阅

订阅专栏

好用的jQuery

概述：

jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery经常通过拜托跨浏览器的痛苦，使得艰巨的JavaScript任务变得轻松。

应用：

我们为什么要学jQuery?

（1）Write less, Do more

（2）jQueryis designed to change the way that you write JavaScript.

（3）支持各种主流浏览器，包括IE6以上，FireFox2以上，Safari2以上和Opera9以上的版本。

（4）以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作。

（5）屏蔽浏览器差异，对DOM的操作提供了方便的扩展，易用的事件处理API和动画API。

（6）强大的插件机制

（7）社区活跃，文档非常齐全，全部配有示例。学习容易，易用性很高。

（8）不需要刷新，直接展现

环境准备:

任何喜欢的编辑器或IDE，我用的是HBuilder

各种主流浏览器

一个自己熟悉的应用服务器

实例剖析：

可编辑的表格Demo：

Html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title>可编辑的表格</title>
		<link type="text/css" rel="stylesheet" href="css/editTable.css"/>
		<script type="text.javascript" src="js/jquery.js"></script>
		<script type="text.javascript" src="js/editTable.js"></script>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th colspan="2">鼠标点击表各项就可以编辑</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>学号</th>
					<th>姓名</th>
				</tr>
				<tr>
					<td>000001</td>
					<td>张</td>
				</tr>
				<tr>
					<td>000002</td>
					<td>李</td>
				</tr>
				<tr>
					<td>000003</td>
					<td>王</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

css代码：

table{
	border: 1px solid black;
	/*修正单元格之间的边框不能合并*/
	border-collapse: collapse;
	width: 400px;
}
table td{
	border: 1px solid black;
	width: 50%;
}
table th{
	border: 1px solid black;
	width: 50%;
}
tbody th{
	background-color: #A3BAE9;
}

js代码：

$(function(){
	//找到表格的内容区域除了第一个tr以外的所有的奇数行
	//使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回
	$("tbody tr:even").css("background-color","#ECE9D8");
	
	//找到学号单元格
	var numTd=$("tbody td:even");
	//添加点击事件
	numTd.click(function(){
		//找到当前鼠标点击的td，this对应的就是响应click的那个td
		var tdObj = $(this);	
		if(tdObj.children("input").length>0){
			return false;
		}
		var text=tdObj.html();
		//清空td中的内容
		tdObj.html("");
		//创建文本框
		//去掉文本框边框
		//设置文本框文字大小16px
		//使文本框宽度和td宽度相同
		//设置文本框背景色
		//将当前td中内容放到文本框
		//插入文本框
		var inputObj = $("<input type='text'>").css("border-width","0")
			.css("font-size","16px").width(tdObj.width());
			.css("background-color",tdObj.css("background-color"));
			.val(text).appendTo(tdObj);	
		//文本框插入后被选中	
		inputObj.trigger("focus").trigger("select");
		inputObj.click(function(){
			return false;
		});
		//处理文本框上回车和esc按键的操作
		ininputObj.keyup(function(event){
			//获取当前按下键盘的键值
			var keycode = event.which;
			//处理回车情况
			if(keycode==13){
				//获取当前文本框内容
				var inputext=$(this).val();
				//将td内容改成文本框内容
				tdobj.html(inputext);
			}			
			//处理esc情况
			if(keycode == 27){
				//将td中的内容还原成text
				tdObj.html(text);
			}
		});
	});
	
});

总结：

Say less, Do more！

感谢您的阅读！

种下星星的日子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
15
评论
好用的jQuery

好用的jQuery概述： jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。应用：我们为什么要学jQuery?（1）Write less, Do more（2）jQueryis desi
复制链接

扫一扫