การใช้ jQuery จัดการโหนด
สำรวจเอลิเมนต์ที่เลือกมา ผลลัพธ์จากการเลือกเอลิเมนต์จะเป็น collection เป็นออบเจ็กต์ที่มีออบเจ็กต์ย่อยๆ อยู่ภายใน การเข้าไปยังโหนดต่างๆ จะใช้ .each(function(index){})
<!doctype html> <html> <head> <meta charset=“utf-8”> <title>jQuery</title> <script src=“jquery-1.11.3.min.js”></script> </head> <body> <p>First</p> <p>second</p> <script type=“text/javascript”> var showStr = “”; $(“p”).each(function(index){ showStr = “index “ + index + “:”+$(this).text(); alert(showStr); }); </script> </body> </html>
<!doctype html> <html> <head> <meta charset=“utf-8”> <title>jQuery</title> <script src=“jquery-1.11.3.min.js”></script> </head> <body> <ul> <li>First</li> <li>second</li> </ul> <div></div> <script type=“text/javascript”> var showStr = “”; $(“li”).each(function(index){ showStr += “index “ + index + “:”+$(this).text()+”<br>”; }); $(“div”).html(showStr); $(“div”).css(“color”,”red”) </script> </body> </html>
การแก้ไขคุณสมบัติของเอลิเมนต์ สามารถแก้ไขคุณสมบัติ (properties) ด้วย jQuery ใช้คำสั่ง this.properties_name
<!doctype html> <html> <head> <meta charset=“utf-8”> <title>jQuery</title> <script src=“jquery-1.11.3.min.js”></script> </head> <body> <h2 id=“myH2”>jQuery</h2> <script type=“text/javascript”> $(“h2”).each(function(index){ this.title = “jQuery title”; alert(“title ” + this.title); }); </script> </body> </html>
การกำหนดคุณสมบัติหลายค่าพร้อมกัน jQuery สามารถกำหนดคุณสมบัติได้หลายค่าพร้อมกัน ใช้ {} ครอบคุณสมบัติที่ต้องการกำหนดทั้งหมด
<!doctype html> <html> <head> <meta charset=“utf-8”> <title>jQuery</title> <script src=“jquery-1.11.3.min.js”></script> </head> <body> <h2 id=“myH2”>jQuery</h2> <h3 id=“myH3”>jQuery</h3> <script type=“text/javascript”> $(“#myH2”).css( { background:”red”, border:”3px blue solid” } ); $(“#myH3”).css( background:”blue”, border:”3px red solid” </script> </body> </html>
การเพิ่มและลบเอลิเมนต์ใน jQuery append() การเพิ่มเอลิเมนต์ในตำแหน่งสุดท้าย appendTo() การเพิ่มเอลิเมนต์ในตำแหน่งสุดท้าย prepend() การเพิ่มเอลิเมนต์ในตำแหน่งแรก prependTo() การเพิ่มเอลิเมนต์ในตำแหน่งแรก remove() การลบเอลิเมนต์
<!doctype html> <html> <head> <meta charset=“utf-8”> <title>jQuery</title> <script src=“jquery-1.11.3.min.js”></script> </head> <body> <ul id=“myList”> <li>std no</li> <li>std name</li> </ul> <script type=“text/javascript”> $(“#myList”).append(“<li>std surname</li>”); $(“<li>address</li>”).appendTo(“#myList”); </script> </body> </html>
<!doctype html> <html> <head> <meta charset=“utf-8”> <title>jQuery</title> <script src=“jquery-1.11.3.min.js”></script> </head> <body> <table border=“1” id=“myTable”> <tr><td>name</td></tr> <tr><td>surname</td></tr> </table> <script type=“text/javascript”> $(“table”).prepend(“<tr><td>Head column</td></tr>”); $(“tr:first-child”).css( { background:”blue”, color:”white” } ); </script> </body> </html>