jQuery的插件扩展和zepto用法

最新推荐文章于 2024-07-18 20:39:42 发布

玖商

最新推荐文章于 2024-07-18 20:39:42 发布

阅读量663

点赞数

分类专栏： JavaScript 文章标签：其他 javascript 开发语言 zepto

本文链接：https://blog.csdn.net/weixin_58139900/article/details/121460340

版权

本文介绍了jQuery的插件扩展方法，强调必须先引入jQuery。同时，对比了Zepto和jQuery的区别，指出Zepto是轻量级库，适用于移动端。文章详细讨论了Zepto的特性，包括touch模块、fx模块以及selector的选择器。

摘要由CSDN通过智能技术生成

jQuery插件扩展是基于jQuery去扩展功能必须先引入jquery

jQuery插件扩展是基于jQuery去扩展功能必须先引入jquery

  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script src="./js/jquery.1.12.4.js"></script>
    <script>
        // jQuery插件扩展是基于jQuery去扩展功能 必须先引入jquery

        // 插件扩展可以分为  两种

        // 工具方法扩展   $或jQuery去调用的
        // $.extend({...});
        $.extend({
            // 去除首空格
            myTirmStart: function (str) {
                return str.replace(/^ +/g, "");
            },
            // 去尾首空格
            myTirmEnd: function (str) {
                return str.replace(/ +$/g, "");
            },
            // 去除收尾空格
            myTrim: function (str) {
                return str.replace(/(^ +| +$)/g, "");
            }
        });


        var str = "    哈哈   呵呵    ";
        var resStr = $.myTirmStart(str);
        console.log("a" + resStr);

        var resStr1 = $.myTirmEnd(str);
        console.log(resStr1 + "a");

        var resStr2 = $.myTrim(str);
        console.log("a" + resStr2 + "a");



        // 实例方法扩展   jQuery这个类的实例去调用的
        // $.fn.extend({...});
        $.fn.extend({
            oddAndEven: function (bg1, bg2) {
                // filter("selecor");  过滤出来符合表达式的
                this.filter(":odd").css("backgroundColor", bg1);
                this.filter(":even").css("backgroundColor", bg2);

                // 返回当前这个jQuery对象
                return this;