search

博客列表 >jquery属性选择器及表单对象选择-第九期线上班

jquery属性选择器及表单对象选择-第九期线上班

emagic
emagic原创
2019年12月24日 20:02:02752浏览

12月20号作业

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

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

伪类选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery案例</title>
  6.     <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
  8. </head>
  9. <body>
  10. <div class="mydiv" style="background: #000;" id="div_black" >黑色</div>
  11. <div class="mydiv" style="background: #FF0000;" id="div_red" >红色</div>
  12. <div class="mydiv" style="background: #00ff00;" id="div_green" >
  13.     <p id="a">div中的p标签</p>
  14.     <div>
  15.         <p id="b">div中的div的p标签</p>
  16.         <p id="c">p3</p>
  17.     </div>
  19.     <p id="d">pd</p>
  21.     <div style="background: yellow">第二个div</div>
  22. </div>
  23. <p id="4">我是p标签</p>
  26. <button onclick="jfirst()">：first</button>
  27. <button onclick="jeq()">:eq(index)</button>
  28. <button onclick="jgt()">:gt(index)</button>
  29. <button onclick="jlt()">:lt(index)</button>
  30. <button onclick="jlast()">:last(index)</button>
  32. <script type="text/javascript">
  33.    function jfirst(){
  34.        var obj1=$('div:first');
  35.        console.log(obj1);
  36.    }
  38.    function jeq(){
  39.        // 选取带有指定 index 值的元素。 index 值从 0 开始
  40.        var obj2=$('div:eq(1)');
  41.        console.log(obj2);
  42.    }
  44.    function jgt(){
  45.        // 选取匹配集合中大于 index 值的元素 greater than
  46.        var obj3=$('div:gt(0)');
  47.        console.log(obj3);
  48.    }
  50.       function jlt(){
  51.        // 选取匹配集合中小于 index 值的元素 less than
  52.        var obj4=$('div:lt(2)');
  53.        console.log(obj4);
  54.    }
  56.          function jlast(){
  57.        // 选取匹配的最后一个元素
  58.        var obj5=$('div:last');
  59.        console.log(obj5);
  60.    }
  61. </script>
  62. </body>
  63. </html>

属性选择器

  1. <!-- 属性选择器 -->
  3. <button onclick="jattr()">attribute</button>
  4. <button onclick="jattr_value()">attr="value"</button>
  6. <hr>
  7. <button onclick="_attr()">^attr</button>
  8. <button onclick="_attr1()">^attr1</button>
  9. <button onclick="btn()">btn</button>
  11. <script type="text/javascript">
  12.    function jfirst(){
  13.        var obj1=$('div:first');
  14.        console.log(obj1);
  15.    }
  17.    function jeq(){
  18.        // 选取带有指定 index 值的元素。 index 值从 0 开始
  19.        var obj2=$('div:eq(1)');
  20.        console.log(obj2);
  21.    }
  23.    function jgt(){
  24.        // 选取匹配集合中大于 index 值的元素 greater than
  25.        var obj3=$('div:gt(0)');
  26.        console.log(obj3);
  27.    }
  29.       function jlt(){
  30.        // 选取匹配集合中小于 index 值的元素 less than
  31.        var obj4=$('div:lt(2)');
  32.        console.log(obj4);
  33.    }
  35.          function jlast(){
  36.        // 选取匹配的最后一个元素
  37.        var obj5=$('div:last');
  38.        console.log(obj5);
  39.    }
  42.        function jattr(){
  43.        // 属性选择器 
  44.        var obj6=$('div[id]');  // 选择所有含有id属性的div
  45.        console.log(obj6);
  46.    }
  48.        function jattr_value(){
  49.        // 属性选择器 attrbute='value'
  50.        var obj7=$('div[asdasd="ssss"]');  
  51.        // 注意里面和外面的单双引号要错开，不能都一样
  52.        // 这里也可以换成!=不等于试试
  53.        console.log(obj7);
  54.    }
  56.        function _attr(){
  57.        // 选中以某个值开头的属性 ^=
  58.        var obj8=$('div[class^="my"]');  
  60.        console.log(obj8);
  61.    }
  64.        function _attr1(){
  65.        // 选中指定属性以某个值结尾的元素 $=
  66.        var obj9=$('div[asdasd$="a"]');  
  68.        console.log(obj9);
  69.    }
  70.       function btn(){
  71.       // 包含关键字选择器
  72.       var obj10=$('button[class*="btn-primary"]');
  73.       console.log(obj10);
  74.    }
  75. </script>

表单对象属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery案例</title>
  6.     <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
  7. </head>
  8. <body>
  9. <form >
  10.     <div>
  11.         <lable>用户名</lable>
  12.         <input type="text" name="username">
  13.     </div>
  14.     <div>
  15.         <lable>密码</lable>
  16.         <input type="password" name="password">
  17.     </div>
  18.     <div>
  19.         <lable>再次输入密码</lable>
  20.         <input type="password" name="repwd">
  21.     </div>
  22.     <div>
  23.         <lable>性别</lable>
  24.         <input type="radio" name="sex" value="1">男
  25.         <input type="radio" name="sex" value="2">女
  26.         <input type="radio" name="sex" value="3">人妖
  27.     </div>
  28.     <div>
  29.         <lable>籍贯</lable>
  30.         <select name="province">
  31.             <option value="guangdong">广东</option>
  32.             <option value="fujian">福建</option>
  33.             <option value="jiangxi">江西</option>
  34.             <option value="guangxi" selected>广西</option>
  36.         </select>
  37.     </div>
  38.     <div>
  39.         <lable>用户状态</lable>
  40.         <input type="checkbox" name="status" value="0">禁用
  41. <!--    这里如果不设value值默认是on-->
  42.     </div>
  43.     <button type="button" onclick="save()">保存</button>
  44. </form>
  46. <script type="text/javascript">
  47.   function save(){
  48.       var name = $('input[name="username"]').val();
  49.       var pwd =  $('input[name="password"]').val();
  50.       var repwd =$('input[name="repwd"]').val();
  51.       var sex =$('input[name="sex"]:checked').val();
  52.       var status=$('input[name="status"]:checked').val();
  53.      // var province =$('select[name="province"]').val();  //实际开发中建议用这种写法
  54.         var province= $('select option:selected').text();
  55.         console.log(province);
  56.         return;
  58.       if(pwd==''){
  59.           alert('请输入密码');
  60.           return;
  61.       }
  63.       if(repwd!=pwd){
  64.           alert('两次输入的密码不一致，请重新输入');
  65.           return;
  66.       }
  68.       if (sex==undefined){
  69.           alert ('请选择性别');
  70.           return;
  71.       }
  72.       if(status==undefined){
  73.           alert('请选择用户状态');
  74.           return;
  75.       }
  76.       console.log(sex);
  77.   }
  78. </script>
  79. </body>
  80. </html>
上一条：12月23，关于FLEX弹性盒子的初识及基本的运用方式下一条：jquery增添class，移除元素，添加元素 - 20191224
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多