jquery入门点击移动文本框内的文字

最新推荐文章于 2021-06-24 04:08:41 发布

原创最新推荐文章于 2021-06-24 04:08:41 发布 · 465 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

Jquery 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了使用jQuery1.11.1版本实现点击文本后使其在文本框内移动的效果，强调了引入jQuery库的重要性。

<html>
<head>
	<title>练习1</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#box{
		width: 700px;
		height: 405px;
		border: solid 1px;
	}
	.fl{
		float: left;
	}
	#left{
		width: 300px;
		height: 400px;
		overflow-y: scroll;
		border: solid 1px;
	}
	#right{
		width: 300px;
		height: 400px;
		overflow-y: scroll;
		border: solid 1px;
	}
	#choose{
		width: 90px;
		height: 400px;
	}
	button{  
		width: 40px;
		height: 30px;
		display: block;
		margin: 0 auto;
	}
	span{
		display: block;
	}
	</style>

</head>
<body>
	<div id="box">
		<div id="left" class="fl">
			<span>北京</span>
			<span>上海</span>
			<span>广东</span>
			<span>深圳</span>
		</div>

		<div id="choose" class="fl">
			<button>>></button>
			<button><<</button>
			<button>></button>
			<button><</button>
		</div>
		<div id="right" class="fl">
			<span>北京</span>
			<span>上海</span>
			<span>广东</span>
			<span>深圳</span>	
		</div>
	</div>	
	<script src="jquery.min.js"></script>
	<script>
		$(function(){
			$("button:eq(0)").click(function(){
				var num = $("#left span").length;
				if(num>0){
					$("#right").append($("#left span"));
				}else{
					alert("左边没有了");
				}
			});
			$("button:eq(1)").click(function(){
				var num = $("#right span").length;
				if(num>0){
					$("#left").append($("#right span"));
				}else{
					alert("右边没有了");
				}
			});
			$("button:eq(2)").click(function(){
				var txt = $("#left span:last").text();
				if(txt !=""){
					$("#right").append($("#left span:last"));
				}else{
					alert("左边没有了");
				}
			});
			$("button:eq(3)").click(function(){
				var txt = $("#right span:last").text();
				if(txt !=""){
					$("#left").append($("#right span:last"));
				}else{
					alert("右边没有了");
				}
			});

			$("span").click(function(){
				var sp = $(this);
				var txt = $(this).text();
				if(sp.parent().attr('id')=="left"){
					$("#right").append($("<span>"+txt+"</span>"));	
				}else{
					$("#left").append($("<span>"+txt+"</span>"));
				}
				$(this).remove();
			});
		});

	</script>
</body>
</html>

我用的是jquery1.11.1,引用时主要jquery包的位置

效果