黑马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"& ...

随机推荐

php之表单-2（表单验证）
PHP 表单验证本章节我们将介绍如何使用PHP验证客户端提交的表单数据. PHP 表单验证在处理PHP表单时我们需要考虑安全性. 本章节我们将展示PHP表单数据安全处理,为了防止黑客及垃圾信息我们 ...
MySQL 联合索引测试
搭建测试环境 1:创建表 CREATE TABLE tab_index (id int(5), age int(3), dte datetime); 2:插入测试数据 INSERT INTO tab_ ...
JavaScript 纯粹对象
JavaScript 纯粹对象 1.定义: 通过 "{}" 或者 "new Object" 创建的对象,像new Date(),new String()都不是纯 ...
Unity 添加自定义菜单（插件），添加功能
网上介绍如何写这种插件的文章很多...但是对于新手来说,最基本的,怎么运行这个插件,都不知道...网上的文章都懒得说这个... 幸好,看了半天官方网站别的资料,突然就发现办法了... 这个不是 ...
eclipse 如何对maven项目进行打包？
eclipse 如何对maven项目进行打包? CreateTime--2018年4月19日22:02:50 Author:Marydon 1.方式一:使用eclipse中的maven插件(命令) ...
Eclipse Source not found
Eclipse debug模式下找不到Java源文件 CreateTime--2018年3月19日10:43:39 Author:Marydon 与MyEclipse不同,每次Eclipse导入新 ...
zookeeper单节点和多节点配置
单机单节点模式 zookeeper解压, 放到 /opt/zookeeper/下, 新建一个latest的软链 $ latest 将 conf/zoo-sample.cfg 重命名为 zoo.cfg, ...
python一键电影搜索与下载
代码地址如下:http://www.demodashi.com/demo/14313.html python一键电影搜索与下载概述使用python搜索并爬取豆瓣电影信息,包括评分,主演,导演,类型 ...
eclipse里面的时间错误，比电脑系统时间慢了8个小时
eclipse里面的时间错误,比电脑系统时间慢了8个小时解决办法: 打开<eclipse安装目录>/eclipse.ini文件在文件末尾追加 -Duser.timezone=Asia/ ...
MySQL-SQL语句中SELECT语句的执行顺序
SELECT语句的执行顺序大家比较少关注,下面将为您详细介绍SQL语句中SELECT语句的执行顺序,供您参考,希望对您能够有所帮助. SELECT语句的执行的逻辑查询处理步骤: (8)SELECT ( ...

黑马day16 jquery案例演示

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

随机推荐

热门专题