jQuery练习

最新推荐文章于 2022-07-14 09:53:08 发布

zmhmz

最新推荐文章于 2022-07-14 09:53:08 发布

阅读量104

点赞数

本文链接：https://blog.csdn.net/zuebak/article/details/103169816

版权

表单

文本域

jQuery的.val()方法是专门用来获取表单元素值的，而textarea也属于表单元素所以可以直接用.val()方法获取。
设置高度
可通过 rows 属性来规定文本域中显示的可见行数，可通过 cols 属性来规定文本域中可见的列数

属性

textarea标签属性
name：为文本域指定名称；
rows：规定文本域内可见的行数；
cols：规定文本域内可见的行数；
disabled：禁用文本区域，该属性会使文本输入框无效，无法输入文字并且会变成灰色；
readonly：规定文本域为只读，使文本域无法输入文字；

设置属性

.attr(“属性名”，属性值)；

select标签

获取当前点击的option的值可用.val()方法




<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>

<style>
.first{
	float:left;
	font-size:12px;
}
.second{
	padding-left:110px;
	font-size:12px;
}
.sel{
	width:80px;
	height:150px;
}
.sd{
	padding-top:10px;
}
</style>


<script type="text/javascript">
$(function(){
	$("#add").click(function(){
		var $options = $("#hobby option:selected");   
		$options.appendTo("#other");                  
	})
	$("#add_all").click(function(){
		var $options = $("#hobby option");           
		$options.appendTo("#other");                  
	})
	$("#hobby").dblclick(function(){                  
		var $options = $("option:selected",this);     
		$options.appendTo("#other");                  
	})
	
	$("#to_left").click(function(){                   
		var $options = $("#other option:selected");   
		$options.appendTo("#hobby");                  
	})
	$("#all_to_left").click(function(){
		var $options = $("#other option");            
		$options.appendTo("#hobby");                  
	})
	$("#other").dblclick(function(){                  
		var $options = $("option:selected",this);     
		$options.appendTo("#hobby");                
	})
})
</script>



<div class="first">
	<select multiple name="hobby" id="hobby" class="sel">
		<option value="游泳">游泳</option>
		<option value="篮球">篮球</option>
		<option value="跑步">跑步</option>
		<option value="跳高">跳高</option>
		<option value="乒乓球">乒乓球</option>
	</select>

	<div class="sd">
		<button id="add">添加</button><br/><br/>
		<button id="add_all">全部添加</button>
	</div>

</div>
<div class="second">
	<select multiple name="other" id="other" class="sel"></select>
		<button id="to_left">删除</button><br/><br/>
		<button id="all_to_left">全部删除</button>
	</div>
</div>
	
</body>
</html>