jQuery 기본 작업

6649 단어
jQuery는 무엇을 할 수 있습니까?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jQuery는 빠르고 작으며 기능이 풍부한 자바스크립트 라이브러리입니다.HTML 문서 스트리밍, 조작, 이벤트 처리, 애니메이션, Ajax 등 일을 훨씬 간단하게 할 수 있고, 사용하기 쉬운 API는 여러 브라우저에서 사용할 수 있다.
  • 웹 요소 선택
  • 변경 결과 세트
  • 요소의 조작: 수치와 할당
  • 요소의 작동: 이동
  • 요소 작업: 복제, 삭제 및 생성
  • 도구 방법
  • 이벤트 작업
  • 특수 효과
  • AJAX

  • jQuery 대상과 DOM 원본 대상은 어떤 차이가 있습니까?어떻게 전환합니까?
  • 의 차이점
  • jQuery 대상은 DOM 대상에 대한 봉인을 통해 생성된 대상이며, jQuery 대상은 jQuery 안의 방법만 사용할 수 있고, DOM 중의 방법
  • 을 사용할 수 없습니다.
  • DOM 대상은 자바스크립트 고유의 대상이며, DOM 대상은 자바스크립트 원생 방법을 사용할 수 있으며, jQuery의 방법을 사용할 수 없습니다.
  • 변환
  • jQuery 대상이 DOM 대상으로 변환되면 클래스 그룹 아래에 표시된 획득 방식이나 get 방법으로 지정한 index의 DOM 대상을 얻을 수 있습니다.
    $('div')[2];
    $('div').eq(2);
    $('div')get();
    
  • DOM 대상을 jQuery 대상으로 변환하면 $()을 사용하여 DOM 대상을 감싸면 하나의 jQuery 대상을 얻을 수 있습니다

  • jQuery에서 이벤트를 어떻게 바인딩합니까?bind, unbind, delegate, live, on, off은 모두 어떤 작용을 합니까?어떤 걸 추천해드릴까요?on 귀속 이벤트를 사용하여 이벤트 에이전트를 사용합니까?
  • jQuery에서 on 방법으로 이벤트 바인딩, off 방법으로 이벤트 제거
  • bind 요소에 이벤트 처리 프로그램
  • 바인딩
  • unbind 요소에서 이전 추가 이벤트 처리 프로그램 제거
  • delegate은 모든 일치 선택기(selector 매개 변수)의 원소에 하나 이상의 이벤트 처리 함수를 귀속시킨다. 지정된 루트 원소의 서브집합을 바탕으로 일치하는 원소는 현재 일치하는 원소를 포함하고 앞으로 일치할 수 있는 원소
  • 을 포함한다.
  • live에는 현재 선택기의 모든 요소와 일치하는 이벤트 프로세서가 추가되어 현재와 미래
  • on 선택한 요소에 하나 이상의 이벤트 처리 함수 귀속
  • off 이벤트 처리 함수 제거
  • 권장 on 방법 바인딩 이벤트, off 방법 오프로드 이벤트
  • on 바인딩 이벤트 사용 이벤트 에이전트 쓰기
    $('.box ul').on('click', 'li', function(){
      // Do something
    })
    
  • jQuery는 어떻게 요소를 보여주거나 숨깁니까?
  • CSS 설정을 통한
    var $h1 = $('h1');
    $h1.css('display','none')
    
  • Class 설정을 통한
    // CSS   
    .class {
      display: none;
    }
    // JS   
    var $h1 = $('h1');
    $h1.addClass('class');
    $h1.removeClass('class');
    
  • jQuery 애니메이션을 통한
    var $h1 = $('h1');
    $h1.hide();  //   
    $h1.show();  //   
    $h1.toggle(); //     /  
    
  • jQuery 애니메이션은 어떻게 사용합니까?
  • 4개 매개변수
  • duration 애니메이션 지속 시간, 단위 밀리초, 기본 400ms;
  • easing은 어떤 완동 함수를 과도적으로 사용하는지 jQuery 자체가 linearswing을 제공한다.
  • complete이 애니메이션이 완성될 때 실행하는 함수;
  • opacity 불투명도, 1은 불투명, 0은 완전 투명;

  • 기본 사용 방법
  • 표시 요소 .show([duration ] [, easing ] [, complete ])
  • 숨겨진 요소 .hide([duration ] [, easing ] [, complete ])
  • 전환 숨기기 또는 표시 .toggle([duration ] [,easing ] [,complete ])
  • 그라데이션
  • 페이드 인 .fadeIn( [duration ] [, easing ] [, complete ] )
  • 페이드 숨김 .fadeOut( [duration ] [, easing ] [, complete ] )
  • 일치하는 요소의 투명도를 조정하고, 방법은 일치하는 요소의 불투명도를 통해 애니메이션 효과 .fadeTo( duration, opacity [, easing ] [, complete ] )
  • 은 일치하는 요소의 불투명도 애니메이션을 통해 일치하는 요소의 불투명도 애니메이션을 표시하거나 숨깁니다.보이는 원소가 호출될 때 원소의 불투명도가 0이 되면 디스플레이 스타일 속성은 none으로 설정되어 원소가 페이지의 레이아웃에 영향을 주지 않습니다..fadeToggle( [duration ] [, easing ] [, complete ] )

  • 슬라이딩
  • 슬라이딩 애니메이션으로 일치하는 요소를 표시한다. 방법은 일치하는 요소의 높이에 대한 애니메이션을 표시한다. 이로 인해 페이지의 아래 부분이 미끄러져 내려가 표시 방식을 보완한다. .slideDown( [duration ] [, easing ] [, complete ] )
  • 슬라이딩 애니메이션으로 일치하는 요소를 숨깁니다. 방법은 일치하는 요소의 높이에 대한 애니메이션을 숨깁니다. 그러면 페이지의 아래 부분이 슬라이딩됩니다. 숨겨진 애니메이션이 0이 되면 디스플레이 스타일 속성은 none으로 설정되어 이 요소가 페이지 레이아웃에 영향을 주지 않도록 합니다..slideUp( [duration ] [, easing ] [, complete ] )
  • 슬라이딩 애니메이션으로 일치하는 요소 표시 또는 숨기기 .slideToggle( [duration ] [, easing ] [, complete ] )
  • 슬라이딩 애니메이션으로 일치하는 요소를 표시하거나 숨깁니다. 방법은 일치하는 요소의 높이에 있는 애니메이션을 표시하거나 숨깁니다. 그러면 페이지에서 이 요소 아래의 내용이 아래로 미끄러지거나 위로 미끄러집니다.디스플레이 속성 값은 jQuery 데이터 캐시에 저장되어 있기 때문에 디스플레이는 나중에 초기 값으로 복구할 수 있습니다.
  • 한 요소의 디스플레이 속성 값이 inline이고 그 다음에 숨기고 표시하면 이 요소는 다시 inline을 표시합니다.숨겨진 애니메이션이 0에 도달하면 디스플레이 스타일 속성이 none으로 설정되어 페이지 레이아웃에 영향을 주지 않습니다.


  • 사용자 정의 애니메이션 .animate( properties [, duration ] [, easing ] [, complete ] ) properties은 CSS 속성과 값의 개체로서 애니메이션은 이 개체 그룹에 따라 이동합니다.예:
    $('#clickme').click(function() {
      $('#book').animate({
        opacity: 0.25,
        left: '+=50',
        height: 'toggle'
      }, 5000, function() {
        // Animation complete.
      });
    });
    
  • 애니메이션 중지
  • 애니메이션 큐에서 실행되지 않은 애니메이션 지우기 .clearQueue( [queueName ] )
  • 현재 애니메이션을 중지하고 애니메이션 대기열의 모든 미완성 애니메이션을 지우며 애니메이션 대기열의 마지막 프레임의 최종 상태 .finish( [queue ] )
  • 현재 실행 중인 애니메이션 중지 .stop( [clearQueue ] [, jumpToEnd ] )
  • clearQueue(default: false)
  • jumpToEnd(default: false)



  • 요소 내부의 HTML 내용을 설정하고 가져오는 방법은 무엇입니까?어떻게 요소 내부 텍스트를 설정하고 가져옵니까?
  • 내부 HTML 콘텐츠 설정 및 가져오기
  • 전달 매개 변수가 없을 때 원소의 .html([string])
  • 을 되돌려줍니다
  • 하나의string 매개 변수를 전달할 때 원소의 innerHTML을 매개 변수 값으로 수정합니다
  •  $('div').html();
     $('div').html(`123`);
    
  • 요소 내부 텍스트 설정 및 가져오기
  • 전달 매개 변수가 없을 때 원소의 innerHTML
  • 을 되돌려줍니다
  • 하나의string 매개 변수를 전달할 때 원소의 innerHTML을 매개 변수 값으로 수정합니다
  •  $('div').text();
     $('div').text(`123`);
    

    어떻게 폼 사용자가 입력하거나 선택한 내용을 설정하고 얻습니까?어떻게 원소 속성을 설정하고 얻습니까?
  • 폼 사용자가 입력하거나 선택한 내용을 설정하고 가져오는 방법입니다 .text([string]) 이것은 input의value를 읽기 및 쓰기 두 가지 방법으로 처리하는데 사용되며 방법이 매개 변수가 없을 때 input의value값을 되돌려줍니다. 매개 변수를 전달할 때 방법은 input의value값을 매개 변수값인
    $('input').val()
    $('input').val()
    
  • 으로 수정합니다.
  • 요소 속성 설정 및 가져오기
  • 요소 특정 속성의 값 얻기 innerText
  • 은 원소 속성에 innerText/innerText/.val([value])
  • 은 일치하는 원소 집합의 모든 원소에서 하나의 속성 (attribute) 제거 .attr(attributeName)

  • 제목
    클릭하여 보기
    제목
    클릭하여 보기
    제목
    클릭하여 보기
    제목
    클릭하여 보기

    좋은 웹페이지 즐겨찾기