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

随机推荐

Spring Boot (一): Spring Boot starter自定义
前些日子在公司接触了spring boot和spring cloud,有感于其大大简化了spring的配置过程,十分方便使用者快速构建项目,而且拥有丰富的starter供开发者使用.但是由于其自动化配 ...
Android：图解四种启动模式及实际应用场景解说
在一个项目中会包括着多个Activity,系统中使用任务栈来存储创建的Activity实例,任务栈是一种“后进先出”的栈结构.举个栗子,若我们多次启动同一个Activity.系统会创建多个实例依次放入 ...
Codeforces Educational Codeforces Round 57 题解
传送门 Div 2的比赛,前四题还有那么多人过,应该是SB题,就不讲了. 这场比赛一堆计数题,很舒服.(虽然我没打) E. The Top Scorer 其实这题也不难,不知道为什么这么少人过. 考虑 ...
WinSCP安装与使用
WinSCP 是一个 Windows 环境下使用的 SSH(Source Shell)的开源图形化 SFTP(SSH File Transfer Protocol) 客户端.同时支持 SCP(So ...
easyui datagrid 隔行变色
easyui datagrid 隔行变色一:实现样图二:实现代码 $('#dataGrid').datagrid({ rowStyler:function(index,row){ if (row ...
Confluence 6 手动运行和修改
手动运行一个任务希望手动运行一个计划任务,进入计划任务的列表中,找到你希望手动运行的计划任务,在这个计划任务的边上选择运行(Run).这个计划任务将会马上执行. 不是所有的计划任务都可以手动运行的 ...
vue 树状图数据的循环递归循环
在main.js中注册一个子组件在父组件中引用树状图的数据格式绑定一个数据传入子组件,子组件props接收数据子组件中循环调用组件,就实现了递归循环
Function types cannot have argument labels 错误解决方案
今天在封装网络工具类的时候报错了经过分析发现是在Swift3.0 把闭包的入参的参数名去掉就好了正确写法 completion: @escaping (Any?, Bool)->() 错误 ...
nginx(一）之默认配置文件
首先是nginx.conf vim /etc/nginx/nginx.conf user nginx; // 设置nginx服务的系统使用用户 worker_processes 1; // 工作进程数 ...
java----java工具类
System: Runtime: Random: Scanner: Arrays: MessageFormat: Math: 日期: Comparable: cloneable接口: 数字处理: MD ...

day 57 jQuery插件

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

随机推荐

热门专题