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