jQuery의 API, 이벤트 및 다중 라이브러리 공존에 대한 간략한 소개

이 기사는 jQuery의 API, 이벤트 및 여러 라이브러리의 공존에 대해 간략하게 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

API

prop() 및 attr()#🎜 🎜#

prop() 메소드는 HTML 속성을 변경하는 대신 DOM 요소에 영향을 미치는 동적 상태를 변경하는 데 사용됩니다. 예: 비활성화됨, 선택됨.

val()

양식 요소(입력, 선택, 텍스트 영역)의 값을 설정하거나 반환합니다.

width() and height()

일치하는 요소의 너비와 높이 값을 설정하거나 가져오고 숫자를 반환합니다. (단위 없음) ), $(selector).css('width') 는 문자열(단위 포함)을 반환합니다.

offset()

Get: 반환 값 {왼쪽: 숫자, 위쪽: 숫자}는 상대 위치입니다. 문서.

Settings: 요소의 위치가 지정되지 않은 경우(예: 위치: 정적) 상대 요소로 수정됩니다.

position()

위치 지정이 있는 가장 가까운 상위 요소를 기준으로 일치하는 요소를 가져옵니다(예: 위치가 정적이 아님). ) {왼쪽: 숫자, 위쪽: 숫자} 위치는 설정할 수 없습니다.

scrollLeft() 및 scrollTop().

요소의 가로 및 세로 위치, 숫자 유형을 가져오거나 설정합니다.

세로 스크롤 막대 위치는 스크롤 가능 영역의 표시 영역 위 숨겨진 영역의 높이입니다.

스크롤 막대가 상단에서 스크롤되지 않거나 현재 요소에 스크롤 막대가 없는 경우 이 거리는 0입니다.

Event

이벤트 바인딩 바인딩(), 대리자() 및 켜기( )

bind()는 1.7 이후에 on()으로 대체되었으며, 여러 이벤트를 바인딩했습니다. $(selector).on('dblclick contextment', function(){}); zepto와도 호환됩니다. 하지만 두 방법의 단점은 바인딩할 요소가 문서에 반드시 존재해야 한다는 것입니다.

구문: $(selector).on('events'[, 'selector'][, data], handler); 첫 번째 매개변수는 표준 이벤트 이름이거나 사용자 정의 이벤트(트리거됨)일 수 있습니다. by Trigger), 두 번째와 세 번째 매개변수는 생략 가능하며, 두 번째 매개변수는 매칭 요소의 자손 요소, 세 번째 매개변수는 처리 함수로 전달되는 데이터, 즉 함수 내 event.data를 통해 수신되는 데이터입니다.

delegate() 지원은 동적으로 생성된 요소에 유효합니다.

구문: $('p').delegate('p', 'mousemove', function(){}); div 아래의 p에 mousemove 이벤트를 바인딩합니다(향후 생성되는 이벤트 포함). ).

Event unbind(), unelegate() 및 off()

매개변수를 전달하지 않고 일치하는 요소의 모든 이벤트 바인딩을 해제합니다. 그렇지 않으면 바인딩을 해제합니다. 지정된 매개변수를 사용하는 이벤트입니다.

$(selector).off('click', '**'); 모든 에이전트의 클릭 이벤트를 해제하지만 요소 자체의 이벤트는 해제되지 않습니다.

이벤트 트리거 Trigger() 및 TriggerHandler()

간단한 트리거: $(selector).click();

trigger() 트리거 이벤트 , 브라우저 동작을 트리거합니다. $(selector).trigger("click");
triggerHandler()는 이벤트 응답 방법을 트리거하고 브라우저 동작을 트리거하지 않습니다. $(selector).triggerHandler("focus");

Event object event

event.data 이벤트 핸들러에 전달되는 추가 데이터 # 🎜🎜#

event.currentTarget은 현재 DOM 객체를 참조하여 이와 동일합니다.

event.target은 이벤트 소스를 트리거하지만 반드시 이와 같을 필요는 없습니다(일반적으로 이벤트 대리자에 나타납니다) ) #🎜🎜 #

event.type 이벤트 유형

event.어떤 마우스 버튼 유형: 왼쪽 1, 가운데 2, 오른쪽 3 또는 키보드 코드
#🎜 🎜#event.keyCode 키보드 코드

event.pageX 문서의 왼쪽 가장자리를 기준으로 한 마우스의 위치

체인 프로그래밍# 🎜🎜#

# 🎜🎜#Principle: return this;

보통 설정 연산만 연쇄 연산이 가능하며, 획득 연산 시 해당 값이 반환되며, 이는 반환될 수 없습니다.

end()는 현재 체인의 최신 필터링 작업을 종료하고 일치하는 요소 이전의 상태를 반환합니다.

다중 저장소 공존

jQuery占用了$ 和jQuery这两个变量，如果同一个页面引用了jQuery库，还引用了其他库或者其他版本的jQuery也用的了$或jQuery这个变量，为了保证每个库都能正常使用，就需要让jQuery交出变量的控制权。
$.noConflict(); 交出$
$.noConflict(true); 交出$ 和 jQuery

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    console.log($.fn.jquery); // 3.2.1
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict();
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 3.2.1
</script>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $.noConflict(true);
    console.log($.fn.jquery); // 2.2.4
    console.log(jQuery.fn.jquery); // 2.2.4
</script>

위 내용은 jQuery의 API, 이벤트 및 다중 라이브러리 공존에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!