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

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

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

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

$(function(){

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

});

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

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

Sinbad 12-12-2014 19:08:41

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 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 12-12-2014 22:04

ความคิดเห็นที่ 2

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

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

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

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

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

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

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

sinbad 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 13-12-2014

ความคิดเห็นที่ 4

ขอบคุณมากเลยครับ ผมจะทำตามคำแนะนำ คือเรียนรู้ว่าทำงานยังไง ไม่ยึดติดกับรูปแบบ

sinbad 13-12-2014 22:27

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน