下拉框应用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script> <title></title> <style type="text/css"> * { margin:0; padding:0; } div.centent { float:left; text-align: center; margin: 10px; } span { display:block; margin:2px 2px; padding:4px 10px; background:#898989; cursor:pointer; font-size:12px; color:white; } </style> </head> <body> <div class="centent"> <select multiple id="select1" style=" 100px; height: 160px;"> <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> <div> <span id="add">选中添加到右边>></span> <span id="add_all">全部添加到右边>></span> </div> </div> <div class="centent"> <select multiple id="select2" style=" 100px; height: 160px;"> </select> <div> <span id="remove"><<选中删除到左边</span> <span id="remove_all"><<全部删除到左边</span> </div> </div> </body> <script type="text/javascript"> $(function () { $("#add").click(function () { // //方法1 // var $options = $('#select1 option:selected'); // var $remove = $options.remove(); // $remove.appendTo('#select2'); //方法2 var $options = $('#select1 option:selected'); $options.appendTo('#select2'); }); $("#add_all").click(function () { var $options = $("#select1 option"); $options.appendTo("#select2"); }); $("#select1").dblclick(function () { var $options = $('#select1 option:selected'); $options.appendTo('#select2'); }); $("#remove").click(function () { var $options = $("#select2 option:selected"); $options.appendTo("#select1"); }); $("#remove_all").click(function () { var $options = $("#select2 option"); $options.appendTo("#select1"); }); $("#select2").dblclick(function () { var $options = $("#select2 option:selected"); $options.appendTo("#select1"); }); }) </script> </html>
表单验证
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="required" /> </div> <div class="int"> <label for="email">邮箱:</label> <input type="text" id="email" class="required" /> </div> <div class="int"> <label for="personinfo">个人资料:</label> <input type="text" id="personinfo" /> </div> <div class="sub"> <input type="submit" value="提交" id="send" /><input type="reset" id="res" /> </div> </form> </body> <script type="text/javascript"> $(function () { //添加必填标识 $("form :input.required").each(function () { $(this).parent().append("<strong class='high'>*</strong>"); }); //当输入框失去焦点时进行验证 $("form :input").blur(function () { var $parent = $(this).parent(); $parent.find(".formtips").remove(); //验证username if($(this).is("#username")) { if(this.value == "" || this.value.length < 6) { var errorMsg = "请输入至少6位的用户名."; $parent.append("<span class='formtips onError'>" + errorMsg + "</span>") } else { var okMsg = "输入正确"; $parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>") } } //验证email if($(this).is("#email")) { if(this.value == "" || (this.value != "" && !/.+@.+.[a-zA-Z]{2,4}$/.test(this.value) ) ) { var errorMsg = "请输入正确格式的E-Mail地址"; $parent.append("<span class='formtips onError'>" + errorMsg + "</span>") } else { var okMsg = "输入正确"; $parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>") } } }).keyup(function () {//实时提醒 $(this).triggerHandler("blur"); }).focus(function () { $(this).triggerHandler("blur"); }); //提交--没有错误才能提交 $("#send").click(function () { $("form .required:input").trigger("blur"); var numErr = $("form .onError").length; if(numErr) { return false; } alert("注册成功!"); }); }) </script> </html>