码迷，mamicode.com
首页 > Web开发 > 详细

黑马day16 jquery案例演示

时间：2015-07-11 13:39:22      阅读：211      评论：0      收藏：0      [点我收藏+]

标签：

案例一：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript"  src="../js/jquery-1.4.2.js"></script>
<title>无标题文档</title>

<style type="text/css">
<!--

BODY
{
	font-family:Courier;;
	font-size: 12px;
	margin:0px 0px 0px 0px;
	overflow-x:no;
	overflow-y:no;
	background-color: #B8D3F4;
}
td
{
	font-size:12px;
}
.default_input
{
	border:1px solid #666666;
	height:18px;
	font-size:12px;
}
.default_input2
{
	border:1px solid #666666;
	height:18px;
	font-size:12px;
}
.nowrite_input
{
	border:1px solid #849EB5;
	height:18px;
	font-size:12px;
	background-color:#EBEAE7;
	color: #9E9A9E;
}
.default_list
{
	font-size:12px;
  border:1px solid #849EB5;
}
.default_textarea
{
	font-size:12px;
	border:1px solid #849EB5;
}

.nowrite_textarea
{
	border:1px solid #849EB5;
	font-size:12px;
	background-color:#EBEAE7;
	color: #9E9A9E;
}

.wordtd5 {
	font-size: 12px;
	text-align: center;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}

.wordtd {
	font-size: 12px;
	text-align: left;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #b8c4f4;
}
.wordtd_1 {
	font-size: 12px;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #516CD6;
	color:#fff;
}
.wordtd_2{
	font-size: 12px;
	text-align: right;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #64BDF9;
}
.wordtd_3{
	font-size: 12px;
	text-align: right;
	vertical-align:top;
	padding-top: 6px;
	padding-right: 5px;
	padding-bottom: 3px;
	padding-left: 5px;
	background-color: #F1DD34;
}
.inputtd
{
	font-size:12px;
	vertical-align:top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}
.inputtd2
{
	text-align: center;
	font-size:12px;
	vertical-align:top;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}
.tablebg
{
	font-size:12px;
}

.tb{
	border-collapse: collapse;
	border: 1px outset #999999;
	background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
       border-right-width:0px;
	   border-left-width:0px;
	   border-top-width:0px;
	   border-bottom-width:1px;}

.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}




.noborder {
	border: none;
}

.button {
	border: 1px ridge #ffffff;
	line-height:18px;
	height: 20px;
	width: 45px;
	padding-top: 0px;
	background:#CBDAF7;
	color:#000000;
	font-size: 9pt;
    font-family:Courier;;
} 

.textarea {
	font-family: Arial, Helvetica, sans-serif, "??";
	font-size: 9pt;
	color: #000000;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #000000;
	background-color:transparent;
	text-align: left
}
-->
</style></head>

<body>

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
    	<!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
		<select name="first" size="10" multiple="multiple" class="td3" id="first">
		  <option value="选项1">选项1</option>
		  <option value="选项2">选项2</option>
		  <option value="选项3">选项3</option>
		  <option value="选项4">选项4</option>
		  <option value="选项5">选项5</option>
		  <option value="选项6">选项6</option>
		  <option value="选项7">选项7</option>
		  <option value="选项8">选项8</option>
		</select>    
	</td>
    <td width="69" valign="middle">
       <input name="add"  id="add" type="button" class="button" value="-->" /> 
       <input name="add_all" id="add_all" type="button" class="button" value="==>" /> 
       <input name="remove"  id="remove" type="button" class="button" value="<--" />
	   <input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
        </td>
    <td width="127" align="left">
	  <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
	</td>
  </tr>
</table>
</div>
</body>
  <script type="text/javascript">
	$("#add").click(function(){
		$("select[name='first'] option:selected").appendTo($("select[name='second']"));
	});

	$("#remove").click(function(){
		$("select[name='second'] option:selected").appendTo($("select[name='first']"));
	});
	$("#add_all").click(function(){
		$("select[name='first'] option").appendTo($("select[name='second']"));
	});
	$("#remove_all").click(function(){
		$("select[name='second'] option").appendTo($("select[name='first']"));
	});
  </script>
</html>
技术分享技术分享技术分享

案例2：主要完成当店家提交的时候把输入域中中的值添加到表格中，当点击删除的时候会删除...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
		<title>添加用户</title>
	</head>
	<body>
		<center>
			<br><br>
			添加用户:<br><br>
			姓名: <input type="text" name="name" id="name"/>  
			email: <input type="text" name="email" id="email" />  
			电话: <input type="text" name="tel" id="tel" /><br><br>
			<button id="addUser">提交</button>
			<br><br>
			<hr>
			<br><br>
			<table id="usertable" border="1" cellpadding="5" cellspacing=0>
				<tbody>
					<tr>
						<th>姓名</th>
						<th>email</th>
						<th>电话</th>
						<th> </th>
					</tr>
					<tr>
						<td>Tom</td>
						<td>tom@tom.com</td>
						<td>5000</td>
						<td><a href="deleteEmp?id=Tom">Delete</a></td>
					</tr>
					<tr>
						<td>Jerry</td>
						<td>jerry@sohu.com</td>
						<td>8000</td>
						<td><a href="deleteEmp?id=Jerry">Delete</a></td>
					</tr>
				</tbody>
			</table>
		</center>
	</body>
	<script language="JavaScript">
		$("#addUser").click(function(){
			var $tr = $("<tr></tr>");
			
			var $nameTd = $("<td></td>");
			$nameTd.text($("#name").val());
			$tr.append($nameTd);
			
			var $emailTd = $("<td></td>");
			$emailTd.text($("#email").val());
			$tr.append($emailTd);
			
			var $telTd = $("<td></td>");
			$telTd.text($("#tel").val());
			$tr.append($telTd);

			var $delTd=$("<td></td>");
			var $a=$("<a href='#'>Delete</a>")
			$delTd.append($a);
			$tr.append($delTd);
			
			$a.click(function(){
				$tr.remove();
			});
			
			$("#usertable tbody").append($tr);
		});
	</script>
</html>

技术分享

案例三：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	</head>
	<body>
		<form method="post" action="">
		   	请选择您的爱好!
			<br><input type="checkbox" id="checkedAll_2"/>全选/全不选
		   	<br/>
		    <input type="checkbox" name="items" value="足球"/>足球
			<input type="checkbox" name="items" value="篮球"/>篮球
			<input type="checkbox" name="items" value="游泳"/>游泳
			<input type="checkbox" name="items" value="唱歌"/>唱歌
		   	<br/>
		    <input type="button" id="CheckedAll" value="全　选"/>
		    <input type="button" id="CheckedNo" value="全不选"/>
		    <input type="button" id="CheckedRev" value="反　选"/> 
		
			<input type="button" id="send" value="提　交"/> 
		</form>
	</body>
	
	<script language="JavaScript">
 	$("#checkedAll_2").click(function(){
		$(":checkbox").attr("checked",$("#checkedAll_2").attr("checked"));
	});
	$("#CheckedAll").click(function(){
		$(":checkbox[name='items']").attr("checked",true);
	});
	$("#CheckedNo").click(function(){
		$(":checkbox[name='items']").attr("checked",false);
	});
	$("#CheckedRev").click(function(){
		$(":checkbox[name='items']").each(function(i,obj){
			$(obj).attr("checked" ,!$(obj).attr("checked"))
		});
		
	});
	</script>
</html>

技术分享

版权声明：本文为博主原创文章，未经博主允许不得转载。

黑马day16 jquery案例演示

标签：

原文地址：http://blog.csdn.net/u014010769/article/details/46841097
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！