MooTools - Sử dụng Mảng
MooTools là một thư viện JavaScript nhẹ giúp tạo các trang web động. Trong khi quản lý phần tử DOM, chúng ta cần chọn tất cả các phần tử DOM của một trang web. Bộ sưu tập này có thể được xử lý bằng cách sử dụng mảng.
Chương này giải thích về cách sử dụng mảng để quản lý các phần tử DOM.
mỗi phương thức ()
Đây là phương pháp cơ bản để xử lý mảng. Nó lặp lại tất cả các phần tử thông qua một danh sách. Bạn có thể sử dụng phương pháp này dựa trên yêu cầu. Ví dụ: nếu bạn muốn chọn tất cả các phần tử div của một trang, hãy làm theo tập lệnh được đưa ra bên dưới. Hãy xem trang html sau đây chứa nhiều div.
<div>One</div>
<div>Two</div>Bạn có thể sử dụng tập lệnh sau để chọn each individual divtừ một bộ sưu tập các div trên trang. Tập lệnh sẽ chọn từng div và chuyển một cảnh báo. Hãy xem kịch bản sau.
Kịch bản
$$('div').each(function() {
alert('a div');
});Bạn có thể sử dụng cú pháp sau để xử lý ví dụ đã cho ở trên. Hãy xem trang HTML.
Kịch bản
<div id = "body_div">
<div>One</div>
<div>Two</div>
</div>Ở đây, hai div được bao bằng một div khác - body_div. Trong khi thiết kế một script, chúng ta chỉ phải chọn một div bên ngoài. Sau đó, bằng cách sử dụng phương thức getElements (), chúng ta có thể chọn hai div bên trong. Hãy xem kịch bản sau.
Kịch bản
$('body_wrap').getElements('div').each(function() {
alert('a div');
});Bạn có thể sử dụng một phương pháp khác để viết script trên như sau. Ở đây, chúng tôi đang sử dụng một biến riêng biệt để chọnbody_div.
Kịch bản
var myArray = $('body_div').getElements('div');
myArray.each(function() {
alert('a div');
});Chọn các phần tử cụ thể từ một mảng
Trong khi thao tác với một mảng các phần tử, chúng ta có thể chọn một phần tử cụ thể từ một mảng các phần tử. Sau đây là một số phương pháp quan trọng được sử dụng để thao tác các phần tử DOM:
getLast ()
Phương thức này trả về phần tử cuối cùng của một mảng. Chúng ta hãy thiết lập một mảng để hiểu phương pháp này.
var myArray = $('body_div').getElements('div');Bây giờ chúng ta có thể lấy phần tử cuối cùng trong mảng.
var lastElement = myArray.getLast();Biến lastElement bây giờ đại diện cho phần tử cuối cùng trong myArray.
getRandom ()
Phương thức getRandom () hoạt động theo cách tương tự như phương thức getLast (), nhưng sẽ lấy một phần tử ngẫu nhiên từ mảng.
Syntax
var randomElement = myArray.getRandom();Biến randomElement bây giờ đại diện cho một phần tử được chọn ngẫu nhiên trong myArray.
Bản sao của một mảng
MooTools cung cấp một cách để sao chép một mảng bằng cách sử dụng hàm $ A (). Sau đây là cú pháp của hàm $ A ().
Cú pháp
var <variable-name> = $A ( <array-variable>);Thêm một phần tử vào một mảng
Có hai phương pháp khác nhau để thêm các phần tử vào một mảng. Phương pháp đầu tiên cho phép bạn thêm từng phần tử một hoặc bạn có thể hợp nhất hai mảng khác nhau thành một.
bao gồm ()
Phương thức include () được sử dụng để thêm một mục vào một mảng các phần tử DOM. Ví dụ: hãy xem xét mã HTML sau có chứa hai phần tử div và một phần tử span dưới một div duy nhất và kèm theo:body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span id = "add_to_array">add to array</span>
</div>Trong đoạn mã trên, nếu chúng ta gọi phương thức getElements ('div') trên body_divphần tử, chúng tôi nhận được một và hai div nhưng phần tử span không được đưa vào mảng. Nếu bạn muốn thêm nó vào mảng bạn gọiinclude()phương thức trên biến mảng. Hãy xem kịch bản sau.
Script
//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div');
//first add your element to a var
var newToArray = $('add_to_array');
//then include the var in the array
myArray.include(newToArray);Bây giờ, myArray chứa cả phần tử div và span.
phối hợp()
Phương thức này được sử dụng để kết hợp các phần tử của một mảng với các phần tử của một mảng khác. Điều này cũng xử lý nội dung trùng lặp. Ví dụ: hãy xem xét mã HTML sau chứa hai phần tử div và hai phần tử span dưới div đơn và kèm theo:body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span class = "class_name">add to array</span>
<span class = "class_name">add to array, also</span>
<span class = "class_name">add to array, too</span>
</div>Trong đoạn mã trên, hãy gọi phương thức getElements ('div') trên body_divthành phần. Bạn nhận được một và hai div. Gọi phương thức $$ ('. Class_name') chọn hai phần tử span. Bây giờ bạn có một mảng các phần tử div và một mảng các phần tử span khác. Nếu bạn muốn hợp nhất hai mảng này, bạn có thể sử dụng phương thức kết hợp (). Hãy xem kịch bản sau.
Script
//create your array just like we did before
var myArray= $('body_wrap').getElements('div');
//then create an array from all elements with .class_name
var newArrayToArray = $$('.class_name');
//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );Bây giờ, myArray chứa tất cả các phần tử của biến newArrayToArray.
Example
Điều này sẽ giúp bạn hiểu các mảng trong MooTools. Giả sử, chúng ta áp dụng màu nền cho mảng phần tử có chứa div và span. Hãy xem đoạn mã sau. Ở đây, mảng thứ hai của các phần tử không thuộc bất kỳ id hoặc nhóm lớp nào và đó là lý do tại sao nó không phản ánh bất kỳ màu nền nào. Hãy xem đoạn mã sau.
<!DOCTYPE html>
<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 myArray = $('body_wrap').getElements('.class_name');
var addSpan = $('addtoarray');
var addMany = $$('.addMany');
myArray.include(addSpan);
myArray.combine(addMany);
var myArrayFunction = function(item) {
item.setStyle('background-color', '#F7DC6F');
}
myArray.each(myArrayFunction);
});
</script>
</head>
<body>
<div id = "body_wrap">
<div class = "class_name">one</div>
<div>two</div>
<div class = "class_name">three</div>
<span id = "addtoarray">add to array</span>
<br /><span class = "addMany">one of many</span>
<br /><span class = "addMany">two of many</span>
</div>
</body>
</html>Bạn sẽ nhận được kết quả sau:
Output