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 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
js函数调用常用方法详解
Dec 03 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 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下对字符串的递增运算代码
2010/08/21 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
python局部赋值的规则
2013/03/07 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python将string转换到float的实例方法
2019/07/29 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
python识别验证码的思路及解决方案
2020/09/13 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
创建无烟单位实施方案
2014/03/29 职场文书
刊首寄语大全
2014/04/11 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
个人整改措施书面材料
2014/10/24 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
前台接待员岗位职责
2015/04/15 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android