一 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. css 水平垂直居中显示（定高不定高定宽不定宽）

    position 元素已知宽度 <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  2. 373. Find K Pairs with Smallest Sums （java，优先队列）

    题目: You are given two integer arrays nums1 and nums2 sorted in ascending order and an integer k. Def ...

  3. 并查集 牛客练习赛41 C抓捕盗窃犯

    题目链接 :https://ac.nowcoder.com/acm/contest/373/C 题意,初始每一个城市都有一伙盗贼,没过一个时刻盗贼就会逃窜到另一个城市,你可以在m个城市设置监察站,会逮 ...

  4. Jupyter Notebook入门教程

    Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言.在本文中,我们将介绍 Jupyter notebook 的主要特性,以 ...

  5. 338. Counting Bits_比特位计数_简单动态规划

    https://leetcode.com/problems/counting-bits/ 这是初步了解动态规划后做的第一道题,体验还不错... 看完题目要求后,写出前10个数的二进制数,发现了以下规律 ...

  6. windows 系统使用 git 和码云管理代码（本地已有项目）

    1. 为本地项目创建本地仓 找到项目所在的根目录(目录下有解决方案那个),右击目录,点击右键菜单中的“Git Bash Here”(前提是你的电脑已经装了Git,我用的是TortoiseGit) 然后 ...

  7. ubuntu14静态ip配置

    0.配置ip需要掌握的一些基本指令 打开/创建文件      sudo vim ... 插入信息      i 保存并强制退出      先按Esc,再键入:wq!,回车 1.使用命令 sudo vi ...

  8. [CodeForces - 614C] C - Peter and Snow Blower

    C - Peter and Snow Blower Peter got a new snow blower as a New Year present. Of course, Peter decide ...

  9. #pragma 处理警告 clang diagnostic 的使用

    首先#pragma在本质上是声明,常用的功能就是注释,尤其是给Code分段注释:而且它还有另一个强大的功能是处理编译器警告,但却没有上一个功能用的那么多. clang diagnostic 是#pra ...

  10. SQL调优（SQL TUNING）并行查询提示（Hints）之pq_distribute的使用

    pq_distribute提示通常被用于提升数据仓库中分区表间的连接操作性能. pq_distribute提示允许你确定参与连接的表数据行在生产和消费并行查询服务进程间如何分配. pq_distrib ...