[ข่าว] jQueryTips ft. ThaiAjax แล้วนะ
ก่อนที่จะมาเข้าสู่บทความเล็กๆ ของวันนี้ (จริงๆ มันจะสั้นมากจนไม่น่าเรียกว่า บทความ) ผมมีความยินดีที่จะบอกว่า ตอนนี้ jQueryTips.com ft. Thaiajax.com เป็นที่เรียบร้อยแล้ว โดยที่ ตอนนี้ถ้าเข้า เว็บ thaiajax จะ redirect มาที่ jQueryTips แทน
นอกจากนี้ Mr.TuM จะย้ายมาทำการ อัพเดทบทความที่นี่ แทน ว้าว !!!
นอกจากนี้ จะมี นักเขียนหน้าใหม่ มาร่วมด้วยอีก 2-3 คน เร็วๆ นี้ เป็นการเติบโต เล็กๆ ของ jQueryTips จริงๆ หลังจาก นั่งถึกเขียนคนเดียว มาเกือบ 2 ปี (ทีนี้กูจะได้อู้บ้างละ)
สำหรับ TuM เป็น developer ที่เรียกได้ว่า ศึกษา เรื่อง ajax เป็นคนแรกๆ ของไทยเลยทีเดียว ตั้งแต่ตอนที่มันยังไม่บูม รวมทั้งเขียน ajax framework ขึ้นใช้งานเอง ถือว่า เป็น developer ที่ประสบกาม (เอ้ย การณ์) โชกโชนเลยทีเดียว ยังไงก็รออ่าน บทความของเค้ากันนะครับ
เอาล่ะ เข้าเรื่องๆ ….
สำหรับบทความในวันนี้ เป็นคำสั่งที่ผมไม่เคยเอามาแนะนำ ซึ่ง มันทำมาตั้งแต่ jQuery v1.3.x เป็นต้นมา คือคำสั่ง
closest
โดยเป็นคำสั่งที่มีหน้าที่ หา element ที่เราระบุ เพื่อมาใช้ทำงาน ซึ่งพอเขียนออกมา จะได้ หน้าตาราวๆ นี้
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html>
-
<head>
-
<title>jQuery</title>
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
$(function() {
-
-
$(document).click(function(e) {
-
$(e.target).closest(‘li’).toggleClass(‘hilight’);
-
});
-
-
});
-
</script>
-
<style type="text/css">
-
li {
-
background: #EEE;
-
}
-
li.hilight {
-
background: #3366FF;
-
}
-
</style>
-
</head>
-
<body>
-
-
<ul>
-
<li>Hello</li>
-
</ul>
-
-
-
</body>
-
</html>
ซึ่งหัวใจมัน อยู่ที่จุดนี้ครับ
-
$(document).click(function(e) {
-
$(e.target).closest(‘li’).toggleClass(‘hilight’);
-
});
หมายความว่า ไม่ว่าเราจะคลิกส่วนไหน ถ้า element ไม่ match = li ก็จะไม่ทำงาน แต่ ถ้า match ก็จะทำการ toggle class ที่ ชื่อ hilight
และ ก็ syntax มันเป็นแบบนี้ครับ
closest(expr)
แปลว่าสามารถระบุ expression ได้ด้วย
จบๆ บอกแล้วว่า วันนี้สั้นๆ
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
