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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
Uploadify上传文件方法
Mar 16 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
ES6数组的扩展详解
Apr 25 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
Angular使用Restful的增删改
Dec 28 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
2014过年倒计时示例
2014/01/31 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
php fread读取文件注意事项
2016/09/24 PHP
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
教师申诉制度
2014/01/29 职场文书
《理想》教学反思
2014/02/17 职场文书
自荐信的格式
2014/03/10 职场文书
社区健康教育工作方案
2014/06/03 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
党的生日演讲稿
2014/09/10 职场文书
小学生校园广播稿
2014/09/28 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
股东协议书范本2016
2016/03/21 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android