zoukankan      html  css  js  c++  java
  • jQuery扩展与noConflict的用法-小示例

    有时我们要用到自己定义的jquery,这时可以通过jQuery扩展来实现该功能

    index.html

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>Insert title here</title>
     6    <script src="jquery-3.1.0.min.js"></script>
     7    <script src="myjQuery.js"></script>
     8    <script src="Extends.js"></script>
     9 </head>
    10 <body>
    11      
    12 </body>
    13 </html>

    自己定义的 myjQuery.js

    $.myjq = function(){
        alert("hello myjQuery");
    }

    Extends.js

    $(document).ready(function(){
        $.myjq();
    });

    最后打开浏览器后访问,成功输出 “hello myjQuery”

    接下来介绍另一种比较常用的扩展方法:

    index.html

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>Insert title here</title>
     6    <script src="jquery-3.1.0.min.js"></script>
     7    <script src="myjQuery.js"></script>
     8    <script src="Extends.js"></script>
     9 </head>
    10 <body>
    11      <div></div>
    12 </body>
    13 </html>

    自己定义的 myjQuery.js

    $.fn.myjq = function(){
        $(this).text("hello");
    }

    Extends.js

    $(document).ready(function(){
        $("div").myjq();
    });

    同样实现了效果

    2、jQuery当前的美元符号如果被其它框架所占有时的处理方法

    index.html

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>Insert title here</title>
     6    <script src="jquery-3.1.0.min.js"></script>
     7    <script src="noConflict.js"></script>
     8 </head>
     9 <body>
    10      <div>Hello</div>
    11      <button id="btn">按钮</button>
    12 </body>
    13 </html>

    noConflict.js

    1 var myjq = $.noConflict();//当前的美元符号如果被其它框架所占有的时候,加上这句话,然后将美元符号换成myjq即可
    2 myjq(document).ready(function(){
    3     myjq("#btn").on("click",function(){
    4         myjq("div").text("new hello");
    5     });
    6 });

    很简单...

  • 相关阅读:
    GCD多线程使用
    高德地图引入库错误std::string::find_first_of(char const*, unsigned long, unsigned long) const"
    vim配置 高亮+自动缩进+行号+折叠+优化
    设置MAC 下 Vim 语法高亮显示
    The platform of the target `Pods` (iOS 4.3) is not compatible 错误
    使用GCD创建单例
    使用Draw rect 绘制圆角矩形
    使用第三方类、库需要注意的正则类RegexKitLite的使用
    NSDate 时区转换问题
    UISlider设置按钮透明
  • 原文地址:https://www.cnblogs.com/UniqueColor/p/5765564.html
Copyright © 2011-2022 走看看