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