Web全栈~18.jQuery
上一期
jQuery是JavaScript的一个函数库,对JavaScript进行了一个封装。jQuery将常用的、复杂的操作进行函数化封装，直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。 jQuery能做的JavaScript也能做，但使用jQuery能大幅提高开发效率。
JavaScript中获取元素内容的方式
getElementById( ) ：返回一个节点对象。
getElementsByName( )：返回多个（节点数组）。
getElementsByTagName( ) ：返回多个（节点数组）
jQuery选择器
基本选择器
标签选择器 $("a")
ID选择器 $("#id") $("p#id")
类选择器 $(".class") $("h2.class")
通配选择器 $("*")
并集选择器$("elem1,elem2,elem3")
后代选择器$(ul li)
父子选择器 $(ul>li)
属性选择器
[attribute] 匹配包含给定属性的元素
[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
位置选择器
针对整个页面而言的位置选择器
first 获取第一个元素
:last 获取最后一个元素
odd 匹配所有索引值为奇数的元素，从 0 开始计数
even匹配所有索引值为偶数的元素，从 0 开始计数
eq(n) 匹配一个给定索引值的元素
gt(n) 匹配所有大于给定索引值的元素
lt(n) 匹配所有小于给定索引值的元素
针对上级标签而言的位置选择器
first-child 匹配第一个子元素
last-child匹配最后一个子元素
only-child如果某个元素是父元素中唯一的子元素，将会被匹配
nth-child(n) :nth-child(odd|even) :nth-child(xn+y) 匹配其父元素下的第N个子或奇偶元素
表单选择器
关于表单项的选择器
text :password :radio :checkbox :hidden :file :submit
input 匹配所有 input, textarea, select 和 button 元素
关于表单项状态的选择器
selected :checked :enabled :disabled
hidden :visible :not
注意$("input")和$(":input")的区别
$("input")：标签选择器，只匹配input标签
$(":input")： 匹配所有 input, textarea, select 和 button 元素
表单验证案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">function checkForm(){//判断用户名是否符合验证规则var flag1 = checkUser();//判断邮箱是否符合验证规则var flag2 = checkEmail();//如果均符合验证规则，验证成功，否则验证出错if(flag1 && flag2){return true;}else{return false;}}function checkUser(){//清空上次检查的提示信息//$("#usererror").html("");$("#usererror").empty();// 用户名不能为空var user = $("#user").val();if(user == ""){//alert("用户名不能为空");$("#usererror").html("用户名不能为空");return false;}// 用户名长度大于6if(user.length <=6){//alert("用户名长度需要大于6");$("#usererror").html("用户名长度需要大于6");return false;}// 用户名中不能有数字 ad34adffor(var i=0;i<user.length;i++){var ch = user.charAt(i);if(ch>='0' && ch<='9' ){//alert("用户名中不能有数字");$("#usererror").html("用户名中不能有数字");return false;}}return true;//return undefined}function checkEmail(){//清空上次验证邮箱的提示信息$("#emailerror").empty();var email = $("#email").val();if(email.indexOf('@')<0){//alert("邮箱中必须有@");$("#emailerror").html("邮箱中必须有@"); return false;}if(email.indexOf('.')<0){//alert("邮箱中必须有.");$("#emailerror").html("邮箱中必须有."); return false;} return true; }function operUser(){$("#user").select();//$("#user").val("");}</script></head><body><table id="center" border="0" cellspacing="0" cellpadding="0"><form action="doRegister.jsp" method="post" name="myform" onsubmit="return checkForm()" ><tr><td >您的姓名：</td><td><input id="user" type="text" onfocus="operUser()" onblur="checkUser()"/><div id="usererror" style="display: inline;"></div></td></tr><tr><td >输入密码：</td><td><input id="pwd" name="pwd" type="password"/></td></tr><tr><td >再输入一遍密码：</td><td><input id="repwd" type="password"/></td></tr><tr><td >您的Email：</td><td><input id="email" type="text" onblur="checkEmail()"/><span id="emailerror"></span></td></tr> <tr><td> </td><td ><input name="btn" type="submit" value="注册" class="rb1" /></td></tr></form></table></body>
</html>
购物车案例
需求:使用jQuery实现对购物车的增删查改全选反选功能。单个选择复选框的时候如果满了,全选框也必须自动勾上。修改数量的时候数量变成文本格式,修改数量按钮自身变成确定按钮。修改的时候要检查数量是否正确。
做这个的目的就和我写数据结构一样,主要是为了顺顺手。因为这些选择器也好还是事件也好都太多了。我不可能一个一个去背,只能说下次要用的时候看看文档可以上手。待会儿也会用到各种选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="./js/jquery.min.js"></script><script type="text/javascript">//全选操作$(function(){//全选操作$("#chks").click(function(){//获取全选框的值,this就相当于是chks。//prop会根据是否选中返回true和false,也可以在后面修改true和falsevar flag = $(this).prop("checked");//这句话的意思是将所有input name = chk 的值都根据flag改变//触发chks单机事件勾选了的时候flag是true,没勾选的时候就是false//所以当全选框是true的时候,下面全改成true。全选是false下面就全改成false就好了$("input[name=chk]").prop("checked",flag);});//为了防止复选框被一个一个点满的时候全选框没有被改变.所以这里要处理一下//使用了该选择器后,用户每次点击复选框,都会在这里进行判断一下$("input[name=chk]").click(judgeAll());//反选操作$("#fx").click(function(){//获取所有复选框$("input[name=chk]").each(function(){//获取原来的值var flag = $(this).prop("checked");//修改相反的值$(this).prop("checked",!flag);})//直接调用就可以了judgeAll();});/*** 新增*/$("#addRow").click(function(){//创建一个var newRow = $('<tr>'+'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+'<td>《c primer plus》</td>'+'<td>Stephen Prata</td>'+'<td>10</td>'+'<td>'+'<input type="button" name="aa" id="" value="修改数量" οnclick="updateAmount(this)"/>'+'<input type="button" name="" id="" value="删除" οnclick="delRow(this)"/>'+'</td>'+'</tr>');//======================================//这里用到了位置选择器,last是最后一个。如果要放在第一个就用first$("tr:last").after(newRow);});/*** 多行删除*///这个对应的是横着那一排的删除id。不是单独删除的那个单击事件$("#delRow").click(function(){//获取所有被选中的复选框var toDelArr = $("input[name=chk]:checked");//先判断是否选择,如果没选就提示if(toDelArr.length == 0){alert("至少选中一行");}else{//toDelArr.remove();是反面教材,因为刚刚只是获得复选框。直接删自然也只会删掉复选框//toDelArr.parent().remove();也不行,因为它只会删掉当前的td。要想删掉tr需要两个parent//toDelArr.parent().parent().remove(); 这种写法虽然可以但是也太麻烦了//最好的写法还是这种。parents里面一定要写东西。不然整个页面都删掉了。。。toDelArr.parents("tr").remove();}});/*** 复制多行*/$("#copyRow").click(function(){//获取所有被选中的复选框var toCopyArr = $("input[name=chk]:checked");//先判断是否选择,如果没选就提示if(toCopyArr.length == 0){alert("至少选中一行");}else{//each是在循环,所以循环里面一个一个加就相当于多行增加toCopyArr.each(function(){//复制一份var cloneRow = $(this).parents("tr").clone();//粘贴一份$("#ta").append(cloneRow);});}});})/*** 为了让反选和普通选择都进行判断并且代码不用重复写* 所以这里就封装成一个函数让它们调用*/function judgeAll(){//获取所有的复选框var arr = $("input[name=chk]");//先默认全部选中var flag = true;//arr.each就相当于是在循环遍历arr.each(function(){//判断所有复选框是否被选中var flagplus = $(this).prop("checked"); //假如有一个没被选中,那么全选框就是falseif(flagplus == false){flag = false;return;}});//决定全选框的值$("input[name=chks]").prop("checked",flag);}/*** 修改当前数量*/function updateAmount(obj){//数量变成文本框的值,文本框变成数量的值//获取原来的数量 prev是指修改数量的前面一个表格。不然就会把自己变成下面input的格式//如果要把input格式换成作者那个位置,可以用两个prev()试试var amountCell = $(obj).parent().prev();var amount = amountCell.html();//将指定位置的td改成input文本格式amountCell.html('<input type="text" value = "'+ amount +'" οnblur="checkAmount(this)"/>');//把修改按钮变成确定按钮//获得当前按钮单元格var buttonCell = $(obj).parent();//准备新按钮var newButton = $('<input type="button" name="" id="" value="确定" οnclick="confirmAmount(this)"/>'+'<input type="button" name="" id="" value="删除" οnclick="delRow(this)" />');//添加新按钮buttonCell.html(newButton);}/*** 确定数量* @param {Object} obj*/function confirmAmount(obj){//文本框变成数量//获取原来的数量 var amountInput = $(obj).parent().prev().find("input");var amount = amountInput.val();//修改文本框的数量$(obj).parent().prev().html(amount);//确定按钮变成修改按钮//获得当前按钮单元格var buttonCell = $(obj).parent();//准备新按钮var newButton = $('<input type="button" name="" id="" value="修改数量" οnclick="updateAmount(this)"/>'+'<input type="button" name="" id="" value="删除" οnclick="delRow(this)" />');//添加新按钮buttonCell.html(newButton);}//判断数量是否正确function checkAmount(obj){//获取值var amount = $(obj).val();//判断是否正确if(isNaN(amount) || amount < 1 || parseInt(amount) != amount){alert("必须是大于0的整数!");}}/*** 删除当前行*/function delRow(obj){//这里就是一句话解决了。。。$(obj).parents("tr").remove();}</script></head><body><h3>购物车</h3><hr /><input type="button" id="fx" value="反选" /><input type="button" id="addRow" value="新增一行" /><input type="button" id="delRow" value="删除行"/><input type="button" id="copyRow" value="复制行" /><table border="1px" cellpadding="10px" cellspacing="0" id="ta"><tr><td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td><td width="200px">书名</td><td width="200px">作者</td><td width="200px">数量</td><td width="200px">操作</td></tr><tr><td><input type="checkbox" name="chk" id="" value="2"/></td><td>《计算机组成原理》</td><td>Alan Clements</td><td>10</td><td><input type="button" name="aa" id="" value="修改数量" onclick="updateAmount(this)"/><input type="button" name="" id="" value="删除" onclick="delRow(this)"/></td></tr> <tr><td><input type="checkbox" name="chk" id="" value="3" /></td><td>《深入理解计算机系统》</td><td>布赖恩特</td><td>10</td><td> <input type="button" name="" id="" value="修改数量" onclick="updateAmount(this)"/><input type="button" name="" id="" value="删除" onclick="delRow(this)" /></td></tr><tr><td><input type="checkbox" name="chk" id="" value="4" /></td><td>《编译原理》</td><td>Alfred V．Aho</td><td>30</td><td><input type="button" name="" id="" value="修改数量"οnclick="updateAmount(this)"/><input type="button" name="" id="" value="删除" onclick="delRow(this)"/></td></tr></table></body>
</html>
