jquery에서 js를 작성하는 방법-프런트엔드 Q&A-php.cn

jquery에서 js를 작성하는 방법

WBOY

풀어 주다： 2023-05-09 12:00:38

원래의

726명이 탐색했습니다.

jQuery는 많은 일반적인 JavaScript 작업을 단순화하는 인기 있는 JavaScript 라이브러리입니다. jQuery는 문서 탐색, 이벤트 처리, 애니메이션 효과, DOM 조작과 같은 작업에 사용할 수 있습니다. jQuery를 사용하여 JavaScript 코드를 작성할 때 코드를 더 명확하고 이해하기 쉽고 유지 관리하기 쉽게 만들려면 몇 가지 모범 사례를 따르십시오.

다음은 jQuery에서 JavaScript를 작성하기 위한 몇 가지 모범 사례입니다.

1. 페이지에서 jQuery 라이브러리를 올바르게 참조하세요.

jQuery를 사용하기 전에 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. jQuery 라이브러리를 HEAD 태그 안에 배치하여 jQuery를 사용하는 페이지의 코드보다 먼저 로드되도록 합니다. 예:

2. $(document).ready() 메소드를 사용하세요.

JavaScript 코드에서 $(document).ready() 메소드를 사용하여 페이지 DOM이 )가 로드되었습니다. 코드를 다시 실행하세요. 이렇게 하면 DOM 요소에 액세스하기 전에 해당 요소가 로드되었는지 확인할 수 있습니다. 예:

$(document).ready(function() {
// code
});

또는 약어 사용:

$(function() {
// code
});

3. 변수 캐싱 jQuery 선택기 사용

코드에서 동일한 jQuery 선택기를 여러 번 사용하는 경우 이를 변수에 저장하면 코드 성능이 향상될 수 있습니다. 예:

var $domElement = $('#dom-element');
$domElement.show();

4 필요한 경우 동일한 요소를 여러 번 선택하지 마세요. 코드에서 동일한 요소에 대해 여러 작업을 수행할 때 반복 선택을 피하기 위해 해당 요소를 변수에 캐시하는 것이 가장 좋습니다. 예:

var $domElement = $('#dom-element');

$domElement.hide();

$domElement.show();

$('#dom-element' ) .hide();
$('#dom-element').show();

5. 체인 메소드 사용

jQuery는 여러 메소드에 대한 체인 호출을 허용합니다. 이렇게 하면 코드가 더 간결해지고 코드 줄 수가 줄어듭니다. 예:

$('#dom-element').addClass('active').show();

6. 이벤트 네임스페이스를 명시적으로 지정하세요

네임스페이스를 사용하면 이벤트의 예기치 않은 부작용을 방지하는 데 도움이 됩니다. 예:

$(document).on('click.someNamespace', function() {

// code

});

$(document).off('.someNamespace');

7. events Delegates

이벤트를 여러 요소에 연결해야 할 때 이벤트 대리자를 사용하면 코드 줄 수를 줄이고 성능을 향상시킬 수 있습니다. 예:

$(document).on('click', '#dom-element', function() {

// code

});

8 ID 선택기

ID 선택 대신 클래스 선택기를 사용하세요. 브라우저는 HTML 문서의 모든 ID를 전역적으로 검색해야 하고 ID는 동일한 문서 내에서 고유해야 하기 때문에 선택기는 클래스 선택기보다 느립니다. 따라서 클래스 선택기를 사용하면 성능이 향상될 수 있습니다. 예:

$('.dom-element').hide();

대신

$('#dom-element').hide();

9를 사용하세요. of text () 메소드

요소의 내용을 수정해야 할 때 jQuery의 html() 메소드를 사용하는 것이 text() 메소드보다 빠릅니다. text() 메서드를 사용할 때는 브라우저가 요소의 텍스트를 얻기 위해 전체 DOM 트리를 순회해야 하지만 html() 메서드를 사용할 때는 이를 수행할 필요가 없기 때문입니다. 예:

$('#dom-element').html('new content');

10. DOM 요소 속성 캐시

동일한 요소의 속성에 여러 번 액세스해야 하는 경우 해당 요소를 다음으로 캐시하세요. 성능 향상을 위한 변수

var $domElement = $('#dom-element');

var elementOffset = $domElement.offset();

11 AJAX 요청을 처리하려면 $.ajax() 메서드를 사용하세요.

jQuery의 $.ajax를 사용하세요. () 메소드는 AJAX 요청을 편리하게 처리할 수 있습니다. $.ajax() 메소드를 사용하면 요청된 URL, HTTP 메소드, 데이터 유형 등을 지정할 수 있습니다. 예:

$.ajax({

url: 'ajax-url',

메소드: 'POST',

data: {name: 'value'},

dataType: 'json',