表单选择器

最新推荐文章于 2019-11-22 19:35:18 发布

yecats

最新推荐文章于 2019-11-22 19:35:18 发布

阅读量367

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/yecats/article/details/51520080

JQuery 专栏收录该内容

32 篇文章

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>表单选择器</title>
  <script src="jquery-1.8.0.js"></script>
 </head>
 <style type="text/css">
	body{
		font-size:12px;
		text-align:center;
	}
	form{
		width:241px;
	}
	textarea,select,button,input,span{
		display:none;
	}
	.btn{
		border:solid 1px #666;
		padding:2px;
		width:60px;
		fifter:
		progid:DXImageTransfrom.Microsoft.
		Gradient(GradientType=0,StartColorStr=#fff,
		EndColorStr=#ECE9D8);
	}
	.txt{
		border:#666 1px solid;
		padding:3px;
	}
	.img{
		padding:2px;
		border:solid 1px #ccc;
	}
	.div{
		border:solid 1px #ccc;
		background-color:#eee;
		padding:5px;
	}
 </style>
 
 <script type="text/javascript">
	//**************************************
	
	$(function(){
		$("#form1 div").html("input类型元素："+$("#form1 :input").length);
		$("#form1 div").addClass("div");		
	});
	
	$(function(){
		$("#form1 :text").show(300);		
	});	
	$(function(){
		$("#form1 :password").show(300);		
	});
	$(function(){
		$("#form1 :radio").show(300);		
	});
	$(function(){
		$("#form1 :checkbox").show(300);		
	});
	$(function(){
		$("#form1 :submit").show(300);		
	});
	$(function(){
		$("#form1 :reset").show(300);		
	});
	$(function(){
		$("#form1 :button").show(300);		
	});
	
	$(function(){
		$("#form1 :file").show(300);		
	});
	


	//**************************************

 </script>
 <body>
	<form id="form1">
		<textarea class="txt">TextArea</textarea>
		<select>
			<option value="0">Item 0</option>
		</select>
		<input type="text" value="Text" class="txt" />
		<input type="password" value="password" class="txt" />
		<input type="radio" /><span id="Span1">Radio</span>
		<input type="checkbox" /><span id="Span2">checkbox</span>

		<input type="submit" value="Submit" class="btn" />

		<input type="image" title="Image"  
		src="Images/number_4.png" class="img" />
		<input type="reset" value="reset" class="btn" />
		<input type="button" value="button" class="btn" />
		<input type="file" title="File" class="txt" />
		<div id="divShow"></div>
	</form>
 </body>
</html>