码迷,mamicode.com
首页 > Web开发 > 详细

jQuery基础之(五)jQuery自定义添加"$"与解决"$"的冲突

时间:2015-01-18 02:00:20      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

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自定义添加"$"与解决"$"的冲突

标签:

原文地址:http://www.cnblogs.com/ahthw/p/4231390.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!