jQuery 기반 (5) jQuery 사용자 정의 '$' 추가 및 '$' 충돌 해결

1. 사용자 지정 추가 $
위의 네 편의 글에서 우리는 jQuery의 강함을 보았지만, 어쨌든 jQuery는 모든 사용자의 수요를 만족시킬 수 없을 뿐만 아니라, 일부 수요는 매우 적고, 전체 jQuery 프레임워크에 넣기에 적합하지 않다. 바로 이 점 때문에 jQuery는 사용자 정의로 '$' 를 추가하는 방법을 제공했다.
코드는 다음과 같습니다.

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

위 코드는 먼저 "$.fn.disable"을 설정합니다. "$"은 jQuery를 확장하는 데 필요한 방법disable () 을 추가합니다.
그리고 익명 함수를 이용하여 이 방법을 정의합니다. 즉 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") 로 써야 합니다.