对jQuery插件的一点点认识

于 2015-11-24 17:03:36 发布
阅读量732 收藏
点赞数
分类专栏： jquery插件 文章标签： jquery插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hr1187362408/article/details/50015323
版权

概述

jQuery插件可以让我们的项目变得更加栩栩如生，做更少的工作去完成更多的事情，例如：jQuery UI，jQuery fullpage，返回顶部等js插件效果

jQuery的一个小例子

jQuery fullpage

大家先看看效果，满屏滚动：


附上学习地址：http://www.jqcool.net/jquery-fullpage.html
附上自己代码： 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/jquery.fullPage.css" rel="stylesheet" />
    <script src="js/jquery-2.0.3.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
    <script src="js/jquery.fullPage.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.fn.fullpage({
                verticalCentered: true,
                navigation: true,
                navigationTooltips: ['首页', '视觉', '交互', '皮肤', '功能', '待办邮件', '联系人邮件', '科技', '连接易信', '马上体验']
            });
        });
    </script>
</head>
<body>
    <div class="section section1">
        <div class="bg">
            <img src="image/section1.jpg" alt="">
        </div>
        <div class="bg11"></div>
        <div class="bg12"></div>
        <div class="bg13"></div>
    </div>

    <div class="section section2">
        <div class="bg">
            <img src="image/section2.jpg" alt="">
        </div>
        <div class="bg21"></div>
        <div class="bg22"></div>
        <div class="bg23"></div>
    </div>

    <div class="section section3">
        <div class="bg">
            <img src="image/section3.jpg" alt="">
        </div>
        <div class="bg31"></div>
        <div class="bg32"></div>
        <div class="bg33"></div>
    </div>

    <div class="section section4">
        <div class="bg">
            <img src="image/section4.jpg" alt="">
        </div>
        <div class="bg41"></div>
        <div class="bg42"></div>
        <div class="bg43"></div>
    </div>

    <div class="section section5">
        <div class="bg">
            <img src="image/section5.jpg" alt="">
        </div>
    </div>

    <div class="section section6">
        <div class="bg">
            <img src="image/section6.jpg" alt="">
        </div>
        <div class="bg61"></div>
        <div class="bg62"></div>
    </div>

    <div class="section section7">
        <div class="bg">
            <img src="image/section7.jpg" alt="">
        </div>
        <div class="bg71"></div>
        <div class="bg72"></div>
        <div class="bg73"></div>
        <div class="bg74">
            <img src="image/bg74.png" alt="">
        </div>
    </div>

    <div class="section section8">
        <div class="bg">
            <img src="image/section8.jpg" alt="">
        </div>
        <div class="bg81"></div>
        <div class="bg82"></div>
        <div class="bg83"></div>
        <div class="bg84"></div>
    </div>

    <div class="section section9">
        <div class="bg">
            <img src="image/section9.jpg" alt="">
        </div>
    </div>

    <div class="section section10">
        <div class="bg">
            <img src="image/section10.jpg" alt="">
        </div>
        <div class="bg101"></div>
        <div class="bg102"></div>
        <div class="bg103"></div>
    </div>
</body>
</html>

jQuery返回顶部小插件

附上自己代码： 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/scrolltopcontrol.js"></script>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <p align="center">
        <font size="5" color="#FF0000">往下滚动即可显示返回顶部按钮!</font>
        <!--演示内容开始-->
    </p>
    <div style="height: 1000px;"></div>
    <!--演示内容结束-->
</body>
</html>

var scrolltotop = {
    setting: {
        startline: 100, //起始行
        scrollto: 0, //滚动到指定位置
        scrollduration: 400, //滚动过渡时间
        fadeduration: [500, 100] //淡出淡现消失
    },
    controlHTML: '<img src="image/topback.gif" style="width:54px; height:54px; border:0;" />', //返回顶部按钮
    controlattrs: { offsetx: 30, offsety: 80 },//返回按钮固定位置
    anchorkeyword: "#top",
    state: {
        isvisible: false,
        shouldvisible: false
    }, scrollup: function () {
        if (!this.cssfixedsupport) {
            this.$control.css({ opacity: 0 });
        }
        var dest = isNaN(this.setting.scrollto) ? this.setting.scrollto : parseInt(this.setting.scrollto);
        if (typeof dest == "string" && jQuery("#" + dest).length == 1) {
            dest = jQuery("#" + dest).offset().top;
        } else {
            dest = 0;
        }
        this.$body.animate({ scrollTop: dest }, this.setting.scrollduration);
    }, keepfixed: function () {
        var $window = jQuery(window);
        var controlx = $window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx;
        var controly = $window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety;
        this.$control.css({ left: controlx + "px", top: controly + "px" });
    }, togglecontrol: function () {
        var scrolltop = jQuery(window).scrollTop();
        if (!this.cssfixedsupport) {
            this.keepfixed();
        }
        this.state.shouldvisible = (scrolltop >= this.setting.startline) ? true : false;
        if (this.state.shouldvisible && !this.state.isvisible) {
            this.$control.stop().animate({ opacity: 1 }, this.setting.fadeduration[0]);
            this.state.isvisible = true;
        } else {
            if (this.state.shouldvisible == false && this.state.isvisible) {
                this.$control.stop().animate({ opacity: 0 }, this.setting.fadeduration[1]);
                this.state.isvisible = false;
            }
        }
    }, init: function () {
        jQuery(document).ready(function ($) {
            var mainobj = scrolltotop;
            var iebrws = document.all;
            mainobj.cssfixedsupport = !iebrws || iebrws && document.compatMode == "CSS1Compat" && window.XMLHttpRequest;
            mainobj.$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");
            mainobj.$control = $('<div id="topcontrol">' + mainobj.controlHTML + "</div>").css({ position: mainobj.cssfixedsupport ? "fixed" : "absolute", bottom: mainobj.controlattrs.offsety, right: mainobj.controlattrs.offsetx, opacity: 0, cursor: "pointer" }).attr({ title: "返回顶部" }).click(function () { mainobj.scrollup(); return false; }).appendTo("body"); if (document.all && !window.XMLHttpRequest && mainobj.$control.text() != "") { mainobj.$control.css({ width: mainobj.$control.width() }); } mainobj.togglecontrol();
            $('a[href="' + mainobj.anchorkeyword + '"]').click(function () { mainobj.scrollup(); return false; });
            $(window).bind("scroll resize", function (e) { mainobj.togglecontrol(); });
        });
    }
};
scrolltotop.init();

附上演示图片：





总结

只需要掌握基本的html和JavaScript知识便可以使用jQuery 插件.
风信子的花语
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery插件开发全解析
01-19
jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加...
jquery包
weixin_30604651的博客
05-21 590
/*! jQuery v1.11.2 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */ !function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0)...
atrrs.xml文件解析
java-admin
07-29 135
2010年01月28日 在昨天的我初步弄清楚了怎样通过xml文件来设置控件的属性，主要是通过res文件夹内的attrs.xml及styles.xml两个xml文件来完成的。今天主要来做个小例子来验证一下这个过程。 Attrs.xml这个文件是用来定义控件属性的文件，结合下面例子来详细说明这个文件。 - &lt;resources&gt; - &lt;declare-styleable na...
jquery的一点点认识
jiaojiao520专栏
07-07 786
概述 JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时
对Bootstrap的一点点认识
jiaojiao520专栏
11-20 2218
我在学习大前端： Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软
jquery 插件学习（一）
10-27
jquery插件，有几种方法，有全局的，有对象方法的，一直觉得jquery插件迷迷糊糊，这阵子特地研究下，供那些像我一样的初学者借鉴下。嘻嘻
orgchart.js 组织架构图之JQuery插件
09-19
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
jQuery打印插件jqprint，内包含使用示例
04-24
jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 ...
自己动手手写jQuery插件总结
12-09
而jQuery一个很好的地方在 于用户的自定义，即我们可以书写自己的插件来完善jQuery的各项功能，定制自己所需要的功能，剔除冗余的代码，在页面加载时候可以有一定程度上的提 升。 面试之后，触动很大，就是你要做的...
zTree组织机构树（涉及技术包含：zTree参数配置，ajax框架，jquery惊细控制对象，用户自定义控件，webmethod）
jiaojiao520专栏
06-08 9338
zTree组织机构树： 其中关于zTree组织机构树，涉及模块如下： 1，采用封装自定义控件，以便多处调用： 自定义控件：uc_btnSelectOrganize.ascx --%> --%>
EasyUITreeMasterFile（EasyUITree大数据量一次性加载）
jiaojiao520专栏
06-08 2079
树集合篇： 第一篇：EasyUITreeMasterFile（EasyUITree大数据量一次性加载）： TODO： 关于后台数据存储将集中在最后一篇讲解，此处省略 <%@ Page Language="C#" MasterPageFile="~/pages/master/WebList.Master" AutoEventWireup="true" CodeBehind
EasyUITreeGridMasterFile（EasyUITree大数据量一次性加载）
jiaojiao520专栏
06-08 1295
树集合篇： 第四篇：EasyUITreeGridMasterFile（EasyUITree大数据量一次性加载）： TODO： 关于后台数据存储将集中在最后一篇讲解，此处省略 <%@ Page Language="C#" MasterPageFile="~/pages/master/WebList.Master" AutoEventWireup="true" CodeBe
jquery验证篇
jiaojiao520专栏
06-26 746
QQ：1187362408 欢迎技术交流和学习 jquery验证篇（jquery）： TODO： 1，jquery验证：验证不了（包含easy ui 插件引用的js） 2，jquery easy ui 引用的js： 3，jquery验证： function CheckInput() { var result = $("#aspnetForm").va
LayoutSynthesisTree（树集合篇汇总）
jiaojiao520专栏
06-08 546
树集合篇： 第一篇：ayoutSynthesisTree（树集合篇汇总）： TODO： 关于后台数据存储将集中在最后一篇讲解，此处省略 <%@ Page Language="C#" MasterPageFile="~/pages/master/WebList.Master" AutoEventWireup="true" CodeBehind="LayoutSynthes
利用matlab对am，dsb，ssb，ask，fsk，bpsk信号进行正交调制解调仿真
最新发布
04-18
利用matlab对am，dsb，ssb，ask，fsk，bpsk信号进行正交调制解调仿真，并在不同信噪比条件下对其数字信号进行了误码率的计算。.rar
任务悬赏活动，带分销返佣
04-18
任务悬赏活动，带分销返佣
2024年互联网平台行业分析报告.pptx
04-18
行业分析报告
编写一个jquery插件
09-18
好的，我可以提供一个简单的示例 jQuery 插件。这个插件的作用是在页面中显示一个按钮，当用户点击它时，会在控制台输出一条消息。 在 HTML 页面中，需要引入 jQuery 库和我们编写的插件： ``` <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="my-plugin.js"></script> ``` 在 `my-plugin.js` 文件中，可以按照下面的方式编写插件： ``` (function($) { $.fn.myPlugin = function() { return this.each(function() { $(this).on('click', function() { console.log('Hello, world!'); }); }); }; }(jQuery)); ``` 这个插件定义了一个名为 `myPlugin` 的 jQuery 方法。它会为每个匹配的元素绑定一个 `click` 事件处理程序，在用户点击元素时输出一条消息到控制台。使用这个插件非常简单，只需要在 jQuery 对象上调用 `myPlugin` 方法即可： ``` $('#my-button').myPlugin(); ``` 其中 `#my-button` 是一个 ID 为 `my-button` 的 HTML 元素，它将成为插件的目标元素。 当用户点击该按钮时，插件会将消息 "Hello, world!" 输出到浏览器的开发者工具控制台中。 这只是一个简单的示例插件，实际的插件可能需要更复杂的逻辑和更多的选项。但是这个例子应该可以帮助你入门编写 jQuery 插件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值