Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS第5课-jquery选择器表单属性-九期线上班
Blogger Information
Blog 31
fans 0
comment 0
visits 18230
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
JS第5课-jquery选择器表单属性-九期线上班
Content っ
Original
651 people have browsed it

1、常用jquery属性选择器案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="../1219/jquery-3.4.1.min.js"></script>
  6.     <title>Title</title>
  7. </head>
  8. <body>
  10. <div class="mydiv" id="div1" style="background-color: #000000" >黑色</div>
  11. <div class="mydiv" id="div2" style="background-color: #ff0000" >红色</div>
  12. <div class="mydiv" id="div3" style="background-color: #00ff00" >
  13.     <p id="a">div中的p标签</p>
  14.     <div>
  15.         <p id="b" p1="p1">div中的div的的p标签</p>
  16.         <p id="bbw" p1="p1">div中的div的的p1=p1</p>
  17.         <p id="bbq" p1="p2">div中的div的的p_bbq标签</p>
  18.         <p id="c">p3</p>
  19.     </div>
  20.     <p id="d">pd4</p>
  21.     <div style="background-color: #ffff00">最后一个div,也是div3中的第二个子div</div>
  22. </div>
  23. <p id="p4">我是p标签</p>
  25. <button onclick="jfirst()">:first</button>
  26. <button onclick="jeq()">:eq</button>
  27. <button onclick="jgt()">:gt</button>
  28. <button onclick="jlast()">:last</button>
  29. <button onclick="jlt()">:lt</button>
  30. <button onclick="jxz()">:[]</button>
  31. <button onclick="jxzq()">:[]_1</button>
  32. <button onclick="jbcz()">:不存在</button>
  33. <button onclick="jxzq1()">:^=</button>
  34. <button onclick="jxzq2()">:$=</button>
  35. <button onclick="jxzq3()">:*=</button>
  36. <button onclick="jfirstchild()">:first-child</button>
  37. <button onclick="jlastchild()">:last-child</button>
  39. <!--/***********js*************/-->
  40. <script>
  42.     //选择第一个匹配的元素
  43.     function jfirst() {
  44.         var div1 = $('div:first');
  45.         console.log(div1);
  46.     }
  48.     //匹配的集合中选择索引值为index的元素
  49.     function jeq() {
  50.         var div2 = $('div:eq(1)');
  51.         console.log(div2);
  52.     }
  54.     //选择匹配集合中所有大于给定index（索引值）的元素
  55.     function jgt() {
  56.         var div = $('div:gt(1)');
  57.         console.log(div);
  58.     }
  60.     //选择最后一个匹配的元素
  61.     function jlast() {
  62.         var div = $('div:last');
  63.         console.log(div);
  64.     }
  66.     //选择匹配集合中所有小于于给定index（索引值）的元素
  67.     function jlt() {
  68.         var div = $('div:lt(1)');
  69.         console.log(div);
  70.     }
  72.     //选择所有具有指定属性的元素，该属性可以是任何值。
  73.     function jxz() {
  74.         var p = $('p[p1]');
  75.         console.log(p);
  76.         var pid = $('p[id]');
  77.         console.log(pid);
  78.     }
  80.     //选择指定属性值的元素
  81.     function jxzq() {
  82.         var p = $('p[p1=p1]');
  83.         console.log(p);
  84.         var pid = $('p[id=c]');
  85.         console.log(pid);
  86.     }
  88.     //选择不存在指定属性，或者指定的属性值不等于给定值的元素
  89.     function jbcz() {
  90.         var p = $('p[p1!=p1]');
  91.         console.log(p);
  92.     }
  94.     //选择指定属性是以给定字符串开始的元素
  95.     function jxzq1() {
  96.         var p = $('p[p1 ^= p1]');
  97.         console.log(p);
  98.     }
  100.     function jxzq2() {
  101.         var p = $('p[p1 $= p1]');
  102.         console.log(p);
  103.     }
  105.     function jxzq3() {
  106.         var p = $('p[p1 *= p1]');
  107.         console.log(p);
  108.     }
  110.     //选择所有父级元素下的第一个子元素。
  111.     function jfirstchild() {
  112.         var p = $('p:first-child');
  113.         console.log(p);
  114.     }
  115.     //选择所有父级元素下的最后一个子元素。
  116.     function jlastchild() {
  117.         var p = $('p:last-child');
  118.         console.log(p);
  119.     }
  121. </script>
  123. </body>
  124. </html>

2、常用jquery表单对象属性案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>常用jquery表单对象属性案例</title>
  6.     <script src="../1219/jquery-3.4.1.min.js"></script>
  7. </head>
  8. <body>
  9. <h2>常用jquery表单对象属性案例</h2>
  11. <form action="">
  12.     <div>
  13.         <label for="">用户名</label>
  14.         <input type="text" name="username">
  15.     </div>
  16.     <div>
  17.         <label for="">输入密码</label>
  18.         <input type="password" name="password">
  19.     </div>
  20.     <div>
  21.         <label for="">再次输入</label>
  22.         <input type="password" name="repassword">
  23.     </div>
  24.     <div>
  25.         <label for="">性别</label>
  26.         <input type="radio" name="sex" value="1">男
  27.         <input type="radio" name="sex" value="0">女
  28.     </div>
  29.     <div>
  30.         <label for="">用户状态</label>
  31.         <input type="checkbox" name="status" value="1">启用
  32.         <input type="checkbox" name="status" value="0">禁用
  33.     </div>
  34.     <div>
  35.         <label for="">籍贯</label>
  36.         <select name="province" id="">
  37.             <option value="beijing">北京</option>
  38.             <option value="shanghai">上海</option>
  39.             <option value="tianjin">天津</option>
  40.             <option value="chongqing">重庆</option>
  41.         </select>
  42.     </div>
  43.     <button type="button" onclick="save()">保存</button>
  44. </form>
  46. <script>
  48.     function save() {
  49.         var username = $("input[name = 'username']").val();
  50.         var password = $('input[name = password]').val();
  51.         var rePassword = $('input[name = repassword]').val();
  52.         var sex =  $('input[name = sex]:checked').val();
  53.         var status =  $('input[name = status]:checked').val();
  54.         var province = $('select option:selected').text();
  56.         if (username == ''){
  57.             alert('请输入用户名');
  58.             return;
  59.         }
  60.         if (password == ''){
  61.             alert('请输入密码');
  62.             return;
  63.         }
  64.         if (rePassword == ''){
  65.             alert('请再次输入密码');
  66.             return;
  67.         }
  68.         if (sex == ''){
  69.             alert('请选择性别');
  70.             return;
  71.         }
  72.         if (status == ''){
  73.             alert('请选择状态');
  74.             return;
  75.         }
  76.         if (province == ''){
  77.             alert('请选择籍贯');
  78.             return;
  79.         }
  81.         console.log(sex+'----'+status);
  82.         var sexStr = parseInt(sex) == 1 ? '男' : '女';
  83.         var statusStr = parseInt(status) == 1 ? '启用' : '禁用';
  84.         alert('您的用户名:'+username+' 密码:'+password+' 二次密码:'+rePassword+' 性别:'+sexStr+' 状态:'+statusStr+' 籍贯:'+province);
  86.     }
  87. </script>
  89. </body>
  90. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：表单验证很重要, 一定要重视
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