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.x">
<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 Post处理后不进入回调的原因及解决方法教程
-
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
-
如何快速解决jQuery与其他库冲突的方法介绍
-
win7 64位纯净版系统c盘空间显示与实际占用空间不对的解决方法图文教程
-
win7 64位纯净版系统c盘空间显示与实际占用空间不对的解决方法图文教程
-
html5的自定义data-*属性与jquery的data()方法的使用
-
Android ListView与ScrollView冲突的解决方法总结
-
解决自定义$(id)的方法与jquery选择器$冲突的问题
-
asp.net开发与web标准的冲突问题的一些常见解决方法