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 相关文章推荐
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 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投票程序源码
2007/03/11 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
PDO::query讲解
2019/01/29 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
python使用pandas实现数据分割实例代码
2018/01/25 Python
python构建深度神经网络(续)
2018/03/10 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
pygame实现打字游戏
2021/02/19 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
django自定义模板标签过程解析
2019/12/14 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
师范生实习自我鉴定
2013/11/01 职场文书
高一生物教学反思
2014/01/17 职场文书
公司年会主持词
2014/03/22 职场文书
应届生求职信
2014/05/31 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
考博导师推荐信范文
2015/03/27 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript
vue ref如何获取子组件属性值
2022/03/31 Vue.js