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脚本函数库 方便开发
Oct 13 Javascript
Javascript 中的类和闭包
Jan 08 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
js+css实现select的美化效果
Mar 24 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
原生JS无缝滑动轮播图
Oct 22 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 文件夹删除、php清除缓存程序
2009/08/25 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
Python 使用office365邮箱的示例
2020/10/29 Python
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
店长助理岗位职责
2013/12/13 职场文书
生物制药自我鉴定
2014/01/25 职场文书
班委竞选演讲稿
2014/04/28 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python