jquery表单、下拉框等简单应用
一、jquery入门
见附件d1.html：
<html><head><title>2323232 </title><script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript">//等DOM结构加载完成后，就会执行下面的jQuery$(document).ready(function(){ $("#demo1").click(function(){ alert("jquery demo"); });}); function dianji(){ alert("javascript test"); }</script></head><body><p name="demo1" id="demo1" >这是一个测试用，点击我</p></body></html>?
二、文本框及表单验证
见input01.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery验证</title><style type="text/css">label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }span{color:red;}</style><script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script><script language="javascript" type="text/javascript" src="jquery.validate.js"></script><script language="javascript" type="text/javascript" src="messages_cn.js"></script><script language="javascript"> /* function getValue(){ //alert( $("#input01").val()); //获得文本框的值 var a = $("#input02").val($("#input01").val()); //将文本框的值赋给另一个文本框 } //改选成jquery写法 $(document).ready(function( //JQuery代码写在这里 ));*/ $(function(){ $("#input01").blur(function(){ var a = $("#input01").val();//获得文本框的值 var b = $("#input02").val(a); ////值赋给文本框 // alert(a); //alert 123 // alert(b); //alert [object Object] }); $("#form1").validate({ rules: { input01:{ digits:true, rangelength:[0,8] }, userName:{ // required:true, //maxlength:[5] CHNlength:[1,10] }, email:{ required:true, email:true } } }); }); function setPageSize(){ var b = $("#pagesize").val(); $("#input03").val(b); }</script></head><body><form id="form1" name="form1"><div><label for="input01">输入的值：</label><input type="text" name="input01" id="input01" /><br /><label for="input02">得到的值：</label><input type="text" name="input02" id="input02" /><br /></div><label for="input01">选择的值：</label><select id="pagesize" name="pagesize" onchange="setPageSize(this);"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option></select><input type="text" name="input03" id="input03" /><br /><div><table><!--"for" 属性可把 label 绑定到另外一个元素，请把 "for" 属性的值设置为相关元素的 id 属性的值--> <tr> <td><label for="userName">用户名：<span id="Ired">*</span></label></td> <td><input type="text" name="userName" id="userName" /></td> </tr> <tr> <td><label for="e-mail">邮 箱：<span id="Ired">*</span></label></td> <td><input type="text" name="email" id="e-mail" /></td> </tr></table></div></form ></body></html>?
三、下拉框功能及样式变化
见select.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript">$(document).ready(function(){//给选中项添加样式 $(".demo1").click(function(){ $(".demo1").css("background","#bbffaa"); //alert("jquery demo"); });//省市，动态下拉列表$("#sel").change(function(){ var sel_value = $(this).val(); // alert("selvalue="+sel_value);if(selvalue==1){ $("#sel01").show(); $("#sel02").hide(); $("#sel03").hide();}if(selvalue==2){ $("#sel01").hide(); $("#sel02").show(); $("#sel03").hide();}if(selvalue==3){$("#sel01").hide();$("#sel02").hide(); $("#sel03").show(); } })//显示图片，模拟图片的一种预览效果$("#img").change(function(){ //alert($("#img").val());$("#imagePreview").empty(); if($("#img").val()!=""){ $("#imagePreview").append("<img src=\"" + $("#img").val() + "\" />");}else{ $("#imagePreview").append("displays image here"); }})/*var items ;var h3 = $("h3").val();alert(h3.length);*/$("h3").click(function(){$("h3").css("background","#bbccdd"); //alert("123");})//动态显示选中的项$("#box1").hide();$("#box2").hide();$("#box3").hide();$("#thechoices").change(function(){if(this.value == "all"){$("#boxes").children().show();}else{$("#" + this.value).show().siblings().hide();}$("#thechoices").change();});});</script></head><body><p id="form1"><div><table border="0"><tr><td>请选择:</td><td><select id="sel"> <option value="">请选择</option> <option value="1">湖北省</option> <option value="2">湖南省</option> <option value="3">江苏省</option> </select> </td> <td id="sel01" style="display:none"> <!--//湖北--> <select > <option value="1">武汉市</option> <option value="2">天门市</option> <option value="3">仙桃市</option> </select> </td> <td id="sel02" style="display:none"> <!-- //湖南--> <select > <option value="1">长沙市</option> <option value="2">彬州市</option> <option value="3">丰河市</option> </select> </td> <td id="sel03" style="display:none"> <!-- //江苏--> <select > <option value="1">南京市</option> <option value="2">苏州市</option> <option value="3">常州市</option> </select> </td></tr> </table> </div><!-- 图片预览效果--> 图片预览 <select name="img" id="img"><option value="">请选择一个图片</option> <option value="img1.jpg">image1.jpg</option> <option value="img2.jpg">image2.jpg</option> <option value="img3.jpg">image3.jpg</option></select><div id="imagePreview"> displays image here </div><!--//选择all时则会全部显示--><select id="thechoices"><option value="box1">Box 1</option><option value="box2">Box 2</option><option value="box3">Box 3</option><option value="all">All Boxes</option> </select><!-- the DIVs --><div id="boxes"><div id="box1"><p>Box 1 stuff</p></div><div id="box2"><p>Box 2 stuff</p></div><div id="box3"><p>Box 3 stuff</p></div></div> </form></body></html>?
?