黑马day16 jquery案例演示
来源:互联网 发布:普通话考试软件 编辑:程序博客网 时间:2024/05/03 03:04
案例一:
<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>
0 0
- 黑马day16 jquery案例演示
- 黑马day16 jquery入门
- 黑马day16 jquery基本选择器
- 黑马day16 jquery&层次选择器
- 黑马day16 jquery&基本过滤器
- 黑马day16 jquery&属性过滤选择器
- 黑马day16 jquery&内容过滤选择器&可见度选择器
- 黑马day16 子jquery&子元素过滤选择器
- 黑马程序员-day16-Map
- jquery案例-演示手机logo图片事件
- 黑马程序员_java基础day16
- 黑马程序员-Java API-day16
- 演示FileInputStream案例演示
- 演示 FileOutputStream案例演示
- day16
- day16
- day16
- day16
- PHP魔术方法和魔术变量总结
- android构建工具:Ant和Gradle
- ios开发 预处理.pch文件
- C++/CLR 中的多线程使用方法
- 开启博客第一天
- 黑马day16 jquery案例演示
- 鲁冠球 万向集团
- POJ 2664 && HDU 1144 Prerequisites?(水~)
- 朴素贝叶斯分类
- C5_作业
- ubuntu下安装tomcat
- C++ STL之vector
- Android中onConfigurationChanged没调用
- windows环境 Apache负载均衡及session共享环境搭建