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;
}
// 用户名长度大于6
if(user.length <=6){
//alert("用户名长度需要大于6");
$("#usererror").html("用户名长度需要大于6");
return false;
}
// 用户名中不能有数字 ad34adf
for(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和false
var 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");
//假如有一个没被选中,那么全选框就是false
if(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>