一 data的含义

　　在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

     1 .data(key, value):     描述：在匹配的元素上存储任意相关数据。

   1data()类似字典的键值对 
$('#d1').data('天王盖地虎','小鸡炖蘑菇');

   2查询它的存储的值就查找key
 $('#d1').data('天王盖地虎');

  3查询它的存储的键值对  就后边括号（） 以字典形式出现
  $('#d1').data();

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

删除  .removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

增删改查的示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>最重要的表的增删改查</title>
    <style>
    .cover{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        /*注意透明度 模态框的书写rgba()*/
        background-color: rgba(0,0,0,0.5);
        z-index: 1;
    }
    .modal{
        position: fixed;
        top: 50%;
        left: 50%;
        width: 600px;
        height: 400px;
        margin-left:-300px ;
        margin-top:-200px ;
        background-color: white;
        z-index: 2;
    }
    .hide{
        display: none;
    }
</style>
</head>
<body>
<input id="add-btn" type="button" value="新增">
<table border="1px">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
<tr>
        <td>1</td>
        <td>晓梅</td>
        <td>开车</td>
        <td>
            <!--<input type="button" value="编辑">
            <input type="button" value="删除">-->
            <!--上下基本一样的-->
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>德胜</td>
        <td>睡觉</td>
        <td>
            <!--<input type="button" value="编辑">
            <input type="button" value="删除">-->
            <!--上下基本一样的-->
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>小花</td>
        <td>烧水</td>
        <td>
            <!--<input type="button" value="编辑">
            <input type="button" value="删除">-->
            <!--上下基本一样的-->
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
        </td>
    </tr>
</tbody>
</table>

<div class="cover hide"></div>
<div class="modal hide">
<!--编辑模态框的格式-->
<p>
    <label for="modal-name">姓名</label>
    <input id="modal-name" type="text" name="name">
</p>

<p>
    <label for="modal-hobby">爱好</label>
    <input id="modal-hobby" type="text" name="hobby">
</p>
<p>
    <button  id="modal-submit">提交</button>
    <button id="modal-cancel">取消</button>
</p>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
   //  // 1-1点击新增弹出模态框
   function showModal() {
       $('.cover,.modal').removeClass('hide');
   }
   // // 1-2关闭模态框
     function hideModal() {
       $('.cover,.modal').addClass('hide');
       $('.modal  input').val('')
   }

   //   // 2预先加载document
   // // 1-3点击调用函数 首先找到点击按钮标签
   //
   $(document).ready(function () {
   //     // 添加按钮绑定事件
       $("#add-btn").on('click', function () {
            showModal();
       });
   //     // 模态框里面的取消按钮，绑定关闭模态框事件
       $('#modal-cancel ').on('click', function () {
           hideModal();

       });
   //     // // 表格删除 委托事件 序号的排序
       $('tbody').on('click','.delete',function () {
           // 找到没一行的标签  // $(this) 是此时delete所在标签
           var $currentTr=$(this).parent().parent();
           // 进行each 循环
           // $(this).parent().parent().remove();
           $currentTr.nextAll().each(function () {
               // 找到第一个标签的td的text序号
               // $(this) 是此时tr所在标签
               var $firstTd= $(this).children().first();
               // parseInt 转换的数字
               var currentNum= parseInt($firstTd.text())-1;
               $firstTd.text(currentNum);
           });
   //         // 删除当前行
           $currentTr.remove();

           // 以上是开启 关闭模态框  删除并把序号叠加到删除的序号
       });
        // 主要内容是新增数据  还是编辑数据 利用data（）

        // 点击模态框提交按钮 把数据添加到表格中
        $('#modal-submit').on('click',function () {
            // 找到输入的用户名  和密码
            var name= $('#modal-name').val();
            var hobby= $('#modal-hobby').val();
            // 如果是编辑的话  我们需要更新原来的td
            // 建立一个存储
            var $tds= $("#modal-submit").data('tds');
            if ($tds !== undefined){
                // 不等于就是编辑
                $tds.eq(1).text(name);
                $tds.eq(2).text(hobby);
            }
            else {
                // 不编辑  就只能添加了
                var trEle= document.createElement('tr');
                var currentNum = $('table tr').length;
                $(trEle).append('<td>' + currentNum + '</td>');
                $(trEle).append('<td>' + name + '</td>');
                $(trEle).append('<td>' + hobby + '</td>');
                // 此时注意引号的使用还是分三块 两边是td  中间是以上的  注意双引号之间不能再用双引号  单引号也是一样的
                $(trEle).append("<td>"+'<button class="edit">编辑</button> <button class="delete">删除</button>'+ "</td>");
                $(trEle).appendTo('tbody');
            }
            // 在提交按钮清空一下tds. 存储数据清零 以便下次判断是增加还是删除
               $('#modal-submit').removeData('tds');
            // 隐藏模态框
               hideModal();
        });
                // 正式编辑
            // 委托事件  找点击按钮 战术模态框
        $('tbody').on('click','.edit',function () {
       showModal();

       var $tds = $(this).parent().parent().children();
       $('#modal-submit').data('tds',$tds);
       var name=$tds.eq(1).text();
       var hobby =$tds.eq(2).text();
       $('#modal-name').val(name);
       $('#modal-hobby').val(hobby);

   })

   })

</script>
</body>
</html>

---------

普通的校验 用户名和密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通登录校验</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
<form action="">
    <div>
    <!--配合使用 label 的for 和input的id-->
    <label for="name">姓名</label>
    <input id = 'name'  type="text">
    <span class="error"></span>
</div>
<div>
    <!--配合使用 label 的for 和input的id-->
    <label for="password">密码</label>
    <input id = "password"  type="text">
    <span class="error"></span>
</div>
<input id="submit" type="submit" value="登录">
</form>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 清空之前的错误信息 聚焦之后显示为空
    $('form input[type!=submit]').on('focus',function () {
        $(this).next().text('');
    });
    // 登录事件绑定按钮

    $('#submit').on('click',function () {
        var flag=true;
        // 利用each 循环
      $('form input[type!=submit]').each(function () {
        // 输入长度不能是一 此时的zhis 是input这一行
        //   以下是zhis 这一行的输入的值的长度
          if($(this).val().length===0){
              // 用户名或者密码显示的开头的xx 不能为空
              var currentLabel=$(this).prev().text();
              $(this).next().text(currentLabel +'不能为空');
              // 此时标志位改为false
              flag=false;
              // 终止循环
              return false;
          }

      });
// 按钮后终止 后  继续返回flag  true
        return  flag;
    })

</script>
</html>
--------------------
关于扩展插件的 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery扩展</title>
    <!--<script src="扩展1.js"></script>-->
</head>
<body>
<script src="jquery-3.2.1.min.js"></script>
<!--<script src="扩展1.js"></script>-->
<!--<script src="扩展2.js"></script>-->
<script>

//    $.xiaomei();
//    $.xiaomei2();

    // 给jQuery扩展方法
   $.extend({
       xiaomei:function () {
           console.log("我喜欢烧热水！");
       },
       liyan: function () {
           console.log("我喜欢喝热水！");
       }
   });

    $.xiaomei();
    $.liyan();

   // 给jQuery对象扩展方法
   $.fn.extend({
       jianchao: function () {
           console.log("喜欢晓梅！");
       },
       chenxiaomei: function () {
           console.log("你是个好人！");
       }
   });

    $.jianchao();
    $.chenxiaomei();

</script>
</body>
</html>
以下是引用插件的
(function(jq) {
    function f() {
        console.log("我是来自扩展2里面的f");
    }
   jq.extend({
        xiaomei2: function () {
            f();
        }
    });
})(jQuery);

day 57 data 插件 表的增删改查的更多相关文章

  1. AngularJS中使用$http对MongoLab数据表进行增删改查

    本篇体验使用AngularJS中的$http对MongoLab数据表进行增删改查. 主页面: <button ng-click="loadCourse()">Load ...

  2. django模型层 关于单表的增删改查

    关于ORM MTV或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库, 通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人员 ...

  3. C# - VS2019 通过DataGridView实现对Oracle数据表的增删改查

    前言 通过VS2019建立WinFrm应用程序,搭建桌面程序后,通过封装数据库操作OracleHelper类和业务逻辑操作OracleSQL类,进而通过DataGridView实现对Oracle数据表 ...

  4. Django学习笔记（10）——Book单表的增删改查页面

    一,项目题目:Book单表的增删改查页面 该项目主要练习使用Django开发一个Book单表的增删改查页面,通过这个项目巩固自己这段时间学习Django知识. 二,项目需求: 开发一个简单的Book增 ...

  5. ORM 实现数据库表的增删改查

    这次通过反射技术来实现一下数据库表的增删改查对象关系映射(英语:Object Relational Mapping,简称ORM,或O/RM,或O/R mapping) 注:引用时约束了以下几点: 数据 ...

  6. spool命令、创建一个表，创建而且copy表，查看别的用户下的表，rowid行地址 索引的时候使用，表的增删改查，删除表，oracle的回收站

      1.spool命令 spool "D:\test.txt" spool off SQL> host cls 2.创建一个表 SQL> --条件(1):有创建 ...

  7. python全栈开发day61-django简单的出版社网站展示，添加，删除，编辑(单表的增删改查)

    day61 django内容回顾: 1. 下载: pip install django==1.11.14 pip install -i 源 django==1.11.14 pycharm 2. 创建项 ...

  8. mysql 数据表的增删改查 目录

    mysql 表的增删改查 mysql 表的增删改查 修改表结构 mysql 复制表 mysql 删除表

  9. Hibernate5笔记2--单表的增删改查操作

    单表的增删改查操作: (1)定义获取Session和SessionFactory的工具类: package com.tongji.utils; import org.hibernate.Session ...

随机推荐

  1. 【洛谷p1932】A+B A-B A*B A/B A%B Problem

    (emmmm) 这道题成功让我见识到了Dev撤回的高端大气上档(dàng)次. A+B A-B A*B A/B A%B Problem[传送门](真是个优秀的高精) 算法:::::::(模板题弄这么费 ...

  2. 网络管理命令ping和arping

    ping ping        向目标主机发送icmp请求包 常用来测试当前主机与目标主机网络连接状况 常见选项 -c              设置发包的个数 -s               设 ...

  3. 【微信公众号开发】【8】网页授权获取用户基本信息（OAuth 2.0）

    前言: 1,在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名. 请注意,这 ...

  4. php打印

    function preview() { bdhtml = window.document.body.innerHTML; sprnstr = "<!--startprint--> ...

  5. 【LeetCode】Permutation全排列

    1. Next Permutation 实现C++的std::next_permutation函数,重新排列范围内的元素,返回按照 字典序 排列的下一个值较大的组合.若其已经是最大排列,则返回最小排列 ...

  6. C++LeetCode:: Container With Most Water

    本来写的题目不是这个,而是字符串匹配,考虑了很多情况写了很久最后看了solution,发现可以用动态规划做.感觉被打击到了,果断先放着重新写一个题,后面心情好了再重新写吧,难过.每天都要被LeetCo ...

  7. Oracle Log Block Size

    Although the size of redo entries is measured in bytes, LGWR writes the redo to the log files on dis ...

  8. jvm加载类（更新中）

    作为jvm的用户,从使用者角度来看,我们给jvm输入一个class文件,得到了一个Class对象.我们可以猜想下jvm加载类的过程:class文件有规定的格式,jvm去解析class文件流,读magi ...

  9. hive top n

    hive 中窗口函数row_number,rank,dense_ran,ntile分析函数的用法 hive中一般取top n时,row_number(),rank,dense_ran()这三个函数就派 ...

  10. Uva 12124 Uva Live 3971 - Assemble 二分, 判断器, g++不用map.size() 难度:0

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...