jQuery自定义添加"$"与解决"$"冲突的方法

本文实例讲述了jQuery自定义添加"$"与解决"$"冲突的方法。分享给大家供大家参考。具体分析如下：

1.自定义添加$

虽然jQuery很强大，但无论如何，jQuery都不可能满足所有用户的需求，而且有一些需求十分小众，也不适合放到整个jQuery框架中，正是因为这一点，jQuery提供了用户自定义添加“$”的方法。

代码如下：

代码如下:

$.fn.disable = function() {
 return this.each(function() {
     if (typeof this.disabled != "undefined") this.disable = true;
 });
}

以上代码首先设置"$.fn.disable",表明“$”添加一个方法disable()，其中 “$.fn”是扩展jQuery所必须的。

然后利用匿名函数定义这个方法，即用each()将调运这个方法的每个元素disabled属性均设置为true.(如果该属性存在)

例：扩展jquery的功能

代码如下:

<script type="text/javascript">
    $.fn.disable = function() {
 //扩展jQuery，表单元素统一disable
 return this.each(function() {
     if (typeof this.disabled != "undefined") this.disabled = true;
 });
    }
    $.fn.enable = function() {
 //扩展jQuery，表单元素统一enable
 return this.each(function() {
     if (typeof this.disabled != "undefined") this.disabled = false;
 });
    }

function SwapInput(oName, oButton) {
 if (oButton.value == "Disable") {
     //如果按钮的值为Disable，则调用disable()方法
     $("input[name=" + oName + "]").disable();
     oButton.value = "Enable";
 } else {
     //如果按钮的值为Eable，则调用enable()方法
     $("input[name=" + oName + "]").enable();
     oButton.value = "Disable"; //然后设置按钮的值为Disable
 }
    }
</script>
<form method="post" name="myForm1" action="addInfo.aspx">
    <p>
 <label for="name">请输入您的姓名:</label>
 <br>
 <input type="text" name="name" id="name" class="txt">
    </p>
    <p>
 <label for="passwd">请输入您的密码:</label>
 <br>
 <input type="password" name="passwd" id="passwd" class="txt">
    </p>
    <p>
 <label for="color">请选择你最喜欢的颜色:</label>
 <br>
 <select name="color" id="color">
     <option value="red">红</option>
     <option value="green">绿</option>
     <option value="blue">蓝</option>
     <option value="yellow">黄</option>
     <option value="cyan">青</option>
     <option value="purple">紫</option>
 </select>
    </p>
    <p>请选择你的性别:
 <br>
 <input type="radio" name="sex" id="male" value="male">
 <label for="male">男</label>
 <br>
 <input type="radio" name="sex" id="female" value="female">
 <label for="female">女</label>
    </p>
    <p>你喜欢做些什么:
 <input type="button" name="btnSwap" id="btnSwap" value="Disable" class="btn" onclick="SwapInput('hobby',this)">
 <br>
 <input type="checkbox" name="hobby" id="book" value="book">
 <label for="book">看书</label>
 <input type="checkbox" name="hobby" id="net" value="net">
 <label for="net">上网</label>
 <input type="checkbox" name="hobby" id="sleep" value="sleep">
 <label for="sleep">睡觉</label>
    </p>
    <p>
 <label for="comments">我要留言:</label>
 <br>
 <textarea name="comments" id="comments" cols="30" rows="4"></textarea>
    </p>
    <p>
 <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn">
 <input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn">
    </p>
</form>

方法SwapInput(nName,oButton)根据按钮的值进行判断，如果是不可用"disable",则调运disable()将元素设置为不可用，同时修改按钮的值为"enable",反之则调运enable()方法。

2.解决"$"的冲突

与前面文章的情况类似，尽管JQuery非常强大，但是有时开发者同时使用多个框架，这时需要小心，因为其他框架也可能使用了"$",从而发生冲突，jQ同样提供了noConflict()方法来解决"$"冲突的问题。

代码如下:

jQuery.noconflict();

以上代码便可使"$"按照其他javascript框架的方式运算，这是jQuery中便不能再使用"$",而必须使用“jQuery”，例如$("h2 a")必须写成jQuery("h2 a")

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery自定义函数的多种方法

    复制代码 代码如下: //方法定义 $.windowbox = { //定义一个方法aa aa: function(){ alert("aa"); }, //定义一个方法bb bb: function(){ alert("bb"); } } $.windowbox.aa(); //调用$.windowbox里的aa方法 复制代码 代码如下: // 传参数 var aa = function(x){ //弹出对象 x 里的 aa 变量和 bb 变量 alert(x.a

  • jQuery增加自定义函数的方法

    本文实例讲述了jQuery增加自定义函数的方法.分享给大家供大家参考.具体如下: $.fn.myFunction = function() { return $(this).addClass('changed'); } //用法: $('.changePlease').myFunction(); 希望本文所述对大家的jquery程序设计有所帮助.

  • jQuery实现自定义事件的方法

    本文实例讲述了jQuery实现自定义事件的方法.分享给大家供大家参考.具体分析如下: jQuery是一个非常强大的工具.jQuery非常有用的功能之一是可以实现事件绑定.你可以实现创建,绑定事件,可触发自己定义的jQuery事件. 自定义事件触发 下面的代码是它自定义事件触发.你可以绑定到这个自定义事件. $event.trigger("myEventName"); 自定义事件绑定 下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行. $(this).bind("

  • jQuery UI插件自定义confirm确认框的方法

    本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d

  • jQuery 自定义函数写法分享

    自定义主要通过两种方式实现$.extend({aa:function(){}});$.fn.extend({aa:function(){}});调用的方法分别是:$.aa();$($this).aa(); 注意:创建函数时不要放在 $(function() { }中,调用时候要放在事件里面$($this).click(function(){$.aa();}); jQuery.extend 函数详解JQuery的extend扩展方法:Jquery的扩展方法extend是我们在写插件的过程中常用的方

  • 自定义jQuery插件方式实现强制对象重绘的方法

    本文实例讲述了自定义jQuery插件方式实现强制对象重绘的方法.分享给大家供大家参考.具体实现方法如下: jQuery.fn.redraw = function(){ jQuery(this).each(function(){ this.style.display='none'; this.offsetHeight; // no need to store this anywhere, the reference is enough this.style.display='block'; });

  • JQuery弹出层示例可自定义

    JQuery弹出层示例可自定义

    1.创建一个jsp页面,内容如下,js和css根据自己的实际情况而定 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http

  • jQuery自定义添加"$"与解决"$"冲突的方法

    本文实例讲述了jQuery自定义添加"$"与解决"$"冲突的方法.分享给大家供大家参考.具体分析如下: 1.自定义添加$ 虽然jQuery很强大,但无论如何,jQuery都不可能满足所有用户的需求,而且有一些需求十分小众,也不适合放到整个jQuery框架中,正是因为这一点,jQuery提供了用户自定义添加"$"的方法. 代码如下: 复制代码 代码如下: $.fn.disable = function() {  return this.each(f

  • 利用div+jquery自定义滚动条样式的2种方法

    最近做项目中有一个模块是用于实时监控的,左边有个菜单栏用于显示所有的设备,那当然是从数据库中动态获取的了,右边是个iframe用于显示监控画面.本来这个功能并不复杂,左边的菜单项是利用dtree.js来实现的,可时当功能实现完成之后,却发现一个问题,就是左边菜单栏中的设备名有的会很长,会超出了div的长度,准确说是左边iframe的宽度和长度不够.那么,这时就必须要利用滚动条了,可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条,但

  • Jquery自定义button按钮的几种方法

    1.第一种方法比较简单 复制代码 代码如下: "columns": [ { "data": null,defaultContent: '<input type="button" onclick="" value="呵呵" />', orderable: false }, ], 从代码字面意思就能明白什么意思,但是怎样从里边获取改行的信息我还不知道,所以显得不是太实用,定义默认值还可以. 复制代码

  • 在jQuery中使用$而避免跟其它库产生冲突的方法

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法.然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突.下面以引入两个库文件jquery.js和prototype.js为例来进行说明. 第一种情况:jquery.js在prototype.js之后进行引入,如: <script src="prototype.js" type=&qu

  • jQuery冲突问题解决方法

    在前端开发中,$是jQuery中的一个函数,如果$的参数不同,那实现的功能不同.在编程过程中,$作为一个符号,可能与其他文件中的定义名称相冲突.那这个冲突如何处理呢?本文小编介绍两种方法: 1.通过jQuery框架中释放 $ 符号的使用权解决: 2.使用自定义访问符号解决. 方法一:通过jQuery框架中释放 $ 符号的使用权解决 处理说明:$只是jquery的一个别名而已,如果需要使用 jquery 之外的另一 js 库,可以通过调用 $.noConflict() 向该库返回控制权. jQue

  • jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)

    本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法.分享给大家供大家参考,具体如下: 综合网上一些代码 自己写的一个图片缩放拖拽的小插件 /** * * <a href="http://lib.csdn.net/base/22" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery<

  • 导入extjs、jquery 文件时$使用冲突问题解决方法

    1.在最近做项目时,在html页面中,没有导入jquery文件时,可以正常保存,而导入jquery文件后,则不能不存了 经过调试后,发现导入的jquery文件和现有的extjs文件冲突了(原因是$符号的冲突) jQuery与ExtJS之间发生冲突,但是在非IE内核下是可以的,是由于$符号的冲突,解决办法就是把jQuery的$符号用其他来代替,代码如下: 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js

  • 解决jquery中美元符号命名冲突问题

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突.下面以引入两个库文件 jquery.js和prototype.js为例来进行说明. 第一种情况:jquery.js在prototype.js之后进行引入,如: <</span> script src = " prototyp

  • AngularJS自定义指令之复制指令实现方法

    本文实例讲述了AngularJS自定义指令之复制指令实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.c

  • JQuery自定义事件的应用 JQuery最佳实践

    知识要点: 1,自定义事件custom events及事件的订阅 2,trigger.bind.unbind方法的使用 3,带命名空间的自定义事件 将下面内容粘贴至txt文档后再直接粘贴至firebug的控制台,运行看看. 复制代码 代码如下: /* JQuery自定义事件的应用-Javascript OO 有一帅哥叫Levin,在某公司前端设计部工作,他的主管是大帅哥A,经理是大美眉B. 领导们希望可以抽空瞄瞄这家伙每周的工作情况,于是... Levin每周一要用google doc写一份关于

随机推荐