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

index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

    <script src="jquery-3.1.0.min.js"></script>

    <script src="myjQuery.js"></script>

    <script src="Extends.js"></script>

 </head>

 <body>

 </body>

 </html>

自己定义的 myjQuery.js

$.myjq = function(){

    alert("hello myjQuery");

}

Extends.js

$(document).ready(function(){

    $.myjq();

});

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

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

index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

    <script src="jquery-3.1.0.min.js"></script>

    <script src="myjQuery.js"></script>

    <script src="Extends.js"></script>

 </head>

 <body>

      <div></div>

 </body>

 </html>

自己定义的 myjQuery.js

$.fn.myjq = function(){

    $(this).text("hello");

}

Extends.js

$(document).ready(function(){

    $("div").myjq();

});

同样实现了效果

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

index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

    <script src="jquery-3.1.0.min.js"></script>

    <script src="noConflict.js"></script>

 </head>

 <body>

      <div>Hello</div>

      <button id="btn">按钮</button>

 </body>

 </html>

noConflict.js

 var myjq = $.noConflict();//当前的美元符号如果被其它框架所占有的时候,加上这句话，然后将美元符号换成myjq即可

 myjq(document).ready(function(){

     myjq("#btn").on("click",function(){

         myjq("div").text("new hello");

     });

 });

很简单...

jQuery扩展与noConflict的用法-小示例的更多相关文章

  1. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. 前端（jQuery）（6）-- jQuery的扩展与noConflict

    1.jQuery的扩展 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. jQuery之jQuery扩展和事件

    一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[data],fn]) 当select下拉 ...

  4. web前端----jQuery扩展（很重要！！）

    1.jQuery扩展语法 把扩展的内容就可以写到xxxx.js文件了,在主文件中直接导入就行了. 用法1.$.xxx() $.extend({ "GDP": function () ...

  5. JQuery扩展和事件

    一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[data],fn]) 当select下拉 ...

  6. 前端之JQuery：JQuery扩展和事件

    jQuery之jQuery扩展和事件 一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[d ...

  7. Python之Web前端jQuery扩展

    Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...

  8. 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...

  9. Jquery扩展-手把手带你体验

    Jquery扩展是在项目中经常用到的,有时候为了提取一些公共方法,有时候为了模块化管理等等,下面我们来体验一下.当然扩展离不开Jquery几个基础方法 1:$.extend() 2:$.fn.func ...

随机推荐

  1. yii cgridview 默认的筛选如何做成选择框

    效果图 参照 http://www.yiiframework.com/doc/api/1.1/CGridColumn http://www.yiiframework.com/doc/api/1.1/C ...

  2. 修改用户的home路径

    1.直接修改/etc/passwd文件 2.usermod -d /hadoop -u 1531 附:usermod详细参数 语 法:usermod [-LU][-c <备注>][-d & ...

  3. block为什么要用copy，runtime的简单使用

    分享一篇文章:link

  4. (转)ASP.NET里面简单的记住用户名和密码

    using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using S ...

  5. \r \n有什么区别

    '\r'是回车,'\n'是换行,前者使光标到行首,后者使光标下移一格.通常用的Enter是两个加起来.下面转一篇文章. 回车和换行 今天,我总算搞清楚“回车”(carriage return)和“换行 ...

  6. MD5加密类

    public class MD5Util { public static String getMD5(String s) { char hexDigits[] = {'0', '1', '2', '3 ...

  7. 关于Aspose对于Word操作的一些扩展及思考

    Aspose.word Aspose.Words是一款先进的类库,通过它可以直接在各个应用程序中执行各种文档处理任务.Aspose.Words支持DOC,OOXML,RTF,HTML,OpenDocu ...

  8. 武汉科技大学ACM ：1006: A+B for Input-Output Practice (VI)

    Problem Description Your task is to calculate the sum of some integers. Input Input contains multipl ...

  9. QT高级运用之粒子模拟（Particle Simulations)

    粒⼦模拟是计算机图形技术的可视化图形效果.典型的效果有:落叶,⽕焰,爆炸,流星,云等等.它不同于其它图形渲染, 粒⼦是基于模糊来渲染.它的结果在基于像素下是不可预测的.粒⼦系统的参数描述了随机模拟的边 ...

  10. HDU 4606 Occupy Cities (计算几何+最短路+最小路径覆盖)

    转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents    by---cxlove 题目:给出n个城市需要去占领,有m条线段是障碍物, ...