手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery自定义添加"$"与解决"$"冲突的方法
jQuery自定义添加"$"与解决"$"冲突的方法
摘要:本文实例讲述了jQuery自定义添加"$"与解决"$"冲突的方法。分享给大家供大家参考。具体分析如下:1.自定义添加$虽然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">

</p>

<p>

<label for="passwd">请输入您的密码:</label>

<br>

<input type="password" name="passwd" id="passwd">

</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">

<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">

<input type="reset" name="btnReset" id="btnReset" value="Reset">

</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自定义添加"$"与解决"$"冲突的方法】相关文章:

jQuery判断指定id的对象是否存在的方法

jQuery获取页面元素绝对与相对位置的方法

jquery实现图片左右切换的方法

jQuery实现返回顶部效果的方法

jQuery基于图层模仿五星星评价功能的方法

jQuery实现转动随机数抽奖效果的方法

jQuery实现给页面换肤的方法

jQuery解析XML文件同时动态增加js文件的方法

jQuery实现首页图片淡入淡出效果的方法

JavaScript获得指定对象大小的方法

精品推荐
分类导航