前端学习-jquery-实现点击button对文本的add及detele

最新推荐文章于 2024-03-12 11:13:53 发布

TeresaShen

最新推荐文章于 2024-03-12 11:13:53 发布

阅读量1.3k

点赞数

分类专栏：学习笔记 jquery 文章标签： jquery event

本文链接：https://blog.csdn.net/teresashen/article/details/34531011

版权

学习笔记同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

第一个jquery小程序，需求如下

页面加载完成时显示一个输入框及一个名为 Click me 的 button
页面加载完成时在输入框之下显示三条文本（文本预定义于一个数组）
文本后显示一个X图标，点击后删除该条文本
在输入框输入文本，点击 Click me 后在页面上添加该文本，且同需求3.显示X图标。

使用jquery之前需要加载jquery的lib文件（jquery.js），可从jquery官网下载，已引用外部javascript文件的形式添加到需要的页面上。

jquery选择器与css类似，只是其语法上将selector包在$("")之中。

在$(document).ready(function(){})方法中会执行页面加载时需要执行的function，与javascript中的window.onload方法类似。但是从测试的角度来讲，写在$(document).ready(function(){})中可能会发生一些out of control。是由append方法或appendTo可以在我们想要的位置追加元素，在数据量比较小或标签结构不复杂的情况下很方便，如果要追加的标签其嵌套复杂或重复量大可考虑使用模板。

以下为相应的html代码，

<html>

<head>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="add_delete.js"></script>
</head>

<body>
	 <input type="text" id="info" />
         <button id="add">Click me</button>
	 <div id="inputMessages">
	 </div>		
</body>

</html>

以下为第一版jquery代码，

$(document).ready(function(){
	var arr = ['Qiu Juntao', 'Jia Wei', 'Shen Tong'];
	var exitedItem;
	function addElements(value){
	 	var newitem = $("<div></div>").text(value).addClass("inputTxt");
		var deleteButton = $("<input></input>").addClass("delete").attr("type","image").attr("src","delete2.jpg");
	 	newitem.appendTo("#inputMessages");
		deleteButton.appendTo(newitem);
	}
	function deleteItem(){
   	 	$(".delete").click(function(){
			$(this).parent('.inputTxt').remove();
   	 	});
	}
	$.each(arr, function(key,val) {
		addElements(val);
      	        deleteItem();
	});

	 $("#add").click(function(){
	 	var item = $("#info").val();
	 	addElements(item);
		deleteItem();
   	 	
	});
});