이를 이해한 후에야 jQuery_jquery의 강력한 기능을 사용할 수 있습니다.

由于当前jQuery如此的如雷贯耳，相信不用介绍什么是jQuery了，公司代码中广泛应用了jQuery，但我在看一些小朋友的代码时发现一个问题，小朋友们使用的仅仅是jQuery的皮毛，只是使用id选择器与attr方法，还有几个动画，如果只是如此，相比于其带来的开销，其实还不如不使用，下面介绍几个jQuery常用的方法，来让jQuery的威力发挥出来，否则只用有限的几个方法，相对于运行速度问题，真不如不用jQuery。

jQuery如此之好用，和其在获取对象时使用与CSS选择器兼容的语法有很大关系，毕竟CSS选择器大家都很熟悉（关于CSS选择器可以看看十分钟搞定CSS选择器），但其强大在兼容了CSS3的选择器，甚至多出了很多。

选择器

有了CSS选择器基础后，看jQuery的选择器就很简单了，不再详细一一说明

과 일치합니다. $('E~F') 일반 인접 선택자(동생 선택자), E 요소 $('.class1.class2')클래스 이름에 class1과 class2가 모두 포함된 요소 일치$("E:첫 번째")첫 번째 E$("E:마지막")E의 마지막$("E:not(선택기)")선택기로 E 필터링$("E:even")      모든 E의 인덱스는 짝수입니다$("E:odd")                                        $("E:eq(n)")                                                   E에서 인덱스 n을 갖는 모든 요소$("E:gt(n)")                                                   E의 인덱스가 n보다 큰 모든 요소E의 인덱스가 n보다 작은 모든 요소$(":헤더")h1~h7 요소 선택$("div:animated")애니메이션 효과를 수행하는 요소를 선택하세요$('E:contains(값)')콘텐츠에 가치가 있는 요소 $('E:비어 있음')내용이 비어 있는 요소$('E:has(F)') 하위 요소에 F가 있는 요소, $('div:has(a)'): 태그가 포함된 div $('E: 부모')상위 요소는 E 요소, $('td: parent'): 상위 요소는 td 요소입니다$('E:숨김')모두 숨겨진 E$('E:표시')모두 보이는 E

기본 선택기
$('*')	페이지의 모든 요소 일치
$('#ID')	ID 선택기
$('.class')	클래스 선택기
$('요소')	태그 선택기
구성/레벨 선택기
$('E,F')	",,로 구분된 다중 요소 선택기는 E 요소 또는 F 요소와 동시에 일치합니다.
$('E F')	공백으로 구분된 하위 선택자는 E 요소의 모든 하위 항목과 일치합니다(하위 요소뿐만 아니라 하위 요소도 재귀적으로 하향) 요소 F
$(E>F)	">"로 구분된 하위 요소 선택기는 E 요소의 모든 직접 하위 요소와 일치합니다.
$('E F')	바로 인접한 선택자, E 요소 및 형제 요소 F 뒤의 중
	뒤의 의 형제 요소 F와 일치합니다(직접 인접 여부에 관계없이)
기본 필터 선택기
모든 E의 인덱스가 홀수입니다
	$("E:ll(n)")
	콘텐츠 필터
	비주얼 선택기
	속성 필터 선택기
$(‘E[attr]')	含有属性attr的E
$(‘E[attr=value]')	属性attr=value的E
$(‘E[attr !=value]')	属性attr！=value的E
$(‘E[attr ^=value]')	属性attr以value开头的E
$(‘E[attr $=value]')	属性attr以value结尾的E
$(‘E[attr *=value]')	属性attr包含value的E
$(‘E[attr][attr *=value]')	可以连用
子元素过滤器
$(‘E:nth-child(n)')	E的第n个子节点
$(‘E:nth-child(3n+1)')	E的index符合3n+1表达式的子节点
$(‘E:nth-child(even)')	E的index为偶数的子节点
$(‘E:nth-child(odd)')	E的index为奇数的子节点
$(‘E:first-clild')	所有E的第一个子节点
$(‘E:last-clild')	所有E的最后一个子节点
$(‘E:only-clild')	只有唯一子节点的E的子节点
表单元素选择器
$(‘E:type')	特定类型的input
$(‘:checked')	被选中的checkbox或radio
$(‘option: selected')	被选中的option

필터링 방법

.find(selector)는 컬렉션에 있는 각 요소의 하위 노드를 찾습니다

현재 일치하는 요소 세트에서 선택기, jQuery 객체 또는 요소로 필터링된 각 요소의 하위 노드(하위 노드)를 가져옵니다.

코드 복사 코드는 다음과 같습니다.

$('li.item-ii').find ('li').css('배경색', '빨간색');

.filter(selector)는 현재 컬렉션의 요소를 필터링합니다

일치하는 요소 집합을 선택기와 일치하거나 함수 테스트를 통과하는 요소로 줄입니다.

코드 복사 코드는 다음과 같습니다.

$('li').filter(':even ').css('배경색', '빨간색');

기본방법

문서 로딩이 완료된 후 실행되는 .ready(handler) 메소드, window.onload와 다름

DOM이 완전히 로드되었을 때 실행할 함수를 지정하세요.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function( ) {
// .ready()에 대한 핸들러가 호출되었습니다.
});

.each(function(index,element))는 컬렉션의 각 요소를 순회합니다

jQuery 객체를 반복하여 일치하는 각 요소에 대해 함수를 실행합니다.

코드 복사 코드는 다음과 같습니다.

$("li" ).each( function( index ) {
console.log( index ": " $(this).text() );
});

jQuery.extend( target [, object1 ] [, objectN ] ) 객체 병합

두 개 이상의 개체 내용을 첫 번째 개체로 병합합니다.

코드 복사 코드는 다음과 같습니다.

var object = $.extend({}, object1, 개체2);

요소 가져오기

.eq(index) 인덱스를 기준으로 jQuery 객체 컬렉션에서 특정 jQuery 객체를 가져옵니다.

일치하는 요소 집합을 지정된 인덱스에 있는 요소 집합으로 줄입니다.

.eq(-index) 역순 인덱스로 jQuery 객체 컬렉션의 특정 jQuery 객체를 가져옵니다.

세트의 마지막 요소부터 거꾸로 계산하여 요소의 위치를 ​​나타내는 정수입니다.

코드 복사 코드는 다음과 같습니다.

$( "li" ).eq( 2 ). css( " background-color", "red" );

.get(index) jQuery 컬렉션 객체에서 특정 인덱스의 DOM 객체를 가져옵니다(jQuery 객체를 DOM 객체로 자동 변환)

jQuery 객체와 일치하는 DOM 요소 중 하나를 검색합니다.

코드 복사 코드는 다음과 같습니다.

console.log( $( "li" ).get ( -1 ) );

.get()은 jQuery 컬렉션 개체를 DOM 컬렉션 개체로 변환하고

를 반환합니다.

jQuery 객체와 일치하는 DOM 요소를 검색합니다.

코드 복사 코드는 다음과 같습니다.

console.log( $( "li" ).get () ) ;

.index() / .index(selector)/ .index(element) 주어진 컬렉션에서 특정 요소 인덱스를 찾습니다.

일치하는 요소 중에서 특정 요소를 검색합니다.

1. 매개변수 없이 첫 번째 요소 인덱스를 반환합니다

2. 매개변수가 DOM 개체 또는 jQuery 개체인 경우 컬렉션에 있는 매개변수의 인덱스가 반환됩니다

3. 매개변수가 선택자인 경우 일치하는 첫 번째 요소의 인덱스를 반환합니다. 그렇지 않으면 -1을 반환합니다.

코드 복사 코드는 다음과 같습니다.

var listItem = $( "#bar" );
alert( "색인: " $( "li" ).index( listItem ) );

.clone([withDataAndEvents][,deepWithDataAndEvents])는 jQuery 컬렉션의 전체 복사본을 생성합니다(하위 요소도 복사됨). 기본적으로 개체의 shuju 및 바인딩 이벤트는 복사되지 않습니다.

일치하는 요소 집합의 전체 복사본을 만듭니다.

코드 복사 코드는 다음과 같습니다.

$( ".hello" ).clone(). addTo( " .goodbye" );

.parent([selector]) 선택기와 일치하는 jQuery 객체의 상위 요소를 가져옵니다.

현재 일치하는 요소 세트에서 각 요소의 상위를 가져오고 선택적으로 선택기로 필터링합니다.

코드 복사 코드는 다음과 같습니다.

$( "li.item-a" ).parent ('ul').css( "배경색", "빨간색" );

.parents([selector]) 선택기와 일치하는 jQuery 객체의 상위 요소를 가져옵니다.

현재 일치하는 요소 집합에서 각 요소의 조상을 가져오고 선택적으로 선택기로 필터링합니다.

코드 복사 코드는 다음과 같습니다.

$( "span.selected" ) .parents( " div" ) .css( "테두리", "2px 빨간색 단색" )

요소 삽입

.append(content[,content]) / .append(function(index,html)) 객체 끝에 콘텐츠 추가

매개변수로 지정된 콘텐츠를 일치하는 요소 집합의 각 요소 끝에 삽입합니다.

1. 한 번에 여러 컨텐츠를 추가할 수 있으며, 컨텐츠는 DOM 객체, HTML 문자열, jQuery 객체가 될 수 있습니다

2. 매개변수가 함수인 경우 함수는 DOM 객체, HTML 문자열 또는 jQuery 객체를 반환할 수 있습니다. 매개변수는 컬렉션의 요소 위치와 원래 HTML 값입니다.

코드 복사 코드는 다음과 같습니다.

$( ".inner" ).append ( "< ;p>테스트" );
$( "body" ).append( $newdiv1, [ newdiv2, 기존div1 ] );
$( "p" ).append( "< ;strong> 안녕하세요" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "안녕하세요" ) );

.appendTo(target)는 대상 요소의 끝에 객체를 삽입합니다. 대상 요소는 선택기, DOM 객체, HTML 문자열, 요소 컬렉션, jQuery 객체일 수 있습니다.

일치하는 요소 집합의 모든 요소를 ​​대상 끝에 삽입합니다.

코드 복사 코드는 다음과 같습니다.

$( "h2" ).appendTo( $( " .container" ) );
$( "

테스트

" ).appendTo( ".inner" );

.prepend(content[,content]) / .prepend(function(index,html)) 객체의 헤드에 내용을 추가합니다. 사용법은 추가와 유사합니다

매개변수로 지정된 콘텐츠를 일치하는 요소 집합의 각 요소 시작 부분에 삽입합니다.

코드 복사 코드는 다음과 같습니다.

$( ".inner" ).prepend( "< ;p> 테스트" );

.prependTo(target)는 대상 요소의 헤드에 객체를 삽입합니다. 사용법은 prepend

와 유사합니다.

일치하는 요소 집합의 모든 요소를 ​​대상의 시작 부분에 삽입합니다.

코드 복사 코드는 다음과 같습니다.

$( "

Test

" ).prependTo( ".inner" );

.before([content][,content]) / .before(function) 객체 앞에 콘텐츠를 삽입합니다(헤드가 아닌 외부, 객체와 같은 레벨). 매개변수는 유사합니다. 추가하다

일치하는 요소 집합의 각 요소 앞에 매개변수로 지정된 콘텐츠를 삽입하세요.

코드 복사 코드는 다음과 같습니다.

$( ".inner" ).before ( "< ;p>테스트" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before ( newdiv1, [ newdiv2, 기존div1 ] );
$( "p" ).before( "Hello" );
$( "p" ).before( document.createTextNode ( "안녕하세요 " ) );

.insertBefore(target)는 대상 앞에 개체를 삽입합니다(머리도 아니고 같은 레벨)

일치하는 요소 집합의 모든 요소를 ​​대상 앞에 삽입하세요.

코드 복사 코드는 다음과 같습니다.

$( "h2" ).insertBefore( $( " .container" ) );

.after([content][,content]) / .after(function(index)) 이전과 반대로 콘텐츠, 매개변수를 삽입하고 객체 뒤에 추가합니다(꼬리 부분이 아니라 외부, 같은 수준). 객체)

와 유사

일치하는 요소 집합의 각 요소 뒤에 매개변수로 지정된 콘텐츠를 삽입하세요.

코드 복사 코드는 다음과 같습니다.

$( ".inner" ).after ( "< ;p>테스트" );
$( "p" ).after( document.createTextNode( "Hello" ) );

.insertAfter(target)은 insertBefore와 반대이며 대상 뒤에 객체를 삽입합니다(또한 꼬리가 아니라 같은 수준에 있음)

일치하는 요소 집합의 모든 요소를 ​​대상 뒤에 삽입하세요.

코드 복사 코드는 다음과 같습니다.

$( "

Test " ).insertAfter( ".inner" );
$( "p" ).insertAfter( "#foo" );

래핑 요소

.wrap(wrappingElement) / .wrap(function(index))는 선택기, 요소, HTML 문자열, jQuery 객체 등 각 객체에 대한 HTML 구조를 래핑합니다

일치하는 요소 집합의 각 요소 주위에 HTML 구조를 래핑합니다.

코드 복사 코드는 다음과 같습니다.

안녕하세요

안녕하세요

$( ".inner " ).wrap( "

" );

안녕하세요

안녕하세요< ;/div>

.wrapAll(wrappingElement)는 일치하는 모든 객체를 동일한 HTML 구조로 래핑합니다.

일치하는 요소 집합의 모든 요소를 ​​HTML 구조로 묶습니다.

코드 복사 코드는 다음과 같습니다.

안녕하세요

안녕하세요

$( ".inner " ).wrapAll( "

");

안녕하세요

안녕하세요

.wrapInner(wrappingElement) / .wrapInner(function(index))는 일치하는 요소 내용을 래핑합니다. 이는 예제만 보면 이해하기 어렵습니다.

일치하는 요소 집합에서 각 요소의 콘텐츠를 HTML 구조로 묶습니다.

코드 복사 코드는 다음과 같습니다.

안녕하세요

안녕하세요

$( ".inner " ).wrapInner( "

");

안녕하세요

안녕하세요< ;/div>

.unwap()은 DOM 요소의 상위 요소를 제거합니다

일치하는 요소 집합의 상위 항목을 DOM에서 제거하고 일치하는 요소는 그 자리에 남겨둡니다.

코드 복사 코드는 다음과 같습니다.

pTags = $( "p" ).unwrap() ;

속성 메서드

.val()은 요소의 값을 가져옵니다

일치하는 요소 집합에서 첫 번째 요소의 현재 값을 가져옵니다.

코드 복사 코드는 다음과 같습니다.

$( "input:checkbox:checked" ).val ();

.val(value) /.val(function(index,value)) 요소의 값을 설정합니다. 인덱스 및 값은 컬렉션의 각 요소에 대해 설정할 때 요소의 인덱스 및 원래 값도 참조합니다. 🎜 >

일치하는 요소 집합에서 각 요소의 값을 설정합니다.

코드 복사 코드는 다음과 같습니다.

$( "input" ).val( 'hello' );
$( "input" ).on( "blur", function() {
$( this ).val(function( i, val ) {
return val.toUpperCase( );
});
});

.attr(attributeName)은 요소의 특정 속성 값을 가져옵니다

일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져옵니다.

코드 복사 코드는 다음과 같습니다.

var title = $( "em" ) .attr( "제목" );

.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ) 요소 속성에 값 할당

일치하는 요소 집합에 대해 하나 이상의 속성을 설정합니다.

코드 복사 코드는 다음과 같습니다:

$( "#greatphoto" ).attr ( "alt ", "베이징 브러쉬 판매자" );
$( "#greatphoto" ).attr({

alt: "Beijing Brush Seller",
title: "사진: Kelly Clark"
});

$( "#greatphoto" ).attr( "title", function( i, val ) {

return val " - 사진: Kelly Clark";
});

.prop( propertyName )

요소의 특정 속성 값을 가져옵니다.

일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져옵니다.

코드 복사 코드는 다음과 같습니다.

$( elem ).prop( "checked " )

.prop(propertyName,value) / .prop(propertiesJson) / .prop(propertyName,function(index,oldPropertyValue)) 요소 속성에 값 할당

일치하는 요소 집합에 대해 하나 이상의 속성을 설정합니다.

코드 복사 코드는 다음과 같습니다.

$( "input" ).prop( "확인됨" , true );
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {

return !val;
});

$( "input[type='checkbox']" ).prop({

비활성화: true
});

속성과 속성의 차이점은 jQuery의 attr과 prop을 참고하세요

.data(key,value) / .value(json)는 HTML DOM 요소에 데이터를 추가합니다. HTML5 요소에는 이미 data-* 속성이 있습니다

일치하는 요소와 연결된 임의의 데이터를 저장합니다. .data() 메서드를 사용하면 순환 참조 및 메모리 누수로부터 안전한 방식으로 모든 유형의 데이터를 DOM 요소에 연결할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$( "body" ).data( "foo" , 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz : [ 1 , 2, 3 ] } );

.data(key) / .data() data로 설정된 데이터 또는 HTML5 data-* 속성의 데이터를 가져옵니다

data(name, value) 또는 HTML5 data-* 속성으로 설정된 대로 jQuery 컬렉션의 첫 번째 요소에 대해 명명된 데이터 저장소의 값을 반환합니다.

코드 복사 코드는 다음과 같습니다.

alert( $( "body" ).data( "foo" ) );
alert( $( "body" ).data() );

alert( $( "body" ).data( "foo" ) ); // 정의되지 않음
$( "body" ).data( "bar", "foobar" );
alert( $ ( "body" ).data( "bar" ) ) // foobar

CSS 메서드
.hasClass(calssName)는 요소에 특정 클래스가 포함되어 있는지 확인하고 true/false를 반환합니다

일치하는 요소 중 해당 클래스가 할당되었는지 확인하세요.

코드 복사 코드는 다음과 같습니다.

$( "#mydiv" ).hasClass( "foo " )

.addClass(className) / .addClass(function(index,currentClass)) 요소에 클래스를 추가합니다. 원래 클래스를 덮어쓰지 않고 추가하며 중복을 확인하지 않습니다.

일치하는 각 요소 집합에 지정된 클래스를 추가합니다.

코드 복사 코드는 다음과 같습니다.

$( "p" ).addClass( "myClass yourClass " );

$( "ul li" ).addClass(function( index ) {
return "item-" index;
});

removeClass([className]) / ,removeClass(function(index,class))는 단일/다중/모든 클래스를 제거합니다

일치하는 요소 집합의 각 요소에서 단일 클래스, 여러 클래스 또는 모든 클래스를 제거합니다.

코드 복사 코드는 다음과 같습니다.

$( "p" ).removeClass( "myClass yourClass " );
$( "li:last" ).removeClass(function() {
return $( this ).prev().attr( "class" );
});

.toggleClass(className) /.toggleClass(className,switch) / .toggleClass([switch]) / .toggleClass( function(index, class, switch) [, switch ] ) 토글은 스위치를 의미하며 메소드를 사용합니다. Switch, switch는 bool 유형의 값입니다. 예제를 보면 이를 이해할 수 있습니다

클래스의 존재 여부나 스위치 인수의 값에 따라 일치하는 요소 집합의 각 요소에서 하나 이상의 클래스를 추가하거나 제거합니다.

일부 텍스트

첫 실행

코드 복사 코드는 다음과 같습니다.

$( "div .tumble" ).toggleClass( "bounce" )

일부 텍스트.

두 번째 실행

코드 복사 코드는 다음과 같습니다:

$( "div.tumble" ). 토글클래스( " 바운스" )

일부 텍스트.

코드 복사 코드는 다음과 같습니다.

$( "#foo" ).toggleClass ( className, addOrRemove );

// 두 가지 방법 모두 같은 의미를 갖습니다

if ( addOrRemove ) {
$( "#foo" ).addClass( className );
} else {
$( "#foo" ).removeClass( className );
}

코드 복사 코드는 다음과 같습니다.

$( "div.foo" ). ggleClass(function () {
if ( $( this ).parent().is( ".bar" ) ) {
return "happy";
} else {
return "sad" ;
}
});

.css(propertyName) / .css(propertyNames) 요소 스타일의 특정 속성 값 가져오기

일치하는 요소 집합의 첫 번째 요소에 대한 스타일 속성 값을 가져옵니다.

코드 복사 코드는 다음과 같습니다.

var color = $( this ).css ( "배경색상" );

var styleProps = $( this ).css([
"너비", "높이", "색상", "배경색"
]);

.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( PropertiesJson ) 요소 스타일의 특정 속성 값 설정

일치하는 요소 집합에 대해 하나 이상의 CSS 속성을 설정하세요.

코드 복사 코드는 다음과 같습니다.

$( "div.example" ). css( " 너비", function( index ) {
return index * 50;
});

$( this ).css( "너비", " =200" );

$( this ).css( "배경색", "노란색" );

$( this ).css({
"ground-color": "yellow",
"font-weight": "bolder"
});

이벤트 방식

.bind( eventType [, eventData ], handler(eventObject) ) 바인드 이벤트 핸들러, 자주 사용되는 것으로 설명은 별로 없습니다

요소에 대한 이벤트에 핸들러를 연결합니다.

코드 복사 코드는 다음과 같습니다.

$( "#foo" ).bind ( "click ", function() {
Alert( "사용자가 'foo.'를 클릭했습니다." );
});

.delegate( selector, eventType, handler(eventObject) ) 이에 대한 공식 설명을 살펴보겠습니다

특정 루트 요소 세트를 기반으로 현재 또는 미래에 선택기와 일치하는 모든 요소에 대해 하나 이상의 이벤트에 핸들러를 연결합니다.

코드 복사 코드는 다음과 같습니다.

$( "table" ).on( "click" , "td", function() {//td의 클릭 이벤트 핸들러를 다음과 같이 테이블에 연결합니다
$( this ).toggleClass( "chosen" );
});

.on( events [, selector ] [, data ], handler(eventObject) ) 1.7 이후 권장, 바인딩, 라이브, 위임 대체

선택한 요소에 하나 이상의 이벤트에 대한 이벤트 핸들러 함수를 연결합니다.

코드 복사 코드는 다음과 같습니다.

$( "#dataTable tbody" ). on( " click", "tr", function() {
Alert( $( this ).text() );
});

바인드, 라이브, 위임, 켜기의 차이점은 jQuery의 세 가지 이벤트 바인딩 방법인 바인딩 방법을 참조하세요.bind(), .live(), .delegate()

.trigger( eventType [, extraParameters ] ) JavaScript 트리거 요소 바인딩 이벤트

주어진 이벤트 유형에 대해 일치하는 요소에 연결된 모든 핸들러와 동작을 실행합니다.

코드 복사 코드는 다음과 같습니다.

$( "#foo" ).trigger ( "클릭" );

.toggle( [기간 ] [, 완료 ] ) / .toggle( 옵션 ) 요소 숨기기 또는 표시

일치하는 요소를 표시하거나 숨깁니다.

코드 복사 코드는 다음과 같습니다.

$( ".target" ).toggle (); $( "#clickme" ).click(function() {
$( "#book" ).toggle( "slow", function() {
// 애니메이션 완료.
} );
});

애니메이션/Ajax
이 두 부분에는 많은 내용이 포함되어 있으며 단순한 기능이 아닙니다. 다음은 일반적인 메소드 이름 목록입니다. 애니메이션 ajax 또는 jQuery 애니메이션 처리 요약, ASP.NET은 Ajax 애니메이션을 사용합니다

대기열/대기열 제거/대기열 지우기

지연/중지

fadeIn/fadeOut/fadeTo/fadeToggle

슬라이드업/슬라이드다운/슬라이드토글

표시/숨기기

아약스

$.ajax

$.load

$.get

드디어

위 내용을 이해하고 나면 웹 개발에 jQuery를 사용할 때 jQuery의 위력을 경험할 수 있습니다. 이 글은 jQuery 학습 가이드가 아니며, 단지 일반적인 방법을 소개하는 글입니다. jQuery를 배우고 싶다면 가장 좋은 교재는 jQuery API입니다. 이 글의 예제와 영어 설명은 모두 jQuery API. 또한, 기사에 소개된 내용은 jQuery가 전부는 아니지만, 이를 먼저 마스터하면 jQuery에 대한 보다 포괄적인 이해가 가능하고, 이후에는 다른 내용도 쉽게 배울 수 있을 것입니다.