How JQuery Works

9809 단어 프런트 개발jQuerytutorial사용 설명서
How JQuery Works
이 문서는 jquery 공식 문서에서 번역한 것으로 원문 주소는 다음과 같습니다.https://learn.jquery.com/about-jquery/how-jquery-works/
jQuery:기본
이것은 기본적인 조작 매뉴얼입니다. 당신이 jQuery를 사용하기 시작하는 것을 돕기 위해 설계되었습니다.테스트 페이지를 만들지 않은 경우 다음과 같은 HTML 페이지를 만듭니다.

<html>
<head>
    <meta charset="utf-8">
    <title>Demotitle>
head>
<body>
    <a href="http://jquery.com/">jQuerya>
    <script src="jquery.js">script>
    <script>

    // Your code goes here.

    script>
body>
html>
요소 중의 src 속성은 jQuery의 복사본을 가리켜야 합니다.다운로드 페이지에서 jQuery 복사본을 다운로드하고 jquery를 다운로드합니다.js는 HTML 파일과 같은 디렉터리에 저장됩니다.
주의: jQuery를 다운로드할 때 파일 이름은 버전 정보를 포함할 수 있습니다. 예를 들어 jquery-x.y.z.js는 이 파일을 jquery.js으로 변경하거나 요소의 속성을 업데이트해서 파일 이름과 일치하도록 하십시오.
Document Ready에서 코드 실행
브라우저에서 전체 문서를 로드한 후에 코드가 실행되는지 확인하기 위해 많은 JavaScript 프로그래머들이 코드를 onload 함수에 캡슐화합니다.
window.onload = function() {

    alert( "welcome" );

};

불행하게도 모든 그림 (플래카드 포함) 이 다운로드되기 전까지 코드는 실행되지 않습니다.문서가 실행될 준비가 되었을 때 가능한 한 빨리 코드를 실행하기 위해 jQuery는ready 이벤트라고 불리는 성명을 가지고 있습니다.
$( document ).ready(function() {

    // Your code here.

});

주의: jQuery 라이브러리는 window 대상의 두 개의 jQuery과 $이라는 속성을 통해 방법과 속성을 공개합니다.$은 jQuery의 간단한 별명으로 더욱 짧고 빠른 쓰기 특징으로 널리 사용되고 있다.
예를 들어 ready 이벤트에서 링크에 클릭 처리 프로그램을 추가할 수 있습니다.
$( document ).ready(function() {

    $( "a" ).click(function( event ) {

        alert( "Thanks for visiting!" );

    });

});

상기 jQuery 코드를 HTML 파일의 //Your code goes here 부분으로 복사합니다.그런 다음 HTML 파일을 저장하고 브라우저에서 테스트 페이지를 다시 로드합니다.이 링크를 클릭하면 팝업 상자를 먼저 표시한 다음 기본 행동을 계속합니다.http://jquery.com. 과 기타 대부분의 이벤트에 대해 event.preventDefault()을 호출하여 이벤트 처리 프로그램의 기본 행동을 막을 수 있습니다.
$( document ).ready(function() {

    $( "a" ).click(function( event ) {

        alert( "As you can see, the link no longer took you to jquery.com" );

        event.preventDefault();

    });

});

첫 번째 jQuery 코드 세션을 바꾸십시오. 즉, HTML 파일로 복사한 이전 코드입니다.HTML 파일을 다시 저장하고 다시 로드해 봅니다.
전체 예
다음 코드는 위에서 토론한 클릭 처리 프로그램을 설명하는데 HTML에 직접 포함되어 있다.실천에서는 코드를 단독 JS 파일에 넣고 페이지에 요소의 속성을 사용해서 불러오는 것이 좋습니다.

<html>
<head>
    <meta charset="utf-8">
    <title>Demotitle>
head>
<body>
    <a href="http://jquery.com/">jQuerya>
    <script src="jquery.js">script>
    <script>

    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
            alert( "The link will no longer take you to jquery.com" );
            event.preventDefault();
        });
    });

    script>
body>
html>

HTML 클래스 추가 및 제거
중요: 문서가 준비되었을 때 코드를 실행할 수 있도록 나머지 jQuery 예를 ready 이벤트에 두어야 합니다.
다른 일반적인 임무는 종류를 늘리거나 제거하는 것이다.먼저 문서 섹션에 다음과 같은 스타일 정보를 추가합니다.
<style>
a.test {
    font-weight: bold;
}
style>

그리고 스크립트 프로그램에 추가합니다.addXClass() 프로그램
$( "a" ).addClass( "test" );

현재 모든 원소는 굵은 것이다.
이미 있는 클래스를 제거하고 사용하십시오.removeClass(): 
$( "a" ).removeClass( "test" );

특수 효과
jQuery도 당신의 사이트를 돋보이게 하는 편리한 효과를 제공했다.예를 들어, 다음과 같은 클릭 처리 프로그램을 만들 수 있습니다.
$( "a" ).click(function( event ) {

    event.preventDefault();

    $( this ).hide( "slow" );

});

이렇게 하면 클릭할 때 링크가 천천히 사라진다.
콜백과 함수
다른 프로그래밍 언어와 달리 자바스크립트는 나중에 실행할 함수를 자유롭게 전달할 수 있습니다.하나의 콜백은 매개 변수로 다른 함수에 전달되는 함수이며, 부모 함수가 완성된 후에만 실행된다.리셋이 특수한 이유는 부모 함수가 완성되기 전까지 실행을 기다리는 상태이기 때문이다.동시에 브라우저는 다른 함수를 실행하거나 다양한 작업을 할 수 있다.리셋을 사용하려면 가장 중요한 것은 그것을 부모 함수에 어떻게 전달하는지 알아야 한다.
매개변수 없는 콜백
만약 리셋에 파라미터가 없다면, 당신은 이렇게 그것을 전달할 수 있습니다.
$.get( "myhtmlpage.html", myCallBack );

$.get () 가 myhtmlpage.html을 가져오면 myCallBack() 함수를 실행합니다.
  • 주의: 여기 두 번째 매개 변수는 함수 이름일 뿐입니다. (문자열도 아니고 괄호도 아닙니다.)

    • 매개변수가 있는 콜백
    파라미터가 있는 리셋을 실행하는 것은 복잡하다.
    오류 이 예제 코드는 작동하지 않습니다.
    $.get( "myhtmlpage.html", myCallBack( param1, param2 ) );

    이 실패의 원인은 코드가 myCallBack(param1,param2)을 직접 집행한 다음에 myCallBack()의 반환값을 $.get()의 두 번째 매개 변수로 전달했기 때문이다.실제로 우리는 함수 myCallBack()을 전달하기를 희망하는 것이지 myCallBack(param1,param2)의 반환값이 아니다. (그것은 함수일 수도 있고 아닐 수도 있다.)그래서 어떻게 myCallBack()을 전송하고 그 파라미터를 포함합니까?
    인자가 있는 myCallBack()의 실행을 정확하게 미루면 익명 함수를 봉인기로 사용할 수 있습니다.function(){} 익명 함수를 사용하는 것은 단지 하나의 일일 뿐입니다. myCallBack()을 호출하고 param1과 param2의 값을 가지고 있습니다.
    $.get( "myhtmlpage.html", function() {

    myCallBack( param1, param2 );

});
    $.get()이 myhtmlpage.html페이지를 가져오면 익명 함수, 즉 myCallback(param1,param2)을 실행합니다.
    jquery와 기타 js 패키지 충돌 해결
    [jquery] 탭 전환 효과 (jquery 버전)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage