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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
vue路由插件之vue-route
Jun 13 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
JS实现数组去重的11种方法总结
Apr 04 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中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php伪静态之APACHE篇
2014/06/02 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php购物车实现方法
2015/01/03 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
纯JS实现轮播图
2017/02/22 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
使用python制作一个解压缩软件
2019/11/13 Python
python线程join方法原理解析
2020/02/11 Python
python mock测试的示例
2020/10/19 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
2013年大学生的自我鉴定
2013/10/24 职场文书
高中自我鉴定
2013/12/20 职场文书
班主任工作总结范文
2015/08/13 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
Vue.Draggable实现交换位置
2022/04/07 Vue.js