day 57 jQuery插件

在jQuery的console里面 '321'+8 输出结果是"3218" 直接作为字符串给拼接上了

如果是"321"-8 输出结果就是313 直接转换成数字去进行计算了,得到的结果也是数字

有两个示例先粘过来

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>作业讲解</title>

    <style>

        .cover {

            position: fixed;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

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

            z-index: 999;

        }

        .modal {

            position: fixed;

            top: 50%;

            left: 50%;

            width: 400px;

            height: 300px;

            margin-top: -150px;

            margin-left: -200px;

            background-color: white;

            z-index: 1000;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

<button id="add-btn">新增</button>

<table border="1">

    <thead>

    <tr>

        <th>#</th>

        <th>姓名</th>

        <th>爱好</th>

        <th>操作</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td>1</td>

        <td>晓梅</td>

        <td>烧热水</td>

        <td>

            <button class="edit">编辑</button>

            <button class="delete">删除</button>

        </td>

    </tr>

    <tr>

        <td>2</td>

        <td>小雨</td>

        <td>烧热水</td>

        <td>

            <button class="edit">编辑</button>

            <button class="delete">删除</button>

        </td>

    </tr>

    <tr>

        <td>3</td>

        <td>建超</td>

        <td>烧热水</td>

        <td>

            <button class="edit">编辑</button>

            <button class="delete">删除</button>

        </td>

    </tr>

    <tr>

        <td>4</td>

        <td>Egon</td>

        <td>烧热水</td>

        <td>

            <button class="edit">编辑</button>

            <button class="delete">删除</button>

        </td>

    </tr>

    <tr>

        <td>5</td>

        <td>李岩</td>

        <td>喝热水</td>

        <td>

            <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>

    // 弹出模态框函数

    function showModal() {

        $(".cover, .modal").removeClass("hide");

    }

    // 关闭模态框

    function hideModal() {

        $(".cover, .modal").addClass("hide");

        // 清空模态框里面的input

        $(".modal input").val("");

    }

    // 绑定事件

    $(document).ready(function () {

        // 添加按钮绑定事件

        $("#add-btn").on("click", function () {

            showModal();

        });

        // 模态框里面的取消按钮，绑定关闭模态框事件

        $("#modal-cancel").on("click", function () {

            hideModal();

        });

        // 表格中删除按钮绑定事件

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

            // this 当前点击的删除按钮

            // $(this)  --> 变成jQuery对象

            var $currentTr = $(this).parent().parent();

            // 更新当前行后面的所有tr的序号（tr的第一个td儿子）

            $currentTr.nextAll().each(function () {

                var $firstTd = $(this).children().first();

                // this -->  当前循环中的那个tr

                var currentNum = parseInt($firstTd.text()) - 1;

                $firstTd.text(currentNum);

            });

            // 删除当前行

            $currentTr.remove();

        });

        // 点击模态框里面的提交按钮，把数据添加到表格中

        $("#modal-submit").on("click", function () {

            // 获取模态框里面input的值

            var name = $("#modal-name").val();

            var hobby = $("#modal-hobby").val();

            // 如果是编辑操作，我应该去更新原来的td的值

            var $tds = $("#modal-submit").data("tds");

            if ($tds !== undefined) {

                // 能够取到$tds,表示我是一个编辑的操作

                // 更新$tds

                $tds.eq(1).text(name);

                $tds.eq(2).text(hobby);

            } else {

                // 取不到tds,表示我是一个新增的操作

                // 因为是新增操作，所以要创建新的tr

                // 创建tr标签

                var trEle = document.createElement("tr");

                // 获取当前表格里面所有的tr标签的个数，正好就是我新增tr的序号

                var currentNum = $("table tr").length;

                $(trEle).append("<td>" + currentNum + "</td>");

                $(trEle).append("<td>" + name + "</td>");

                $(trEle).append("<td>" + hobby + "</td>");

                $(trEle).append("<td>" + '<button class="edit">编辑</button> <button class="delete">删除</button>' + "</td>");

                // 把生成的tr标签添加到tbody的最后

                $(trEle).appendTo("tbody");

            }

            // 清空一下$tds

            $("#modal-submit").removeData("tds");

            // 隐藏模态框

            hideModal();

        });

        // 编辑按钮

        $("tbody").on("click", ".edit", function () {

            // 显示模态框

            showModal();

            // 取出当前行的数据，填写到模态框里面的input中

            // 1.取当前行的数据

            // this 当前点击的那个编辑按钮

            // 找到当前行所有的td

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

            $("#modal-submit").data("tds", $tds);

            var name = $tds.eq(1).text();

            var hobby = $tds.eq(2).text();

            console.log(name, hobby);

            // 将取到的数据填写到模态框里面的input

            $("#modal-name").val(name);

            $("#modal-hobby").val(hobby);

        })

    })

</script>

</body>

</html>

表格的增删改查,这是jQuery的核心内容,事件绑定和函数调用,以及标签查找都在这里灵魂运用到了,还有data的方法

data方法使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data()示例</title>
</head>
<body>

<div id="d1">div</div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>

我们上面的这段代码里面只有一句话就是body里面的那个div标签
我们的data就在这里演示:

$("#d1").data("晓风干","泪痕残") //这里是使用id值找到div标签然后使用data方法在里面添加键值对
[div#d1]0: div#d1length: 1__proto__: Object(0) //这里的length:1 说明我们添加的内容在里面
$("#d1").data("晓风干") //就像取出我们字典键值对的方式那样去把key对应的value值取出来
"泪痕残" //这里我们拿到了value的值

$("#d1").data("k1","v1")
[div#d1]0: div#d1length: 1__proto__: Object(0)
$("#d1").data("k1")
"v1" // 这个例子同上

$("#d1").data("世情薄","人情恶")
[div#d1]0: div#d1length: 1__proto__: Object(0)
$("#d1").data("世情薄")
"人情恶" //同上

$("#d1").data() //这样写就拿出了所有的我们之前存入的值了
{晓风干: "泪痕残", k1: "v1", 世情薄: "人情恶"} //这里是结果

$("#d1").data("age",30) //基于上面都是存入的字符串,所以我们这里存入数字,试一下
[div#d1]
$("#d1").data("age")
30 //一样得到结果

$("#d1").data("arg",true) //这里存入bool值,试一下
[div#d1]
$("#d1").data("arg")
true //一样得到结果

var $body=$("body") //声明一个变量

undefined

$body

[body, prevObject: r.fn.init(1)] //得到根据body标签查找的结果

0:body
length:1
prevObject:[document]
__proto__:Object(0)

$("#d1").data("body",$body) //我们来定义一个键对值使用到上面的变量

[div#d1]

0:div#d1
length:1
__proto__:Object(0)

$("#d1").data("body") //使用键对值查找

[body, prevObject: r.fn.init(1)] // 得到结果

0:body
length:1
prevObject:[document]
__proto__:Object(0)

这里跟上面是一样的,我们粘了一个简洁版过来:

var $body=$("body")
undefined
$body
[body, prevObject: r.fn.init(1)]0: bodylength: 1prevObject: [document]__proto__: Object(0)
$("#d1").data("body",$body)
[div#d1]0: div#d1length: 1__proto__: Object(0)
$("#d1").data("body")
[body, prevObject: r.fn.init(1)]

$("#d1").data("body").html() //还可以使用html方法
"

引号里面的内容是结果

$("#d1").data("a",[1,2,3,4,5])
[div#d1]

$("#d1").data("a")
(5) [1, 2, 3, 4, 5]0: 11: 22: 33: 44: 5length: 5__proto__: Array(0) //还可以在data里面存入数组

除了一味地添加,我们还可以进行删除使用removeData,要注意是驼峰体,

$("#d1").removeData("a")
[div#d1]0: div#d1length: 1__proto__: Object(0)
$("#d1").data("a")
undefined //删除成功执行之后我们再对其进行查询的时候,得到undefined的结果.

jQuery插件,

jQuery.entend(object)命名空间下添加新的功能,多用于插件开发者向jQuery中添加新函数时使用

jQuery插件示例:

/**

 * Created by Administrator on 2018/1/5.

 */

(function ($) {

    $.extend({

        validate: function () {

            check();

        }

    });

    function check() {

    $("form :submit").on("click", function () { //这里的:submit是一种查找方式,在表单常用筛选里面,

    //我们要想找到所有的submit就直接写作$(":submit") 这样的形式,而在前面加上了form也就是加了一条限定条件,我们要在form里面找到所有的submit

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

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

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

        var flag = true;

        // 开始校验

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

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

            // this 指的是具体的每一个input  备注一点我们的所有的input框里面都会有name这个属性,所谓的属性就是标签属性就像id,class,type这些都是标签属性

            //然后我们的attr是取到属性值,我们要取到每一个input框里面的属性值,所以要找到每一个框里面都会有的属性来取值,每一个input框里面都会有这个name属性,

            // 然而我们的每一个input里面都对应有不同的属性值,所以这里我们直接用attr(name)就可以得到每一个input的值了

            var inputName = $(this).attr("name"); //而这里的inputName就是随便的一个变量名而已,它可以是abd或者随便什么

            // 取input的值

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

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

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

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

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

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

                // 是必填项

                // 2. 针对inputValue做判断

                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插件的更多相关文章

40 个让你的网站更加友好的 jQuery 插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...
40个让你的网站屌到爆的jQuery插件
一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...
【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
jquery插件，美化select标签
最近经常与select打交道,因为ie下的select实在太丑了,css怎么搞都搞不好看,因为程序已经写得差不多了,要再去模拟select改动太大,就想着能否不改动select,同时美化它.借鉴一下这 ...
jQuery插件jqplot的详细配置说明和渲染器
jQuery插件jqplot的详细配置说明和渲染器 (2012-08-23 08:57:42) 转载▼ 标签: jqplot 详细配置渲染器 it 分类: 技术类 jQuery.jqplot插件的官 ...
JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友
JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03 我来说两句收藏我要投稿引入下方的jquery.rotate.js文件,然后通过$ ...
[转]jQuery插件写法总结以及面向对象方式写法
本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...
基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...
自己写jquery插件之模版插件高级篇(一)
需求场景最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

随机推荐

mysql-约束介绍
一.约束介绍约束是一种限制,它通过对表的行或列的数据做出限制,来确保数据的完整性.一致性.约束条件与数据类型宽度一样都是可选参数. 常用约束: PRIMARY KEY (PK) 标识该字段为该表的主 ...
Codeforces 833D Red-Black Cobweb [点分治]
洛谷 Codeforces 思路看到树上路径的统计,容易想到点分治. 虽然只有一个限制,但这个限制比较麻烦,我们把它拆成两个. 设黑边有$a$条,白边有$b$条,那么有 \[ 2a\geq ...
linux学习之netstat
netstat -anp netstat -anp -a 表示展示所有 -p 展示进程和名称 -n --numeric don't resolve names
L1和L2正则
https://blog.csdn.net/jinping_shi/article/details/52433975
Confluence 6 管理员联系表单的后台配置界面
管理员联系表单的后台配置界面截图和配置. 对输入的数据进行编辑和选择是否启用发送电子邮件给管理员 https://www.cwiki.us/display/CONFLUENCEWIKI/Configu ...
Confluence 6 上传站点图标后重置你的配色方案
当你上传一个站点标识图片后,Confluence 会根据你上传的图片文件自动侦测使用的颜色,并为你设置自动配色方案. 你可以按照上面描述的方法修改色彩配色方案,或者你也可以重置配色方案为默认的配色方案 ...
kafka 的安装部署
Kafka 的简介: Kafka 是一款分布式消息发布和订阅系统,具有高性能.高吞吐量的特点而被广泛应用与大数据传输场景.它是由 LinkedIn 公司开发,使用 Scala 语言编写,之后成为 Ap ...
LeetCode（122）：卖股票的最佳时机 II
Easy! 题目描述: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参 ...
poj2513--并查集+欧拉路+字典树
经典好题,自己不知道哪里错了交上去是RE,可能是数组开的不好吧,字典树老碰到这种问题.. 先马上别人的代码,有空对拍看看 #include <cstdio> #include <cs ...
C和Java判断一个数字是否为素数
C: /* 素数: 素数又称质数.所谓素数是指除了 1 和它本身以外,不能被任何整数整除的数,例如17就是素数,因为它不能被 2~16 的任一整数整除. */ # include <stdio. ...

day 57 jQuery插件

day 57 jQuery插件的更多相关文章

随机推荐

热门专题