ศึกษา jquery - basic selector

ศึกษา jquery - basic selector

ก่อนอื่น ขอเท้าความถึง selector ก่อน เพราะว่าหากไม่เข้าใจ ว่ามันคืออะไร บทความนี้ ก็จะเป็น 0 ไปเลยครับ

จากที่เราได้รู้กันอยู่แล้ว(รึเปล่า) ว่าหน้าเว็บที่เราเห็นในแต่ละหน้า จะมีองค์ประกอบของ DOM HTML มากมาย โดยแต่ละ object นั้น ก็จะมีหน้าที่ และตำแหน่งการจัดเรียง แสดงผล ที่แตกต่างกัน ขึ้นอยู่กับการเขียนโค้ด HTML ของเรา(จะแสดงการจัดเรียง) และการจัด CSS ของเรา(จะแสดงผล) เมื่อเราเขียน javascript ส่วนใหญ่ ก็ต้องการให้มีผลกับ Object ที่อยู่ในหน้าเว็บนั้นๆ เช่น ต้องการเปลี่ยนข้อความที่อยู่ในกล่องคำพูด , ทำให้ปุ่มกดหายไปเมื่อถูกคลิก จากตัวอย่างเหล่านี้ เราจะสั่งให้ javascript มีผลต่อ object เหล่านี้เหมือนดั่งใจเราต้องการ เราก็จะต้องรู้จักการใช้ Selector ดังในบทความนี้ด้วย เพราะว่าหากเราใช้งาน selector ไม่เป็น นั่นแปลว่าเราจะระบุเป้าหมาย(object เช่น ปุ่ม กล่องข้อความ ฯลฯ)ที่ javascript ทำงานไม่ได้ แล้วเราจะเขียนโปรแกรมให้มันทำงานต่อไปได้อย่างไรครับ


All selector('*')

ตัวอย่าง

jQuery('*')

คำเตือน : จะหมายถึงทุก object ซึ่งจะทำงานได้ช้ามาก 

ตัวอย่าง basic.1 ค้นหา ทุกๆ element ใน document

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <script type="text/javascript" src="src/jq142.min.js"></script>  <style type="text/css">  h3 { margin: 0; }   div,span,p {     width: 80px;     height: 40px;     float:left;     padding: 10px;     margin: 10px;     background-color: #EEEEEE;   } </style>  </head>  <body>  <a href="http://meewebfree.com/site/javascript-jquery/273-basic-jquery-basic-selector">กลับหน้าบทความ</a> <div>DIV</div>   <span>SPAN</span>   <p>P <button>Button</button></p> <script>var elementCount = var elementCount = $("*").css("border","3px solid red").length; $("body").prepend("<h3>" + elementCount + " elements found</h3>");</script> </body>  </html>

 

ตัวอย่าง basic.2 วิธีพื้นฐานในการเลือกทุกๆ element โดยค้นใน document.body ดังนั้น head , script และอื่นๆจะไม่ถูกเรียกใช้


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <script type="text/javascript" src="src/jq142.min.js"></script>  <style type="text/css">  h3 { margin: 0; }   div,span,p {     width: 80px;     height: 40px;     float:left;     padding: 10px;     margin: 10px;     background-color: #EEEEEE;   } </style>  </head>  <body>  <a href="http://meewebfree.com/site/javascript-jquery/273-basic-jquery-basic-selector">กลับหน้าบทความ</a> <div>DIV</div>   <span>SPAN</span>   <p>P <button>Button</button></p> <script>var elementCount = var elementCount = $(document.body).find("*").css("border","3px solid red").length; $("body").prepend("<h3>" + elementCount + " elements found</h3>");</script> </body>  </html>


Class selector ('.class')

ตัวอย่าง

jQuery('.class')
class
ชื่อ class ที่เราต้องการให้มีผล ซึ่งก็คือตั้งแต่ 1 class ขึ้นไปจะมีผลทั้งหมด

สำหรับ class selector นั้น jQuery ใช้ JavaScript native  funciton getElementByClassName() สำหรับ browser ที่สามารถใช้งานได้

ตัวอย่าง basic.3 หา element ที่มีชื่อ class ว่า myClass

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <script type="text/javascript" src="src/jq142.min.js"></script>  <style type="text/css">  h3 { margin: 0; }   div,span,p {     width: 80px;     height: 40px;     float:left;     padding: 10px;     margin: 10px;     background-color: #EEEEEE;   } </style>  </head>  <body>  <a href="http://meewebfree.com/site/javascript-jquery/273-basic-jquery-basic-selector">กลับหน้าบทความ</a>  <div class="notMe">div class="notMe"</div>   <div class="myClass">div class="myClass"</div>   <span class="myClass">span class="myClass"</span> <script>$(".myClass").css("border","3px solid red");</script> </body>  </html>

ตัวอย่าง basic.4 หา elementที่มีชื่อ class ว่า myClass และ otherclass 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <script type="text/javascript" src="src/jq142.min.js"></script>  <style type="text/css">  h3 { margin: 0; }   div,span,p {     width: 80px;     height: 40px;     float:left;     padding: 10px;     margin: 10px;     background-color: #EEEEEE;   } </style>  </head>  <body>  <a href="http://meewebfree.com/site/javascript-jquery/273-basic-jquery-basic-selector">กลับหน้าบทความ</a> <div class=".myclass">div class="notMe"</div> <div class="myclass otherclass">div class="myClass"</div> <span class="myclass otherclass">span class="myClass"</span> <script>$(".myclass.otherclass").css("border","13px solid red");</script> </body>  </html>


Element Selector ('element')

jQuery('element')
element
element ที่ระบุ โดยอ้างอิงจาก tagName ในเอกสาร DOM

เมื่อใช้ตามนี้ จะเป็นการเรียก function getElementByTagName() ในjavascript

ตัวอย่าง basic.5 เรียก div element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <script type="text/javascript" src="src/jq142.min.js"></script>  <style type="text/css">  h3 { margin: 0; }   div,span,p {     width: 80px;     height: 40px;     float:left;     padding: 10px;     margin: 10px;     background-color: #EEEEEE;   } </style>  </head>  <body>  <a href="http://meewebfree.com/site/javascript-jquery/273-basic-jquery-basic-selector">กลับหน้าบทความ</a> <div>DIV1</div>  <div>DIV2</div>  <span>SPAN</span> <script>$("div").css("border","9px solid red");</script> </body>  </html>


ID Selector ('#id')

ตัวอย่าง

jQuery('#id')
id
id ที่ถูกกำหนดในหน้าเว็บ

สำหรับ id selector นั้น jQuery จะใช้ javaScript funcion document.getElementById() และเพื่อให้ผลที่ดีกว่า เมื่อมีการเรียก ควรระบุ selector นั้นไว้ด้วย เช่น  h2#pageTitle jQuery จะทำการตรวจสอบให้ได้รวดเร็วและถูกต้อง

โดย ID ใดๆ จะมีได้เพียงตำแหน่งเดียวเท่านั้นในหน้าเว็บ ถ้ามีการระบุ id ที่มากกว่าหนึ่งตำแหน่ง โดย id เดียวกัน จะมีผลเฉพาะ ID แรกที่ปรากฏก่อนเท่านั้น แต่ก็ไม่แน่เสมอไป และที่สำคัญการใช้ id เดียวกันมากกว่าหนึ่งตำแหน่งนั้น เป็นการเขียนที่ผิดรูปแบบของเว็บมาตรฐาน

ถ้า id มีส่วนประกอบของเครื่องหมายพิเศษ เช่น colon จะต้องเรียกโดยมี backslash กั้นด้วย

ตัวอย่าง basic.6 เรียก element ที่มี id ชื่อ myDiv

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <script type="text/javascript" src="src/jq142.min.js"></script>  <style type="text/css">  div { width: 90px; height: 90px; float:left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style>  </head>  <body>  <a href="http://meewebfree.com/site/javascript-jquery/273-basic-jquery-basic-selector">กลับหน้าบทความ</a> <div id="notMe"> <p>id="notMe"</p> </div>  <div id="myDiv">id="myDiv"</div> <script>$("#myDiv").css("border","3px solid red");</script> </body>  </html>

ตัวอย่าง basic.7 เรียก element ที่มี id ชื่อ myID.entry[1] เพื่อให้เห็นว่าเรียกใช้ idที่มีเครื่องหมายพิเศษได้อย่างไร

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <script type="text/javascript" src="src/jq142.min.js"></script>  <style type="text/css">  div { width: 300px; float:left; padding: 2px; margin: 3px; background-color: #EEEEEE; } </style>  </head>  <body>  <a href="http://meewebfree.com/site/javascript-jquery/273-basic-jquery-basic-selector">กลับหน้าบทความ</a> <div id="myID.entry[0]">id="myID.entry[0]"</div>  <div id="myID.entry[1]">id="myID.entry[1]"</div>  <div id="myID.entry[2]">id="myID.entry[2]"</div> <script>$("#myID\\.entry\\[1\\]").css("border","3px solid red");</script> </body>  </html>

Multiple Selector ('selector1','selector2','selectorN')

jQuery('selector1','selector2','selectorN')
selector1
selector ที่เราต้องการ
selector2
selector ที่เราต้องการอีกอัน ซึ่งไม่เหมือนอันแรก
selectorN
selector อันที่เท่าไรก็ได้ ที่เราต้องการใช้

เราสามารถกำหนด selector เพื่อให้มีผลต่อหลายๆ object พร้อมกันได้ในครั้งเดียวเลย โดยอาจจะใช้ multiple expression หรือแบบที่เป็นระบุเจาะจงก็ได้ โดยผลที่ได้ ก็จะเรียงลงมาตามตำแหน่งของ document ด้วย หรืออีกทางเราสามารถเชื่อมได้โดยใช้ .add() method

ตัวอย่าง basic.8 หา element ที่ match กับทั้งสาม selector นี้

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <script type="text/javascript" src="src/jq142.min.js"></script>  <style type="text/css">  div,span,p { width: 126px; height: 60px; float:left; padding: 3px; margin: 2px; background-color: #EEEEEE; font-size:14px; } </style>  </head>  <body>  <a href="http://meewebfree.com/site/javascript-jquery/273-basic-jquery-basic-selector">กลับหน้าบทความ</a> <div>div</div> <p class="myClass">p class="myClass"</p>  <p class="notMyClass">p class="notMyClass"</p>  <span>span</span> <script>$("div,span,p.myClass").css("border","3px solid red");</script> </body>  </html>

ตัวอย่างที่ basic.9 แสดงลำดับของ jquery object

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <script type="text/javascript" src="src/jq142.min.js"></script>  <style type="text/css">  div,span,p { width: 126px; height: 60px; float:left; padding: 3px; margin: 2px; background-color: #EEEEEE; font-size:14px; } </style>  </head>  <body>  <a href="http://meewebfree.com/site/javascript-jquery/273-basic-jquery-basic-selector">กลับหน้าบทความ</a>  <span>span</span>  <p>p</p> <p>p</p>  <div>div</div>  <span>span</span>  <p>p</p> <div>div</div> <b></b> <script>    var list = $("div,p,span").map(function () {       return this.tagName;     }).get().join(", ");     $("b").append(document.createTextNode(list)); </script> </body>  </html>

ทั้งหมดนี้คือพื้นฐาน เราจำเป็นจะต้องทำความเข้าใจให้ดีครับ เพราะว่าหากพื้นฐานไม่ดี เราก็ต่อยอดได้ลำบาก

Create: Modify : 2010-09-29 10:53:17 Read : 8264 URL :