好用的jQuery

柔光的暖阳◎ 2022-07-14 07:22 173阅读 0赞

**好用的jQuery**

**概述：**

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

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

**应用：**

![Center][]

**我们为什么要学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！

**感谢您的阅读！**

[Center]: /images/20220714/4782209e60624166b6a3384781881ca0.png
[HBuilder]: http://blog.csdn.net/hongwei15732623364/article/details/53363652