MooTools - ตัวเลือก
ตัวเลือกใช้เพื่อเลือกองค์ประกอบ HTML เมื่อใดก็ตามที่คุณต้องการสร้างเว็บเพจแบบโต้ตอบคุณต้องเลือกข้อมูลหรือการดำเนินการบางอย่างจากหน้าเว็บนั้น ตัวเลือกช่วยให้เรารับข้อมูลผ่านคำขอ HTML จากองค์ประกอบ
ตัวเลือกพื้นฐาน ($)
$เป็นตัวเลือกพื้นฐานใน MooTools เมื่อใช้สิ่งนี้คุณสามารถเลือกองค์ประกอบ DOM โดยใช้รหัส ตัวอย่างเช่นสมมติว่าคุณมีองค์ประกอบ HTML (เช่น div) ชื่อbody_id.
<div id = "body_id">
</div>หากคุณต้องการเลือก div นี้ให้ใช้ไวยากรณ์ต่อไปนี้ -
ไวยากรณ์
//selects the element with the ID 'body_id'
$('body_id');getElement ()
getElement () เป็นวิธีการที่ขยายตัวเลือกพื้นฐาน ($) ช่วยให้คุณปรับแต่งการเลือกของคุณโดยใช้รหัสองค์ประกอบ getElement () เลือกเฉพาะองค์ประกอบเดียวและจะส่งคืนค่าแรกหากมีหลายตัวเลือก คุณยังสามารถใช้ชื่อคลาสเพื่อรับองค์ประกอบที่เกิดขึ้นครั้งแรก แต่จะไม่ได้รับอาร์เรย์ขององค์ประกอบ
ตัวเลือกหลายตัว ($$)
$$ ใช้เพื่อเลือกองค์ประกอบหลายรายการและวางองค์ประกอบเหล่านั้นลงในอาร์เรย์ จากอาร์เรย์นั้นเราสามารถจัดการเรียกค้นและจัดลำดับรายการใหม่ได้หลายวิธี ดูไวยากรณ์ต่อไปนี้ กำหนดวิธีการเลือกองค์ประกอบ div ทั้งหมดจากชุดขององค์ประกอบ HTML บนหน้าเว็บ
ไวยากรณ์
<div>
<div>a div</div>
<span id = "id_name">a span</span>
</div>หากคุณต้องการเลือก div ทั้งหมดให้ใช้ไวยากรณ์ต่อไปนี้ -
ไวยากรณ์
//all divs in the page
$$('div');หากคุณต้องการเลือกหลาย div ที่มีชื่อ id เดียวกันให้ใช้ไวยากรณ์ต่อไปนี้ -
ไวยากรณ์
//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 ('อินพุต [ชื่อ ^ = โทรศัพท์]'); |
| $ = (ลงท้ายด้วย) | เลือกองค์ประกอบการป้อนข้อมูลโดยเปรียบเทียบตัวอักษรลงท้ายของชื่อ | $ ('body_wrap'). getElements ('อินพุต [ชื่อ $ = หมายเลข]'); |
| ! = (ไม่เท่ากับ) | ยกเลิกการเลือกองค์ประกอบอินพุตโดย is name | $ ('body_wrap'). getElements ('input [name! = address]'); |
| * = (มี) | เลือกองค์ประกอบการป้อนข้อมูลที่มีรูปแบบตัวอักษรเฉพาะ | $ ('body_wrap'). getElements ('อินพุต [ชื่อ * = โทรศัพท์]'); |
ตัวเลือกตามลำดับองค์ประกอบ
ตัวเลือก MooTools ทำตามลำดับเฉพาะในการเลือกองค์ประกอบ ตัวเลือกส่วนใหญ่ทำตามคำสั่งสองคำสั่ง; ตัวหนึ่งเป็นเลขคู่และอีกตัวเป็นเลขคี่
Note - ตัวเลือกนี้เริ่มต้นที่ 0 ดังนั้นองค์ประกอบแรกจึงเป็นเลขคู่
แม้กระทั่งการสั่งซื้อ
ในลำดับนี้ตัวเลือกจะเลือกองค์ประกอบที่อยู่ในลำดับคู่ ใช้ไวยากรณ์ต่อไปนี้เพื่อเลือกแม้แต่ divs ทั้งหมดในหน้า HTML ของคุณ
Syntax
// selects all even divs
$$('div:even');คำสั่งแปลก
ในลำดับนี้ตัวเลือกจะเลือกองค์ประกอบที่อยู่ในลำดับคี่ ใช้ไวยากรณ์ต่อไปนี้เพื่อเลือก div คี่ทั้งหมดในหน้า HTML ของคุณ
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