JQuery BASICS (5) jQuery custom addition & quot ;$ & quot; conflicts with resolving & quot ;$ & quot;, jquery custom

JQuery BASICS (5) jQuery custom addition "$" and resolution "$" conflict, jquery custom

1. Custom add $

From the above four articles, we can see that jQuery is powerful, but in any case, jQuery cannot meet the needs of all users, and there are some very small demands, and it is not suitable for the entire jQuery framework, because of this, jQuery provides a user-defined method for adding "$.

The Code is as follows:

    $.fn.disable = function() {                return this.each(function() {                    if (typeof this.disabled != "undefined") this.disable = true;                });            }

The above code first sets "$. fn. disable", indicating that "$" adds a method disable (), where "$. fn" is required to extend jQuery.

Then, use an anonymous function to define this method, that is, use each () to set the disabled attribute of each element of the method to true (if this attribute exists)

For example, extend the functions of jquery.

<Script type = "text/javascript"> $. fn. disable = function () {// extended jQuery, form elements are unified disable return this. each (function () {if (typeof this. disabled! = "Undefined") this. disabled = true ;}) ;}$. fn. enable = function () {// extended jQuery, unified form elements enable return this. each (function () {if (typeof this. disabled! = "Undefined") this. disabled = false ;});} function SwapInput (oName, oButton) {if (oButton. value = "Disable") {// If the button value is Disable, call the disable () method $ ("input [name =" + oName + "]"). disable (); oButton. value = "Enable";} else {// If the button value is Eable, call the enable () method $ ("input [name =" + oName + "]"). enable (); oButton. value = "Disable"; // then set the button value to Disable }}</script> <form method = "post" name = "myForm1" action = "addInfo. aspx "> <p> <label for =" name "> enter your name: </label> <br> <input type = "text" name = "name" id = "name" class = "txt"> </p> <label = "passwd"> enter your password: </label> <br> <input type = "password" name = "passwd" id = "passwd" class = "txt"> </p> <label = "color"> select your favorite color: </label> <br> <select name = "color" id = "color"> <option value = "red"> red </option> <option value = "green"> green </option> <option value = "blue"> blue </option> <option value = "yellow"> yellow </option> <option value = "cyan"> blue </option> <option value = "purple"> purple </option> </select> </p> <p> select your gender: <br> <input type = "radio" name = "sex" id = "male" value = "male"> <label for = "male"> male </label> <br> <input type = "radio" name = "sex" id = "female" value = "female"> <label for = "female"> female </label> </ p> <p> what do you like: <input type = "button" name = "btnSwap" id = "btnSwap" value = "Disable" class = "btn" onclick = "SwapInput ('hobby', this) "> <br> <input type =" checkbox "name =" holobby "id =" book "value =" book "> <label for =" book "> reading </label> <input type = "checkbox" name = "holobby" id = "net" value = "net"> <label for = "net"> surfing the Internet </label> <input type = "checkbox" name = "holobby" id = "sleep" value = "sleep"> <label for = "sleep"> sleeping </label> </p> <p> <label for = "comments"> I want to leave a message: </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>

The SwapInput (nName, oButton) method is used to determine the value of the button. If "disable" is unavailable, the disable () method is called to set the element to unavailable, at the same time, modify the button value to "enable", and vice versa, call the enable () method.

2. Resolve the "$" Conflict

Similar to the case in the previous section, although JQuery is very powerful, sometimes developers use multiple frameworks at the same time. In this case, be careful because "$" may be used by other frameworks, causing a conflict, jQ also provides the noConflict () method to solve the "$" conflict.

jQuery.noconflict();

The above Code allows "$" to be computed by other javascript frameworks. This means that "$" cannot be used in jQuery, but "jQuery" must be used ", for example, $("h2 a") must be written as jQuery ("h2 ")