Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 036-12月20日-JS第5节-jquery选择器2
Blogger Information
Blog 27
fans 0
comment 0
visits 17283
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
036-12月20日-JS第5节-jquery选择器2
冇忉丼
Original
659 people have browsed it

jquery表单对象属性案例

涉及以下两类选择器：
伪类选择器$(‘xx:…’)
属性值选择器$(‘xx[yy= “zz”]’)

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <script type="text/javascript" src="../jquery-3.4.1.min.js"></script>
  9.     <style>
  10.         div{
  11.            text-align: center;
  12.             font-family: "微软雅黑";
  13.             font-size: 20px;
  14.         }
  15.         select{
  16.             font-size: 20px;
  17.         }
  18.         .borDer{
  19.             border: 10px solid yellowgreen;
  20.             width: 450px;
  21.             height: 700px;
  22.             margin: 0 auto;
  23.         }
  24.     </style>
  25.     <title>使用jquery写表单</title>
  26. </head>
  27. <body>
  29. <div class="borDer">
  30.     <form action="">
  31.         <div>
  32.             <label for="username">用户名：</label>
  33.             <input type="text" name="username" id="username">
  34.         </div>
  35.         <div>
  36.             <label for="pwd">密码：</label>
  37.             <input type="text" id="pwd">
  38.         </div>
  39.         <div>
  40.             <label for="pwd_a">再输入一次密码：</label>
  41.             <input type="text" id="pwd_a">
  42.         </div>
  43.         <div>
  44.             <label>性别：</label>
  45.             <input type="radio" name="gender" value="1">女
  46.             <input type="radio" name="gender" value="2">男
  47.         </div>
  48.         <div>
  49.             <label for="">来自：</label>
  50.             <select name="" id="">
  51.                 <option value="">云</option>
  52.                 <option value="">贵</option>
  53.                 <option value="">川</option>
  54.                 <option value="">渝</option>
  55.             </select>
  56.         </div>
  57.         <div>
  58.             <label for="">用户状态：</label>
  59.             <input type="checkbox">禁用
  60.         </div>
  61.         <button onclick="save()">保存</button>
  62.     </form>
  64.     <button onclick="first()">:first</button>
  65.     <button onclick="equal()">:eq(index)</button>
  66.     <button onclick="great()">:gt(index)</button>
  67.     <button onclick="low()">lt(index)</button>
  68.     <button onclick="lastNum()">:last</button>
  69.     <button onclick="getAttr()">attribute</button>
  70.     <button onclick="getAttvul()">attr="value"</button>
  71.     <button onclick="headAttr()">^attr</button>
  72.     <button onclick="firstCh()">first-child</button>
  73. </div>
  75. <script type="text/javascript" src="1221.js"></script>
  77. </body>
  78. </html>

渲染如下：

1221.js如下：

  1. function save() {
  2.     var username = $('input[id = "username"]').val();
  3.     var pwd = $('input[id = "pwd"]').val();
  4.     console.log(pwd);
  5.     var pwd_a = $('input[id = "pwd_a"]').val();
  6.     console.log('pwd_a')
  7.     var gender = $('input[name = "gender"]:checked').val();
  8.     var province = $('select option:selected').text();
  9.     console.log(province);
  10.     // return;
  11.     if (username==''){
  12.         alert('请输入用户名');
  13.         return;
  14.     }
  15.     if (pwd==''){
  16.         alert('请输入密码');
  17.         return;
  18.     }
  19.     if (pwd_a != pwd){
  20.         alert('两次输入不一致');
  21.         return;
  22.     }
  23.     if (gender==undefined){
  24.         alert('请选择性别');
  25.         return;
  26.     }
  27.     if (province==undefined){
  28.         alert('请选择省份');
  29.         return;
  30.     }
  31.     return;
  32. }
  33. //选择伪类第一个子节点
  34. function first() {
  35.     // var vul = $('div button:first-child').val();
  36.     var vul1 = $('div button:first-child');
  37.     // console.log(vul1);
  38.     console.log(vul1);
  39. }
  40. //索引为指定值的子节点
  41. function equal() {
  42.     var vul2 = $('div button:eq(2)');
  43.     alert(vul2);
  44. }
  45. //超过索引值的子节点全部选出
  46. function great() {
  47.     var vul3 = $('div button:gt(3)');
  48.     alert(vul3);
  49. }
  50. //小于索引值的子节点全部选出
  51. function low() {
  52.     var vul4 = $('div button:lt(4)');
  53.     alert(vul4);
  54. }
  55. //最后一个子节点
  56. function lastNum() {
  57.     var vul5 = $('div button:last');
  58.     alert(vul5);
  59. }
  60. //按给定属性值选择
  61. function getAttr() {
  62.     var vul6 = $('input #username');
  63.     alert(vul6);
  64. }
  65. function getAttvul() {
  66.     var vul7 = $( 'input[name = "gender"]:checked');
  67.     alert(vul7);
  68. }
  69. //按属性值开头字母匹配选择
  70. function headAttr() {
  71.     var vul8 = $( 'input[type^="check"]');
  72.     alert(vul8);
  73. }
  74. function firstCh() {
  75.     var vul9 = $( 'select:first-child');
  76.     alert(vul9);
  77. }
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