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>

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

HTML常用标签及实例-前端第九期线上班

2019-10-30 22:16:29