หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

จาวาสคริปต์ที่ไม่มี jQuery

เคล็ดลับและตัวอย่างการปฏิบัติจากโพสต์ CatsWhoCode

สารบัญ

  1. กำลังฟังเอกสารพร้อม
  2. การเพิ่มผู้ฟังเหตุการณ์
  3. การเลือกองค์ประกอบ
  4. การใช้อาแจ็กซ์
  5. การเพิ่มและการลบคลาส
  6. จางหายไป
  7. การซ่อนและการแสดงองค์ประกอบ
  8. การจัดการ DOM

กำลังฟังเอกสารพร้อม

ไม่สามารถจัดการหน้าได้อย่างปลอดภัยจนกว่าเอกสารจะ "พร้อม" ด้วยเหตุนี้ นักพัฒนาของเราจึงนิยมรวมโค้ด JS ทั้งหมดของเราไว้ในฟังก์ชัน jQuery $(document).ready() : 

 $ ( document ) . ready ( function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

ผลลัพธ์เดียวกันนี้สามารถทำได้อย่างง่ายดายโดยใช้ JavaScript ล้วนๆ: 

 document . addEventListener ( 'DOMContentLoaded' , function ( ) {
  console . log ( 'ready!' ) ;
} ) ;

การเพิ่มผู้ฟังเหตุการณ์

Event Listeners เป็นส่วนสำคัญของการพัฒนา JavaScript jQuery มีวิธีจัดการที่ง่ายมาก: 

 $ ( someElement ) . on ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

คุณไม่จำเป็นต้องมี jQuery เพื่อสร้างผู้ฟังเหตุการณ์ใน JavaScript ต่อไปนี้เป็นวิธีดำเนินการ: 

 someElement . addEventListener ( 'click' , function ( ) {
  // TODO event handler logic
} ) ;

การเลือกองค์ประกอบ

jQuery ทำให้การเลือกองค์ประกอบเป็นเรื่องง่ายมากโดยใช้ ID ชื่อคลาส ชื่อแท็ก ฯลฯ 

 // By ID
$ ( '#myElement' ) ;

// By Class name
$ ( '.myElement' ) ;

// By tag name
$ ( 'div' ) ;

// Children
$ ( '#myParent' ) . children ( ) ;

// Complex selecting
$ ( 'article#first p.summary' ) ;

Pure JavaScript มีวิธีการเลือกองค์ประกอบที่หลากหลาย วิธีการทั้งหมดด้านล่างนี้ใช้ได้กับเบราว์เซอร์รุ่นใหม่ทั้งหมดรวมถึง IE8+ 

 // By ID
document . querySelector ( '#myElement' ) ;

// By Class name
document . querySelectorAll ( '.myElement' ) ;

// By tag name
document . querySelectorAll ( 'div' ) ;

// Children
document . querySelectorAll ( 'myParent' ) . childNodes ;

// Complex selecting
document . querySelectorAll ( 'article#first p.summary' ) ;

การใช้อาแจ็กซ์

ดังที่คุณทราบกันดีว่า Ajax คือชุดของเทคโนโลยีที่ช่วยให้คุณสร้างแอปพลิเคชันเว็บแบบไม่ซิงโครไนซ์ได้ jQuery มีชุดวิธีการที่เป็นประโยชน์สำหรับ Ajax รวมถึง get() ดังที่แสดงด้านล่าง: 

 $ . get ( 'ajax/test.html' , function ( data ) {
  $ ( '.result' ) . html ( data ) ;
  alert ( 'Load was performed.' ) ;
} ) ;

แม้ว่า jQuery จะทำให้การพัฒนา Ajax ง่ายขึ้นและเร็วขึ้น แต่ก็แน่นอนว่าคุณไม่จำเป็นต้องมีเฟรมเวิร์กเพื่อใช้ Ajax: 

 var request = new XMLHttpRequest ( ) ;
request . open ( 'GET' , 'ajax/test.html' , true ) ;

request . onload = function ( e ) {
  if ( request . readyState === 4 ) {

    // Check if the get was successful.

    if ( request . status === 200 ) {
      console . log ( request . responseText ) ;
    } else {
      console . error ( request . statusText ) ;
    }
  }
} ;

การเพิ่มและการลบคลาส

หากคุณต้องการเพิ่มหรือลบคลาสขององค์ประกอบ jQuery มีสองวิธีเฉพาะในการดำเนินการดังกล่าว: 

 // Adding a class
$ ( '#foo' ) . addClass ( 'bold' ) ;

// Removing a class
$ ( '#foo' ) . removeClass ( 'bold' ) ;

หากไม่มี jQuery การเพิ่มคลาสให้กับองค์ประกอบก็ค่อนข้างง่าย หากต้องการลบคลาสออก คุณจะต้องใช้เมธอด replace() : 

 // Adding a class
document . getElementById ( 'foo' ) . className += 'bold' ;

// Removing a class
document . getElementById ( 'foo' ) . className = document . getElementById ( 'foo' ) . className . replace ( / ^bold$ / , '' ) ;

จางหายไป

นี่เป็นตัวอย่างเชิงปฏิบัติว่าทำไม jQuery ถึงได้รับความนิยมมาก การเฟดองค์ประกอบจะใช้โค้ดเพียงบรรทัดเดียวเท่านั้น: 

 $ ( el ) . fadeIn ( ) ;

คุณสามารถบรรลุผลแบบเดียวกันนี้ได้ใน JavaScript ล้วนๆ แต่โค้ดจะยาวกว่าและซับซ้อนกว่ามาก 

 function fadeIn ( el ) {
  el . style . opacity = 0 ;

  var last = + new Date ( ) ;
  var tick = function ( ) {
    el . style . opacity = + el . style . opacity + ( new Date ( ) - last ) / 400 ;
    last = + new Date ( ) ;

    if ( + el . style . opacity < 1 ) {
      ( window . requestAnimationFrame && requestAnimationFrame ( tick ) ) || setTimeout ( tick , 16 ) ;
    }
  } ;

  tick ( ) ;
}

fadeIn ( el ) ;

การซ่อนและการแสดงองค์ประกอบ

การซ่อนและการแสดงองค์ประกอบเป็นงานทั่วไป jQuery เสนอวิธี hide() และ show() สำหรับการปรับเปลี่ยนการแสดงผลขององค์ประกอบ 

 // Hiding element
$ ( el ) . hide ( ) ;

// Showing element
$ ( el ) . show ( ) ;

ใน JavaScript ล้วนๆ การแสดงหรือการซ่อนองค์ประกอบนั้นไม่ซับซ้อนมากนัก: 

 // Hiding element
el . style . display = 'none' ;

// Showing element
el . style . display = 'block' ;

การจัดการ DOM

การจัดการ DOM ด้วย jQuery นั้นง่ายมาก สมมติว่าคุณต้องการเพิ่ม <p> องค์ประกอบต่อท้าย #container : 

 $ ( '#container' ) . append ( '<p>more content</p>' ) ;

การทำเช่นนั้นใน JavaScript ล้วนๆ ก็ไม่ใช่เรื่องใหญ่อะไรเช่นกัน: 

 document . getElementById ( 'container' ) . innerHTML += '<p>more content</p>' ;
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด