jQuery를 개선하고 효율성을 1000배 향상시키는 25단계_jquery

1. Google 코드에서 jQuery 로드 Google 코드는 다양한 JavaScript 라이브러리를 호스팅하므로 서버에서 직접 로드하는 것보다 낫습니다. 더 많은 장점. 서버의 대역폭을 절약 하고 Google의 콘텐츠 배포 네트워크(CDN)에서 JS 라이브러리를 빠르게 로드할 수 있습니다. 더 중요한 점은 사용자가 Google 코드에 게시된 사이트를 방문하면 해당 사이트가 캐시된다는 것입니다. 말이 됩니다. 캐시되지 않은 동일한 jQuery 복사본을 사용하는 사이트는 몇 개이며 이는 수행하기 쉽습니다.

"> /스크립트>

2. 치트시트를 활용하세요 jQuery뿐만 아니라 많은 프로그래밍 언어에도 비슷한 치트시트가 있는데, A4 안에 있으면 쉽습니다. 각 기능이 종이에서 어떻게 사용되는지 확인하세요. 다행히도 몇몇 친절한 사람들이 이미 완벽한 jQuery 치트 시트를 만들었습니다. http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat -sheet/ http://colorcharge.com/jquery/

3. 모든 스크립트를 통합하고 축소합니다. 예, 이것은 일반적인 JavaScript 트릭입니다. 하지만 jQuery를 사용하는 대규모 프로젝트에서는 관련 jQuery 플러그인(이 사이트에서는 easing, localScroll, lightbox, preload를 사용함)을 많이 사용할 수 있으므로 일반적으로 적용 가능합니다. 브라우저는 (대부분의 경우) 동시에 JS 스크립트를 로드할 수 없습니다. 즉, 동시에 많은 스크립트를 로드하면 페이지 로딩 속도가 느려집니다. 따라서 이러한 스크립트를 모든 페이지에 로드하려면 게시하기 전에 이러한 스크립트를 약간 더 큰 JS 스크립트로 통합하는 것을 고려해야 합니다. 일부 jQuery 플러그인은 이미 축소되어 있지만 JS 스크립트와 축소되지 않은 스크립트를 패키징해야 하며 완료하는 데 몇 초 밖에 걸리지 않습니다. 개인적으로는 Dean Edwards의 Packer

를 추천합니다. 4. Firebug의 뛰어난 콘솔 로깅 도구를 사용하세요. 아직 Firebug를 설치하지 않았다면 꼭 설치해야 합니다. 다른 많은 유용한 기능(예: http 트래픽을 검사하고 CSS 문제를 찾는 기능) 외에도 JS 스크립트를 쉽게 디버깅할 수 있는 뛰어난 로깅 명령도 있습니다. Firebug 의 모든 기능에 대한 자세한 설명은 다음과 같습니다. 제가 가장 좋아하는 기능은 " console.info "인데, 이를 사용하면 경고를 사용하지 않고도 정보와 변수 값을 콘솔에 출력할 수 있습니다. JS 스크립트가 실행되는 데 걸리는 시간을 계산하기 위해 코드 세트에 타이머를 설정할 수 있습니다. 모두 쉽습니다:

코드 복사 코드는 다음과 같습니다: console. time( '목록 생성'); for (i = 0; i var myList = $('.myList') myList.append('이것은 목록입니다. item ' i); console.timeEnd('create list');

5. 캐싱을 통해 선택 작업 최소화 jQuery의 선택자는 정말 훌륭합니다. 이는 페이지의 요소를 찾는 매우 간단한 방법이지만 내부적으로는 선택 작업을 수행하기 위해 많은 단계를 거쳐야 하며, 잘못 사용하면 모든 것이 상당히 느려지는 것을 발견할 수 있습니다. 동일한 요소를 반복해서 선택하는 경우(예: 루프에서) 해당 요소를 한 번 선택하여 메모리에 넣을 수 있으며 핵심 콘텐츠에서 조작할 수 있습니다. 아래 예를 보면 루프를 사용하여 UL에 항목을 추가합니다.

코드를 복사합니다. 코드는 다음과 같습니다. for (i = 0; i var myList = $('.myList') myList.append('목록 항목입니다. ' 나) }

내 PC Firefox 3에서는 1066밀리초가 걸렸는데(IE6에서는 상상해 보세요!) 이는 JavaScript의 경우 상당히 느립니다. 이제 하나의 선택 작업만 사용하는 다음 코드를 살펴보겠습니다. 코드 복사 코드는 다음과 같습니다. : var myList = $('.myList'); for (i = 0; i myList.append('목록 항목입니다. ' i) ; } 단 224밀리초밖에 걸리지 않았는데, 이는 코드 한 줄을 이동하는 것보다 거의 4배 빠른 속도입니다.

6. DOM 작업 최소화 DOM에 대한 삽입 작업을 줄여 위 코드를 더 빠르게 실행할 수 있습니다. DOM 삽입 작업(예: .append(), .prepend(), .after(), .wrap())은 시간이 많이 걸리며 이러한 작업을 수행하면 프로그램 실행 속도가 느려집니다. 우리가 해야 할 일은 문자열 연결을 사용하여 항목 목록을 구성하고 .html()과 같은 함수를 사용하여 목록에 항목을 추가하는 것뿐입니다. 다음 예를 참조하세요. 코드 복사 코드는 다음과 같습니다. var myList = $(' #myList'); for (i=0; i myList.append('목록 항목입니다. ' i); > 내 PC에서는 216ms가 걸렸는데, 이는 약 1/5초 정도이다. 그러나 문자열을 사용하여 목록 항목을 구성하는 경우 다음 HTML 메서드를 사용하여 삽입 작업을 완료합니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다: var myList = $('.myList'); var myListItems = '' for (i = 0; i myListItems = ' 이것은 목록 항목 ' '입니다 } myList.html(myListItems)

185밀리초가 걸렸습니다. , 많이 빠르지는 않지만 시간도 31밀리초 향상되었습니다. 7. DOM 삽입 작업을 처리할 때 필요한 콘텐츠를 요소로 래핑하세요. 글쎄, 제가 왜 이 작업을 하는지 묻지 마세요. 꽤 숙련된 프로그래머가 설명해줄 것입니다.) 위의 예에서는 .html()을 사용하여 UL에 1000개의 항목을 삽입합니다. 삽입 작업 전에 항목을 UL 태그로 래핑한 다음 전체 UL을 다른 DIV 태그에 삽입하면 실제로는 1000개 대신 태그 하나만 삽입하므로 더 효율적으로 보입니다. 다음 예를 살펴보십시오.

코드 복사 코드는 다음과 같습니다. var myList = $(' .myList'); var myListItems = ' '; for (i = 0; i myListItems = ' 이것은 목록 항목 'i'입니다. } myListItems = ' ' myListItems)

이제 소요되는 시간은 19밀리초에 불과합니다. 이는 이전의 첫 번째 예에 비해 50배나 향상된 것입니다. 8. 가능하면 클래스 대신 ID를 사용하세요 jQuery는 클래스를 사용하여 ID로 선택하는 것처럼 쉽게 DOM 요소를 선택하므로 이전보다 사용이 더 자유로워졌습니다. 요소 선택 작업을 위한 클래스는 매우 매력적입니다. 그러나 jQuery는 선택 작업을 위해 브라우저 고유의 메소드(getElementById)를 사용하므로 선택 작업에는 ID를 사용하는 것이 더 유리합니다. 얼마나 빨리? 보자. 이전 예를 사용하여 우리가 만드는 각 LI가 고유한 클래스를 갖도록 수정했습니다. 그런 다음 한 번에 하나의 요소를 선택하여 반복합니다.

코드 복사 코드는 다음과 같습니다. // 목록 만들기 var myList = $('.myList') var myListItems = ' ' for (i = 0; i myListItems = ' 목록 항목입니다 ' } myListItems = ' '; myList .html(myListItems); // 각 항목을 한 번만 선택하세요 for (i = 0; i var selectedItem = $('.listItem' i); }

예상대로 내 브라우저는 5066ms(5초 이상)가 걸렸습니다. 그래서 위의 코드를 클래스 대신 ID를 사용하고 ID로 선택하도록 수정했습니다.

코드 복사 코드는 다음과 같습니다. // 목록 만들기 var myList = $('.myList') var myListItems = ' ' for (i = 0; i myListItems = ' 목록 항목입니다 ' } myListItems = ' '; myList.html(myListItems); // 각 항목을 한 번 선택하세요 for (i = 0; i var selectedItem = $('#listItem' i); } 거의 100배 빠른 61밀리초 밖에 걸리지 않았습니다

9. 선택기에 대한 컨텍스트 제공 기본적으로 $('.myDiv')와 같은 선택기를 사용하면 전체 DOM 문서 요소에서 검색됩니다. 이는 상당한 비용이 듭니다. 선택 작업을 수행할 때 jQuery 함수는 두 번째 매개변수인 jQuery(expression, context)를 지정할 수 있습니다. 선택기에 컨텍스트를 제공하면 전체 DOM 문서가 아닌 이 컨텍스트에서 요소 검색이 수행됩니다. 강요. 이를 설명하기 위해 이전의 첫 번째 코드를 사용하겠습니다. 각각 별도의 클래스가 있는 1000개의 항목으로 UL을 생성합니다. 그런 다음 한 번에 하나의 항목을 반복하여 선택합니다. 클래스별로 1000개의 항목을 모두 선택하는데 5초 이상이 소요된다는 점 기억해 두시기 바랍니다. 코드 복사 코드는 다음과 같습니다. var selectedItem = $('#listItem' i) 그런 다음 UL에서만 선택을 수행하도록 컨텍스트를 추가했습니다. 코드 복사 코드는 다음과 같습니다. var selectedItem = $('#listItem' i, $('.myList')) 낮은 효율성, 여전히 3818밀리초가 걸렸지만 약간의 수정으로 여전히 25%의 속도 증가를 달성했습니다. 10. 메소드 체인을 올바르게 사용하세요 jQuery의 가장 멋진 기능 중 하나는 jQuery가 연속적인 메소드 호출을 할 수 있다는 것입니다. 예를 들어 요소의 클래스를 전환하려는 경우: 코드 복사 코드는 다음과 같습니다. $('myDiv').removeClass('off').addClass('on') 저처럼 나중에 사용하실 수도 있습니다. 처음 5분 안에 jQuery를 배우세요. 우선, 여전히 여러 라인에 걸쳐 작동할 수 있습니다(jQuery는 JavaScript입니다). 이는 다음과 같이 깔끔한 코드를 작성할 수 있음을 의미합니다: 코드 복사 코드는 다음과 같습니다: $('#mypanel') .find('TABLE .firstCol') .removeClass('.firstCol') .css(' background' : 'red') .append(' 이 셀은 이제 빨간색입니다 ') 연결된 목록을 사용하는 습관은 장치 사용에 대한 선택을 줄이는 데 도움이 됩니다. 그러나 하나의 요소에 대해 여러 기능을 수행하고 어떤 방식으로든 작업 요소를 변경하려는 경우 더 깊이 들어가서 사용할 수 있습니다. 코드 복사 코드는 다음과 같습니다. $('#myTable').find('.firstColumn').css('Background','red') 테이블을 선택하고 "firstColumn" 클래스가 있는 셀을 찾은 다음 배경을 빨간색으로 만들었습니다. 이제 "lastColumn" 클래스가 있는 모든 셀의 배경을 파란색으로 설정하려고 합니다. 클래스가 "firstColumn"이 아닌 모든 셀을 필터링하기 위해 find() 함수를 사용했기 때문에 테이블에서 다시 선택 작업을 사용해야 합니다. 연속 메서드 호출을 할 수는 없나요? 다행스럽게도 jQuery는 메서드 목록을 실행할 수 있도록 일치하는 요소 목록을 이전 상태로 변경하는 end() 함수를 제공합니다. 코드 복사 코드는 다음과 같습니다. $('#myTable') .find('.firstColumn') .css('Background','red' ) .end() .find('.lastColumn') .css('Background','blue') 연속 호출이 가능한 메소드 작성 사용자 정의 jQuery 기능도 쉽습니다. 당신이 하는 일은 요소를 수정하고 요소를 반환하는 함수를 작성하는 것뿐입니다. 코드 복사 코드는 다음과 같습니다. $.fn.makeRed = function() { return $(this).css('Background', 'red') } $('#myTable'); .find('.firstColumn').makeRed().append('hello') 매우 간단합니다! 11. 효과를 올바르게 사용하는 방법을 배웁니다 jQuery를 처음 사용했을 때 슬라이드다운과 같이 미리 정의된 다양한 애니메이션 효과를 쉽게 사용할 수 있다는 점이 매우 마음에 들었습니다. () 및 페이드인(). jQuery에서 제공하는 animate() 메소드는 사용하기 매우 쉽고 강력하기 때문에 심층적으로 사용하기 쉽습니다. 실제로 jQuery 소스 코드의 많은 메서드는 animate() 함수를 통해 효과를 얻습니다.

코드 복사 코드는 다음과 같습니다. slideDown: function(speed,callback){ return this.animate({height: "show"}, speed, callback) },

fadeIn: function(speed, callback){ return this.animate({ opacity: " show"}, speed, callback) } animate() 메서드는 CSS에서만 작동하며 값에 따라 원활하게 변환됩니다. 따라서 너비, 높이, 불투명도, 배경색, 위쪽, 왼쪽, 여백, 색상, 글꼴 크기 등 원하는 대로 변경할 수 있습니다. 메뉴 항목에 높이 변경을 쉽게 추가할 수 있습니다. 코드 복사 코드는 다음과 같습니다. $('#myList li').mouseover(function() { $(this).animate({"height": 100}, "slow"); }); 다른 jQuery 함수와 달리 애니메이션 효과는 자동으로 대기열에 추가되므로 첫 번째 효과가 완료된 후 두 번째 효과를 실행하려면 애니메이션 메서드를 두 번 호출해야 합니다. 코드 복사 코드는 다음과 같습니다. $('#myBox').mouseover(function() { $(this).animate({ "너비": 200 }, "느림") $(this).animate({"높이": 200}, "느림") } ); 애니메이션 효과를 동시에 발생시키려면 모든 스타일을 매개변수 개체로 메서드에 전달해야 합니다. 코드 복사 코드는 다음과 같습니다. $('#myBox').mouseover(function() { $(this) .animate({ "width" : 200, "height": 200 }, "slow"); }) 값이 숫자인 속성에 애니메이션을 적용할 수 있습니다. 색상 및 배경색 과 같은 숫자가 아닌 속성에 애니메이션을 적용하는 데 도움이 되는 플러그인을 다운로드할 수도 있습니다. 12. 이벤트 프록시 이해 JQuery를 사용하면 DOM 요소에 이벤트를 원활하게 추가하는 것이 그 어느 때보다 쉬워졌습니다. 이는 훌륭한 기능이지만 요소에 너무 많은 이벤트를 추가하는 것은 비효율적입니다. 많은 경우 이벤트 프록시를 사용하면 더 적은 수의 이벤트로 동일한 목표를 달성할 수 있습니다. 설명하는 가장 좋은 방법은 예를 사용하는 것입니다.

코드 복사 코드는 다음과 같습니다. $(' #myTable TD').click(function(){ $(this).css('배경', '빨간색'); }) 테이블을 클릭하면 위의 코드는 모든 셀 배경을 빨간색으로 만듭니다. 예를 들어, 10개의 열과 50개의 행이 있는 그리드가 있는 경우 500개의 이벤트가 여기에 바인딩됩니다. 자, 이제 이벤트 프록시가 나타날 시간입니다. 코드 복사 코드는 다음과 같습니다. $('#myTable').click(function(e) { var clicked = $(e.target); clicked.css('Background', 'red'); }) e'에는 실제로 클릭 이벤트를 수신한 대상 요소를 포함한 이벤트 정보가 포함되어 있습니다. 우리가 해야 할 일은 어떤 셀이 클릭되었는지 확인하는 것뿐입니다. 꽤 영리해요! 이벤트 프록시는 또 다른 이점을 제공합니다. 일반적으로 이벤트를 요소 컬렉션에 바인딩하면 이벤트는 컬렉션 요소에만 바인딩됩니다. DOM에 새 요소를 추가하면 이러한 새 요소가 선택기와 일치하더라도 이러한 새 요소는 이벤트 핸들러에 바인딩되지 않으므로(동의하십니까?) 이벤트가 발생하지 않습니다. 이벤트 프록시를 사용할 때 DOM에 바인딩된 후에도 일치하는 여러 요소를 이벤트에 추가할 수 있으며 정상적으로 작동합니다. 13. 클래스를 사용하여 상태 저장 이것은 html로 정보를 저장하는 가장 기본적인 방법입니다. jQuery는 클래스를 기반으로 요소를 조작하는 데 능숙하므로 요소에 대한 상태 정보를 저장해야 한다면 추가 클래스를 사용하여 저장해 보는 것은 어떨까요? 다음은 예시입니다. 확장된 메뉴를 만들고 싶습니다. 버튼을 클릭하면 SlideDown()과 SlideUp()을 통해 메뉴를 확장하고 축소하고 싶습니다. 아래 HTML을 보세요. 코드 복사 코드는 다음과 같습니다. &lt ;div class=" menuItem Expanded"> 클릭하세요 🎜> 메뉴 항목 1 메뉴 항목 2 메뉴 항목 3

아주 간단합니다! 항목의 상태를 알려주는 래퍼 DIV에 추가 클래스를 추가하기만 하면 됩니다. 따라서 버튼을 클릭한 후 필요한 것은 클릭 이벤트 처리뿐이며, 이는 해당 SlideUp() 및 SlideDown() 메서드를 실행합니다.

코드 복사 코드는 다음과 같습니다. $('.button').click (function( ) { var menuItem = $(this).parent(); var panel = menuItem.find('.panel');

if (menuItem.hasClass ("확장됨")) { menuItem.removeClass('expanded').addClass('collapsed') panel.slideUp() } else if (menuItem.hasClass(" Collapsed") ) { menuItem.removeClass('collapsed').addClass('expanded'); panel.slideDown(); } });

이것은 매우 간단한 예이지만 요소나 HTML 조각에 추가 클래스를 추가하여 모든 종류의 정보를 저장할 수 있습니다. 그러나 간단한 상황 외에도 다음 기술을 사용해야 합니다.

14. 더 좋은 방법은 jQuery에 내장된 data() 메서드를 사용하여 상태를 저장하는 것입니다. 어떤 이유로든 이에 대한 좋은 문서가 없습니다. . jQuery는 DOM 요소와 달리 키/값 유형 데이터를 저장하는 데 사용할 수 있는 내장 data() 메서드를 제공합니다. 데이터 저장은 매우 쉽습니다. 코드 복사 코드는 다음과 같습니다. $ ('# myDiv').data('currentState', 'off');

동일한 HTML 콘텐츠를 사용할 수 있도록 이전 예제의 코드를 수정합니다. " 클래스) 및 data() 함수를 사용하여 상태를 저장합니다.

코드 복사 코드는 다음과 같습니다. $ ('.button').click(function() { var menuItem = $(this).parent(); var panel = menuItem.find('. 패널');

if (menuItem.data('collapsed')) { menuItem.data('collapsed', false) panel.slideDown() } 🎜>else { menuItem.data('collapsed', true) panel.slideUp() } }); 이 방법을 사용하는 것이 실제로 더 정교하다는 데 동의하시리라 믿습니다. data() 및 RemoveData()에 대한 자세한 내용은 jQuery 내부 를 확인하세요. 🎜 > 15. 자신만의 선택기 작성 jQuery에는 ID, 클래스, 태그, 속성 및 기타 요소별로 선택할 수 있는 선택기가 많이 내장되어 있습니다. 하지만 다른 콘텐츠를 기반으로 요소를 선택해야 하는데 jQuery가 이 선택기를 제공하지 않는 경우 어떻게 할 수 있나요? 한 가지 해결책은 처음부터 요소에 클래스를 추가한 다음 이러한 클래스를 요소 선택 작업에 사용하는 것입니다. 그러나 새로운 선택기로 jQuery를 확장하는 것은 어렵다는 것이 입증되었습니다. 예제를 사용하여 설명하는 것이 가장 좋습니다.

코드 복사 코드는 다음과 같습니다. $.extend($.expr[':'], { 100픽셀 이상: function(a) { return $(a).height() > 100; } });

$('.box:over100pixels').click(function() { alert('클릭한 요소의 높이가 100픽셀을 초과합니다.'); }) ;

코드의 이전 부분에서는 100px보다 긴 모든 요소를 찾는 사용자 정의 선택기를 만듭니다. 다음 코드는 선택기를 사용하여 찾은 요소에 클릭 이벤트를 바인딩합니다. 여기서 더 자세히 설명하지는 않겠지만, 얼마나 강력한지 상상이 가실 겁니다! Google에서 "custom jquery selector"를 검색하면 이에 대한 많은 예를 볼 수 있습니다.

16. HTML을 최소화하고 페이지 로드 후 수정하세요. 이 제목은 큰 의미가 없을 수도 있지만 이 방법을 사용하면 코드를 간소화하고 코드 크기와 페이지 다운로드 시간을 줄여 HTML을 최적화할 수 있습니다. 검색 엔진. 아래 예를 참조하세요.

코드 복사 코드는 다음과 같습니다. 필드 번호 1 ; &lt ;div class="message"> 오류 메시지입니다 필드 번호 2 /div> 오류 메시지입니다 🎜>

위는 HTML의 구체적인 예이며 설명을 위해 약간 수정되었습니다. 나는 여러분도 이 코드가 꽤 추악하다고 생각할 것이라고 믿습니다. 이와 같은 코드가 너무 길면 다소 길고 보기 흉한 페이지가 됩니다. 따라서 다음과 같이 처리할 수 있습니다.

코드를 복사합니다.

코드는 다음과 같습니다. 필드 1입니다 필드 2입니다 이것은 필드 3입니다 이것은 필드 4입니다 이것은 필드 5입니다 jQuery 작업을 통해 페이지 로드가 완료된 후 보기 흉한 HTML을 다시 추가하기만 하면 됩니다.

코드 복사

코드는 다음과 같습니다. $(document).ready(function() { $('.field').before('&lt ;div class="fieldOuter "> ') $('.field').after(' 오류 메시지입니다 ') }); 이렇게 하는 것이 항상 권장되는 것은 아닙니다. 페이지가 로드된 후 잠시 동안 페이지가 깜박이는 것을 볼 수 있지만 어떤 경우에는 반복되는 HTML 콘텐츠가 많은 경우 이 방법을 통해 표시할 수 있습니다. 페이지 코드를 크게 줄입니다. 크기를 줄이고 관련성이 없고 반복적인 태그를 줄이는 것은 SEO에 도움이 될 수 있습니다. 17. 속도 및 SEO를 고려하여 콘텐츠 로딩을 지연합니다. 페이지 로딩 속도를 향상하고 Spiders에서 검색한 HTML 콘텐츠를 매끄럽게 만드는 방법도 있습니다. AJAX 요청을 사용하여 페이지가 로드된 후 나중에 추가 콘텐츠를 로드함으로써 사용자는 즉시 탐색을 시작할 수 있으며 스파이더가 색인을 생성하려는 콘텐츠를 볼 수 있습니다. 우리는 이미 우리 웹사이트에서 이 기술을 사용하고 있습니다. 이 페이지 상단에 있는 보라색 버튼을 누르면 3개의 테이블, 길찾기, Google 지도가 팝업되어 페이지 크기가 3배로 커집니다. 따라서 이러한 HTML 콘텐츠를 정적 페이지에 넣고 페이지가 로드된 후 load() 함수를 통해 로드하기만 하면 됩니다. 코드 복사 코드는 다음과 같습니다. $('#forms').load('content/headerForms.html', function() { // 여기에서 실행되는 코드는 콘텐츠가 로드되면 // 모든 이벤트 핸들러 등을 여기에 배치하세요. }) 페이지 어디에서나 이 방법을 사용하지는 않습니다. 이것에 무게를 달아야합니다. 추가 페이지 요청이 필요하고 페이지의 일부 콘텐츠가 사용자에게 즉시 표시되지 않을 수 있지만 이 기술을 올바르게 사용하면 최적화에 매우 도움이 될 수 있습니다. 18. jQuery에서 제공하는 도구 기능을 사용하세요. jQuery에는 플래시 효과 이상의 기능이 있습니다. jQuery 작성자는 JacaScript의 일부 단점을 보완하는 몇 가지 매우 실용적인 방법도 제공합니다. http://docs.jquery.com/Utilities 특히, 일부 일반적인 배열 기능에 대한 브라우저 지원을 제공하는 것이 패치입니다. jQuery는 배열에서 중복 항목을 반복, 필터링, 복제, 병합 및 제거하는 방법을 제공합니다. 일반적으로 사용되는 기타 기능으로는 드롭다운 상자에서 선택 항목 가져오기가 있습니다. 기존 JavaScript 메서드를 사용하면 getElementById를 사용하여 요소를 가져온 다음 하위 요소를 순회하여 선택한 요소를 찾아야 합니다. jQuery는 매우 사용하기 쉬운 방법을 제공합니다: 코드 복사 코드는 다음과 같습니다: $ ('#selectList').val(); 공식 웹사이트에서 jQuery 문서와 덜 일반적으로 사용되는 방법을 탐색하는 데 시간을 할애하는 것이 좋습니다. 19. jQuery 개체의 이름을 바꾸려면 noConstrict를 사용하세요. 대부분의 JavaScript 프레임워크는 $ 기호를 같은 페이지에서 약어로 사용합니다. 갈등이 쉽게 발생할 수 있습니다. 다행히도 쉬운 방법이 있습니다. noContribute() 함수는 $ 제어를 반환하고 이를 사용자 고유의 변수 이름으로 설정할 수 있도록 합니다. 코드 복사 코드는 다음과 같습니다. $('#selectList').val() 20. 이 역시 잘 문서화되지 않은 질문이지만(적어도 제가 찾아봤을 때는 아님), 사진 갤러리 생성, 랜턴 회전 효과 등에 관해서는 상당히 일반적인 요구 사항입니다. . 그리고 이것은 jQuery에서 매우 쉽게 달성할 수 있습니다. IMG에서 .load() 메서드를 사용하고 그 안에 콜백 함수를 추가하기만 하면 됩니다. 다음 예에서는 이미지 src의 속성을 변경하고 간단한 로드 함수를 추가합니다. 코드 복사 코드는 다음과 같습니다. $('#myImage').attr('src', 'image.jpg').load(function() { alert('이미지 로드됨'); }) ; 이미지가 로드되면 경고가 표시됩니다. 21. 항상 최신 버전을 사용하세요 jQuery는 계속 업데이트되고 있으며, 작성자인 John Resig는 항상 jQuery 성능을 향상시킬 수 있는 방법을 찾고 있습니다. jQuery의 현재 버전은 1.3.2이고 John은 선택기 성능을 크게 향상시킬 수 있는(Firefox에서 최대 4배) 새로운 선택기 엔진인 Sizzle을 작성한다고 발표했습니다. 따라서 우리는 이를 최신 상태로 유지해야 합니다. 22. 요소가 있는지 확인하는 방법 해당 요소가 존재하면 페이지에 요소가 있는지 확인할 필요가 없습니다. DOM에서 찾을 수 없으면 jQuery는 아무 작업도 수행하지 않습니다. 하지만 요소가 선택되었는지 또는 항목이 몇 개 선택되었는지 확인해야 하는 경우 길이 속성을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다. if ($('#myDiv).length) { // 코드 } 매우 단순한. 23. HTML 속성에 JS 클래스 추가 저는 Karl Swedberg에게서 이 기술을 배웠고, jQuery를 배울 때 그의 책을 읽었습니다. 그는 최근 내 이전 글에 이 사용법에 대한 코멘트를 남겼습니다. 기본 원칙은 다음과 같습니다. 먼저 jQuery가 로드된 후 코드 복사 코드는 다음과 같습니다. $('HTML').addClass('JS') 이것은 javascript가 유효한 경우에만 발생하므로 사용자가 JavaScript 스위치를 켜면 발생합니다. , 그런 다음 사용할 수 있습니다. 요소에 CSS 스타일 추가:

코드 복사 코드는 다음과 같습니다. .JS #myDiv{display:none ;} 이것이 의미하는 바는 JavaScript가 켜져 있을 때 콘텐츠를 숨긴 다음 필요할 때 jQuery를 사용하여 해당 콘텐츠를 표시할 수 있다는 것입니다(예: 축소 또는 확장) 사용자 클릭 시 콘텐츠), JavaScript를 끄고(그리고 Spiders 검색) 모든 것을 볼 수 있습니다. 나중에 이 트릭을 사용하겠습니다. 여기에서 그의 모든 기사 를 보실 수 있습니다. 24. 기본 동작을 방지하려면 'false'를 반환합니다. 이는 명백할 수도 있고 그렇지 않을 수도 있습니다. 이런 버릇이 있으신 분은 코드 복사 코드는 다음과 같습니다. 나를 클릭하세요! 그런 다음 다음 이벤트 핸들러를 추가하세요.

복사 코드 코드는 다음과 같습니다. $('popup').click(function(){ // 팝업 코드 실행 } );

긴 페이지에서 위 방법을 사용하면 문제가 없을 수 있습니다. 때때로 링크를 클릭하면 앵커가 페이지 상단으로 이동하는 것을 볼 수 있습니다. 기본 동작을 방지하기만 하면 됩니다. 아니면 실제로 이벤트의 기본 동작에 "return false;"를 추가할 수도 있습니다. 이렇게:

코드 복사 코드는 다음과 같습니다. $('popup') .click( function(){ // 팝업 코드 실행 return false; })

25.ready event의 약어 약간의 트릭이지만 $(document).ready()의 약어를 사용하면 몇 글자를 절약할 수 있습니다. 바꾸기:

코드 복사 코드는 다음과 같습니다. $(document) .ready( function (){ // 코드 }); 다음과 같이 축약할 수 있습니다:

코드 복사 코드는 다음과 같습니다. $(function (){ // 귀하의 코드 }); >