<script language=”javascript”>

$(document).ready(function(){

$( document.body ).click( function () {

$(”div”).each( function(i) {

alert( (i+1) + “. Working in Tag =” + this.innerHTML);

if (this.style.color !=”blue”) {

this.style.color=”blue”;

}else{

this.style.color=””;

}

} );

} );

});

</script>

<style type=”text/css”>

div { color:red; text-align:center; cursor:pointer;

font-weight:bolder; width:300px; }

</style>

มี Tag div อยู่ 3 ตัวซึ่งเราจะมองว่า Tag div แต่ละตัวคือ element แต่ละ element

<div>Click here</div>

<div>to iterate through</div>

<div>these divs.</div>

$(document).ready(function(){

// ปุ่ม Insert

$(”#btnIn”).click(function () {

var txtnum=$(”.trcolor”).length+1;

$(”#tblData”).append($(”<tr class=\”trcolor\”> ” +

“           <td>”+txtnum+”</td>” +

“           <td><input type=\”text\”></td>”+

“           <td><input type=\”text\”></td>”+

“           <td><input type=\”text\”></td>”+

” </tr>”));

getMsg();

});

// ปุ่ม Delete

$(”#btnDel”).click(function (){

$(”.trcolor:last”).remove();

getMsg();

});

// function บอกจำนวนแถว โดยใช้ method length

function getMsg(){

var n=$(”.trcolor”).length;

$(”#lblMsg”).text(”There are ” + n + ” Rows.”);

}

});

</script>

<style type=”text/css”>

.trcolor { background:#F2F2F2; }

</style>

<button id=”btnIn”>RUN</button> | <button id=”btnDel”>Del</button>

<div id=”lblMsg”></div>

<table id=”tblData” width=”600″ border=”0″ cellpadding=”1″ cellspacing=”1″ bgcolor=”#CCCCCC”>

<tr>

<td width=”12%”><strong>Number</strong></td>

<td width=”24%”><strong> Name</strong></td>

<td width=”22%”><strong>Surname</strong></td>

<td width=”42%”><strong>Tel</strong></td>

</tr>

</table>

$(document).ready(function(){

/* initial function */

$(”#btnRun”).click(function (){

$(”div”).eq(2).css(”background”,”#CCFFFF”);

});

});

</script>

จากตัวอย่างนี้จะเป็นการ เลือก selector ที่ element Div และกำหนด eq ที่ 2 คือตำแหน่ง index ที่ 2 จากข้อมูลชุดด้านล่างนี้ เพื่อทำการ ใส่สี่ background

<button id=”btnRun”>RUN</button>

<div><a href=”#”>Data 01</a> < — index 0 , first element </div>

<div><a href=”#”>Data 02</a> < — index 1</div>

<div><a href=”#”>Data 03</a> < — index 2</div>

<div><a href=”#”>Data 04</a> < — index 3          , last element</div>

$(document).ready(function(){

$(”#btnRun”).click(function (){

var objDiv= $(”div”).get(); // ใช้ get ใส่ตัวแปร objDiv

var txt=[];            // ประกาศตัวแปร Array

for (var i =0;i<objDiv.length;i++){

txt.push(objDiv[i].innerHTML);

// push คือ method ของ Javascript เพื่อ ใส่ข้อมูลใน ตัวแปร Array

}

$(”span”).text(txt.join(” , “));

// join คือ method ของ Javascript เพื่อ เชื่อมสมาชิกแต่ละตัว ใน Array ซึ่ง Argument ของ join คือตัวคั่นระหว่าง สมาชิกแต่ละตัว

});

});

</script>

<button id=”btnRun”>RUN</button><br>

Data Divs Join : <span style=”color:#FF0000″></span>

<hr>

<div>One</div>

<div>Two</div>

<div>Three</div>

<div>Four</div>

$(document).ready(function(){

$(”div”).click(function (){

var txt=”Index is : ” + $(”div”).index(this);

alert(txt);

});         });

</script>

<div>One</div>

<div>Two</div>

<div>Three</div>

<div>Four</div>