jqueyr插件helloworld版本

最新推荐文章于 2017-05-06 17:49:14 发布
最新推荐文章于 2017-05-06 17:49:14 发布
阅读量120 收藏
点赞数
分类专栏： js 文章标签： jquery JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012425586/article/details/84805745
版权
最近有童鞋找我要jquery插件入门的demo，我把之前的找出来分享下，欢迎拍砖。闲话少说，直接上代码 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
	<style>
	.message{
	  position: fixed;
      top: 30%;
      left: 30%;
      z-index: 1;
      border: 1px black solid;
      width: 200px;
      height: 150px;
      text-align: center;
	}
	.message button{
	  display: block;
      margin: 0 auto;
	}

	</style>
    <script src="jquery.min.js"></script>

    <script>
        (function($){
            $.extend({
                message:function(obj) {

                   var $body=$("body");
                   var $div=$("<div class='message'> hello world</div>");
                   var $close=$("<button>关闭</button>");
                    $div.append($close);
                    $body.append($div);

                    $close.on("click",function(){
                        $div.remove();

                    });

                }
            });
        })(jQuery);
    </script>
</head>
<button id="testDel">删除</button>
<body>
<script>
$(function(){
    $("#testDel").click(function(){
        $.message();

    });
});
</script>
</body>
</html>



这个只是实现一个最简单的提示框，主要熟悉jquery.extend
进阶篇 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
		<style>
	.message{
	  position: fixed;
      top: 30%;
      left: 30%;
      z-index: 1;
      border: 1px black solid;
      width: 200px;
      height: 150px;
      text-align: center;
	}
	.message button{
	  display: block;
      margin: 0 auto;
	}

	</style>
    <script src="jquery.min.js"></script>

    <script>
        (function($){
            $.extend({
                message: function(message) {
                   var $body=$("body");
                   var $div=$("<div class='message'></div>");				    
					  $div.text(message||"是否要执行此操作");
                     var $close=$("<button>关闭</button>");
                    $div.append($close);
                    $body.append($div);

                    $close.on("click",function(){
                        $div.remove();

                    });


                }
            });
        })(jQuery);
    </script>
</head>
<button id="testDel">删除</button>
<body>
<script>
$(function(){

       $("#testDel").click(function(){
	      //  $.message();
          $.message("hello   ！！！！！！！！！！！！");

        });
});
</script>
</body>
</html>



进阶篇新增参数注入和参数默认值。
高级篇 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
	<style>
	.message{
	  position: fixed;
      top: 30%;
      left: 30%;
      z-index: 1;
      border: 1px black solid;
      width: 200px;
      height: 150px;
      text-align: center;
	}
	.message button{
	  display: block;
      margin: 0 auto;
	}
	</style>
    <script src="jquery.min.js"></script>

    <script>
        (function($){
            $.extend({
                message:function(obj) {

                    var success=obj.success;
                    var fail=obj.fail;
                    var message=obj.message||"您确定要执行此操作吗";

                   var $body=$("body");
                   var $div=$("<div class='message'></div>message");
                    $div.text(message);

                    var $t=$("<button>同意</button>");
                    var $f=$("<button>不同意</button>");
                    $div.append($t);
                    $div.append($f);
                    $body.append($div);

                    $t.on("click",function(){
                        $div.remove();
                       if(success &&  typeof(success) === 'function'){
                            success();
                        }
                    });
                    $f.on("click",function(){
                        $div.remove();
                        if(fail && typeof(fail) === 'function'){
                            fail();
                        }
                    });
                }
            });
        })(jQuery);
    </script>
</head>

<body>
<button id="testDel">删除</button>

<script>
$(function(){

       $("#testDel").click(function(){
          $.message({
		    message:"hellow!!!!!",
		    success:function(){
		      alert("执行同意操作");
		    },
			fail:function(){
			  alert("执行取消操作");
			}

		  });

        });
});
</script>
</body>
</html>


高级篇参数扩展为单个复杂对象，方便以后添加参数。注入相关调用函数。
至此一个简单的helloworld级别的jquery插件demo结束。
这个demo是基于jquery 类对象扩展的。
之后补充一个基于Jquery实例对象扩展的。
两种的应用场景不一样。
Love_LZY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery如何跳转到另一个网页 就这么简单
zhouranlovesmile的博客
03-31 5万+
如何在jQuery中跳转到另外一个网页HTML。 其实下面我列举的几种方法也不一定都是用jQuery，也有的使用了Javascript的原生的方法，所以也算是前端跳转的一个总结吧。 我们可以利用http的重定向来跳转 window.location.replace("http://www.jb51.net"); 使用href来跳转 window.location.
jquery1.10.2
08-28
jquery1.10.2 js zip 一种JavaScript库
jQuery.grep-v1.10.2源码1
06-29
jQuery.grep-v1.10.2源码
jQuery v1.10.2 官方版.zip
07-10
jQuery1.10.2是由jQuery官方推出的优秀JS框架，在1.x版本中，jQuery1.10.2受到大家的喜爱，如果您在开发中需要jQuery1.10.2版本，可在最火下载站免费下载！ jquery-1.10.2 免费引用 百度压缩版引用地址: [removed][removed] 微软压缩版引用地址: [removed][removed] 官网jquery压缩版引用地址: [removed][removed]
JQuery 1.10.2 源码分析学习1
淡淡忧愁的专栏
09-02 1962
前面转了一篇讲JQuery总体框架的文章，建议先阅读，可以让大家对JQuery有一个整体的了解。闲话不多说先上源码： var // The deferred used on DOM ready readyList, // A central reference to the root jQuery(document) rootjQuery, // Support: IE<10 /
jQuery- v1.10.2 源码解读
04-04 152
https://github.com/chokcoco/jQuery- 转载于:https://www.cnblogs.com/zyip/p/5352445.html
typecho插件编写教程（一）:Hello World
10-24
主要介绍了typecho插件编写教程（一）:Hello World,本文讲解了插件的文件结构、插件信息、插件结构、插件流程等内容,需要的朋友可以参考下
Intellij Idea插件开发helloworld
05-23
AndroidStudio确实是一个不错的IDE，它...有的时候可能我们不太满足 于IDE本身的功能，所以需要对IDE进行扩展来开发它的插件。下面是一个简单的例子，http://blog.csdn.net/huweigoodboy/article/details/51427176。
Hello World演示「Hello World Demo」-crx插件
03-14
你好世界扩展！ 一个简单的浏览器扩展程序，显示您在“输入”字段中键入的名称！ 支持语言:English
ThetaPlugin-HelloWorld:Theta插件的Hello World程序
04-27
ThetaPlugin-Hello World 用于THETA插件开发的实践库。根据下面的开发备忘录中的Hello World实施。 发展备忘录 THETA插件SDK 如何使用THETA运行RICOH THETA插件SDK 带有THETA插件的Hello World
openwrt可用helloworld程序
06-23
《OpenWrt中的Hello, World程序详解》 OpenWrt是一个基于Linux的嵌入式操作系统，广泛应用于无线路由器和其他物联网设备。它提供了高度定制化的环境，允许开发者深度定制设备的功能。在OpenWrt环境中编写和运行...
jquery v1.10.2 BUG
tamink2013的博客
06-12 1987
问题描述：表单有个按钮，当提交POST查询的时候，会再发一次GET请求（input数据传不过去，导致500），这个GET请求，居然是因为按钮上面有个样式，background-image:url('') !important; 把这个去掉 就可以了。这个样式URL:' ' 。。。会发GET请求。。   ---PS：难道之前GET请求 都是这个原因？极有可能！ ...
querySelector与getElementBy等的区别
热门推荐
levinhax的博客
05-06 3万+
获取元素DOM对象有很多种方法，以前一直在用getElementById和getElementsByTagName等，现在对这些方法和querySelector做一个总结． 常见的获取元素的方法有3种，分别是通过元素ID、通过标签名字和通过类名字来获取。 DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象，它是document对象特有的函数，只能
高分项目-红包抽奖v版小程序源码（优秀毕业设计源码）.zip
08-30
1. 精选系统小程序代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：java，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
1999-2022年中国基本单位统计(全新整理)
最新发布
08-30
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141336945 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 制定政策的参考,也是企业生产经营及投资决策和科研机构、大专院校进行科研及教学活动的辅助资料。
Java项目：基于SSM框架+mysql实现的楼房销售系统含源码和毕业论文（ssm+mysql+jsp+b/s+maven）
08-30
一、项目简介 本项目是一套基于SSM框架+mysql楼房销售系统含源码和毕业论文 包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。 二、技术实现 jdk版本：1.8 及以上 ide工具：IDEA或者eclipse 数据库: mysql5.5及以上 后端：spring+springmvc+mybatis+maven+mysql 前端：jsp，css，js 三、系统功能 1、系统角色主要包括：管理员、员工、客户 2、系统功能 主要功能包括： 首页 个人中心 修改密码 个人信息 员工管理 客户管理 房屋管理 房屋留言管理 房屋收藏管理 房屋订单管理 新闻管理 单页数据管理 户型类型管理 新闻类型管理 轮播图管理 前台主要功能包括： 用户登录 用户注册 首页 楼盘介绍 公司介绍 房屋信息展示 房屋详情 点我收藏 立即预订 发表留言 新闻资讯 个人中心 房屋收藏 房屋订单 跳转到后台等功能
Eclipse插件开发入门：Hello World实例
在本文中，我们将深入探讨Eclipse插件开发的基础知识，包括插件开发的基本步骤、一个简单的"Hello, World"插件实例，以及如何使用Eclipse的Java Development Tools (JDT)进行插件开发。Eclipse插件开发是扩展Eclipse...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值