Web全栈~18.jQuery

女爷i 2023-01-08 03:29 114阅读 0赞

# Web全栈~18.jQuery #

## [上一期][Link 1] ##

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实现对购物车的增删查改全选反选功能。单个选择复选框的时候如果满了,全选框也必须自动勾上。修改数量的时候数量变成文本格式,修改数量按钮自身变成确定按钮。修改的时候要检查数量是否正确。

做这个的目的就和我写数据结构一样,主要是为了顺顺手。因为这些选择器也好还是事件也好都太多了。我不可能一个一个去背,只能说下次要用的时候看看文档可以上手。待会儿也会用到各种选择器

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70_pic_center]

<!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>

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112758311
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/9dd350bf88f94a3da792351571331fbf.png