JQuery入门（二）
来源：互联网 发布：八爪鱼数据抓取 知乎 编辑：程序博客网 时间：2024/06/07 17:56
1、使用JQ完成省市二级联动
1.1、第一种遍历方式：
使用对象访问的方式进行遍历，语法：$().each(function(){})
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script> $(function(){ // 全选/ 全不选 $("#checkallbox").click(function(){ var isChecked = this.checked; //使用对象访问的方式进行遍历，语法：$().each(function(){}) $("input[name='hobby']").each(function(){ this.checked = isChecked; }); }); }); </script> </head> 请选择您的爱好<br /> <input type="checkbox" id="checkallbox" />全选/全部选<br /> <input type="checkbox" name="hobby" value="足球"/> 足球 <input type="checkbox" name="hobby" value="篮球"/> 篮球 <input type="checkbox" name="hobby" value="游泳"/> 游泳 <input type="checkbox" name="hobby" value="唱歌"/> 唱歌<br /> <body> </body></html>
1.2、第二种遍历方式：
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n );});1.3、文档处理操作
追加内容：
apend: A.append(B) 将B追加到A的内容的末尾处appendTo: A.appendTo(B) 将A加到B内容的末尾处删除元素中子节点：.empty()
从DOM中删除所用匹配的元素：remove()
1.4、
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script> $(function(){ var cities = new Array(3); cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市"); cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市"); cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市"); cities[3] = new Array("郑州市","洛阳市","开封市","安阳市"); $("#province").change(function(){ //清除第二个下拉列表的内容 $("#city").empty(); var val = this.value; $.each(cities,function(i,n){ if(val==i){ //遍历该省份下的所有城市 $.each(cities[i], function(j,m) { //创建城市文本节点 var textNode = document.createTextNode(m); //创建option元素节点 var opEle = document.createElement("option"); //将城市文本节点添加到option元素节点中去 $(opEle).append(textNode); //将option元素节点追加到第二个下拉列表中去 $(opEle).appendTo($("#city")); }); } }); }); }); </script> </head> <body> <tr> <td>籍贯</td> <td> <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> </tr> </body></html>2、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(){ /*选中单击去右边*/ $("#selectOneToRight").click(function(){ $("#left option:selected").appendTo($("#right")); }); /*单击全部去右边*/ $("#selectAllToRight").click(function(){ $("#left option").appendTo($("#right")); }); /*选中双击去右边*/ $("#left option").dblclick(function(){ $("#left option:selected").appendTo($("#right")); }); }); </script> </head> <body> <table border="1" width="600" align="center"> <tr> <td> 分类名称 </td> <td> <input type="text" name="cname" value="手机数码"/> </td> </tr> <tr> <td> 分类描述 </td> <td> <textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea> </td> </tr> <tr> <td> 分类商品 </td> <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> </tr> <tr> <td colspan="2"> <input type='submit' value="修改"/> </td> </tr> </table> </body></html>3、小结
3.1、页面未加载执行失败
<!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"> document.getElementById("panel").onclick = function() { alert("元素已经加载完毕 !"); } </script> </head> <body> <div id="panel">click me.</div> </body></html>原因：因为dom还未加载完毕。
解决：
方法一：将Js代码移到需要操作的html代码后面，一般建议放到body的外面
方法二：将Js代码放到一个页面加载函数中去：
window.onload = function(){};3.2、事件绑定，点击展开
<!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="js/jquery-1.8.3.js" ></script> <script type="text/javascript"> $(function() { $("#panel h5.head").bind("click", function() {//事件绑定bind，单击 var $content = $(this).next();//next：查找下一个，（div） if($content.is(":visible")) {//is：如果。如果div显示就隐藏 $content.hide(); } else { $content.show(); } }) }) </script> </head> <body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body></html>3.3、事件绑定，鼠标滑过
<!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="js/jquery-1.8.3.js" ></script> <script type="text/javascript"> $(function() { $(".head").mouseover(function() { $(this).next().show(); }).mouseout(function() { $(this).next().hide(); }) }) </script> </head> <body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body></html>3.4、事件的移除
<!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> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 13px; line-height: 130%; padding: 60px; } p { width: 200px; background: #888; color: white; height: 16px; } </style> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script type="text/javascript"> $(function() { $('#btn').bind("click", function() { $('#test').append("<p>我的绑定函数1</p>"); }); $('#delAll').click(function() { $('#btn').unbind("click"); }); }) </script> </head> <body> <button id="btn">点击我</button> <div id="test"></div> <button id="delAll">删除所有事件</button> </body></html>3.5、事件合成
hover：实现鼠标移动显示和隐藏
<!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>合成事件hover</title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script type="text/javascript"> $(function() { $(".head").hover(function() { $(this).next().show(); }, function() { $(this).next().hide(); }) }) </script> </head> <body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body></html>toggle：实现点击显示和隐藏
<!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>合成事件toggle</title> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script type="text/javascript"> $(function() { $(".head").toggle(function() { $(this).next().hide(); }, function() { $(this).next().show(); }) }) </script> </head> <body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body></html>4、JQ完成表单校验
4.1、使用validation插件完成对表单数据的校验
官网：
https://jqueryvalidation.org/4.2、：
required: "这是必填字段",remote: "请修正此字段",email: "请输入有效的电子邮件地址",url: "请输入有效的网址",date: "请输入有效的日期",dateISO: "请输入有效的日期 (YYYY-MM-DD)",number: "请输入有效的数字",digits: "只能输入数字",creditcard: "请输入有效的信用卡号码",equalTo: "你的输入不相同",extension: "请输入有效的后缀",maxlength: $.validator.format("最多可以输入 {0} 个字符"),minlength: $.validator.format("最少要输入 {0} 个字符"),rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),max: $.validator.format("请输入不大于 {0} 的数值"),min: $.validator.format("请输入不小于 {0} 的数值")<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript" src="js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="js/jquery.validate.min.js" ></script> <script type="text/javascript" src="js/messages_zh.js" ></script> <script> $(function(){ $("#checkForm").validate({ rules:{ username:{ required:true, minlength:6 }, password:{ required:true, digits:true, minlength:6 } }, messages:{ username:{ required:"用户名不能为空！！", minlength:"用户名不得少于6位！！" }, password:{ required:"密码不能为空！！", digits:"密码必须为整数！！", minlength:"密码不得少于6位！！" } } }); }); </script> <body> <form action="#" id="checkForm"> 用户名:<input type="text" name="username"/><br /> 密码：<input type="password" name="password"/><br /> <input type="submit"/> </form> </body></html><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>阅读全文
0 0
- jQuery入门（二）
- JQuery入门（二）
- ajax入门,jQuery+ashx （二）
- JQuery入门（二）-复选框操作
- jQuery——入门（二）动画
- JQuery(入门二)
- JQuery(入门二)
- jQuery快速入门基础教程之事件（二）
- 《jQuery从入门到精通》第二节 开始使用jQuery（二）
- jquery入门（一）
- JQuery（入门三）
- JQuery（入门一）
- jQuery入门（一）
- jQuery入门（一）
- JQuery入门（一）
- jQuery-（1）入门
- jQuery使用手册（二）
- jQuery总结（二）
- JAVA8 linkedhashmap 源码阅读笔记
- POJ 3922 A simple stone game（K倍减法游戏）
- Kafka学习(一)：Kafka背景及架构介绍
- zabbix变量 【转】
- MySQL的主从复制（gtid）
- JQuery入门（二）
- JAVA 代理模式
- 【C语言】最大公约数和最小公倍数
- Android保存Bitmap为本地文件
- PHP 选择排序 案例
- 数据结构学习笔记
- SCU
- Excel在统计分析中的应用—第四章—数据库统计函数与数据透视表-Part3-(数据透视表、图）
- Kafka学习(二)：Kafka的基本结构和概念
