[javascript] jQuery 팁과 요령

JAVASCRIPT / 글쓴이

통사론

데이터 저장고

최적화

여러 가지 잡다한

답변

HTML 요소 생성 및 참조 유지

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created,
   I can just reference it from the "newDiv" variable */

요소가 존재하는지 확인

if ($("#someDiv").length)
{
    // It exists...
}

자신 만의 선택기 작성

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

답변

jQuery의 data()방법은 유용하며 잘 알려져 있지 않습니다. DOM을 수정하지 않고도 DOM 요소에 데이터를 바인딩 할 수 있습니다.

답변

중첩 필터

필터가 중첩 될 수 있습니다 ( 별명이 여기에 표시됨).

.filter(":not(:has(.selected))")

답변

난 정말 팬이 아니야 $(document).ready(fn) 지름길 . 물론 코드는 줄이지 ​​만 코드의 가독성도 줄어 듭니다. 당신이 볼 때 $(document).ready(...), 당신은 당신이보고있는 것을 알고 있습니다. $(...)너무 많은 다른 방법으로 즉시 이해됩니다.

여러 프레임 워크가있는 경우 사용할 수 있습니다 jQuery.noConflict(); 말한대로 수 있지만 다음과 같이 다른 변수를 지정할 수도 있습니다.

var $j = jQuery.noConflict();

$j("#myDiv").hide();

$x(...)스타일 호출 로 정리할 수있는 여러 프레임 워크가있는 경우 매우 유용 합니다.

답변

오, jQuery 메타 데이터를 잊지 말자 ! data () 함수는 훌륭하지만 jQuery 호출을 통해 채워 져야합니다.

다음과 같은 사용자 정의 요소 속성에 대한 W3C 준수를 위반하는 대신 :

<input
  name="email"
  validation="required"
  validate="email"
  minLength="7"
  maxLength="30"/>

대신 메타 데이터를 사용하십시오.

<input
  name="email"
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>

답변

라이브 이벤트 핸들러

에 대한 이벤트 핸들러 설정 어떤 이 초기 페이지 로딩 후 DOM에 추가됩니다 경우에도 선택과 일치하는 요소를 :

$('button.someClass').live('click', someFunction);

이를 통해 Ajax를 통해 컨텐츠를로드하거나 javascript를 통해 컨텐츠를 추가하고 해당 요소에 대해 자동으로 이벤트 핸들러를 설정할 수 있습니다.

마찬가지로 실시간 이벤트 처리를 중지하려면

$('button.someClass').die('click', someFunction);

이러한 실시간 이벤트 처리기는 일반 이벤트와 비교하여 몇 가지 제한 사항이 있지만 대부분의 경우에 효과적입니다.

자세한 내용은 jQuery 설명서를 참조하십시오. .

UPDATE : live()그리고는 die()jQuery를 1.7에서 사용되지 않습니다. 유사한 교체 기능에 대해서는 http://api.jquery.com/on/ 및 http://api.jquery.com/off/ 를 참조하십시오 .

UPDATE2 : live()jQuery 1.7 이전에도 오랫동안 사용되지 않았습니다. 1.7 이전 버전의 jQuery 1.4.2 이상에서는 delegate()및을 사용하십시오 undelegate(). live()예 ( $('button.someClass').live('click', someFunction);)를 사용하여 재기록 될 수있는 delegate()그와 같은 $(document).delegate('button.someClass', 'click', someFunction);.

답변

익명 함수를 명명 된 함수로 바꿉니다. 이것은 실제로 jQuery 컨텍스트를 대체하지만 콜백 함수에 의존하기 때문에 jQuery를 사용할 때처럼 보입니다. 인라인 익명 함수의 문제점은 디버그하기가 더 어렵고 (명백한 이름의 함수가있는 6 단계 “익명”의 콜 스택을 훨씬 쉽게 볼 수 있음), 동일한 익명의 여러 익명 함수가 있다는 사실입니다. jQuery-chain은 읽고 유지 관리하기가 어려워 질 수 있습니다. 또한 익명 함수는 일반적으로 재사용되지 않습니다. 반면에 명명 된 함수를 선언하면 재사용 가능성이 높은 코드를 작성할 수 있습니다.

삽화; 대신에:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

나는 선호한다:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );