黑马day16 jquery案例演示

案例一：

<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>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

案例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>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

案例三：

<!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案例演示的更多相关文章

黑马day16 jquery&层次选择器
假设想通过DOM元素之间的层次关系来获取特定元素,比如后代元素,子元素,相邻元素,兄弟元素等,则须要使用层次选择器. 1 .ancestor descendant 使用方法: $("form ...
黑马day16 jquery&属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取对应的元素 .[attribute] 使用方法: $("div[id]") ; 返回值集合元素说明:匹配包括给定属性的元素.样 ...
黑马day16 jquery&内容过滤选择器&可见度选择器
内容过滤选择器的过滤规则主要体如今它所包括的子元素和文本内容上 .:contains(text) 使用方法: $("div:contains('John')") 返回值集 ...
黑马day16 jquery入门
jquery: 1.jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.假设一个对象是jQuery对象,那么它就能够使用jQuery里的方法:$( ...
JQuery: 微博演示
演示图: 完成图: 微博演示代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...
【原创 Hadoop&Spark 动手实践 6】Spark 编程实例与案例演示
[原创 Hadoop&Spark 动手实践 6]Spark 编程实例与案例演示 Spark 编程实例和简易电影分析系统的编写目标: 1. 掌握理论:了解Spark编程的理论基础 2. 搭建 ...
AR外包,就找北京动点软件，长年承接AR外包（案例丰富可签合同，内附案例演示）
北京团队长年承接AR项目外包咨询QQ:372900288 微信:liuxiang0884 以下是AR项目案例演示,索取更多案例请通过以上方式在线联系我们
60款很酷的 jQuery 幻灯片演示和下载【转】
jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...
float浮动以及案例演示
浮动元素会影响后边的元素,但不会影响前边的元素清除浮动: 方法一:在浮动元素后面添加一个空元素 <!DOCTYPE html> <html lang="en"& ...

随机推荐

berkelydb学习
http://www.oracle.com/technetwork/cn/java/seltzer-berkeleydb-sql-085418-zhs.html 官网中文学习网址
VC操作MPP文件
1.背景简介因需要对Office系列进行程序操作,特需要使用COM编程. Microsoft Project生成进度计划,office家族软件,文件后缀为.mpp. 具体信息见维基百科http:// ...
Java实现根据输入的日期以及天数，获取此日期之后的天数的工作日
public static void main(String[] args) { List<String> list = new ArrayList<String>();//节 ...
算法笔记_189:历届试题横向打印二叉树(Java)
目录 1 问题描述 2 解决方案 1 问题描述问题描述二叉树可以用于排序.其原理很简单:对于一个排序二叉树添加新节点时,先与根节点比较,若小则交给左子树继续处理,否则交给右子树. 当遇到空子树 ...
iphone openssh
安装openssh 用户名:默认是 root 密码:默认是 alpine 修改登陆密码:passwd
获取泛型类对应的class类型
自己写来备忘的,如有错误,请指正! public class Demo<T> { private Class<T> clazz; public Demo() { Paramet ...
iOS-自定义起始时间选择器视图
概述自定义起始时间选择器视图, 调起时间选择器, 传值(起始时间/截止时间), 两者时间均要合理, 不能超过未来时间, 并且起始时间不能大于截止时间. 点击取消或空白处收起时间选择器. 详细代码下 ...
Apache Hadoop 3.0新版本介绍及未来发展方向
过去十年,Apache Hadoop从无到有,从理论概念演变到如今支撑起若干全球最大的生产集群.接下来的十年,Hadoop将继续壮大,并发展支撑新一轮的更大规模.高效和稳定的集群. 我们此次将向大家全 ...
用curl去探测接口是否正常返回结果，若没有正常返回则触发报警
现有一需求去curl 在香港的一个接口, 返回值有时正常有时报错 connection reset by peer . 思路: 若执行成功 $?返回 0 , 不成功则返回其他数字 #!/bin/b ...
修改注册表值解决ie被恶意窜改的问题
修改注册表值解决ie被恶意窜改的问题 IE消失运行—Regedit 主键HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\HideDes ...

黑马day16 jquery案例演示

黑马day16 jquery案例演示的更多相关文章

随机推荐

热门专题