Jquery 일반 메서드 및 사용법 요약 example

mouseover()/mouserout()

Mouseover/mouseout 이벤트는 마우스가 요소나 그 하위 요소에 들어가거나 나갈 때 트리거됩니다.
mouseover 이벤트는 mouseout 이벤트와 함께 가장 자주 사용됩니다.

버블링 메커니즘으로 인해 필요하지 않을 때 mouseover/mouserout 이벤트가 실수로 트리거되어 일부 스크립트 문제가 발생하는 경우가 많습니다.

mouseenter()/mouseleave()

mouseenter/mouseleave는 마우스가 선택한 요소에 들어갈 때만 트리거됩니다. 마우스가 하위 요소를 통과할 때는 트리거되지 않습니다. 대상 요소에 자식이 있는지 여부는 중요하지 않습니다.

focusin() 및 focusout()

.focusin(): 이 이벤트는 요소 또는 해당 하위 요소가 포커스를 받을 때 트리거됩니다.
.focusout(): 이 이벤트는 요소 또는 해당 하위 요소가 포커스를 잃을 때 트리거됩니다

focus() 메서드와 달리 focusin() 메서드도 하위 요소가 포커스를 받을 때 트리거됩니다.

코드 복사 코드는 다음과 같습니다.

포커스인 파이어

$( "p" ).focusin(function() {
$( this ).find( "span" ).css( "display", "inline" ).fadeOut( 1000 );
});

eq() 및 get()

.get(): jQuery 객체를 통해 해당 DOM 요소를 가져옵니다.
.eq(): 컬렉션의 요소에서 새로운 jQuery 객체를 생성합니다

eq는 jQuery 객체를 반환하고, get은 DOM 객체를 반환합니다. 예:

$( "li" ).get( 0 ).css("color", "red") //오류
$( "li" ).eq( 0 ).css("color", "red") //맞습니다
그렇다면 DOM 객체는 무엇이며 jQuery 객체는 무엇입니까?

DOM 객체는 js를 사용하여 얻은 객체이고, juqery 객체는 jQuery 클래스 라이브러리의 선택기를 사용하여 얻은 객체입니다.

예: var $obj = $("div");//jQuery 개체

get 메소드는 본질적으로 jQuery 객체를 DOM 객체로 변환하지만 CSS는 jQuery 생성자에 속하며 이 메소드는 DOM에 존재하지 않습니다. jQuery 메소드를 사용해야 하는 경우 다음과 같이 작성해야 합니다.

코드 복사 코드는 다음과 같습니다.

var li = $("li").get(0);

$(li).css("color","black");//$
로 래핑

필터()

filter() 메서드: 지정된 표현식과 일치하는 요소 집합을 필터링합니다.
이 방법은 일치 범위를 좁힐 때 사용됩니다. 여러 표현식을 쉼표로 구분하세요.

filter(expression): (String|Function) 매개변수가 문자열인 경우 선택기와 일치하지 않는 모든 요소를 패키징 세트에서 제거하고 선택기와 일치하는 요소만 남기도록 jQuery 선택기가 공식화됩니다. ; 인수가 함수인 경우 필터 기준을 결정하는 데 사용됩니다. 이 함수는 래핑 세트의 각 요소에 대해 한 번씩 호출됩니다. 함수 호출에서 false를 반환하는 모든 요소는 래핑 세트에서 삭제됩니다.

다음 코드의 의미: 선택 클래스를 사용하여 첫 번째 요소와 요소 유지

HTML 코드:

코드 복사 코드는 다음과 같습니다.

안녕하세요

다시 안녕하세요

또 다시

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$("p").filter(".selected, :first")

결과:

코드 복사 코드는 다음과 같습니다.

안녕하세요

또 다시

함수의 또 다른 예를 살펴보면, 함수는 테스트 요소의 모음으로 사용됩니다. jQuery 컬렉션에 있는 요소의 인덱스인 매개변수 인덱스를 허용합니다. 함수에서 이는 현재 DOM 요소를 나타냅니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

안녕하세요

잘 지내세요?

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$("p").filter(함수(색인) {

return $("ol", this).length == 0;

});

결과:

코드 복사 코드는 다음과 같습니다.

잘 지내세요?

.bind(), .live() 및 .delegate() 메소드

.bind(): 이벤트 처리 기능을 바인딩하는 가장 기본적인 방법은 .bind() 메서드를 사용하는 것입니다. 두 개의 매개변수를 허용하는 live() 메소드와 동일합니다:

.bind(이벤트 유형, 이벤트 핸들러)
이벤트 핸들러를 바인딩하는 두 가지 방법:

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){
$('.mydiv').bind('클릭',테스트);

기능 테스트(){
Alert("Hello World!");
}
});

이벤트 핸들러는 아래와 같이 익명 함수를 사용할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){

          $("#mydiv").bind("click",function(){

Alert("Hello World!");

         })

});

.live(): 라이브 메소드와 바인드 메소드의 유일한 차이점은 .live()가 현재 DOM에 존재하는 요소에만 작동하는 것이 아니라 DOM에 존재할 수 있는(동적으로 생성된) 요소에도 작동한다는 것입니다. 미래

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){
           $('.box').live('click',function(){
                $(this).clone().appendTo('.container');
        });
});

라이브 메서드를 사용하여 이벤트를 바인딩할 때 체인 호출을 사용할 수 없다는 단점이 있습니다. 라이브 메서드처럼 이벤트를 바인딩할 수 있을 뿐만 아니라 체인 호출도 지원하는 메서드가 있나요? 대답은 아래의 대리자 방법입니다.

delegate() 메서드: 지정된 요소(선택한 요소의 하위 요소)에 하나 이상의 이벤트 핸들러를 추가합니다.

그리고 이러한 이벤트가 발생할 때 실행할 함수를 지정합니다. jQuery 1.7부터 .delegate()가 .on() 메서드로 대체되었습니다.
구문:

$(selector).delegate(childSelector,이벤트 유형,함수)

매개변수 설명:

childSelector가 필요합니다. 이벤트 핸들러가 연결되는 하나 이상의 하위 요소를 지정합니다.

이벤트가 필요합니다. 요소에 연결할 하나 이상의 이벤트를 지정합니다. 여러 이벤트 값을 공백으로 구분합니다. 유효한 이벤트여야 합니다.

기능이 필요합니다. 이벤트가 발생할 때 실행할 함수를 지정합니다.

코드 복사 코드는 다음과 같습니다.

$(문서).ready(함수(){

           $('.container').delegate('.box','click',function(){

                $(this).clone().appendTo('.container');

        });

});

delegate()는 다음 두 가지 상황에서 사용됩니다.

1. 상위 요소가 있고 하위 요소에 이벤트를 추가해야 하는 경우 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("ul").delegate("li", "click", function(){

$(this).hide();

});

2. 현재 페이지에서 요소를 사용할 수 없는 경우 위임()을 사용할 수 있습니다

end() 메서드

end() 메서드: jquery 명령 체인 내에서 호출되어 이전 패키징 세트로 돌아갑니다.
각 필터링 방법은 스택에 푸시됩니다. 이전 상태로 돌아가야 할 경우 end()를 사용하여 스택의 이전 상태로 돌아가는 팝 작업을 수행할 수 있습니다.

end() 메서드는 현재 체인에서 가장 최근의 필터 작업을 종료하고 일치하는 요소 집합을 이전 상태로 복원합니다.

코드 복사 코드는 다음과 같습니다.

저자별 최신 기사