집 > 기사 > 웹 프론트엔드 > jquery DOM&이벤트에 대한 설명

jquery DOM&이벤트에 대한 설명

jacklove원래의: 2018-05-21 10:39:141404검색

학습 중에 jquery DOM 및 이벤트를 자주 접하게 됩니다. 이 기사에서는 jquery DOM 및 이벤트를 자세히 설명합니다.

라이브러리와 프레임워크의 차이점은 무엇인가요?

도서관은 창고에 있는 다양한 소형 도구와 동일한 다양한 방법을 제공합니다. 도구가 필요할 때 직접 사용할 수 있습니다.

프레임은 본체가 정해져 있는 선반일 뿐이고, 그 안에 다양한 도구를 채워넣기만 하면 됩니다.

jquery는 무엇을 할 수 있나요? jquery 객체와 DOM 기본 객체의 차이점은 무엇입니까? 변환하는 방법?

jquery는 HTML 텍스트를 탐색하고, DOM 노드를 작동하고, 이벤트, 애니메이션 및 Ajax 기능을 처리할 수 있으므로 호환성을 고려하지 않고도 더 많은 플랫폼에서 사용할 수 있습니다.
기능은 다음과 같습니다: 경량(32kb), CSS3 호환, 크로스 브라우저,

jquery 객체와 DOM 기본 객체의 차이점은 jqery 객체는 기본 객체의 패키지 객체이며, DOM 전용 메소드가 있다는 것입니다. jquery 객체는 사용하기 매우 편리합니다.

배열([색인 번호 첨자])을 직접 사용하는 쿼리 메서드는 기본 DOM 개체로 변환됩니다. eq 메서드를 사용하면 결과도 쿼리 개체가 됩니다. 기본 개체를 jquery 개체로 변환하려면 $()로 래핑하기만 하면 됩니다.
예:

jquery 개체를 기본 > $(#head)[0]

native 개체와 jquery > $(native object)

jquery에서 이벤트를 바인딩하는 방법은 무엇입니까? 바인딩, 바인딩 해제, 위임, 라이브, 켜기, 끄기 기능은 무엇인가요? 어느 것이 권장됩니까? on을 사용하여 이벤트를 바인딩하고 이벤트 프록시를 사용하는 방법은 무엇입니까?

jquery에서는 다음과 같이 이벤트를 바인딩할 수 있습니다.

$("button").click(function() {
    alert(1);
} );
$("button").bind(&#39;click&#39;, function(e){    console.log(e);
    alert(2);
});
$("button").on(&#39;click&#39;, function(){    console.log(e);    console.log(this);    console.log($(this));
});

bind 요소에 바인딩 이벤트 추가(1.7 버전 이후에는 바인딩 대신 on 사용 권장)

unbind 요소 바인딩 이벤트 바인딩 해제(버전 이전에 사용했던 방식) 1.7) )

delegate는 하나 이상의 바인딩 이벤트를 요소에 추가하는 이벤트 프록시(요소 지정 가능)와 동일합니다(버전 1.7 이후에는 대신 on 사용을 권장함)

live는 이벤트 프록시를 사용하는 것과 동일합니다. (루트 노드의 경우) 요소에 하나 이상의 바인딩 이벤트를 추가합니다. 하나 이상의 바인딩 이벤트(버전 1.7 이후에는 더 이상 사용되지 않으며 on으로 대체됨)

on 선택한 요소 및 하위 요소에 하나 이상의 이벤트 핸들러를 추가합니다( 가장 추천하는 방법)

off는 .on() 메소드에 의해 추가된 이벤트 핸들러를 제거하는 방법입니다

on() 메소드는 위의 메소드를 통합하여 다음과 같이 작성된 .on() 메소드를 사용하는 것을 권장합니다. :

$( "#members" ).on( "click","li a",function( e ) {} );
여기서 하위 요소의 위치는 클릭 다음이라는 점에 유의하세요. 즉, 이벤트 프록시가 is Used

jquery는 어떻게 요소를 표시하거나 숨기나요? Jquery 애니메이션을 사용하는 방법은 무엇입니까?

요소 표시: $(selector).show(speed,callback);

요소 숨기기: $(selector).hide(speed,callback);

표시 및 숨기기 토글: $(selector).toggle(speed, callback);

페이드 인 및 아웃:

$(selector).fadeIn(speed,callback); //淡入
$(selector).fadeOut(speed,callback); //
淡出$(selector).fadeToggle(speed,callback); //
淡入淡出切换$(selector).fadeTo(speed,opacity,callback);  //渐变到透明度

슬라이드 인 및 슬라이드 아웃:

$(selector).slideDown(speed,callback) //슬라이드 인$(selector).slideUp(speed,callback); /Slide out $(selector).slideToggle(speed,callback); //스위치

선택적인 속도 매개변수는 숨기기/표시 속도를 지정하며 "느린", "빠른" 또는 밀리초 값을 사용할 수 있습니다.
선택적 콜백 매개변수는 숨기기 또는 표시가 완료된 후 실행될 함수의 이름입니다.

jquery animation $(selector).animate({parmas},speed,callback);

params는 필수 매개변수이며 애니메이션의 CSS 속성입니다. 속도는 느림, 빠름 또는 밀리초 값을 사용하여 애니메이션 효과의 지속 시간을 지정하는 선택적 매개변수입니다. classback은 애니메이션이 완료된 후 실행되는 함수입니다.

요소 내부에 HTML 콘텐츠를 설정하고 가져오는 방법은 무엇입니까? 요소의 내부 텍스트를 설정하고 가져오는 방법은 무엇입니까?

HTML 콘텐츠 설정 또는 가져오기: $(selector).html()

텍스트 콘텐츠 설정 또는 가져오기: $(selector).text()

매개변수가 있으면 설정을 의미하고, 매개변수가 없으면 설정을 의미합니다. 얻는 것을 의미합니다.

양식 사용자가 입력하거나 선택한 콘텐츠를 설정하고 가져오는 방법은 무엇입니까? 요소 속성을 설정하고 가져오는 방법은 무엇입니까?

양식 사용자 입력 내용 설정 또는 가져오기 $('#input').val()

양식 선택 내용 $('input:checked') 또는 $(':checked')

설정 또는 가져오기 요소 속성 가져오기 $("div").attr(e,d) e는 획득을 나타내고, d는 설정해야 하는 속성을 나타내며, 비어 있으면 획득을 나타냅니다.

특정 속성을 가진 요소 가져오기 $ ('[data-img]') 또는 $('[data-img="xxx"]')

이 기사에서는 jquery DOM 및 이벤트에 대해 설명합니다. 더 많은 관련 지식을 보려면 PHP 중국어 웹사이트를 참고하세요.

jquery DOM&이벤트에 대한 설명

관련 기사