12月20号作业

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

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

`伪类选择器`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery案例</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="mydiv" style="background: #000;" id="div_black" >黑色</div>
<div class="mydiv" style="background: #FF0000;" id="div_red" >红色</div>
<div class="mydiv" style="background: #00ff00;" id="div_green" >
    <p id="a">div中的p标签</p>
    <div>
        <p id="b">div中的div的p标签</p>
        <p id="c">p3</p>
    </div>
    <p id="d">pd</p>
    <div style="background: yellow">第二个div</div>
</div>
<p id="4">我是p标签</p>
<button onclick="jfirst()">：first</button>
<button onclick="jeq()">:eq(index)</button>
<button onclick="jgt()">:gt(index)</button>
<button onclick="jlt()">:lt(index)</button>
<button onclick="jlast()">:last(index)</button>
<script type="text/javascript">
   function jfirst(){
       var obj1=$('div:first');
       console.log(obj1);
   }
   function jeq(){
       // 选取带有指定 index 值的元素。 index 值从 0 开始
       var obj2=$('div:eq(1)');
       console.log(obj2);
   }
   function jgt(){
       // 选取匹配集合中大于 index 值的元素 greater than
       var obj3=$('div:gt(0)');
       console.log(obj3);
   }
      function jlt(){
       // 选取匹配集合中小于 index 值的元素 less than
       var obj4=$('div:lt(2)');
       console.log(obj4);
   }
         function jlast(){
       // 选取匹配的最后一个元素
       var obj5=$('div:last');
       console.log(obj5);
   }
</script>
</body>
</html>

`属性选择器`

<!-- 属性选择器 -->
<button onclick="jattr()">attribute</button>
<button onclick="jattr_value()">attr="value"</button>
<hr>
<button onclick="_attr()">^attr</button>
<button onclick="_attr1()">^attr1</button>
<button onclick="btn()">btn</button>
<script type="text/javascript">
   function jfirst(){
       var obj1=$('div:first');
       console.log(obj1);
   }
   function jeq(){
       // 选取带有指定 index 值的元素。 index 值从 0 开始
       var obj2=$('div:eq(1)');
       console.log(obj2);
   }
   function jgt(){
       // 选取匹配集合中大于 index 值的元素 greater than
       var obj3=$('div:gt(0)');
       console.log(obj3);
   }
      function jlt(){
       // 选取匹配集合中小于 index 值的元素 less than
       var obj4=$('div:lt(2)');
       console.log(obj4);
   }
         function jlast(){
       // 选取匹配的最后一个元素
       var obj5=$('div:last');
       console.log(obj5);
   }
       function jattr(){
       // 属性选择器 
       var obj6=$('div[id]');  // 选择所有含有id属性的div
       console.log(obj6);
   }
       function jattr_value(){
       // 属性选择器 attrbute='value'
       var obj7=$('div[asdasd="ssss"]');  
       // 注意里面和外面的单双引号要错开，不能都一样
       // 这里也可以换成!=不等于试试
       console.log(obj7);
   }
       function _attr(){
       // 选中以某个值开头的属性 ^=
       var obj8=$('div[class^="my"]');  
       console.log(obj8);
   }
       function _attr1(){
       // 选中指定属性以某个值结尾的元素 $=
       var obj9=$('div[asdasd$="a"]');  
       console.log(obj9);
   }
      function btn(){
      // 包含关键字选择器
      var obj10=$('button[class*="btn-primary"]');
      console.log(obj10);
   }
</script>

`表单对象属性`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery案例</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<form >
    <div>
        <lable>用户名</lable>
        <input type="text" name="username">
    </div>
    <div>
        <lable>密码</lable>
        <input type="password" name="password">
    </div>
    <div>
        <lable>再次输入密码</lable>
        <input type="password" name="repwd">
    </div>
    <div>
        <lable>性别</lable>
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2">女
        <input type="radio" name="sex" value="3">人妖
    </div>
    <div>
        <lable>籍贯</lable>
        <select name="province">
            <option value="guangdong">广东</option>
            <option value="fujian">福建</option>
            <option value="jiangxi">江西</option>
            <option value="guangxi" selected>广西</option>
        </select>
    </div>
    <div>
        <lable>用户状态</lable>
        <input type="checkbox" name="status" value="0">禁用
<!--    这里如果不设value值默认是on-->
    </div>
    <button type="button" onclick="save()">保存</button>
</form>
<script type="text/javascript">
  function save(){
      var name = $('input[name="username"]').val();
      var pwd =  $('input[name="password"]').val();
      var repwd =$('input[name="repwd"]').val();
      var sex =$('input[name="sex"]:checked').val();
      var status=$('input[name="status"]:checked').val();
     // var province =$('select[name="province"]').val();  //实际开发中建议用这种写法
        var province= $('select option:selected').text();
        console.log(province);
        return;
      if(pwd==''){
          alert('请输入密码');
          return;
      }
      if(repwd!=pwd){
          alert('两次输入的密码不一致，请重新输入');
          return;
      }
      if (sex==undefined){
          alert ('请选择性别');
          return;
      }
      if(status==undefined){
          alert('请选择用户状态');
          return;
      }
      console.log(sex);
  }
</script>
</body>
</html>