MooTools - Bộ chọn

Bộ chọn được sử dụng để chọn các phần tử HTML. Bất cứ khi nào bạn muốn tạo các trang web tương tác, bạn cần chọn một số dữ liệu hoặc một hành động từ trang web đó. Bộ chọn giúp chúng tôi nhận dữ liệu thông qua yêu cầu HTML từ các phần tử.

Bộ chọn cơ bản ($)

Các $là bộ chọn cơ bản trong MooTools. Sử dụng điều này, bạn có thể chọn phần tử DOM theo ID của nó. Ví dụ: giả sử bạn có một phần tử HTML (chẳng hạn như div) có tênbody_id.

<div id = "body_id">

</div>

Nếu bạn muốn chọn div này, hãy sử dụng cú pháp sau:

Cú pháp

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

getElement ()

getElement () là một phương thức mở rộng bộ chọn cơ bản ($). Nó cho phép bạn tinh chỉnh lựa chọn của mình bằng cách sử dụng ID phần tử. getElement () chỉ chọn phần tử duy nhất và sẽ trả về phần tử đầu tiên nếu có nhiều tùy chọn. Bạn cũng có thể sử dụng Tên lớp để nhận lần xuất hiện đầu tiên của một phần tử. Nhưng nó sẽ không nhận được mảng các phần tử.

Nhiều bộ chọn ($$)

$$ được sử dụng để chọn nhiều phần tử và đặt nhiều phần tử đó vào một mảng. Từ mảng đó, chúng ta có thể thao tác, truy xuất và sắp xếp lại danh sách theo nhiều cách khác nhau. Hãy xem cú pháp sau. Nó xác định cách chọn tất cả các phần tử div từ tập hợp các phần tử HTML trên một trang web.

Cú pháp

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

Nếu bạn muốn chọn tất cả các div, hãy sử dụng cú pháp sau:

Cú pháp

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

Nếu bạn muốn chọn nhiều div có cùng tên id, hãy sử dụng cú pháp sau:

Cú pháp

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

getElements ()

Phương thức getElements () tương tự như phương thức getElement (). Phương thức này trả về tất cả các phần tử theo tiêu chí. Bạn có thể sử dụngelement name (a, div, input) để chọn các bộ sưu tập đó hoặc một phần tử cụ thể class name để chọn tập hợp các phần tử của cùng một lớp.

Bao gồm và loại trừ kết quả bằng toán tử

MooTools hỗ trợ các toán tử khác nhau được sử dụng để tinh chỉnh các lựa chọn của bạn. Bạn có thể sử dụng tất cả các toán tử này trong phương thức getElements (). Mỗi toán tử này có thể được sử dụng để chọn một phần tử đầu vào theo tên.

Hãy xem bảng sau. Nó xác định các toán tử khác nhau mà MooTools hỗ trợ.

Nhà điều hành	Sự miêu tả	Thí dụ
= (bằng)	Chọn phần tử đầu vào theo tên của nó.	$ ('body_wrap'). getElements ('input [name = phone_number]');
^ = (bắt đầu bằng)	Chọn phần tử đầu vào bằng cách so sánh các chữ cái bắt đầu của tên.	$ ('body_wrap'). getElements ('input [name ^ = phone]');
$ = (kết thúc bằng)	Chọn phần tử đầu vào bằng cách so sánh các chữ cái cuối của tên.	$ ('body_wrap'). getElements ('input [name $ = number]');
! = (không bằng)	Bỏ chọn phần tử đầu vào theo tên.	$ ('body_wrap'). getElements ('input [name! = address]');
* = (Chứa)	Chọn phần tử đầu vào chứa mẫu chữ cụ thể.	$ ('body_wrap'). getElements ('input [name * = phone]');

Bộ chọn dựa trên thứ tự phần tử

Bộ chọn MooTools tuân theo một thứ tự cụ thể trong việc lựa chọn phần tử. Người chọn chủ yếu tuân theo hai thứ tự; một là chẵn và khác là lẻ.

Note - Bộ chọn này bắt đầu từ 0, vì vậy phần tử đầu tiên là chẵn.

Đặt hàng chẵn

Theo thứ tự này, bộ chọn sẽ chọn các phần tử được đặt theo thứ tự chẵn. Sử dụng cú pháp sau để chọn tất cả các div chẵn trong trang HTML của bạn.

Syntax

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

Đơn hàng lẻ

Theo thứ tự này, bộ chọn chọn phần tử được đặt theo thứ tự lẻ. Sử dụng cú pháp sau để chọn tất cả các div lẻ trong trang HTML của bạn.

Syntax

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

Example

Ví dụ sau đây cho thấy cách một bộ chọn hoạt động. Giả sử, có một hộp văn bản và danh sách các công nghệ trên một trang web. Nếu bạn chọn một công nghệ từ danh sách bằng cách nhập tên đó vào hộp văn bản, thì danh sách sẽ hiển thị kết quả được lọc dựa trên đầu vào của bạn. Điều này có thể thực hiện được bằng cách sử dụng bộ chọn MooTools. Sử dụng bộ chọn, chúng ta có thể thêm một sự kiện vào hộp văn bản. Trình nghe sự kiện sẽ chọn dữ liệu từ hộp văn bản và kiểm tra dữ liệu đó từ danh sách. Nếu nó có trong danh sách, thì danh sách sẽ hiển thị các kết quả đã lọc. Hãy xem đoạn mã sau.

<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>

Bạn sẽ nhận được kết quả sau:

Output