Jquery Diary : เริ่มต้นกันกับ Selectors

เมื่อ : 29-Jan-12 18:23 อ่าน : 111 ครั้ง
Tag : jquery selector

สวัสดีครับ บทความนี้ขอเป็นจุดเริ่มไปยังบทความต่อ ๆ ไปของผม นายป่าน (xoxmile) ผู้รับหน้าที่ในส่วนของ

" Jquery Diary "

เสมือนจดบันทึกและแบ่งปันการใช้งานไปด้วยกัน หากวิธีการใช้งานนี้ นั้น หรือไหน มีอะไรที่น่าสนใจ หรือเสนอแนะเพิ่มเติมก็วานบอกกันได้เสมอครับผม

กลับมาเรื่องของ Jquery กันต่อเลย หลังจากนึกอยู่นานว่าจะเริ่มบันทึกจากตรงไหนดี ตั้งแต่ include script? noConflict?

และก็ตัดสินใจได้ว่า มะ! เอาเป็นว่าไปเริ่มกันในจุดที่ผมมักจะต้องไปเปิดอ่านบ่อย ๆ กับการใช้ jquery ในช่วงต้นเลย ก็คือเรื่องของ

Jquery selectors นี่ล่ะครับ!!

อ้างอิงหน้าที่พูดถึงก็คือ http://api.jquery.com/category/selectors/ นั่นเอง (อ่าาา ขายสวนมะพร้าวไปแล้วใครใคร่อ่านเต็ม ๆ เชิญตามลิงค์ได้เลยคร้าบผม)

เอาล่ะ มาเริ่มกันเถอะ!

<html>
    <head>
        <title>ทดสอบ Selector</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('div').css('width','100px');
                $('div').css('border','1px solid #000');
                $('div').css('margin','5px');
                $('span').css('border','1px solid #fff');
                $('.grey-bg').css('background-color','#ccc');
                $('#div2').css('background-color','#00cfcf');
                $('#div5').css('background-color','#cfcf00');
                $('#div5 span').css('background-color','#cf00cf');
                $('#div5 span').first().css('background-color','blue');
            });
        </script>
    </head>

    <body>
        <div id="div1" class="grey-bg">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
        <div id="div4">div4</div>
        <div id="div5">div5
            <span>span1</span>
            <span>span2</span>
        </div>
    </body>
</html>

จากตัวอย่าง Code ข้างต้น(ซึ่งผมอ้างไฟล์ jquery จาก googlecode) นั้นมาดูผลลัพธ์กันครับ

Photobucket

จะเห็นได้ว่าการ select element ขั้นต้น นั้นหากเคยเขียน css มาบ้างก็จะพบว่า "โอ้ ฉันเข้าใจมันทันที"

แต่ถ้าหากไม่เคยเขียน หรือไม่แน่ใจเรามาดูกันครับ

ในส่วนของคำสั่งที่ยกมา

$('div').css('width','100px');

ส่วนของ selector หรือตัวเลือกที่ผมสนใจในตอนนี้ ก็คือ

$('div') <<< ตรงนี้เอง

ส่วน .css('width','50px'); นั้นเป็นคำสั่งที่ใช้ในการกำหนด css ซึ่งถ้ามีอะไรน่าสนใจเราจะมาพูดถึงกันในครั้งถัด ๆ ไป

มาดูกันต่อ

$('div') มีความหมายถึง เลือก tag 'div' ทั้งหมดนั้นเอง

ดังนั้นคำสั่ง $('div').css('width','100px'); จึงมีความหมายเท่ากับว่า "tag 'div' ทั้งหมด จงมีความกว้าง 100px" นั่นเองล่ะ

ในขณะที่หากจะเลือกเฉพาะ class ก็ทำได้ด้วย เติม " . " (dot) แล้วตามด้วยชื่อคลาส

เช่น

$('.grey-bg').css('background-color','#ccc');

แปล : คลาส grey-bg ทั้งหมด จงมีสีพื้นหลังเป็นสี #ccc

และหากต้องการเลือกเฉพาะเจาะจง id ก็นำหน้าด้วย " # " (SHARP) ก็จะใช้เป็น

$('#div2').css('background-color','#00cfcf');

แปล : tag id "div2" จงมีสีพื้นหลังเป็นสี #00cfcf

ระวังนิดตรงที่การตั้ง id ของ tag ตามที่รู้กันอยู่แล้วว่า id นั้นจะต้องไม่ใช้ซ้ำกัน แต่กระนั้นก็อาจจะมีพลาดบ้าง หากไฟล์ๆเดียวกัน edit จากผู้เขียนหลาย ๆ คน ในที่นี้ jquery จะกระทำคำสั่งกับ tag ที่มี id ตรงกันนั้น เฉพาะ tag แรกที่เจอนั่นเอง

บางทีเราอาจจะอิงถึง tag สัก tag ที่เป็น ลูกของอีก tag ... อะไรนะ จะพูดให้วกวนทำไมเหรอครับ โอเคงั้นมาดูรูปกันดีกว่า

คือต้องการเลือก tag <span> ซึ่งเป็นลูกของ element ที่มี id คือ #div5

เราก็สามารถอ้างได้ดังนี้

$('#div5 span').css('background-color','#cf00cf');

ซึ่งอ่านได้ว่า <span> ที่อยู่ภายใต้ #div5 จงมีสี bg เป็นสี #cf00cf ซะ นั่นเอง

และนอกจากนี้ Jquery ก็ยังเตรียมคำสั่งในการเลือกที่ฉลาด ๆ ไว้ให้เราได้ใช้อีกมาก อย่างเช่น

$('#div5 span').first().css('background-color','blue');

.first() ที่เจาะจงว่าเลือกเฉพาะ span ที่เป็นลูกตัวแรกที่เจอนั้นเอง

และมีอีกมากมาย (แต่ไม่มากเกินไป) เพื่อรออำนวยความสะดวกแก่นักพัฒนา อยู่นั่นเอง (อีกเช่นกัน selectors ที่กล่าวในบทความนี้จะเห็นว่า หากคุ้น ๆ กับ css2 ก็จะรู้จักมันดีอยู่แล้ว :) )

ดังนั้นบทความหน้า ผมตั้งใจว่าจะเขียนบันทึกเรื่องราวการใช้งานของ selector ที่น่าสนใจอีก อย่างเช่น children, parent , siblings รวมไปถึง Attribute Contains, และคำสั่ง each นะครับ

แล้วพบกันใหม่ในบทความหน้าครับผม

สวัสดี

นายป่าน (xoxmile)

ASP.NET MVC, C#, MonoTouch, Entity Framework, Unit Test ...

Jquery Diary : เริ่มต้นกันกับ Selectors

ความเห็น

Friends