jQuery基础之(五)jQuery自定义添加"$"与解决"$"的冲突
优质
小牛编辑
125浏览
2023-12-01
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")