一 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. Spring Batch Bean 校验 API 支持

    这个发布版本带来了一个新的  ValidatingItemProcessor 实现,这个实现被称为 BeanValidatingItemProcessor.能够让你使用 Bean Validation ...

  2. python theading线程开发与加锁、信号量、事件等详解

    线程有2种调用方式,如下: 直接调用 import threading import time def sayhi(num): #定义每个线程要运行的函数 print("running on ...

  3. DOM与document的区别

    DOM: DOM 全称是 Document Object Model,也就是文档对象模型. DOM 就是针对 HTML 和 XML 提供的一个API.什么意思?就是说为了能以编程的方法操作这个 HTM ...

  4. element upload 一次性上传多张图片(包含自定义上传不走action)

    最重要的都圈出来了

  5. Oracle11g温习-第二十章：数据装载 sql loader

    2013年4月27日 星期六 10:53  1. sql loader :将外部数据(比如文本型)数据导入oracle database.(用于数据导入.不同类型数据库数据迁移) 2.sqlloade ...

  6. Yii2框架RESTful API教程

    前不久做一个项目,是用Yii2框架写一套RESTful风格的API,就去查了下<Yii 2.0 权威指南 >,发现上面写得比较简略.所以就在这里写一篇教程贴,希望帮助刚接触Yii2框架RE ...

  7. 使用IntelliJ IDEA 配置Maven(转)

    原文地址:使用IntelliJ IDEA 配置Maven 1. 下载Maven 官方地址:http://maven.apache.org/download.cgi 解压并新建一个本地仓库文件夹 2.配 ...

  8. [转]每天一个linux命令（44）：top命令

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是一个动态显示过程,即可以通过用户按键来不断刷新 ...

  9. python格式化日期

    #!/usr/bin/python # -*- coding: UTF-8 -*- import time import calendar """ 时间元组(年.月.日. ...

  10. js实现页面与页面之间传值的几种方法优劣

    1. cookie 传值, 缺点: cookie储存是需要服务器支持的,本地直接运行静态文件是实现不了的 <script> //添加 cookie function cp_add_cook ...