JQuery是JavaScript的简化框架,使用此框架后,可以使js代码支持大部分浏览器。
JQuery在使用时有两个大版本:1.x,2.x。
1.x是应用在IE6以上版本的浏览器中,主要是做的通用支持。
2.x是应用在IE9以上版本的浏览器中的,主要是用来针对HTML5完成支持。
1.x的最新版本是1.10,这里使用的是1.9版本。
JQuery主要包含的功能:
1) 选择器:用来根据一些条件查找页面元素并取得,替代getElementByXxx的方法。
a) 基本选择器
b) 层级选择器
c) 索引选择器
d) 表单选择器
e) 选中选择器
2) 属性处理:用来设置和取得各种属性
a) 普通属性
b) 常用属性
i. value
ii. innerHTML
iii. innerText
c) 样式属性
i. style样式
ii. class样式
3) DOM处理:可以动态为页面添加和删除元素
4) AJAX处理:可以简化AJAX的调用以及回调的操作。
5) 事件操作:动态添加或删除事件。
6) 特效:支持一些动态效果
7) 扩展功能:使用的是JQuery的其他子插件,这里只介绍validate验证插件
这里先将AJAX功能合并到之前的级联菜单中,来看JQuery在AJAX里起的作用
先将jquery的js拷贝到项目的js文件夹下。
修改js代码。
<script type="text/javascript" src="js/jquery-1.9.1.js"></script> <script type="text/javascript">
function showplus(provinceId) { // 需要传递4个参数 // 1: 提交路径 // 2: 使用对象进行参数传递,每个参数作为对象中的一个属性来传递 // 3: 回调函数 // 4: 数据类型, 可以选择text,xml或json格式 $.post("<%=basePath%>province_showplus.action",{provinceId:provinceId},showplusCallback,"json"); }
// JQuery自动将返回的字符串转换为对象或数组,并通过回调函数的参数直接返回,在回调函数中直接使用即可. function showplusCallback(array) { // 使用选择器取得下拉列表对象 var citySelect = $("#city"); // 查找到要删除的页面元素,并调用删除操作 $("#city option:gt(0)").remove();
// 循环取得id和title for (var i = 0;i < array.length;i++) { var id = array[i].id; var title = array[i].title;
// JQuery创建页面元素直接使用字符串拼接即可 var option = "<option value='"+id+"'>"+title+"</option>"; // 将option设置为城市下拉列表的子节点 citySelect.append(option); } }
</script> |
JQuery的选择器和属性处理
JQuery中基本的选择器有三种:
1) 根据id取得元素,语法是 #id,如果有多个元素同名,只取得第一个。
2) 根据标签名称取得元素,语法 标签名,如果有多个元素,全部返回。
3) 根据样式名称来取得元素, 语法 .样式名,如果有多个元素,全部返回。
对于取得的元素来说,可以通过属性处理来设置或取得属性。
普通属性直接通过attr()方法来设置或取得属性。
常用属性需要使用特殊的方法来设置取得
1) value
a) val()
2) innerHTML
a) html()
3) innerText
a) text()
样式属性可以处理各种样式的设置和删除。
1) style样式使用css()方法来设置或取得
2) class样式使用addClass()方法或removeClass()方法来添加或删除
如果使用选择器返回的是一个元素,则设置和取得都是针对这个元素的。
如果返回的是一组元素,取得的会是第一个元素,但设置的则是所有元素。
<script language="javascript" src="jquery-1.9.1.js"></script> <script language="javascript"> function addStyle() { // $("#userid").css("font-size","30px"); // $("#userid").css("color","green"); $("#userid").addClass("test1"); $("#userid").addClass("test2"); }
function removeStyle() { $("#userid").removeClass("test1"); } </script> <style> .test1 { font-size:30px; } .test2 { color:red; } </style> </HEAD>
<BODY> <center> <input type="text" id="userid"> <br> <input type="button" value="添加样式" οnclick="addStyle();"> <input type="button" value="删除样式" οnclick="removeStyle();"> </center> </BODY> |
配合这种特点可以实现全选框功能。
<script language="javascript" src="jquery-1.9.1.js"></script> <script language="javascript"> function checkAllBox(flag) { $("input").attr("checked",flag); } </script> </HEAD>
<BODY> <center> <input type="checkbox" name="allbox" id="allbox" οnclick="checkAllBox(this.checked);"> 全选 <br> <input type="checkbox" name="email" value="1" > 邮件1 <br> <input type="checkbox" name="email" value="2" > 邮件2 <br> <input type="checkbox" name="email" value="3" > 邮件3 <br> <input type="checkbox" name="email" value="4" > 邮件4 <br> <input type="checkbox" name="email" value="5" > 邮件5 <br> <input type="checkbox" name="email" value="6" > 邮件6 <br> <input type="checkbox" name="email" value="7" > 邮件7 <br> </center> </BODY> |
除了基本选择器以外,还有其他选择器配合基本选择器一起使用,以便精确定位到需要的组件。
1) 层级选择器:根据节点间的父子关系取得元素。
a) 父节点 > 子节点
b) 祖先元素 后代元素
c) 平级节点 + 最大的弟弟节点
d) 平级节点 ~ 所有的弟弟节点
2) 索引选择器:根据索引的下标来查找元素
a) 根据索引值取得元素
b) 根据单双号选择
i. 通过此功能可以配合实现单双行变色
<script language="javascript" src="jquery-1.9.1.js"></script> <script language="javascript"> function changeColor() { $("#mytable tr:gt(0):odd").attr("bgColor","#dddddd"); $("#mytable tr:gt(0):even").attr("bgColor","#ffffff"); } </script> <style> .test1 { font-size:30px; color:red; } </style> </HEAD>
<BODY οnlοad="changeColor();"> <center> <table id="mytable" border='1' width="80%"> <tr bgColor="black"> <td style="color:white">编号</td> </tr> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> </table> </center> |
3) 可以针对表单中元素的type来选择某一类表单元素
4) 可以针对属性值来选择某一组元素。
<script language="javascript"> function checkAllBox(flag) { $(":checkbox[name='email']").attr("checked",flag); } </script> <style> .test1 { font-size:30px; color:red; } </style> </HEAD>
<BODY> <center> <input type="checkbox" name="allbox" id="allbox" οnclick="checkAllBox(this.checked);"> 全选 <br> <input type="checkbox" name="email" value="1" > 邮件1 <br> <input type="checkbox" name="email" value="2" > 邮件2 <br> <input type="checkbox" name="email" value="3" > 邮件3 <br> <input type="checkbox" name="email" value="4" > 邮件4 <br> <input type="checkbox" name="email" value="5" > 邮件5 <br> <input type="checkbox" name="email" value="6" > 邮件6 <br> <input type="checkbox" name="email" value="7" > 邮件7 <br> <br> <hr> <br> <input type="checkbox" name="sex" value="男" > 男 <input type="checkbox" name="sex" value="女" > 女 </center> |
5) 可以取得当前选中的元素
事件处理
可以动态为元素添加和删除事件。
<script language="javascript"> function onButton() { $(":button:first").on("click",test); }
function offButton() { $(":button:first").off("click"); }
function test() { alert("测试"); } </script> </HEAD>
<BODY> <center> <input type="button" value="测试" οnclick="test();"> <br> <input type="button" value="打开" οnclick="onButton();"> <input type="button" value="关闭" οnclick="offButton();"> </center> </BODY> |
这里只能删除由JQuery添加的事件,通过html写好的事件无法删除 |
JQuery等js框架一般都提供一个ready事件,该事件是document对象的,类似onload
onload和ready哪个先执行?为什么?
1) ready是在页面html代码全部加载完成后自动执行,也就是DOM树结构建立好后就执行
2) load则是在页面所有资源加载完成后才执行。
DOM处理
这里完成一个表格的动态添加和删除行的功能。
<script language="javascript" src="jquery-1.9.1.js"></script> <script language="javascript"> var index = 2; function addRow() { // $("#mytable").append("<tr><td>"+index+"</td><td><input type='text' name='chepai' ></td><td><select name='type'><option>全责</option><option>主责</option><option>次责</option><option>无责</option></select></td><td><input type='button' value=' - ' οnclick='delRow(this);'></td></tr>"); $("#mytable").append($("#demoRow").clone()); $("#mytable tr:last td:first").html(index); $("#mytable tr:last td:last input").css("display",""); index++; }
function clearRow() { $("#mytable tr:gt(1)").remove(); }
function delRow(button) { $(button.parentNode.parentNode).remove(); } </script> </HEAD>
<BODY> <center> <input type="button" value=" + " οnclick="addRow();"> <input type="button" value="清空" οnclick="clearRow();"> <table border="1" id="mytable" width="80%"> <tr> <td width="20%">编号</td> <td width="40%">车牌号</td> <td width="20%">责任</td> <td>操作</td> </tr> <tr id="demoRow"> <td>1</td> <td><input type="text" name="chepai" ></td> <td> <select name="type"> <option>全责</option> <option>主责</option> <option>次责</option> <option>无责</option> </select> </td> <td> <input style="display:none" type="button" value=" - " οnclick="delRow(this);"> </td> </tr> </tr> </table> </center> </BODY> |
特效
JQuery中默认提供了两种动画效果,显示隐藏和淡入淡出
<script language="javascript" src="jquery-1.9.1.js"></script> <script language="javascript"> function showImg() { // $("div").show(2000); $("div").fadeIn(2000); }
function hideImg() { // $("div").hide(2000); $("div").fadeOut(2000); } </script> </HEAD>
<BODY> <center> <input type="button" value="显示" οnclick="showImg();"> <input type="button" value="隐藏" οnclick="hideImg();"> <br> <div> <img src="1.jpg"> </div> </center> </BODY> |
一般开发中应用的比较多的是自定义动画效果,这种功能需要通过animate方法来实现。
<script language="javascript" src="jquery-1.9.1.js"></script> <script language="javascript"> function showImg() { $("div").animate({top:"0px"},2000); }
function hideImg() { $("div").animate({top:"-150px"},2000); } </script> </HEAD>
<BODY οnlοad="showImg();"> <center> <div style="position:absolute;top:-150px;left:0px;width:200px;height:150px;"> <img src="1.jpg" width="200px" height="150px" οnclick="hideImg();window.open('http://www.广告.com');"> </div> </center> </BODY> |
浮动广告功能
<script language="javascript" src="jquery-1.9.1.js"></script> <script language="javascript"> function showImg() { var topValue = parseInt(Math.random() * 600) + "px"; var leftValue = parseInt(Math.random() * 800) + "px"; $("div").animate({top:topValue,left:leftValue},2000,showImg);
}
function hideImg() { $("div").animate({top:"-150px"},2000); } </script> </HEAD>
<BODY οnlοad="showImg();"> <center> <div style="position:absolute;top:-150px;left:0px;width:200px;height:150px;"> <img src="1.jpg" width="200px" height="150px" οnclick="hideImg();window.open('http://www.广告.com');"> </div> </center> </BODY> |
JQuery验证组件
通过使用JQuery的validate扩展插件可以实现验证的操作。
<script language="javascript" src="jquery-1.9.1.js"></script> <script language="javascript" src="jquery.validate.js"></script> <script language="javascript"> $(document).ready(function(){ $("form").validate({ rules : { userid : { required:true , minlength:6 } , password : { required : true, maxlength : 20 }, repassword : { equalTo : "#password" }, email : { email : true } }, messages : { userid : { required:"请输入用户名", minlength:"长度不能少于6位" }, password : { required:"密码不能为空!", maxlength:"长度不能超过20位" }, repassword : { equalTo : "两次密码必须一致" } , email : { email:"请输入合法的邮件地址" } } }); }); </script> </HEAD>
<BODY> <center> <form action="suc.html" method="post"> 用户名: <input type="text" name="userid" id="userid"> <br> 密码: <input type="text" name="password" id="password"> <br> 再输入一次密码: <input type="text" name="repassword" id="repassword"> <br> 邮件地址: <input type="text" name="email" id="email"> <br> <input type="submit" value="提交"> </form> </center> </BODY> |