Web全栈~18.jQuery

osc_3hevjybf 2021-01-21 10:28:06
javascript


Web全栈~18.jQuery

上一期

       jQuery是JavaScript的一个函数库,对JavaScript进行了一个封装。jQuery将常用的、复杂的操作进行函数化封装,直接调用,大大降低了使用JavaScript的难度,改变了使用JavaScript的习惯。 jQuery能做的JavaScript也能做,但使用jQuery能大幅提高开发效率。

JavaScript中获取元素内容的方式

       getElementById( ) :返回一个节点对象。
       getElementsByName( ):返回多个(节点数组)。
       getElementsByTagName( ) :返回多个(节点数组)

jQuery选择器

基本选择器

标签选择器 $("a")

ID选择器 $("#id") $("p#id")

类选择器 ( " . c l a s s " ) (".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

注意 ( " i n p u t " ) ("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>&nbsp;</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>
版权声明
本文为[osc_3hevjybf]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4405841/blog/4917298

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云