今日所学—jQuery基础
在使用jQuery时，首先需要导入相关库
一、使用JQ完成首页定时弹出图片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <style> .father{ border: 0px solid red; width: 1300px; height: 2170px; margin: auto; } </style> <script> $(function(){ //1.书写显示广告图片的定时操作 time = setInterval("showAd()",3000); }); //2.书写显示广告图片的函数 function showAd(){ //3.获取广告图片，并让其显示 //$("#img2").show(1000); //$("#img2").slideDown(5000); $("#img2").fadeIn(4000); //4.清除显示图片定时操作 clearInterval(time); //5.设置隐藏图片的定时操作 time = setInterval("hiddenAd()",3000); } function hiddenAd(){ //6.获取广告图片，并让其隐藏 //$("#img2").hide(); //$("#img2").slideUp(5000); $("#img2").fadeOut(6000); //7.清除隐藏图片的定时操作 clearInterval(time); } </script> </head> <body> <div class="father"> <img src="../img/广告.jpg" width="100%" style="display: none" id="img2"/> </div> </body> </html>
效果图：
二、使用jQuery完成表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <!--使用css样式--> <link rel="stylesheet" href="../css/style.css" /> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> //1.页面加载 $(function(){ //2.获取tbody下面的偶数行并设置背景颜色 $("tbody tr:even").css("background-color","yellow"); //3.获取tbody下面的奇数行并设置背景颜色 $("tbody tr:odd").css("background-color","pink"); //2.获取tbody下面的偶数行并设置背景颜色 //$("tbody tr:even").addClass("even"); //清除背景颜色 //$("tbody tr:even").removeClass("even"); //3.获取tbody下面的奇数行并设置背景颜色 //$("tbody tr:odd").addClass("odd"); }); </script> </head> <body> <table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td>1</td> <td>张三</td> <td>22</td> </tr> <tr > <td>2</td> <td>李四</td> <td>25</td> </tr> <tr > <td>3</td> <td>王五</td> <td>27</td> </tr> <tr > <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr > <td>5</td> <td>田七</td> <td>30</td> </tr> <tr > <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body> </html>
效果图：
三、使用JQ完成省市二级联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ //2.创建二维数组用于存储省份和城市 var cities = new Array(3); cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市"); cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市"); cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市"); cities[3] = new Array("郑州市","洛阳市","开封市","安阳市"); $("#province").change(function(){ //10.清除第二个下拉列表的内容 $("#city").empty(); //1.获取用户选择的省份 var val = this.value; //alert(val); //3.遍历二维数组中的省份 $.each(cities,function(i,n){ //alert(i+":"+n); //4.判断用户选择的省份和遍历的省份 if(val==i){ //5.遍历该省份下的所有城市 $.each(cities[i], function(j,m) { //alert(m); //6.创建城市文本节点 var textNode = document.createTextNode(m); //7.创建option元素节点 var opEle = document.createElement("option"); //8.将城市文本节点添加到option元素节点中去 $(opEle).append(textNode); //9.将option元素节点追加到第二个下拉列表中去 $(opEle).appendTo($("#city")); }); } }); }); }); </script> </head> <body> <form action="#" method="get" onsubmit="return check()"> 隐藏字段:<input type="hidden" name="id" value="" /><br /> 用户名：<input type="text" name="username" id="username" placeholder="请输入用户名"/><br /> 密码：<input type="password" name="password" id="password"/><br /> 确认密码：<input type="password" name="repassword" id="repassword"/><br /> 性别：<input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女" checked="checked"/>女<br /> 爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼 <input type="checkbox" name="hobby" value="打电动"/>打电动 <input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br /> 头像：<input type="file" name="file"/><br /> 籍贯：<select id="province"> <option>--请选择--</option> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select> <br /> 自我介绍： <textarea name="zwjs"> </textarea><br /> 提交按钮：<input type="submit" value="注册"/><br /> 普通按钮：<input type="button" value="注册"/><br /> 重置按钮：<input type="reset" /> </form> </body> </html>
效果图：
四、使用jQuery和validate完成注册页面表单校验
使用前需要再导入两个库，分别是jquery.validate.min.js和messages_zh.js
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jquery完成表单校验</title> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <!--引入validate插件js文件--> <script type="text/javascript" src="../js/jquery.validate.min.js"></script> <!--引入国际化js文件--> <script type="text/javascript" src="../js/messages_zh.js"></script> <script> $(function() { $("#registForm").validate({ rules: { username: { required: true, minlength: 3 }, password: { required: true, digits: true, minlength: 6 }, repassword: { required: true, equalTo: "[name='password']" }, email: { required: true, email: true }, sex: { required: true } }, messages: { username: { required: "用户名不能为空!", minlength: "用户名不得少于3位!" }, password: { required: "密码不能为空!", digits: "密码必须是整数!", minlength: "密码不得少于6位!" }, repassword: { required: "确认密码不能为空!", equalTo: "两次输入密码不一致!" }, email: { required: "邮箱不能为空!", email: "邮箱格式不正确!" }, sex: { required: "性别必须勾选!" } }, errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label success: function(label) { //验证成功后的执行的回调函数 //label指向上面那个错误提示信息标签label label.text(" ") //清空错误提示消息 .addClass("success"); //加上自定义的success类 } }); }); </script> </head> <body> <form action="#" method="get" id="registForm" > 隐藏字段:<input type="hidden" name="id" value="" /><br /> 用户名：<input type="text" name="username" id="username" /><br /> 密码：<input type="password" name="password" id="password"/><br /> 确认密码：<input type="password" name="repassword" id="repassword"/><br /> 邮箱：<input type="text" name="email" id="email"/><br /> 性别：<input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 <label for="sex" class="error"></label> <br /> 爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼 <input type="checkbox" name="hobby" value="打电动"/>打电动 <input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br /> 头像：<input type="file" name="file"/><br /> 籍贯：<select name="province"> <option>--请选择--</option> <option value="北京">北京</option> <option value="上海" selected="selected">上海</option> <option value="广州">广州</option> </select><br /> 自我介绍： <textarea name="zwjs"> </textarea><br /> 提交按钮：<input type="submit" value="注册"/><br /> 普通按钮：<input type="button" value="注册"/><br /> 重置按钮：<input type="reset" /> </form> </body> </html>
效果图：
