jQuery练习

最新推荐文章于 2024-02-27 11:03:02 发布

韫谦

最新推荐文章于 2024-02-27 11:03:02 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/zxh1134455360/article/details/103171417

版权

表单

文本域

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>

韫谦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery练习

表单文本域jQuery的.val()方法是专门用来获取表单元素值的，而textarea也属于表单元素所以可以直接用.val()方法获取。设置高度可通过 rows 属性来规定文本域中显示的可见行数，可通过 cols 属性来规定文本域中可见的列数属性textarea标签属性name：为文本域指定名称；rows：规定文本域内可见的行数；cols：规定文本域内可见的行数；disable...
复制链接

扫一扫