有时我们要用到自己定义的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. sass笔记-4|像写脚本一样写Sass，把能交给Sass办的都交给它

    Sass笔记关于sass的基础部分已经写完,这一篇介绍Sass的高级特性--脚本特性.Sass能做很多事让样式表更智能,我们先会看到Sass眼中的数据类型,在这些数据类型上会有可进行的操作,此外,Sa ...

  2. 《node.js开发指南》读书笔记（一）

    在开发时如果修改了js内容,不能通过刷新浏览器直接看到效果,必须通过重启nodejs程序才能看到,这样显然不利于开发调试,supervisor可以实现这个功能,监视对代码的改动,并自动重启nodejs ...

  3. 使用linux操作系统的公司服务器有哪些品牌

    服务器硬件是什么牌子的? 操心系统有哪些?cpu是哪些?

  4. eclipse中build path 中JDK与java compiler compliance level的问题（转）

    roject facets做什么用? http://baike.baidu.com/view/6257360.htm,其实我感觉,就是让我们在创建项目时候,可以独立定义一个有一个模板供我们使用,在里面 ...

  5. 如何解决Windows 7的多重网络问题

    如何解决Windows 7的多重网络问题   出现这种现象一般是明天网络还好好的,今天一开机就上不了网了,可是局域网是通的.打开网络和共享中心你会发现PC和Internet之间是一个多重网络.造成这种 ...

  6. ORA-16014: 日志 1 的序列号 242 未归档, 没有可用的目的地

    SQL> alter database open; *第 1 行出现错误:ORA-16014: 日志 1 的序列号 242 未归档, 没有可用的目的地ORA-00312: 联机日志 1 线程 1 ...

  7. Core Data 学习简单整理01

    Core Data是苹果针对Mac和iOS平台开发的一个框架, 通过CoreData可以在本地生成数据库sqlite,提供了ORM的功能,将对象和数据模型相互转换 . 通过Core Data管理和操作 ...

  8. iOS中忽略NSLog打印信息(通过PCH文件中定义DEBUG宏解决)

    iOS中忽略NSLog打印信息 解决办法: 1.新建PrefixHeader_pch文件,在该文件中定义一下宏 //通过DEBUG宏的定义来解决Debug状态下和Release状态下的输出 #ifde ...

  9. PHP Directory 函数

    PHP 5 Directory 函数 函数 描述 chdir() 改变当前的目录. chroot() 改变根目录. closedir() 关闭目录句柄. dir() 返回 Directory 类的实例 ...

  10. 使用 pm2 来守护 NoderCMS

    pm2 是一个带有负载均衡功能的Node应用的进程管理器,使用 pm2 可以帮助你守护和监控 NoderCMS 的正常运行,   基于Node.js+MongoDB的轻量级内容管理系统NoderCMS ...