MooTools-선택기

선택기는 HTML 요소를 선택하는 데 사용됩니다. 대화 형 웹 페이지를 만들 때마다 해당 웹 페이지에서 일부 데이터 또는 작업을 선택해야합니다. 선택기는 요소에서 HTML 요청을 통해 데이터를 수신하는 데 도움이됩니다.

기본 선택기 ($)

그만큼 $MooTools의 기본 선택기입니다. 이를 사용하여 ID로 DOM 요소를 선택할 수 있습니다. 예를 들어, 이름이 div와 같은 HTML 요소가 있다고 가정합니다.body_id.

<div id = "body_id">

</div>

이 div를 선택하려면 다음 구문을 사용하십시오.

통사론

//selects the element with the ID 'body_id'
$('body_id');

getElement ()

getElement ()는 기본 선택자 ($)를 확장하는 메소드입니다. 요소 ID를 사용하여 선택을 구체화 할 수 있습니다. getElement ()는 단일 요소 만 선택하고 여러 옵션이있는 경우 첫 번째 요소를 반환합니다. 클래스 이름을 사용하여 요소의 첫 번째 항목을 가져올 수도 있습니다. 그러나 요소 배열을 얻지 못합니다.

다중 선택기 ($$)

$$는 여러 요소를 선택하고 이러한 여러 요소를 배열에 배치하는 데 사용됩니다. 그 배열에서 우리는 다른 방식으로 목록을 조작, 검색 및 재정렬 할 수 있습니다. 다음 구문을 살펴보십시오. 웹 페이지의 HTML 요소 모음에서 모든 div 요소를 선택하는 방법을 정의합니다.

통사론

<div>
   <div>a div</div>
   <span id = "id_name">a span</span>
</div>

모든 div를 선택하려면 다음 구문을 사용하십시오.

통사론

//all divs in the page
$$('div');

동일한 ID 이름을 가진 여러 div를 선택하려면 다음 구문을 사용하십시오.

통사론

//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');

getElements ()

getElements () 메서드는 getElement () 메서드와 유사합니다. 이 메서드는 기준에 따라 모든 요소를 ​​반환합니다. 둘 중 하나를 사용할 수 있습니다.element name (a, div, input) 컬렉션이나 특정 요소를 선택하려면 class name 동일한 클래스의 요소 모음을 선택합니다.

연산자를 사용하여 결과 포함 및 제외

MooTools는 선택 항목을 구체화하는 데 사용되는 다양한 연산자를 지원합니다. getElements () 메서드에서 이러한 모든 연산자를 사용할 수 있습니다. 이러한 각 연산자를 사용하여 이름으로 입력 요소를 선택할 수 있습니다.

다음 표를 살펴보십시오. MooTools가 지원하는 다양한 연산자를 정의합니다.

운영자 기술
= (같음) 이름으로 입력 요소를 선택합니다. $ ( 'body_wrap'). getElements ( 'input [name = phone_number]');
^ = (로 시작) 이름의 시작 문자를 비교하여 입력 요소를 선택하십시오. $ ( 'body_wrap'). getElements ( 'input [name ^ = phone]');
$ = (다음으로 끝남) 이름의 끝 문자를 비교하여 입력 요소를 선택하십시오. $ ( 'body_wrap'). getElements ( 'input [name $ = number]');
! = (같지 않음) is name으로 입력 요소를 선택 취소합니다. $ ( 'body_wrap'). getElements ( 'input [name! = address]');
* = (포함) 특정 문자 패턴을 포함하는 입력 요소를 선택하십시오. $ ( 'body_wrap'). getElements ( 'input [name * = phone]');

요소 순서에 따른 선택자

MooTools 선택기는 요소 선택에서 특정 순서를 따릅니다. 선택자는 주로 두 가지 순서를 따릅니다. 하나는 짝수이고 다른 하나는 이상합니다.

Note −이 선택기는 0에서 시작하므로 첫 번째 요소는 짝수입니다.

짝수 주문

이 순서로 선택기는 균등 한 순서로 배치 된 요소를 선택합니다. HTML 페이지에서 모든 짝수 div를 선택하려면 다음 구문을 사용하십시오.

Syntax

// selects all even divs
$$('div:even');

이상한 순서

이 순서로 선택기는 홀수 순서로 배치 된 요소를 선택합니다. HTML 페이지에서 모든 홀수 div를 선택하려면 다음 구문을 사용하십시오.

Syntax

// selects all odd divs
$$('div:odd');

Example

다음 예제는 선택기가 작동하는 방식을 보여줍니다. 웹 페이지에 텍스트 상자와 기술 목록이 있다고 가정합니다. 텍스트 상자에 해당 이름을 입력하여 목록에서 하나의 기술을 선택하면 입력 한 내용에 따라 필터링 된 결과가 목록에 표시됩니다. 이것은 MooTools 선택기를 사용하여 가능합니다. 선택기를 사용하여 텍스트 상자에 이벤트를 추가 할 수 있습니다. 이벤트 리스너는 텍스트 상자에서 데이터를 선택하고 목록에서 확인합니다. 목록에 있으면 목록에 필터링 된 결과가 표시됩니다. 다음 코드를 살펴보십시오.

<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready',function(){
            var input = $('filter');
            
            // set the title attribute of every element
            // to it's text in lowercase
            $$('ul > li').each(function(item){
               item.set('title', item.get('text').toLowerCase());
            });
            
            // the function we'll call when the user types
            var filterList = function(){
               var value = input.value.toLowerCase();
               $$('li').setStyle('display','none');
               
               // check the title attribute if it contains whatever the user is typing
               $$('ul > li[title*=' + value + ']').setStyle('display','');
            };
            
            // make it happen
            input.addEvent('keyup', filterList);
         });
      </script>
   </head>
   
   <body>
      <p><input id = "filter" type = "text" /></p>
      <ul>
         <li>C</li>
         <li>Cpp</li>
         <li>Java</li>
         <li>JavaScript</li>
         <li>Hadoop</li>
         <li>Hive</li>
         <li>CouchDB</li>
      </ul>
   </body>
   
</html>

다음과 같은 출력을 받게됩니다.

Output