Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1220作业jQuery表单属性选择器-PHP培训第九期线上班
Blogger Information
Blog 32
fans 1
comment 0
visits 23207
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1220作业jQuery表单属性选择器-PHP培训第九期线上班
淡月
Original
1009 people have browsed it

一.常用jQuery属性选择器

  1. <body>
  2.     <button class="btn btn-primary btn-lg">btn</button>
  3.     <div class="mydiv" style="background-color: #000;" id="div_black" mydefine="sss">黑色</div>
  4.     <div class="mydivs" style="background-color: #ff0000;" id="div_red" mydefine="ss">红色</div>
  5.     <p id="1">我是p标签</p>
  6.     <div class="mydiv" style="background-color: #00ff00;" id="div_green">
  7.         <p id="a">div中的p标签</p>
  8.         <div id="div_inside">
  9.             <p id="b">div中div中的p标签</p>
  10.             <p id="c">P3</p>
  11.         </div>
  12.         <div style="background-color: #20b2aa;">第二个div</div>
  13.     </div>
  14.     <p id="2">我是p标签</p>
  15.     <p>我是p标签</p>
  16.     <div class="mydiv" style="background-color: #ffff00;" id="div_yellow">黄色</div>
  17.     <button onclick="jfirst()">:first</button>
  18.     <button onclick="jeq()">:eq(index)</button>
  19.     <button onclick="jgt()">:gt(index)</button>
  20.     <button onclick="jlt()">:lt(index)</button>
  21.     <button onclick="jlast()">:last</button>
  22.     <button onclick="jattr()">[attr]</button>
  23.     <button onclick="jattr_value()">[attr="value"]</button>
  24.     <button onclick="jattr_start_value()">[attr^="value"]</button>
  25.     <button onclick="jattr_end_value()">[attr$="value"]</button>
  26.     <button onclick="jattr_include_value()">[attr*="value"]</button>
  27.     <button onclick="jfirstchild()" >:first-child</button>
  28.     <script type="text/javascript">
  29.         function jfirst(){
  30.             var obj = $('div:first'); // 第一个div（div-0）
  31.             console.log(obj);
  32.         }
  33.         function jeq(){
  34.             var obj = $('div:eq(1)'); // 等于div-1的
  35.             console.log(obj);
  36.         }
  37.         function jgt(){
  38.             var objs = $('div:gt(0)'); // 在第div-0之后的
  39.             console.log(objs);
  40.         }
  41.         function jlt(){
  42.             var objs = $('div:lt(4)'); // 在第div-4之前的
  43.             console.log(objs);
  44.         }
  45.         function jlast(){
  46.             var obj = $('div:last'); // 最后一个div
  47.             console.log(obj);
  48.         }
  49.         function jattr() {
  50.             var objs = $('div[id]'); // div标签里有id的
  51.             console.log(objs);
  52.         }
  53.         function jattr_value() {
  54.             var objs = $('div[class="mydivs"]'); // div标签class为mydivs的
  55.             // var objs = $('div[mydefine="sss"]'); // div标签mydefine为sss的
  56.             // var objs = $('div[mydefine!="sss"]'); // div标签mydefine不为sss的
  57.             console.log(objs);
  58.         }
  59.         function jattr_start_value() {
  60.             var objs = $('div[mydefine^="s"]'); // div标签mydefine以s开头的
  61.             console.log(objs);
  62.         }
  63.         function jattr_end_value() {
  64.             var objs = $('div[class$="v"]'); // div标签class以v结尾的
  65.             console.log(objs);
  66.         }
  67.         function jattr_include_value() {
  68.             var objs = $('button[class*="btn-primary"]'); // button标签class包含btn-primary的
  69.             console.log(objs);
  70.         }
  71.         function jfirstchild() {
  72.             var objs = $('div p:first-child'); // div标签里第一个p标签元素
  73.             console.log(objs);
  74.         }
  75.     </script>
  76. </body

二.常用jquery表单选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery表单选择器</title>
  6.     <script src="jquery-3.4.1.min.js"></script>
  7. </head>
  8. <body>
  9. <form action="">
  10.     <h2>注册账号</h2>
  11.     <p>
  12.         邮箱：<input type="email" name="mail" value="452557923@qq.cn">
  13.     </p>
  14.     <p>
  15.         密码：<input type="password" name="pass" placeholder="密码6-18位">
  16.     </p>
  17.     <p>
  18.         确认密码：<input type="password" name="repass" placeholder="重新输入上方密码">
  19.     </p>
  20.     <p>
  21.         性别：<input type="radio" name="sex" value="nan">男
  22.               <input type="radio" name="sex" value="nv">女
  23.     </p>
  24.     <button type="button" onclick="an()">提交注册</button>
  25. </form>
  26. <script>
  27.     function an() {
  28.         var mail = $('input[name="mail"]').val();
  29.         var pass = $('input[name="pass"]').val();
  30.         var repass = $('input[name="repass"]').val();
  31.         var sex = $('input[name="sex"]:checked').val();
  32.         if (mail==''){
  33.             alert('邮箱信息未填写');
  34.             return;
  35.         }
  36.         if(pass==''){
  37.             alert('请填写密码');
  38.             return;
  39.         }
  40.         if (pass!=repass){
  41.             alert('两次密码不一致');
  42.             return;
  43.         }
  44.         if (sex==undefined){
  45.             alert('请选择您的性别');
  46.             return;
  47.         }else{
  48.             alert('注册成功 账号资料登陆邮箱：'+mail+'登陆密码'+pass);
  49.         }
  50.     }
  51. </script>
  52. </body>
  53. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：选择器, 有意思, 与css有相似之处, 但区别也很明显
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post