当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery自定义添加$与解决$冲突的方法教程

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

2019年03月30日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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")

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网