一 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. LitePal 数据库使用方法（最新2.0LitePal数据库适用）

    转发郭神的blog,讲的非常详细,是基于1.6版本,但现在使用的是2.0,有点差别https://blog.csdn.net/guolin_blog/article/details/384612391 ...

  2. 20165309 实验三 敏捷开发与XP实践

    2017-2018-2 20165309实验三<Java面向对象程序设计>实验报告 一.实验内容 1. XP基础 2. XP核心实践 3. 相关工具 二.实验步骤 (一)代码规范 1.在I ...

  3. poj2891 扩展中国剩余定理

    求a1x1+r1=y...anxn+rn=y,crt合并 //#pragma GCC optimize(2) //#pragma GCC optimize(3) //#pragma GCC optim ...

  4. win8.1安装密钥

    https://zhidao.baidu.com/question/374064869043943484.html

  5. C#操作MSMQ

    C#操作MSMQ using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  6. log4j的一些参数说明

    参数 说明 例子 %c 列出logger名字空间的全称,如果加上{<层数>}表示列出从最内层算起的指定层数的名字空间 log4j配置文件参数举例 输出显示媒介 假设当前logger名字空间 ...

  7. Vue keep-alive总结

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是 ...

  8. hearbeat of RAC

    Heartbeat is a pooling mechanism in clustered platforms to verify if the other server participating ...

  9. 小程序BindTap快速连续点击页面跳转多次

    原因: 手机端点击Tap基础事件解决300ms延迟 解决办法: success 里面加一个延迟300ms能解决 setTimeout goRob(e) { const that = this retu ...

  10. eclipse安装springboot插件

    1.工具栏->Help->Eclise Marketplace打开应用市场 2.在应用市场中搜索sts,选择Spring Tools 4紧张安装 3.按提示进行安装