jQuery自定义添加"$"与解决"$"冲突的方法

 更新时间:2015年01月19日 11:05:18   投稿:shichen2014  
这篇文章主要介绍了jQuery自定义添加"$"与解决"$"冲突的方法,介绍了用户自定义添加“$”扩展jQuery功能的方法,以及解决"$"冲突的技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • Jquery ajax请求导出Excel表格的实现代码

    Jquery ajax请求导出Excel表格的实现代码

    下面小编就为大家带来一篇Jquery ajax请求导出Excel表格的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList

    ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList

    这节我们还可以通过直接设置DropDownList属性来设置jQuery validation插件的校验规则和提示信息
    2012-02-02
  • 详解layui中的树形关于取值传值问题

    详解layui中的树形关于取值传值问题

    本篇文章主要介绍了详解layui中的树形关于取值传值问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • jquery.pagination.js分页使用教程

    jquery.pagination.js分页使用教程

    这篇文章主要为大家详细介绍了jquery.pagination.js分页使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • jquery实现简单手风琴菜单效果实例

    jquery实现简单手风琴菜单效果实例

    这篇文章主要介绍了jquery实现简单手风琴菜单效果的方法,实例分析了jQuery操作页面样式、html页面布局及SCSS样式设置的相关技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery获取多种input值的简单实现方法

    jQuery获取多种input值的简单实现方法

    下面小编就为大家带来一篇jQuery获取多种input值的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jQuery倒计时代码(超简单)

    jQuery倒计时代码(超简单)

    本文给大家分享一段超简单的代码基于jquery实现倒计时功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下
    2017-02-02
  • 详解jQuery如何实现模糊搜索

    详解jQuery如何实现模糊搜索

    这篇文章主要介绍了jQuery如何实现模糊搜索,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 简单实现jQuery级联菜单

    简单实现jQuery级联菜单

    这篇文章主要为大家详细介绍了如何简单实现jQuery级联菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 自定义刻度jQuery进度条及插件

    自定义刻度jQuery进度条及插件

    自定义刻度jq进度条可以自定义进度条刻度圆点数量,大小等相关属性,可以通过css控制圆点的外观样式,通过progressdots插件自定义刻度动画,使用该插件还需引入jquery,jquery.progressdots.js和jquery.progressdots.css文件。需要的朋友一起学习吧
    2015-09-09

最新评论