.data()

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

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

注意    value  可以是任意数据  可以是值，也可以是jQuery对象等

$("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对应的数据

示例：

模态框编辑的数据回填表格

需要注意的点

//<td>内容</td>要想取出这里边的内容是用 .text() 放法， 想要取出输入框中(如 <input type='text' >)的内容是用.val()

第二：可以在一个事件中给一个全局的元素上存储相应的值用  .data('key','想要存的内容，可以是值，也可以是一个对象') ，然后在另外一个事件中就可以钓鱼那个这个全局元素中

存储的对象

  如：在列表中的编辑事件中将被选中编辑的行  作为一个value 存到全局的tbody中去，这样就可以通过在弹出模态框时判断我这个key中是否有值
而确认我的触发模态框弹出的事件是编辑还是新增，  如果是编辑的话就讲刚存入的对象取出并直接对他的第几个内容中的 .text()值进行修改

　　　　　　　　编辑事件中的操作
　　　　　　//被选中的行的children组成的列表

            var $tobianlist = $(this).parent().parent().children();

            //被选中的行的列表放到一个全局变量的val中去，这样可以在另外一个触发的事件中去取出这个列表

            $('tbody').data('key',$tobianlist );

　　　　　　　　确定事件中的操作
　　　　　　
　　　　　　　var $tobianlist=$('tbody').data('key');
　　　　　　　if ($tobianlist===undefined){

　　　　　　else{$tobianlist.eq(1).text($('.n1').val());
　　　　　　　$tobianlist.eq(2).text($('.n2').val());
　　　　　

具体实现表格的编辑功能的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文档操作示例</title>

    <style>

        .cover {

            position: fixed;

            top: 0;

            left: 0;

            bottom: 0;

            right: 0;

            background-color: rgba(0, 0, 0, 0.3);

            z-index: 999;

        }

        .modal {

            position: fixed;

            top: 50%;

            left: 50%;

            height: 300px;

            width: 500px;

            margin-left: -250px;

            margin-top: -150px;

            background-color: white;

            z-index: 1000;

        }

        .hide {

            display: none

        }

    </style>

</head>

<body>

<button id="b1">新增</button>

<table border="1" id="t1">

    <thead>

    <tr>

        <th>#</th>

        <th>姓名</th>

        <th>爱好</th>

        <th>操作</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td>1</td>

        <td>Egon</td>

        <td>杠娘</td>

        <td>

            <input class="bianji" type="button" value="编辑">

            <input class="delete" type="button" value="删除">

        </td>

    </tr>

    <tr>

        <td>2</td>

        <td>Alex</td>

        <td>吹牛逼</td>

        <td>

            <input class="bianji" type="button" value="编辑">

            <input class="delete" type="button" value="删除">

        </td>

    </tr>

    <tr>

        <td>3</td>

        <td>Yuan</td>

        <td>日天</td>

        <td>

            <input class="bianji" type="button" value="编辑">

            <input class="delete" type="button" value="删除">

        </td>

    </tr>

    </tbody>

    <div class="cover hide"></div>

    <div class="modal hide">

        <span>姓名<input class="n1" type="text" name="name"></span>

        <span>爱好<input class="n2" type="text" name="hobby"></span>

        <input type="button" value="确定">

        <input type="button" value="取消">

    </div>

</table>

<script src="jquery-3.2.1.min.js"></script>

<script>

    $(document).ready(function () {

        function showmodal() {

            $('.cover').toggleClass('hide').next('div').toggleClass('hide')

        }

        //新增弹出模态框

        $('#b1').on('click', function () {

            showmodal();

               $('.n1').val('');

            $('.n2').val('');

        });

        //取消关闭模态框

        $('input[value="取消"]').on('click', function () {

            showmodal()

        });

        //确定将新增的内容放进去

        $('input[value="确定"]').on('click', function () {

            var $tobianlist=$('tbody').data('key');

            if ($tobianlist===undefined){

            var newtrelem = document.createElement('tr');

            //找出序号，即当前的长度

            var xuhao = $('tbody').children().length + 1;

            var mingzi = $('.n1').val();

            var aihao = $('.n2').val();

            var innertext = '<td>' + xuhao + '</td>' + '<td>' + mingzi + '</td>' + '<td>' + aihao + '</td>';

            newtrelem.innerHTML = innertext;

            console.log(newtrelem.html);

            var neibutton = $('tbody').children().first().children().last().clone();

            $(newtrelem).append(neibutton);

            $('tbody').append(newtrelem);

            }

            else{$tobianlist.eq(1).text($('.n1').val());

            $tobianlist.eq(2).text($('.n2').val());

            }

            showmodal()

        });

        //删除

        $('tbody').on('click', '.delete', function () {

//                console.log(event.target);

            //

            var $xinIndex = $(this).parent().parent().nextAll();

//                console.log($xinIndex);

            $.each($xinIndex, function () {

                var xu = $(this).children(':first').text() - 1;

                console.log(xu);

                $(this).children(':first').text(xu);

            });

            $(this).parent().parent().remove();

        });

        //编辑

//         $('.n1').val('alexaaa');

        $('tbody').on('click', '.bianji', function () {

            showmodal();

//            $('.n1').val('');

//            $('.n2').val('');

            //被选中的行的children组成的列表

            var $tobianlist = $(this).parent().parent().children();

            //被选中的行的列表放到一个全局变量的val中去，这样可以在另外一个触发的事件中去取出这个列表

            $('tbody').data('key',$tobianlist );

            console.log($tobianlist.eq(1).text());

            //找出以前的姓名框中的内容

            //在弹出的框中显示之前的内容

            $('.n1').val($tobianlist.eq(1).text());

            //弹出的框中显示当前的爱好内容

            //<td>内容</td>要想这里边的内容是用 .text() 放法，  想要取出输入框中(如 <input  type='text' >)的内容是用.val()

            $('.n2').val($tobianlist.eq(2).text());

            //去到提交的地方将新内容替换进去

        })

    });

</script>

</body>

</html>

插件

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用

实例

<script>

jQuery.extend({

  min:function(a, b){return a < b ? a : b;},

  max:function(a, b){return a > b ? a : b;}

});

jQuery.min(2,3);// => 2

jQuery.max(4,5);// => 5

</script>

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

<script>

  jQuery.fn.extend({

    check:function(){

      return this.each(function(){this.checked =true;});

    },

    uncheck:function(){

      return this.each(function(){this.checked =false;});

    }

  });

// jQuery对象可以使用新添加的check()方法了。

$("input[type='checkbox']").check();

</script>

单独写在文件中的扩展：

写成这种自执行函数的形式  (function()();)   这样即保证了新推展的插件可以被引用，还可以将函数封装在插件里边，以免同时引用多个插件的时候出现同名的函数导致函数被覆盖（作用域空间在函数里，不是全局，所以不会被覆盖）
(function($){

  $.extend({

    funcName:function(){

    ...

    },

  });

})(jQuery);

例子

登录验证

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录校验jQuery版</title>

    <style>

        .error {

            color: red;

        }

    </style>

</head>

<body>

<form action="" novalidate>

    <div>

        <label for="name">姓名</label>

        <input id="name" type="text" name="username" egon="true" autocomplete="off">

        <span class="error"></span>

    </div>

    <div>

        <label for="pwd">密码</label>

        <input id="pwd" type="password" name="password" egon="true" autocomplete="off">

        <span class="error"></span>

    </div>

    <div>

        <label for="mobile">手机</label>

        <input id="mobile" type="text" name="mobile" egon="true" autocomplete="off">

        <span class="error"></span>

    </div>

    <div>

        <label for="address">地址</label>

        <input id="address" type="text" name="address" autocomplete="off">

        <span class="error"></span>

    </div>

    <div>

        <input id="submit" type="submit" value="登录">

    </div>

</form>

<script src="../jquery-3.2.1.min.js"></script>

<script src="02-checkPlugin.js"></script>

<!--下面引用很多很多别人写好的jQuery插件-->

<script>

    $.validate();

</script>

</body>

</html>

登录验证代码

插件代码

/**

 * Created by Administrator on 2018/1/5.

 */

(function ($) {

    $.extend({

        validate: function () {

            check();//写的函数被封装在自执行函数里边，然后被新增的插件调用

        }

    });

    function check() {

    $("form :submit").on("click", function () {

        // 先把上一次的错误提示信息清空

        $("form span.error").text("");

        // 设置一个阻止submit默认提交事件执行的标志位

        var flag = true;

        // 开始校验

        // 1. 找到所有要填写的input

        $("form input[type!='submit']").each(function () {

            // this 指的是具体的每一个input

            var inputName = $(this).attr("name");

            // 取input的值

            var inputValue = $(this).val();

            // 取出当前input筐的label文本

            var inputLabel = $(this).prev().text();

            var errMsg;  // 提前申明一个错误信息的变量

            // 1.5 只有必填项才做校验

            if ($(this).attr("egon")) {

                // 是必填项

                // 2. 针对inputVlaue做判断

                if (inputValue.length === 0) {

                    // 当前这个input没有值

                    errMsg = inputLabel + "不能为空";

                    // 把错误信息填到span标签中

                    $(this).next().text(errMsg);

                    flag = false;

                    return false;  // 跳出each循环

                }

                // 如果这个input筐是password，需要多做一个判断：密码位数不能少于6位

                if (inputName === "password") {

                    if (inputValue.length < 6) {

                        errMsg = inputLabel + "不能少于6位";

                        // 把错误信息填到span标签中

                        $(this).next().text(errMsg);

                        flag = false;

                        return false;  // 跳出each循环

                    }

                }

                // 如果inpur框是mobile,需要加一个判断|：判断手机号是不是合法的手机号

                if (inputName === "mobile") {

                    if (!/^1[345678]\d{9}$/.test(inputValue)) {

                        errMsg = inputLabel + "格式不正确";

                        // 把错误信息填到span标签中

                        $(this).next().text(errMsg);

                        flag = false;

                        return false;  // 跳出each循环

                    }

                }

            }

        });

        return flag;

    })

}

})(jQuery);

day 57 jQuery的补充的更多相关文章

  1. 前端 ---jQuery的补充

    15-jQuery补充   jquery内容补充 jquery除了咱们上面讲解的常用知识点之外,还有jquery 插件.jqueryUI知识点 jqueryUI 官网: https://jqueryu ...

  2. day 57 jQuery插件

    在jQuery的console里面 '321'+8  输出结果是"3218"  直接作为字符串给拼接上了 如果是"321"-8 输出结果就是313 直接转换成数 ...

  3. jquery内容补充

    jquery除了咱们上面讲解的常用知识点之外,还有jquery 插件.jqueryUI知识点 jqueryUI 官网: https://jqueryui.com/ jqueryUI 中文网: http ...

  4. jQuery选择器补充

    ---------------------------------------------------------------------------------------------------- ...

  5. jQuery formValidator表单验证插件常见问题

    1.    如何实现一个控件,根据不同的情况,实现不同的控制? 2.    一个页面上我有几个tab页,如何实现每个Tab页上的控件单独校验? 3.    我采用的页面上文字问题的方式,点提交的时候, ...

  6. 60、jQuery其余操作

    上篇主要介绍了jQuery,和一些基本用法,这篇主要讲解动画.常用事件.还有一些jQuery的补充内容. 本篇导航: 动画 常用事件 插件 jQuery API 中文文档 一.动画 1.基本 show ...

  7. 《jQuery精品教程视频》-每天的复习笔记

    第一天 //jquery:简单.粗暴 //jq和js的关系 //js是什么? js是一门编程语言 //jq仅仅是基于js的一个库,jq可理解为就是开发js的一个工具. //概念 //1. 为什么要学j ...

  8. 11、jQuery其余操作

    上篇主要介绍了jQuery,和一些基本用法,这篇主要讲解动画.常用事件.还有一些jQuery的补充内容. 本篇导航: 动画 常用事件 插件 jQuery API 中文文档 一.动画 1.基本 show ...

  9. 14-jQuery补充

    jquery内容补充 jquery除了咱们上面讲解的常用知识点之外,还有jquery 插件.jqueryUI知识点 jqueryUI 官网: https://jqueryui.com/ jqueryU ...

随机推荐

  1. C++中重载（overload）、覆盖（override）与隐藏（oversee）

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  2. 初识数据库、初识MySQL

    一.为什么要用数据库 # 1.将文件和程序存在一台机器上是很不合理的. # 2.操作文件是一件很麻烦的事. 所以就出现了一个新的概念 —— 数据库 你可以理解为 数据库 是一个可以在一台机器上独立工作 ...

  3. Linux学习 ：移植U-boot_2012.04.01到JZ2440开发板

    一.下载U-boot源码:ftp://ftp.denx.de/pub/u-boot/ 二.uboot的启动过程: 部分硬件初始化——>加载完整uboot到RAM——>跳转到第二阶段入口开始 ...

  4. 7 Serial Configuration 理解（二）

    *Serial Configuration Mode 串行配置模式分为:Master Serial 和 Slave Serial (如下图)两类: 两者的区别在与CCLK的输入输出方向:主动模式下为输 ...

  5. ps基础学习笔记一

    图像?表示分为位图方式和矢量图方式 位图是像素点组成,一副图像所含像素越多,图像的效果就越好 矢量图是基于一定数学方式描述,适合表示色彩较少,一色块为主,曲线简单的图像,文件小ps一般用来处理位图,c ...

  6. fk的使用细节

    在seiman的博客fk2.3的用法笔记一文中,介绍了当震中距很大时,fk在使用时需要加上-f,这一展平变换的选项. 另外,nt*dt为最终数据的总长度,当震中距为远震范围时,such as:40°, ...

  7. HDU 2063 （二分图最大匹配）

    RPG girls今天和大家一起去游乐场玩,终于可以坐上梦寐以求的过山车了.可是,过山车的每一排只有两个座位,而且还有条不成文的规矩,就是每个女生必须找个个男生做partner和她同坐.但是,每个女孩 ...

  8. kubernetes 环境搭建(ubuntu16.04)

    通过kubeadm安装kubernetes的教程:1: 首先在每台机器上安装: docker(1.12), kubeadm(1.6), kubectl, kubelet, kubernetes-cni ...

  9. Unity3d代码及效率优化总结

    1.PC平台的话保持场景中显示的顶点数少于200K~3M,移动设备的话少于10W,一切取决于你的目标GPU与CPU. 2.如果你用U3D自带的SHADER,在表现不差的情况下选择Mobile或Unli ...

  10. Effective Java Chapter4 Classes and Interface

    MInimize the accessibility of classes and members 这个叫做所谓的 information hiding ,这么做在于让程序耦合度更低,增加程序的健壮性 ...