jQuery的应用
来源:互联网 发布:威锋认证的淘宝店 编辑:程序博客网 时间:2024/03/29 20:04
jQuery的应用
一、使用JQ完成首页的定时广告弹出
1.需求分析
在首页中(logo的上方)显示一个广告图片(页面加载后,间隔3秒弹出广告图片,再间隔3秒后隐藏广告图片)。【使用jQuery实现】
2.技术分析
使用jQuery中的相关技术
3.实现步骤
- 第一步:引入jQuery相关的文件
- 第二步:书写页面加载函数
- 第三步:在页面加载函数中,获取显示广告图片的元素。
- 第四步:设置定时操作(显示广告图片的函数)
- 第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show())
- 第六步:清除显示广告图片的定时操作
- 第七步:设置定时操作(隐藏广告图片的函数)
- 第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide())
- 第九步:清除隐藏广告图片的定时操作
4.代码实现
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <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>
5.补充内容
toggle的使用:显示图片和隐藏图片
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>toggle的使用</title> <style> div{ border: 1px solid white; width: 500px; height: 350px; margin: auto; text-align: center; } </style> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#btn").click(function(){ $("#img1").toggle(); }); }); </script> </head> <body> <div> <input type="button" value="显示/隐藏" id="btn" /><br />| <img src="../img/飞机05.gif" width="100%" height="100%" id="img1"/> </div> </body></html>
二、使用JQ完成隔行变色
1.需求分析
在页面加载的时候让显示用户的表格进行隔行换色显示,效果如下:使用JQ实现!
2.技术分析
需要使用jquery的选择器(基本选择器、基本过滤选择器)
还需要使用jquery的CSS的方法(css(name,value))
如果CSS样式已经由美工写好,此时可以使用jquery的CSS类操作
addClass(class | fn)
3.步骤分析
- 第一步:引入jquery的类库
- 第二步:直接写页面加载函数
- 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)
- 第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。
4.代码实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <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","green");*/ //方式二:使用外部样式,记得引入外部CSS样式文件 //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完成全选全不选
1.需求分析
在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选
2.技术分析
- 需要使用jquery的选择器(id选择器、类选择器)
- 需要使用jquery的属性操作方法 prop()
3.步骤分析
- 第一步:引入jquery文件
- 第二步:书写页面加载函数
- 第三步:为上面的复选框绑定单击事件
- 第四步:将下面所有的复选框的选中状态设置成跟上面的一致!
4.代码实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使用jQuery完成复选框的全选和全不选</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>--> <script> $(function(){ $("#select").click(function(){ //获取下面所有的 复选框并将其选中状态设置跟编号的前面 复选框保持一致。 //attr方法与JQ的版本有关,在1.8.3及以下有效。 //$("tbody input").attr("checked",this.checked); $("tbody input").prop("checked",this.checked); }); }); </script> </head> <body> <table border="1" width="500" height="50" align="center" id="tbl" > <thead> <tr> <td colspan="4"> <input type="button" value="添加" /> <input type="button" value="删除" /> </td> </tr> <tr> <th><input type="checkbox" id="select"></th> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>1</td> <td>张三</td> <td>22</td> </tr> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>2</td> <td>李四</td> <td>25</td> </tr> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>3</td> <td>王五</td> <td>27</td> </tr> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>5</td> <td>田七</td> <td>30</td> </tr> <tr > <td><input type="checkbox" class="selectOne"/></td> <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body></html>
注意:attr在jquery1.11版本不适用,采用prop()来替代(在各个版本都适用)。
在jquery中如何调用方法?
元素.方法()
四、使用JQ完成省市二级联动
1.需求分析
2.技术分析
2.1数组的遍历操作
方式一:each(callback)
$(function(){ // 全选/ 全不选 $("#checkallbox").click(function(){ var isChecked = this.checked; //使用对象访问的方式进行遍历,语法:$().each(function(){}) $("input[name='hobby']").each(function(){ this.checked = isChecked; }); });});
方式二:$.each(object,[callback])
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n );});
2.2文档处理操作
追加内容
apend: A.append(B) 将B追加到A的内容的末尾处appendTo: A.appendTo(B) 将A加到B内容的末尾处
3.步骤分析
- 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份
- 第二步:创建二维数组来存储省份和城市
- 第三步:遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】
- 第四步:接着遍历数组中的城市
- 第五步:创建一个城市文本节点
- 第六步:创建option元素节点
- 第七步:将文本节点添加到元素节点中【使用JQ的文档操作方法】
- 第八步:获取第二个下拉列表并将option元素节点添加进去
- 第九步:清除第二个下拉列表的option内容
4.代码实现
JQ代码:
<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>
HTML代码:
<td> <!--2.确定事件,通过函数传参的方式拿到改变后的城市--> <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></td>
五、使用JQ完成下拉列表左右选择
1.需求分析
2.分析
- 第一步:确定事件(鼠标单击事件click)
- 第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]
- 第三步:将获取到的option添加到右侧的下拉列表中去。(append方法的使用)
3.代码实现
JQ代码:
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script><script> $(function(){ /*1.选中单击去右边*/ $("#selectOneToRight").click(function(){ $("#left option:selected").appendTo($("#right")); }); /*2.单击全部去右边*/ $("#selectAllToRight").click(function(){ $("#left option").appendTo($("#right")); }); /*3.选中双击去右边*/ $("#left option").dblclick(function(){ $("#left option:selected").appendTo($("#right")); }); });</script>
HTML代码:
<td> <span style="float: left;"> <font color="green" face="宋体">已有商品</font><br/> <select multiple="multiple" style="width: 100px;height: 200px;" id="left"> <option>IPhone6s</option> <option>小米4</option> <option>锤子T2</option> </select> <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p> <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p> </span> <span style="float: right;"> <font color="red" face="宋体">未有商品</font><br/> <select multiple="multiple" style="width: 100px;height: 200px;" id="right"> <option>三星Note3</option> <option>华为6s</option> </select> <p><a href="#" ><<</a></p> <p><a href="#" ><<<</a></p> </span></td>
六、使用JQ完成表单校验
注意:使用validate校验,导入插件
JS代码:
<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:{ user:{ required:true, minlength:3 }, password:{ required:true, digits:true, minlength:6 }, repassword:{ required:true, equalTo:"[name='password']" }, email:{ required:true, email:true }, username:{ required:true, maxlength:5 }, sex:{ required:true } }, messages:{ user:{ required:"用户名不能为空!", minlength:"用户名不得少于3位!" }, password:{ required:"密码不能为空!", digits:"密码必须是整数!", minlength:"密码不得少于6位!" }, repassword:{ required:"确认密码不能为空!", equalTo:"两次输入密码不一致!" }, email:{ required:"邮箱不能为空!", email:"邮箱格式不正确!" }, username:{ required:"姓名不能为空!", maxlength:"姓名不得多于5位!" }, sex:{ required:"性别必须勾选!" } }, errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label success: function(label) { //验证成功后的执行的回调函数 //label指向上面那个错误提示信息标签label label.text(" ") //清空错误提示消息 .addClass("success"); //加上自定义的success类 } }); });</script>
HTML代码:
<form action="#" method="get" id="registForm"> <div id="father"> <div id="form2"> <table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr> <td colspan="2" > <font size="5">会员注册</font> USER REGISTER </td> </tr> <tr> <td width="180px"> <label for="user" >用户名</label> </td> <td> <em style="color: red;">*</em> <input type="text" name="user" size="35px" id="user"/> </td> </tr> <tr> <td> 密码 </td> <td> <em style="color: red;">*</em> <input type="password" name="password" size="35px" id="password" /> </td> </tr> <tr> <td> 确认密码 </td> <td> <em style="color: red;">*</em> <input type="password" name="repassword" size="35px"/> </td> </tr> <tr> <td> Email </td> <td> <em style="color: red;">*</em> <input type="text" name="email" size="35px" id="email"/> </td> </tr> <tr> <td> 姓名 </td> <td> <em style="color: red;">*</em> <input type="text" name="username" size="35px"/> </td> </tr> <tr> <td> 性别 </td> <td> <span style="margin-right: 155px;"> <em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女<em></em> <label for="sex" class="error" style="display: none;"></label> </span> </td> </tr> <tr> <td> 出生日期 </td> <td> <em style="color: red;">*</em> <input type="text" name="birthday" size="35px"/> </td> </tr> <tr> <td> 验证码 </td> <td> <em style="color: red;">*</em> <input type="text" name="yanzhengma" /> <img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注 册" height="50px"/> </td> </tr> </table> </div> </div></form>
0 0
- Jquery的应用
- ocupload jquery 的应用
- jquery ajax的应用
- jquery 的ajax 应用
- jquery 模板的应用
- JQuery的简单应用
- jquery 的ajax应用
- Jquery-easyUI的应用
- JQuery的ajax应用
- jQuery的简单应用
- jQuery的简单应用
- jQuery的简单应用
- jQuery的简单应用
- jQuery的简单应用
- jQuery的简单应用
- jQuery的简单应用
- jQuery的简单应用
- jQuery的简单应用
- JAVA 进制转换
- 单链表的初始化、插入、删除、查找
- 数字旋转方阵 分治法
- 历届试题 打印十字图 (蓝桥杯)
- UVA
- jQuery的应用
- c语言中关于数组的一些基本运算
- 博弈论
- SSL2295 暗黑破坏神(dp)
- 自篡改Dalvik字节码delta.apk原理
- java io
- Caused by: java.lang.UnsupportedOperationException: Can't convert to color: type=0x1
- 【c/c++】如何调用【Window】cmd命令行命令并获取命令行的输出内容
- Android中大图片的处理(一)之图片存在形式