黑马day16 jquery案例演示
2024-08-31 09:23:48
案例一：
<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>
最新文章
- PHP 一个表单多个提交按钮，处理不同的业务逻辑
- linux 给文件夹权限
- mysql高可用方案总结性说明
- iOS:授权用户定位NSLocationManager的使用
- Flex Builder 开发语言切换问题
- c++ 孟岩推荐 书籍
- Java学习——Ubuntu下jdk的安装以及Java环境的配置
- mvc、mvp和mvvm
- 实现一个简单的基于Token的身份认证
- vim复制粘帖代码
- Mac上brew&thrift安装 以及在thrift架构下，自己新作了maven的小例 Demo
- Google Colab 免费GPU服务器使用教程
- 理解AXI Quad Serial Peripheral Interface(SPI) IP核
- Link & Redirect
- JS省市区联动效果
- Python3安装turtle提示错误：Command "python setup.py egg_info" failed with error code 1
- 建立多人协作git仓库/git 仓库权限控制（SSH）
- HDU1753 （大正小数相加）
- 详解YUV420数据格式
- CentOS配置远程日志服务器
热门文章
- Java 之 Given final block not properly padded
- Java连接Oracle数据库示例
- 微信小程序 - 更改radio和checkbox选中样式
- 使用web_url注意Resource的选项
- ERROR 1820 (HY000): You must SET PASSWORD before executing this statement
- 2019年所有人必须要掌握的一个技能 - “AI思维”
- java stream collector
- Web服务器性能压力测试工具http_load、webbench、ab、Siege使用教程
- SlackWare安装
- A. Dreamoon and Stairs（Codeforces Round #272)