jquery 가이드/시작하기_jquery

가이드/기본

jquery를 시작하는 데 도움이 되는 기본 가이드입니다. jquery는 일반적인 문제에 대한 솔루션을 제공합니다. 아직 테스트 페이지를 만들지 않았다면 다음 콘텐츠로 HTML 페이지를 만드는 것이 좋습니다. 프로그램 코드

코드 복사 코드는 다음과 같습니다. src="link /to/jquery.js"> // 여기에 코드가 입력됩니다. &lt ;/head> jQuery jquery.js를 가리키도록 스크립트 태그의 src 속성을 수정합니다. 예를 들어 jQuery.js가 HTML 파일과 동일한 디렉터리에 있는 경우 다음을 수행할 수 있습니다. 프로그램 코드 문서 로드 시 코드 실행 먼저, 대부분의 JavaScript 프로그래머는 프로그램 코드 window.onload = function() HTML 문서의 요소에 액세스하려면 먼저 DOM(문서 개체 모델)을 로드해야 합니다. window.onload 함수가 실행되면 이미지, 배너 등 모든 것이 로드되었음을 의미합니다. 큰 이미지의 다운로드 속도는 느려지므로 사용자는 기다리는 데 오랜 시간이 걸리는 window.onload() 실행의 코드 효과를 보려면 큰 이미지가 다운로드될 때까지 기다려야 합니다. 우리가 원하는 것이 아닙니다.

이를 위해 jquery는 "ready" 이벤트를 제공하며 다음 코드 조각을 사용할 수 있습니다. 프로그램 코드 $(document).ready(function(){ // code }); $(document)는 문서 개체를 가져오는 것을 의미합니다(window.document와 유사). $(document).ready는 문서 개체가 준비되었을 때 가져오는 것을 의미합니다. 위 코드의 의미는 문서 개체가 작동이 허용될 때까지 확인하는 것입니다(번역자 참고 사항: 문서 개체가 로드되는 동안에는 window.onload() 함수보다 훨씬 빠릅니다. 페이지의 이미지 다운로드가 완료될 때까지 기다리지 않고 코드를 실행할 수 있습니다.) --- 이것이 우리가 원하는 것입니다. 따라서 위의 코드 조각을 테스트 페이지의 스크립트 영역에 붙여넣으세요!

마우스 클릭 시 트리거 먼저 마우스가 하이퍼링크를 클릭할 때 특정 동작을 트리거하려고 합니다. 준비된 함수에 다음 코드를 추가합니다. 프로그램 코드 $("a").click(function(){ alert("Thank you for presents!"); });

HTML 파일을 저장하고 페이지를 새로고침하세요. 하이퍼링크를 클릭하면 페이지에 경고 대화 상자가 나타납니다.

CSS 클래스 추가 또 다른 일반적인 작업은 요소의 CSS 클래스를 추가하거나 제거하는 것입니다. 예: 프로그램 코드 $("a").addClass( "test"); $("a").removeClass("test")

페이지 상단에 추가한 경우: 프로그램 코드 a{text-weight:bolder} 그런 다음 addClass 함수를 호출하면 모든 하이퍼링크의 글꼴이 굵게 표시됩니다.

특수 효과 효과 모듈은 일련의 유용한 특수 효과를 제공합니다.

다음 코드 추가: 프로그램 코드 $("a").click(function(){ $(this).hide("slow"); return false; }); 이제 하이퍼링크를 클릭하는 동안 하이퍼링크는 서서히 사라집니다. "return false"는 기본 동작을 유지하므로 페이지가 이동하지 않음을 의미합니다.

콜백

소위 콜백은 상위 함수의 실행이 완료된 후 다른 함수에 반환 값으로 전달될 수 있는 함수입니다. 콜백 함수의 특별한 점은 콜백 함수가 실행되기 전에 "부모 함수" 뒤에 나타나는 함수가 실행될 수 있다는 것입니다. 또 다른 중요한 점은 콜백을 올바르게 사용하는 방법을 아는 것입니다. 나는 종종 올바른 구문을 잊어버립니다.

매개변수가 없는 콜백은 다음과 같이 작성해야 합니다. 프로그램 코드 $.get('myhtmlpage.html', myCallBack) 두 번째 매개변수는 간단한 함수 이름입니다. (문자도 아니고 괄호도 없습니다.)

그러면 매개변수를 사용하여 콜백을 작성하는 방법은 무엇일까요? 잘못된 작성 방식으로 인해 다음은 작동하지 않습니다(또는 실행되지 않습니다). 프로그램 코드 $.get('myhtmlpage.html', myCallBack(param1,param2)); 올바른 작성 방법: 프로그램 코드 $.get('myhtmlpage.html', function(){ myCallBack(param1,param2); }); 콜백은 매개변수를 사용하여 함수로 구현됩니다.

추첨 이 시점에서 나머지 문서 . 여기에는 더 많은 가이드 가 포함되어 있습니다. 이 가이드는 포괄적이며 jquery의 모든 측면을 다루고 있습니다.질문이 있으시면 언제든지 저에게 이메일을 보내주세요. 물론 jQuery를 활용한 다양한 DEMO 도 살펴보실 수 있습니다.