집 >웹 프론트엔드 >JS 튜토리얼 >Mootools 1.2 튜토리얼 (3) arrays_Mootools 사용 소개

Mootools 1.2 튜토리얼 (3) arrays_Mootools 사용 소개

WBOY원래의: 2016-05-16 18:46:401052검색

오늘은 배열을 사용하여 DOM 요소를 관리하는 방법을 살펴보겠습니다.
기본 메서드
.each();
배열을 다룰 때는 .each() 메서드가 가장 좋습니다. 이는 배열의 각 요소를 반복하고 필요한 경우 요소에 대한 논리적 처리를 수행하는 쉬운 방법을 제공합니다. 예를 들어 페이지의 각 div 개체에 대해 경고 메서드를 호출해야 한다고 가정할 수 있습니다.
참조 코드:

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

 
$$('div').each(function() { 
alert('a div'); 
}); 
 

아래 HTML 코드를 사용하면 위의 JavaScript 코드는 각 div에 하나씩 두 개의 경고 대화 상자를 표시합니다.
참조 코드:

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

One< /div>

Two

.each() 메서드에서는 $$ 메서드를 사용할 필요가 없습니다. 어제 다룬 것과 같이 배열을 만드는 또 다른 방법은 .getElements() 메서드를 사용하는 것입니다.
참조 코드:

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

$('body_wrap') .getElements( 'div').each(function() { 
alert('a div'); 
}) 

 

참조 코드:

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

One< /div>

Two

같은 작업을 수행하는 또 다른 방법은 변수를 사용하고 해당 변수는 .each(); 메서드를 사용합니다.
참조 코드:

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

// 먼저 "var VARIABLE_NAME" 문을 통해 변수를 선언해야 합니다.

// 그런 다음 등호 연산자 "="를 사용하여 이 변수에 값을 할당합니다. 
// In 이 예에서는 div 요소를 포함하는 변수입니다. Array
var myArray = $('body_wrap').getElements('div'); 
// 이제 이 변수를 배열 선택기로 사용할 수 있습니다 
 myArray.each(function() { 
alert('a div'); 
}); 

 
마지막으로, 선택기와 함수를 분리하려는 경우. 이에 대해서는 내일 함수 사용 튜토리얼에서 더 자세히 다루겠습니다. 그러나 이제 매우 간단한 예를 만들 수 있습니다. 

참조 코드:

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

var myArray = $('body_wrap').getElements('div');

// 함수를 생성하려면 이전과 같이 변수를 선언하고 이름을 지정하면 됩니다. 
// 대기 중 이 변수를 함수로 선언하려면 숫자 뒤에 "function()"을 사용하세요. 
// 마지막으로 {와 } 사이에 함수 코드를 작성하세요. 
var myFunction = function() { 
alert(' a div' ); 
}; 
// 이제 .each(); 메소드에서 함수를 호출할 수 있습니다. 

 
 지금처럼 .each(); 메서드에서 함수를 호출할 때는 함수 이름을 따옴표로 묶을 필요가 없습니다. 
배열 복사 

$A
MooTools는 $A 함수를 통해 배열을 복사하는 간단한 방법을 제공합니다. 방금 했던 것처럼 변수를 사용하여 배열을 만들어 보겠습니다.
참조 코드:

코드 복사 코드는 다음과 같습니다. // 배열 변수 생성

var myArray = $('body_wrap').getElements('div')

 
배열 복사(배열 복사본 생성) ): 
참조 코드: 

코드 복사 코드는 다음과 같습니다. // 새 변수 이름을 지정하고 "myCopy"로 이름을 지정한 다음 "myArray" 복사본을 할당합니다.

var myCopy = $A(myArray );
배열에서 지정된 요소를 가져옵니다.
.getLast();
.getLast() 메서드는 배열의 마지막 요소를 반환합니다. 먼저 배열을 만듭니다.
참조 코드:

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

var myArray = $('body_wrap').getElements('div');

이제 이 배열에서 마지막 요소를 가져올 수 있습니다.
참조 코드:

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

var lastElement = myArray.getLast()

lastElement 변수의 현재 값은 myArray 배열의 마지막 요소입니다.
.getRandom();
.getLast();와 동일하지만 배열에서 요소를 무작위로 가져옵니다.
참조 코드:

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

var randomElement = myArray.getRandom();

randomElement 변수의 현재 값이 무작위로 선택됩니다. 요소의 myArray 배열에서.
배열에 요소 추가
.include();
이 방법을 사용하면 배열에 다른 요소를 추가할 수 있습니다. 요소 선택기를 .include() 메소드에 전달하면 배열에 포함됩니다. 다음 HTML 코드를 사용합니다.
참조 코드:

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

one

two

 array

이전과 같이 "body_wrap" 아래의 모든 div를 호출하여 배열을 만들 수 있습니다.
참조 코드:

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

var myArray = $('body_wrap').getElements('div')

이 배열에 다른 요소를 추가하려면 먼저 이 요소를 변수에 할당한 다음 include 메소드를 사용해야 합니다.
참조 코드:

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

 
// 먼저 요소를 변수에 할당합니다. 
var newToArray = $('add_to_array') ; 
 // 그런 다음 배열에 추가합니다. 
myArray.include(newToArray); 

이제 배열에는 div 및span 요소가 모두 포함됩니다.
.combine();
.include();와 동일하지만 중복된 내용에 대한 걱정 없이 기존 배열에 배열을 추가할 수 있습니다. 이제 다음 HTML에서 두 개의 배열을 얻었다고 가정합니다.
참조 코드:

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

one

two

배열에 추가
배열에 추가
배열에도 추가< /span> 

다음과 같이 두 개의 배열을 만들 수 있습니다.
참조 코드:

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

 
// 이전과 마찬가지로 배열을 생성합니다.
var myArray= $('body_wrap').getElements('div' ); 
 // 그런 다음 .class_name이라는 이름의 모든 CSS 클래스를 사용하여 요소 배열을 만듭니다. 
var newArrayToArray = $$('.class_name') 

이제 .combine을 사용할 수 있습니다. () ;두 배열을 병합하는 방법, 이 방법은 중복 요소를 자체적으로 처리하므로 처리할 필요가 없습니다.
참조 코드:

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

 
// newArrayToArray 배열을 myArray 배열로 병합합니다. 
myArray.combine(newArrayToArray); 

이제 myArray에는 newArraytoArray의 모든 요소가 포함됩니다.
코드 예
배열을 사용하면 모든 항목이 포함된 목록을 반복하고 각 요소에 대해 동일한 코드를 실행할 수 있습니다. 이 예에서는 현재 요소 대신 변수 "item"을 사용하는 것에 유의하세요.
참조 코드:

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

 
// 배열을 생성하고, 이 배열에는 "body_wrap"에 CSS 클래스 이름이 .class_name인 모든 요소가 포함되어 있습니다. 
var myArray = $('body_wrap').getElements('.class_name') 
// 먼저 array
var addSpan = $('addtoarray'); 
// 병합할 배열을 생성합니다. 
var addMany = $$('.addMany') 
// 이제 addSpan 요소를 배열 
myArray.include(addSpan); 
// 그런 다음 addMany 배열을 myArray에 병합합니다. 
myArray.combine(addMany) 
// 실행해야 하는 배열 함수 
var myArrayFunction = function(item) { 
// 항목은 이제 배열의 현재 요소를 가리킵니다. 
item.setStyle('Background-color', '#eee' ); 
} 
// 이제 배열의 각 항목에 대해 myArrayFunction 함수를 호출합니다. 
myArray.each(myArrayFunction) 

참조 코드:

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

"class_name"

two

/div>
배열에 추가 🎜>
많은 것 중 하나 class="addMany"> 여러 개

확장 학습

이 튜토리얼은 배열로 할 수 있는 모든 것을 다루기 위한 것이 아니지만, 참고가 되고 MooTools가 제공하는 기능을 알려줄 수 있기를 바랍니다. 배열에 대해 자세히 알아보려면 다음 내용을 주의 깊게 읽어보세요.

문서 배열 부분

이 페이지에는 JavaScript 배열 에 대한
정보가 많이 있습니다.

시작하는 데 필요한 모든 것이 포함된 zip 패키지를 다운로드하세요.

간단한 html 파일, MooTools 1.2 핵심 라이브러리, 외부 JavaScript 파일, CSS 파일 및 위의 모든 예제가 포함되어 있습니다.

성명：

이전 기사：자바스크립트 배열 연산을 위한 실전 스킬_javascript 스킬다음 기사：자바스크립트 배열 연산을 위한 실전 스킬_javascript 스킬

Mootools 1.2 튜토리얼 (3) arrays_Mootools 사용 소개

관련 기사