การเรียกใช้ jquery เริ่มจากเรียกผ่านการใช้เครื่องหมาย $ เพื่อเลือก ส่วนต่างๆบนหน้าเอกสาร HTML หรือคุณสมบัติต่างๆ แล้วจัดการผ่านทางแมธอดที่มีมาให้ใช้ สำหรับการวิธีการศึกษาเบื้องต้น สามารถทำได้โดยเขียนไฟล์ HTML ที่เรียกใช้งานไลบรารี jQuery และพิมพ์คำสั่งทดสอบผ่านทาง console ของเบราเซอร์ ถ้า Firefox ใช้ firebug หรือ Opera ผ่าน develop tool ที่เรียกว่า Opera Dragonfly
ในบทความนี้ผมใช้คำว่า “ส่วนที่เลือก” ซึ่งมาจากคำว่า Selector แทนที่จะให้คำว่าเลือกแท็ก(tag) เนื่องจากการให้ jQuery นั้นสามารถเลือกส่วนที่ต้องการทำงานด้วย ได้หลายแบบทั้ง HTML tag, css, properties และอื่นๆอีก
การเรียกใช้ jquery
วีธีที่ 1 เรียกใช้งาน jquery ในบรรทัดของโค้ด (inline code)
<!doctype html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="jquery-1.5.1.min.js"></script>
</head>
<body>
<p onclick="$(this).hide();">Hello</p>
</body>
</html>
วีธีที่ 2 เรียกใช้งาน jquery จากไฟล์ภายนอก
<!doctype html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
</head>
<body>
<p>Hello World</p>
</body>
<script src="jquery-1.5.1.min.js"></script>
<script src="myCodeHere.js"></script>
</html>
การเลือกส่วนต่างๆ (DOM) บนหน้าเอกสาร HTML
สมมติให้โค้ดเป็น body เป็น
<body>
<div id="parent">Parent <div id="child"> Child</div></div>
<div id="next">
<span class="blue">Span in DIV</span>
<span class="blue">Span in DIV2</span>
<span class="blue">Span in DIV3</span>
<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>
</div>
<div id="next2">Next to<div id="child2">Child2 <p>Hahaha....</p></div></div>
</body>
เลือกผ่าน tag เช่น $("div"); เลือกส่วนย่อหน้าทั้งหมด
เลือกผ่าน class เช่น $(".blue"); เลือกส่วนที่มี class ชื่อ blue ทั้งหมด
เลือกผ่าน id เช่น $("#child"); เลือกส่วนที่มี id ชื่อ child
เลือกทีละหลายอัน $("#parent,#child");
เลือกตามลำดับโครงสร้าง เช่น
เลือก div ทั้งหมดใน body
$("body div");
<body>
<div></div>
</body>
เลือกโหนดลูก parent>child
$("div>div");
<div><div></div></div>
เลือกส่วนที่อยู่ถัดไปใช้เครื่องหมาย ‘+’ คือ $("จาก + ถัดไป") ตัวอย่าง
$("div+div "); /* div ที่อยู่ถัดจาก div */
<div></div>
<div></div>
<div></div>
เลือกส่วนที่อยู่ภายใน ที่ครอบอยู่ด้วยกัน ให้เครื่องหมาย ‘~’ คล้ายกับการเลือกส่วนถัดไป แต่ไม่เลือกอันแรก
$("span~.blue"); /* div ที่อยู่ภายใน div ครอบเดียวกัน*/
<div>
<span class="blue"></span>
<span class="blue"></span>
<span class="blue"></span>
</div>
การกรองส่วนที่เลือก
ใช้เครื่องหมาย ‘:’ สำหรับการกรองส่วนที่ต้องการ
เลือกส่วนแรก หรือส่วนสุดท้าย
$("div:first");
$("div:last");
เลือกส่วนที่นอกเหนือจากนี้ เช่นเลือก div ที่ไม่มี id ชื่อ child
$("div:not(#child)");
เลือกส่วนมีลำดับคี่ (odd) หรือคู่ (even)
$("div:odd");
$("div:even");
เลือกโดยลำดับ (Index) โดยลำดับที่หนึ่งเริ่มจาก 0
$("div:eq(0)");
เลือกส่วนที่มีข้อความที่ต้องการ
$("div:contains(Span in DIV)");
เลือกส่วนที่มี ส่วนที่ระบุอยู่ภายใน
$("div:has(span)");
เลือกส่วนที่ว่างเปล่า
$(":empty");
เลือกส่วนที่เป็นโหนดแม่ ที่ไม่ว่าง
$("div:parent");
เลือกส่วนที่มองเห็น
$("div:visible");
เลือกส่วนที่มีคุณสมบัติที่ตรงตามต้องการ
$("[class=blue] ");
เลือกส่วนที่มีคุณสมบัตินอกเหนือที่กำหนด
$("div[id!=next] ");
กรณีต้องการกรองโหนดลูก ลำดับเริ่มจาก 1
$("p:nth-child(odd)");
$("p:nth-child(1)");
เลือกโหนดลูก เฉพาะอันแรกหรือสุดท้าย
$("div div:last");
แต่ถ้าต้องการโหนดลูกทุกอัน
$("div div:last-child");
การกรองในแบบฟอร์ม
กรองในฟอร์มตามชนิดของส่วนต่างๆ ในฟอร์มได้แก่ :button,:checkbox, :file,:image,:input,:password,:radio,:submit,:text
เช่น
$("input:radio");
เลือกเฉพาะส่วนที่ Enable หรือ Disable
$(":enabled");
$(":disable");
เลือกส่วนที่มีการ การเลือก ถูกเลือก
$(":checked");
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น