有时我们要用到自己定义的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. [转] JS nodeType返回类型

    将HTML DOM中几个容易常用的属性做下记录: nodeName.nodeValue 以及 nodeType 包含有关于节点的信息. nodeName 属性含有某个节点的名称. 元素节点的 node ...

  2. Volley 百财帮封装

    Activity public class MainActivity extends Activity implements OnClickListener {     private Context ...

  3. javascript基础之变量和函数声明

    1.变量的声名 window.name = 'gjlin' ; //全局变量  直接name = 'gjlin'  也表示全局变量,但是建议使用window.name = 'gjlin' 这种形式表示 ...

  4. Cors 跨域Access-Control-Allow-Origin

    1.Access-Control-Allow-Origin 指定格式 The Origin header field has the following syntax: origin = " ...

  5. 解决:debug-stripped.ap_' specified for property 'resourceFile' does not exist.

    1.错误描述 更新Android Studio到2.0版本后,出现了编译失败的问题,我clean project然后重新编译还是出现抑郁的问题,问题具体描述如下所示: Error:A problem ...

  6. 还是把一个课程设计作为第一篇文章吧——学生学籍管理系统（C语言）

    #include <stdio.h> #include<stdlib.h> #include<string.h> typedef struct student { ...

  7. linux 第二天

    文件权限和用户组 groupadd 组名 groupadd policeman 查看组 vi /etc/group cat /etc/group 创建用户,并同时指定将该用户分配到哪个组 userad ...

  8. 设置Cacti图形标题能显示中文

    1.查看系统是否带有中文字体包 # ls /usr/share/fonts/chinese 如没有则安装 # yum -y install fonts-chinese   2.设置cacti使用的rr ...

  9. linux下定时任务

    一.linux定时任务软件种类 .at : 适合执行一次的任务.突发性的任务.需要启动 atd 服务才能执行任务. .crontab: 周期性的执行任务工作:启动crond 服务后可以执行任务.最常用 ...

  10. JGraph

    php中JPGraph入门配置与应用 什么是PHP JPGraph?专门提供图表的类库.它使得作图变成了一件非常简单的事情.生成非美工人士生成的图表.二维码算法. 到官方网站下载.docportal ...