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

案例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>[email protected]</td>
						<td>5000</td>
						<td><a href="deleteEmp?id=Tom">Delete</a></td>
					</tr>
					<tr>
						<td>Jerry</td>
						<td>[email protected]</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>

时间： 2024-08-02 19:17:11

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

黑马day16 jquery&amp;层次选择器

假设想通过DOM元素之间的层次关系来获取特定元素,比如后代元素,子元素,相邻元素,兄弟元素等,则须要使用层次选择器. 1 .ancestor descendant 使用方法: $("form input") ; 返回值集合元素说明:在给定的祖先元素下匹配全部后代元素.这个要以下讲的"parent> child"区分开. 2.parent > child 使用方法: $("form > input") ; 返回值

黑马day16 jquery&基本过滤器

1.:first 用法:$("tr:first") ; 返回值单个元素的组成的集合说明: 匹配找到的第一个元素 2.:last 用法:$("tr:last") 返回值集合元素说明: 匹配找到的最后一个元素.与 :first 相对应. 3.:not(selector) 用法:$("input:not(:checked)")返回值集合元素说明: 去除所有与给定选择器匹配的元素.有点类似于"非",意思是没有被选中的

黑马day16 jquery&内容过滤选择器&可见度选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上 1.:contains(text) 用法: $("div:contains('John')") 返回值集合元素说明:匹配包含给定文本的元素.这个选择器比较有用,当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签"围"起来的文本内容是否符合指定的内容的. 2.:empty 用法: $("td:empty") 返回值集合元素说明:匹配所有不包

黑马day16 jquery&属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素 1.[attribute] 用法: $("div[id]") ; 返回值集合元素说明:匹配包含给定属性的元素.例子中是选取了所有带"id"属性的div标签. 2.[attribute=value] 用法: $("input[name='newsletter']").attr("checked", true); 返回值集合元素说明:匹配给定的属性是某个

黑马day16 jquery入门

jquery: 1.jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:$("#test").html(); 比如: $("#test").html() 意思是指:获取ID为test的元素内的html代码.其中html()是jQuery里的方法这段代码等同于用DOM实现代码: document.getElementById(" t

黑马day16 jquery基本选择器

基本选择器是 jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class 和标签名来查找DOM元素(在网页中 id只能使用一次,class 允许重复使用). 1.#id 用法: $("#myDiv"); 返回值单个元素的组成的集合说明:这个就是直接选择html中的id="myDiv" 2.Element 用法: $("div") 返回值集合元素说明:element的英文翻译过来是&q

黑马day16 jquery&层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器. 1 .ancestor descendant 用法: $("form input") ; 返回值集合元素说明:在给定的祖先元素下匹配所有后代元素.这个要下面讲的"parent> child"区分开. 2.parent > child 用法: $("form > input") ; 返回值集合元

第15章WEB15-AJAX和JQuery案例篇

今日任务? 使用AJAX完成用户名的异步校验? 使用JQuery完成用户名异步校验? 使用JQuery完成商品信息模糊显示? 使用JQuery完成省市联动效果返回XML? 使用JQuery完成省市联动效果返回JSON教学导航教学目标了解AJAX的基本使用掌握JQuery的AJAX部分的代码掌握JQuery返回XML和JSON格式数据如何处理教学方法案例驱动法1.1 上次课内容回顾:JDBC的添加,修改,删除查询. 查询: 在首页点击查询:提交到Servlet--调用业务层--调用DAO 添加:

有需要案例演示的欢迎联系我们索取！

由于我们案例较多,网站未及时进行更新工作,有需要案例演示的欢迎联系我们索取! 特此公告! QQ:372900288