jQuery选择器经典案例
2024-05-16 07:42:06
jQuery选择器经典案例
具体讲解内容参照上一篇：
选择器详细讲解
基本选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function () {//1.选择 id 为 one 的元素 "background-color","#bbffaa"$("#btn1").click(function () {$("#one").css("background-color","#bbffaa");})//2.选择 class 为 mini 的所有元素$("#btn2").click(function () {$(".mini").css("background-color","#bbffaa");})$("#btn3").click(function () {//3.选择 元素名是 div 的所有元素$("div").css("background-color","#bbffaa");})//4.选择所有的元素$("#btn4").click(function () {$("*").css("background-color","#bbffaa");})//5.选择所有的 span 元素和id为two的元素$("#btn5").click(function () {$("span,#two").css("background-color","#bbffaa");})});</script></head><body>
<!-- <div><h1>基本选择器</h1></div> --> <input type="button" value="选择 id 为 one 的元素" id="btn1" /><input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /><input type="button" value="选择 元素名是 div 的所有元素" id="btn3" /><input type="button" value="选择 所有的元素" id="btn4" /><input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span class="one" id="span">^^span元素^^</span></body>
</html>层次选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;} </style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){//1.选择 body 内的所有 div 元素 $("#btn1").click(function(){$("body div").css("background", "#bbffaa");});//2.在 body 内, 选择div子元素 $("#btn2").click(function(){$("body>div").css("background", "#bbffaa");});//3.选择 id 为 one 的下一个 div 元素 $("#btn3").click(function(){$("#one+div").css("background", "#bbffaa");});//4.选择 id 为 two 的元素后面的所有 div 兄弟元素$("#btn4").click(function(){$("#two~div").css("background", "#bbffaa");});});</script></head><body> <!-- <div><h1>层级选择器:根据元素的层级关系选择元素</h1>ancestor descendant ：parent > child ：prev + next ：prev ~ siblings ：</div> --><input type="button" value="选择 body 内的所有 div 元素" id="btn1" /><input type="button" value="在 body 内, 选择div子元素" id="btn2" /><input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /><input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素^^</span></body>
</html>
过滤选择器
基本过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;} </style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();});$(document).ready(function(){//1.选择第一个 div 元素 $("#btn1").click(function(){$("div:first").css("background", "#bbffaa");});//2.选择最后一个 div 元素$("#btn2").click(function(){$("div:last").css("background", "#bbffaa");});//3.选择class不为 one 的所有 div 元素$("#btn3").click(function(){$("div:not(.one)").css("background", "#bbffaa");});//4.选择索引值为偶数的 div 元素$("#btn4").click(function(){$("div:even").css("background", "#bbffaa");});//5.选择索引值为奇数的 div 元素$("#btn5").click(function(){$("div:odd").css("background", "#bbffaa");});//6.选择索引值为大于 3 的 div 元素$("#btn6").click(function(){$("div:gt(3)").css("background", "#bbffaa");});//7.选择索引值为等于 3 的 div 元素$("#btn7").click(function(){$("div:eq(3)").css("background", "#bbffaa");});//8.选择索引值为小于 3 的 div 元素$("#btn8").click(function(){$("div:lt(3)").css("background", "#bbffaa");});//9.选择所有的标题元素$("#btn9").click(function(){$(":header").css("background", "#bbffaa");});//10.选择当前正在执行动画的所有元素$("#btn10").click(function(){$(":animated").css("background", "#bbffaa");});//11.选择没有执行动画的最后一个div$("#btn11").click(function(){$("div:not(:animated):last").css("background", "#bbffaa");});});</script></head><body>
<!-- <div>:first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated </div> --><input type="button" value="选择第一个 div 元素" id="btn1" /><input type="button" value="选择最后一个 div 元素" id="btn2" /><input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" /><input type="button" value="选择索引值为偶数的 div 元素" id="btn4" /><input type="button" value="选择索引值为奇数的 div 元素" id="btn5" /><input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" /><input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" /><input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" /><input type="button" value="选择所有的标题元素" id="btn9" /><input type="button" value="选择当前正在执行动画的所有元素" id="btn10" /> <input type="button" value="选择没有执行动画的最后一个div" id="btn11" /><h3>基本选择器.</h3><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><div id="mover">正在执行动画的div元素.</div></body>
</html>
内容过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;} </style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt(); });/** :contains(text) :empty :has(selector) :parent */$(document).ready(function(){//1.选择 含有文本 'di' 的 div 元素$("#btn1").click(function(){$("div:contains('di')").css("background", "#bbffaa");});//2.选择不包含子元素(或者文本元素) 的 div 空元素$("#btn2").click(function(){$("div:empty").css("background", "#bbffaa");});//3.选择含有 class 为 mini 元素的 div 元素$("#btn3").click(function(){$("div:has('.mini')").css("background", "#bbffaa");});//4.选择含有子元素(或者文本元素)的div元素$("#btn4").click(function(){$("div:parent").css("background", "#bbffaa");});});</script></head><body> <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" /><input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /><input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" /><input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><div id="mover">正在执行动画的div元素.</div></body>
</html>
可见性过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;} </style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt(); });/**:hidden :visible */$(document).ready(function(){//1.选取所有可见的 div 元素$("#btn1").click(function(){$("div:visible").css("background", "#bbffaa");});//2.选择所有不可见的 div 元素//不可见：display属性设置为none，或visible设置为hidden$("#btn2").click(function(){$("div:hidden").show("slow").css("background", "#bbffaa");});//3.选择所有不可见的 input 元素$("#btn3").click(function(){alert($("input:hidden").attr("value"));}); });</script></head><body> <input type="button" value="选取所有可见的 div 元素" id="btn1"><input type="button" value="选择所有不可见的 div 元素" id="btn2" /><input type="button" value="选择所有不可见的 input 元素" id="btn3" /><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8"></div><div id="mover">正在执行动画的div元素.</div></body>
</html>属性过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div,span,p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;
}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;
}div.hide {display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">/**
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN] */$(function() {//1.选取含有 属性title 的div元素$("#btn1").click(function() {$("div[title]").css("background", "#bbffaa");});//2.选取 属性title值等于'test'的div元素$("#btn2").click(function() {$("div[title='test']").css("background", "#bbffaa");});//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)$("#btn3").click(function() {$("div[title!='test']").css("background", "#bbffaa");});//4.选取 属性title值 以'te'开始 的div元素$("#btn4").click(function() {$("div[title^='te']").css("background", "#bbffaa");});//5.选取 属性title值 以'est'结束 的div元素$("#btn5").click(function() {$("div[title$='est']").css("background", "#bbffaa");});//6.选取 属性title值 含有'es'的div元素$("#btn6").click(function() {$("div[title*='es']").css("background", "#bbffaa");});//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素$("#btn7").click(function() {$("div:[id][title*=es]").css("background", "#bbffaa");});//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素$("#btn8").click(function() {$("div[title!='test'][title]").css("background", "#bbffaa");});});
</script>
</head>
<body><input type="button" value="选取含有 属性title 的div元素." id="btn1" /><input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" /><input type="button"value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" /><input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" /><input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" /><input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" /><input type="button"value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."id="btn7" /><input type="button"value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display: none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" value="123456789"size="8"></div><div id="mover">正在执行动画的div元素.</div>
</body>
</html>
表单对象属性过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){/**:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden 表单对象的属性:enabled :disabled :checked :selected *///1.对表单内 可用input 赋值操作$("#btn1").click(function(){$(":enabled").val("New Value");});//2.对表单内 不可用input 赋值操作$("#btn2").click(function(){$(":disabled").val("New Value Too");});//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数$("#btn3").click(function(){alert($(":checkbox:checked").size())});//4.获取多选框，每个选中的value值$("#btn4").click(function(){var str = "";var eles = $(":checkbox:checked");console.log(eles);for(var i=0;i<eles.size();i++){str += "【"+$(eles[i]).val()+"】";}alert(str)});//5.获取下拉框选中的内容 $("#btn5").click(function(){var str = "";//注意这个选择器的特殊，因为select里面的option是真正的被选择项，//所以 :selected 选择器和 select[name='test']选择器的关系是子父关系//必须按照基本选择器选择后代的方法选var els = $(":selected");console.log(els);for(var i=0;i<els.size();i++){str += "【"+$(els[i]).val()+"】";}alert(str)});}) </script></head><body><h3>表单对象属性过滤选择器</h3><button id="btn1">对表单内 可用input 赋值操作.</button><button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br /><button id="btn3">获取多选框选中的个数.</button><button id="btn4">获取多选框选中的内容.</button><br /><br /><button id="btn5">获取下拉框选中的内容.</button><br /><br /><form id="form1" action="#"> 可用元素: <input name="add" value="可用文本框1"/><br>不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>可用元素: <input name="che" value="可用文本框2"/><br>不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br><br>多选框: <br><input type="checkbox" name="newsletter" checked="checked" value="test1" />test1<input type="checkbox" name="newsletter" value="test2" />test2<input type="checkbox" name="newsletter" value="test3" />test3<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4<input type="checkbox" name="newsletter" value="test5" />test5<br><br>下拉列表1: <br><select name="test" multiple="multiple" style="height: 100px" id="sele1"><option>浙江</option><option selected="selected">辽宁</option><option>北京</option><option selected="selected">天津</option><option>广州</option><option>湖北</option></select><br><br>下拉列表2: <br><select name="test2"><option>浙江</option><option>辽宁</option><option selected="selected">北京</option><option>天津</option><option>广州</option><option>湖北</option></select></form> </body>
</html>
jQuery选择器经典案例相关推荐
- jQuery 选择器 之 案例：淘宝服饰精品案例
案例:淘宝服饰精品案例 ①核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏. ②需要得到当前小li 的索引号,就可以显示对应索引号的图片 ③jQuery 得到当前元素 ...
- jQueryDom和源生DOM相互的转换、jQuery选择器语法、JQuery层次选择器语法、jQuery属性选择器语法、jQuery伪类选择器语法、
jQuery和源生DOM的转化 案例 <body> <p id="test">123</p> <p>456</p> &l ...
- jQuery下拉菜单经典案例
jQuery下拉菜单经典案例 源码: <!DOCTYPE html> <html lang="en"><head><meta charse ...
- 四大常见的jQuery选择器+案例
常见的jQuery选择器 前言 四大选择器 一.jQuery基础选择器 1.ID选择器 2.全选选择器 3.类选择器 4.标签选择器 5.并集选择器 6.交集选择器 层级选择器 1.子代选择器 2.后 ...
- 《Vue入门到精通》最强Vue教程，附带经典案例，万字详解，干货十足！
目录: 一.前言 二.Vue是什么? 1.简介 2.发展史 3.为什么要学习Vue? 4.jQuery.javascript.Vue的区别 5.Vue框架构造 三.Vue的使用 1.Vue环境搭建 2 ...
- JQuery-学习笔记02【基础——JQuery选择器】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- 20150303+JQuery选择器-02
20150303+JQuery选择器-02 三.文档处理 插入 删除 复制 替换 包裹 查找 1.插入操作--内部插入 jQuery <div> jQuery hello jQuery&l ...
- jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
最新文章
- 网线制作（一根网线劈开给2台同时上网使用)
- 威胁情报大会直击 | 企业IT部王森：腾讯企业终端安全管理最佳实践
- 单片机数字滤波算法如何实现？（附代码）
- redis zset转set 反序列化失败_Redis只往zset有序集合添加不存在的数据：关键字索引查询构建+源码分析...
- AlphaFold2立功！清华团队用深度学习增强新冠抗体，创AI里程碑
- 3- OpenCV+TensorFlow 入门人工智能图像处理-TensorFlow入门
- Oracle 20c 新特性：自动的区域图 - Automatic Zone Maps
- Android之Handler
- Hadoop2.2.0 + HBase0.96 伪分布式安装
- 牛客网——复杂字符串排序
- 软件需求工程 高校教学平台 项目可行性报告
- LordPE找不到进程
- 弹性均质圆环法计算过程_盾构隧道衬砌结构内力计算方法的对比浅析
- php 0xc0000135,[原创]IIS7.5下配置ASP+PHP环境及错误处理（0xc0000135）
- 系统架构设计笔记（74）—— 企业信息化与电子商务
- [注]微信公众号的运营推广总结方案（持续更新）
- python实现商品管理系统_商品管理系统(示例代码)
- 谷歌地球桌面版Google earth pro连不上服务器，地点备份
- 文件补丁管理 - patch
- 利用矩阵键盘制作密码锁