สอบถามเกี่ยวกับการเขียน jquery หน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเกี่ยวกับการเขียน jquery หน่อยครับ

สอบถามเกี่ยวกับการเขียน jquery หน่อยครับ

สมุมติ ตัวแปร หรือ การเข้าถึง เปน X นะคับ ต่อด้วยการทำฟังชั่น วนลูปของ jq อยากทราบว่า ภายในฟังชั่น ที่เราส่งค่าไปทำงาน เหมือนพารามิเตอร์เนี่ย แต่ผมเห็นบางคนเขียน รูปแบบนี้ขึ้นมา(ปกติมักจะเห็นแค่เป็น attribute ส่งไป) มันหมายความว่ายังไงหรอครับ พอจะมีบทความชี้แจง หรือ อธิบายหน่อยได้ไหมครับ ไม่เข้าใจเลยครับว่ามันทำงานยังไง ทำไมต้องใส่ function ซ้อนเข้าไปอีกที

$(function(){ 

 $(X).each(function(){
});
):

});

แล้วขอถามอีกอย่างนะครับ $(this) นี้หมายความยังไงหรอครับ ตัวมันเอง หรือ ยังไง ผมมองภาพไม่ค่อยออกจริงๆ 

ใครมีแหล่งบทความที่อ่านเข้าใจแนะนำหน่อยนะครับ ภาษาไทยยิ่งดี ขอบคุณมากครับ :)



Sinbad 171.101.187.xxx 12-12-2014 19:08:41

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
$(function(){ 
    // Handler for .ready() called.
}
มันเป็นการเขียนย่อ มาจาก

$( document ).ready(function() {
// Handler for .ready() called.
});
.ready();  ลองหาข้อมูลดูครับ

ฟังก์ชัน .ready( handler ) ใช้เพื่อระบุฟังก์ชันที่ต้องการให้ execute เมื่อ DOM โหลดเรียบร้อยแล้ว (“Specify a function to execute when the DOM is fully loaded.”) javascript จะมี load event ที่ทำงานหลังจากที่หน้าเว็บโหลดเสร็จหมดแล้ว หรือพูดอีกอย่างก็คือ load จะไม่ทำงานจนกว่ารูปภาพ, script, stylesheet จะโหลดเสร็จ ซึ่งโดยทั่วไปแล้ว script ต่างๆ ไม่จำเป็นต้องรอให้รูปภาพหรือ stylesheet โหลดเสร็จก่อนค่อยทำงานก็ได้ ถ้าหาก script นั้นๆ ไม่ขึ้นอยู่กับค่าของ css  >> cr. imooh.com


$(this) คือ แปล ตรงๆก็ ค่าที่นี่

<script type="text/javascript">  
   
    $(document).ready(function(){
      $( "button" ).click(function() {
        var name = $( this ).attr( "name" );
        alert(name);
      });
    });
</script> 

    <button name="name1" >name1</button>   
    <button name="name2" >name2</button>   
    <button name="name3" >name3</button>   
    <button name="name4" >name4</button> 
จากโค้ด คลิกปุ่มไหน ก็เอา ค่าที่ปุ่มนั้น  ขณะที่เกิดเหตุการณ์อยู่
ประมาณนี้ครับ  รอพี่เขามาอธิบายอีกที  ผมก็เดาๆเอา



wowowow 171.96.244.xxx 12-12-2014 22:04
 ความคิดเห็นที่ 2

ขอบคุณมากเลยครับ :)  เข้าใจขึ้นแต่ก็ยังสงสัยอยู่ดี

คือ $(function()) ตัวนี้ก็เปรียบเหมือน onload ใช่ไหมครับ คือทำการโหลดสคริปปกติ

แต่ที่สงสัยคือ ผมขอยกตัวอย่าง

 

       
       
       
     


ตรงเนี่ยแหละครับที่ทำให้ งง ว่า ทำไมใน event ที่ต้องการ ต้องใส่ $(function)ไปด้วย เพราะเป็นรูปแบบมัน หรือมีความหมายว่าอย่างไรหรอครับ

คือผมเพิ่งมาศึกษา jq อาจจะถามแปลกๆไปหน่อย เพราะโค้ดไม่ค่อยผ่านตา สว่นใหญ่ ใน () ผมมักจะมองเปนแค่ attibute หรือ string ค่าธรรมดา เจอแบบนี้ไปก็เลยไม่ชิน แถม งง 

ส่วน this ก็ยังก่ำกึ่งๆ ผมมองภาพไม่ค่อยออกจิงๆ จะพยายามมองว่าเป็น กระทำตัวไหน ใช้ตัวนั้น แล้วกันนะครับ


ขอบคุณคุณWowowow มากครับ



sinbad 171.101.187.xxx 12-12-2014 22:57
 ความคิดเห็นที่ 3
ถ้าเพิ่งศักษา แนะนำยังไม่ต้องลงลึกแต่แรก ให้รู้รอบไว้ก่อน
คือรู้ว่ามันทำอะไรได้บ้าง แล้วดูเฉพาะที่เราจะใช้บ่อย หรือจำเป็น แล้วค่อยไปลงรายละเอียด

เพราะมีภาษาหรือรูปแบบใหม่เกิดขึ้นตลอดเวลา กว่าเราจะเข้าใจอะไรละเอียด กลายเป็นเขาเลิกใช้กันแล้ว

ส่วนที่ถาม ขออธิบาย ตามที่พอเข้าใจ ตามนี้

window.onload ไม่เหมือน $(function(){}); หรือ $(document).ready() เสียทีเดียว
onload จะทำงานหลังเนื้อหาของ เว็บนั้นโหลดมาจนครบแล้ว เช่น ถ้าหน้านั้นมีรูป 
รูปก็จะต้องโหลเดมาและแสดงครบก่อนถึง onload จะทำงาน 
 
แต่ของ jquery จะไม่จำเป็นต้องโหลดมาจนเสร็จ คือไม่จำเป็นที่รูปจะต้องแสดง 
แค่มีแท็ก html หรือ dom พร้อมสำหรับ ทำงานก็พอ 
 
สำหรับ 
 
$(callback) หรือ jQuery( callback )  ก็คือรูปแบบ jquery callback
callback ด้านในก็คือ ฟังก์ชั่น หรือคำสั่งการทำงาน
 
ปกติเรากำหนด function ก็จะประมาณ

function a(){
    
}
 
หรือ แบบนี้ก็ได้

var a = function(){
    
}
 
ถ้าใช้ jquery เราสามารถเขียนแบบนี้แทนได้
 
var a = function(){
  alert("ok");  
}
$(a); // เมื่อ dom พร้อม ให้ไปทำงานฟังก์ชัน  a
 
หรือก็คือ เขียนแบบยแยก ให้เห็นภาพ ก็คือ เอาตัวแปร a ซึ่งเป็น function เข้าไปใน jquery callback
 
$(
    function(){
        alert("ok");  
    }
);
 
ในฟังก์ชั่น ก็คือ คำสั่งที่เราจะให้ทำงาน จะมี function ด้านในอีกก็ได้ 
จากตัวอย่าง alert ก็คือฟังก์ชั่นหนึ่ง
 
$(function(){  // เมื่อ dom พร้อม ให้เข้ามาทำงาน คำสั่งด้านใน
    alert("OK");
});
    
 
ส่วนคำสั่งด้านใน ทำไมถึงมี function  อันนี้ก็ขึ้นกับรูปแบบที่เขากำหนดมา อ่านจากคู่มือ
อ้างอิงของ jquery ได้
ค่าเป็นได้ทั้ง object ,ข้อความ ตัวแปร หรือแม้แต่ฟังก์ชั่น 
    
$( "button" ).click(function() {  
     alert("OK");
});      

 
รูปแบบถ้าแยกๆ ก็เช่น
 
var a=function() {  
    alert("OK");
}

$( "button" ).click(a);
 
หรือ ก็คือ
 
$( "button" ).click(
    function() {  
        alert("OK");
    }
);
 
ส่วน this ก็เป็นชื่อที่เอาไว้อ้างอิง ส่วนที่เราใช้งาน เช่น
 
$( "button" ).click(function() {  
    var name = $(this).attr( "name" );  
    alert(name);  
});      
 
ถ้าเราจะไม่ใช้ this เราก็จะพิมพ์ 
 
$( "button" ).click(function() {  
    var name = $( "button" ).attr( "name" );  
    alert(name);  
});      
 
จะเห็นว่า การใช้ this อ้างอิง dom ที่เรากำลังจัดการหรือทำงานอยู่ ก็จะสะดวกกว่า


ninenik 1.47.211.xxx 13-12-2014
 ความคิดเห็นที่ 4
ขอบคุณมากเลยครับ ผมจะทำตามคำแนะนำ คือเรียนรู้ว่าทำงานยังไง ไม่ยึดติดกับรูปแบบ 


sinbad 171.101.187.xxx 13-12-2014 22:27
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ