一 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. LOJ6072苹果树

    虽然结合了很多算法,但是一步一步地推一下还不算太难的一道题. 首先考虑枚举枚举有用的苹果的集合,然后去算生成树个数. 先考虑怎么计算生成树个数. 发现可以使用matrix-tree. 所有有用点可以和 ...

  2. github入门书籍总结

    目录 第一章 由来 第二章 基本知识简介 第三章 初始操作 3.1 注册账号 3.2 创建仓库 第四章 具体实际操作 4.1 初始化仓库及相关操作 4.2 分支操作 4.3 消除冲突 4.4 压缩历史 ...

  3. hadoopMR自定义输入格式

    输入格式 1.输入分片与记录  2.文件输入  3.文本输入  4.二进制输入  5.多文件输入  6.数据库格式输入 详细的介绍:https://blog.csdn.net/py_123456/ar ...

  4. 导出函数__declspec(dllexport)

    一般而言,动态链接库中定义有两种函数:导出函数(export function)和内部函数(internal function). 导出函数可以被其它模块调用,内部函数在定义它们的DLL程序内部使用. ...

  5. Oracle11g温习-第十四章：约束( constraint )

    2013年4月27日 星期六 10:48 1.约束的功能 通过一些强制性商业规则,保证数据的完整性.一致性 2.约束的类别 1 )  not null    不允许为空     2 )  check  ...

  6. PAT 1019 General Palindromic Number

    1019 General Palindromic Number (20 分)   A number that will be the same when it is written forwards ...

  7. Js replace() 方法笔记

    最近捣鼓着学习Js,发现replace()真的很有用,替换功能杠杠的棒. 接下来看看我遇到的问题: 有两个随机给出的字符串,字符串1'xxxxxx',字符串2'====T'(这两个用作示例,其他为随机 ...

  8. 一、I/O操作（中文问题）

    一.编码概念 计算机存放数据只能存放数字,所有的字符都会被转换为不同的数字. 常见的编码有:ISO-8859-1 ASCII数字和西欧字母 GBK:简体中文和繁体,以及日文 GB2312:简体中文 B ...

  9. oracle 日常设置

    查看缓冲区命令:list  执行save  1.sql 可以吧缓冲区的命令保存下来.  执行 @1.sql可以执行保存下来的内容:  show feedback 显示反馈信息,最后一行.  show ...

  10. List Available DBCC Commands

    DBCC Commands or Database Consistency Checker commands have been with SQL Server from its early ages ...