jQuery는 JavaScript™ 및 AJAX(Asynchronous JavaScript + XML, Asynchronous Javascript and XML) 프로그래밍을 단순화하는 Javascript 라이브러리입니다. 다른 Javascript 라이브러리와 달리 jQuery에는 코드 작성을 쉽게 해주는 자체 철학이 있습니다. 이 기사에서는 jQuery의 철학을 이해하고, 특징과 기능에 대해 논의하고, 몇 가지 Ajax 예제와 플러그인을 사용하여 jQuery를 확장하는 방법을 제공합니다.
1. jQuery란 무엇입니까?
jQuery는 2006년에 탄생했으며 John Resig에 의해 만들어졌습니다. JavaScript 초보자이지만 DOM(Document Object Model)과 Ajax의 복잡성을 시험해보고 싶거나, JavaScript 전문가이지만 지루한 DOM 및 Ajax 스크립트를 반복하는 데 지친 여러분이라면 jQuery가 최선의 선택이 될 것입니다. .
jQuery는 코드를 단순하고 간결하게 유지하는 데 도움이 됩니다. 더 이상 반복적인 루프나 DOM 호출 스크립트를 많이 작성할 필요가 없습니다. jQuery를 사용하면 최소한의 코드로 빠르게 핵심 사항을 찾고 아이디어를 표현할 수 있습니다.
jQuery의 철학은 실제로 매우 간단합니다. 간단하고 재사용이 가능합니다. 이 아이디어를 이해하고 동의하면 jQuery를 사용하여 프로그래밍을 얼마나 쉽고 즐겁게 만들 수 있는지 깨닫기 시작할 수 있습니다!
2. 몇 가지 간단한 개념
다음은 jQuery가 작성하는 코드에 어떤 영향을 미치는지 보여주는 간단한 예입니다. 페이지의 특정 영역에 있는 모든 링크에 클릭 응답 이벤트를 추가하는 것처럼 실제로 수행하는 작업은 일반 Javascript 및 DOM을 사용하여 작성할 수 있습니다. 코드는 Listing 1을 참조하세요
. jQuery
var external_links = document.getElementById('external_links');var link = external_links.getElementsByTagName('a');for (var i=0;i <links.length;i++) {var link = link.item(i) ;link.onclick = function() {return verify('방문 예정: ' + this.href);};} jQuery를 사용하는 경우 구현은 다음과 같습니다. 목록 2. jQuery$('를 사용한 DOM 스크립팅 #external_links a').click( function() {return verify('방문 예정: ' + this.href);}); jQuery를 사용하면 핵심을 빠르게 찾아 군더더기 없이 표현하고 싶은 것만 표현할 수 있습니다. 이러한 요소를 반복할 필요는 없으며 click() 함수가 모든 것을 처리합니다. 그리고 DOM을 조작하기 위해 너무 많은 코드를 작성할 필요가 없습니다. 필요한 것은 몇 개의 문자를 사용하여 찾고 있는 요소를 정의하는 것뿐입니다. 몇 가지 트릭을 사용하여 이 코드가 어떻게 작동하는지 살펴보겠습니다. 먼저 jQuery에서 가장 유용하고 강력한 함수 중 하나인 $() 함수를 살펴보세요. 대부분의 경우 이 함수를 사용하여 문서에서 요소를 선택합니다. 이 예제에서는 이 함수를 사용하여 계단식으로 문자열을 전달합니다. 스타일 시트(CSS) 구문은 jQuery에서 이 요소를 쉽게 찾을 수 있습니다. 기본 CSS 선택기에 대해 조금 알고 있다면 이 구문이 꽤 익숙해 보일 것입니다. Listing2에서 # external_links는 ID가 external_links인 요소를 찾는 데 사용됩니다. 다음 공백은 jQuery가 #external_links 요소 내에서 모든 <a> 요소를 찾아야 함을 의미합니다. 이를 음성 언어로 표현하기가 약간 어렵습니다. DOM 스크립트로 작성하는 것도 꽤 번거롭지만 CSS에서는 이보다 더 간단한 것은 없습니다. $() 함수는 CSS 선택기와 일치하는 모든 요소를 포함하는 jQuery 객체를 반환합니다. jQuery 객체의 개념은 배열과 비슷하지만 예를 들어 click을 호출할 수 있습니다. jQuery 개체의 각 요소에 클릭 이벤트 응답을 바인딩하는 함수입니다.
요소 또는 요소 배열을 $() 함수에 전달할 수도 있습니다. 그러면 모든 요소가 jQuery 개체로 압축됩니다. 예를 들어, 이 기능을 사용하여 다음과 같이 이벤트를 로드할 수 있습니다.
window.onload = function() {// 페이지 로드가 완료되면 이 작업을 수행합니다.}; jQuery를 사용하는 경우 다음과 같이 작성할 수 있습니다.
$(window).load(function() {// 전체 페이지가 다운로드되면 실행}) 아시다시피, 창의 모든 내용을 포함하여 전체 페이지를 로드해야 하기 때문에 창이 로드되기를 기다리는 것은 매우 고통스럽습니다. 어떤 경우에는 이미지를 먼저 로드해야 하지만 대부분의 경우 HTML(Hypertext Markup)만 보면 됩니다. jQuery는 문서에 준비된 매우 특별한 이벤트를 생성하여 이 문제를 해결합니다. 사용 방법은 다음과 같습니다: $(document).ready(function() {// HTML이 모두 준비되면 이 작업을 수행합니다.}) 이 코드는 문서 요소의 jQuery 객체를 생성한 다음 html DOM이 호출될 때 이를 호출합니다. 문서가 준비되었습니다. 또한 이 함수는 무제한으로 호출할 수 있습니다.
진정한 jQuery 스타일 코딩에는 이 함수의 단축 형식도 있습니다. 간단히 $() 함수에 함수를 전달하면 됩니다.
$(function() {// HTML 다운로드가 완료되면 실행합니다.}); 지금까지 $() 함수를 사용하는 세 가지 방법을 보여 주었습니다. 네 번째 방법은 문자열을 사용하여 요소를 만드는 것입니다. 결과는 이 요소를 포함하는 jQuery 객체입니다. 목록 3은 페이지에 단락을 추가하는 예를 보여줍니다.
목록 3. 간단한 단락 만들기 및 추가
$('<p></p>'). !').css('Background', 'yellow').appendTo("body"); 위의 예에서 볼 수 있듯이 jQuery의 또 다른 매우 강력한 기능은 호출할 때마다 발생하는 메서드 체이닝(메서드 체이닝)입니다. jQuery 개체에 대한 메서드를 사용하면 이 메서드는 jQuery 개체도 반환합니다. 이는 jQuery 개체에 대해 여러 메서드를 호출해야 하는 경우 CSS 선택기를 반복적으로 작성할 필요가 없음을 의미합니다.
$('#message').css('ground', 'yellow').html('Hello!').show();3.jQuery는 Ajax를 매우 간단하게 만듭니다. jQuery를 사용하면 Ajax가 더 이상 간단해지지 않습니다. Ajax의 일반적인 용도는 페이지의 특정 영역에 HTML 코드를 로드하는 것입니다. 다음은 일부 통계를 업데이트하는 예입니다. 일반적으로 일부 매개변수를 서버에 전달해야 할 수 있습니다. 짐작하셨겠지만 jQuery를 사용하는 것은 매우 간단합니다. 물론 필요에 따라 $.post() 또는 $.get()을 사용할 수 있습니다. 선택적 데이터 객체 및 콜백 함수 목록 4는 데이터 전송 및 콜백 함수 사용의 간단한 예입니다.
목록 4. Ajax를 사용하여 페이지에 데이터 전송
$.post('save.cgi', {text: 'my string' ,number: 23}, function() {alert('데이터가 저장되었습니다.');}); 실제로 복잡한 Ajax 코드를 원하는 경우 $.ajax() 함수를 사용하여 데이터 유형을 지정할 수 있습니다. xml, html, script 또는 json, jQuery는 자동으로 결과를 준비하며 콜백 함수는 즉시 데이터를 사용할 수 있습니다. beforeSend, 오류, 성공 및 전체 콜백 함수를 설정하여 사용자에게 ajax에 대한 추가 힌트를 제공할 수도 있습니다. 또한 Ajax 요청에 대한 시간 초과 또는 페이지의 "마지막 변경" 상태를 설정할 수 있는 몇 가지 매개변수가 있습니다. Listing5는 위에서 언급한 방법을 사용하여 XML 문서를 가져오는 예를 보여줍니다. 일부 매개변수의 예:
목록 5. $.ajax()
$.ajax({url: 'document.xml',type: 'GET',dataType: 'xml',timeout: 1000, error: function
으로 단순해진 복잡한 Ajax(){alert('Error loading XML document');},success: function(xml){// xml로 작업 수행}}); xml 피드백을 성공적으로 받으면 jQuery를 사용하여 xml 문서를 탐색할 수 있습니다.
html에서와 마찬가지로 xml 파일을 조작하고 콘텐츠를 페이지에 통합하는 것이 매우 간단해졌습니다.Listing 6
은 페이지의 xml 문서에 있는 각 <item>에 따라 목록 항목을 추가했습니다.
. jQuery를 사용하여 XML 작업
성공: function(xml){$(xml).find('item').each(function(){var item_text = $(this).text();$('<li>< /li>').html(item_text).appendTo('ol');});}