有时我们要用到自己定义的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. Java基础知识强化100：jsp和servlet有什么区别

         首先你先要弄懂什么是servlet,servlet是在服务器端执行的java程序,只不过它有专门的一套规则(就是我们平常所说的api):jsp说得简单点就是用另一套简单的规则写的servle ...

  2. JavaScripts学习日记——XML DTD Schema

    今日关键词: XML DTD Schema 1.XML 1 XML的概述 1.1 什么是XML XML全称为Extensible Markup Language,意思是可扩展的标记语言.XML语法上和 ...

  3. linux性能调优概述

    - 什么是性能调优?(what) - 为什么需要性能调优?(why) - 什么时候需要性能调优?(when) - 什么地方需要性能调优?(where) - 什么人来进行性能调优?(who) - 怎么样 ...

  4. Configuring Network Configuration-RHEL7

    1.查看网络状态systemctl status NetworkManager You can use the  systemctl status NetworkManager  command to ...

  5. 关于安装PHP补装PDO与PDO_MYSQL操作

    我这里是通过PHP源码包来安装的 1.安装pdo cd到你的PHP源码包下的ext/pdo目录,然后执行如下操作: #/usr/local/php/bin/phpize   (/usr/local/p ...

  6. The requested page cannot be accessed because the related configuration data for the page is invalid

    当在VS2013下开发web site时,调试时都是在IIS Express中进行的,没有问题.当部署到IIS中,出现:The requested page cannot be accessed be ...

  7. 常用的CSS属性

    1.CSS背景属性(background) 属性 描述 background 在一个声明中设置所有的背景属性 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动 ...

  8. PHP输出中文乱码的问题（转）

    用echo输出的中文显示成乱码, 其实应该是各种服务器脚本都会遇到这个问题, 根本还是编码问题, 一般来说出于编码兼容考虑大多的页面都将页面字符集定义为utf-8 <meta http-equi ...

  9. shell中if做比较

    比较两个字符串是否相等的办法是: if [ "$test"x = "test"x ]; then 这里的关键有几点: 1 使用单个等号 2 注意到等号两边各有一 ...

  10. Android studio 开发环境搭建

    Android studio 开发环境搭建 一.环境: 下载java jdk:http://www.oracle.com/technetwork/cn/java/javase/downloads/jd ...