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


Posted in Javascript onJanuary 19, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
javascript中的隐式调用
Feb 10 Javascript
vue2单元测试环境搭建
May 24 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
jQuery创建DOM元素实例解析
Jan 19 #Javascript
jQuery使用之处理页面元素用法实例
Jan 19 #Javascript
jQuery学习笔记之jQuery中的$
Jan 19 #Javascript
jQuery使用之设置元素样式用法实例
Jan 19 #Javascript
jQuery学习笔记之基础中的基础
Jan 19 #Javascript
jQuery 选择器详解
Jan 19 #Javascript
jQuery使用之标记元素属性用法实例
Jan 19 #Javascript
You might like
PHP二维数组排序简单实现方法
2016/02/14 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python爬取个性签名的方法
2018/06/17 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
python Zmail模块简介与使用示例
2020/12/19 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
非常详细的C#面试题集
2016/07/13 面试题
小学教师事迹材料
2014/01/13 职场文书
大学毕业感言50字
2014/02/07 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
护士感人事迹
2014/05/01 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
python小程序之飘落的银杏
2021/04/17 Python
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python
python中的sys模块和os模块
2022/03/20 Python
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
bose降噪耳机音能消除人声吗
2022/04/19 数码科技