เรียนรู้วิธีสร้างองค์ประกอบใน jQuery

เรียนรู้วิธีสร้างองค์ประกอบใน jQuery

การสร้างองค์ประกอบใหม่เป็นหนึ่งในงานพื้นฐานที่สุดที่คุณสามารถทำได้ด้วยไลบรารี jQuery JavaScript เมื่อใช้ jQuery งานจะง่ายกว่าวิธีการเทียบเท่ากับ Document Object Model (DOM) มาก คุณจะพบว่ามันมีความยืดหยุ่นและแสดงออกมากขึ้น ยิ่งคุณใช้ jQuery มากเท่านั้น





เพื่อให้เป็นไปตามวัตถุประสงค์ คุณจะต้องเพิ่มองค์ประกอบลงในหน้าเว็บได้ เรียนรู้วิธีเพิ่มรายการใหม่หรือแทนที่ย่อหน้าด้วยเนื้อหาใหม่โดยใช้ jQuery



jQuery คืออะไร?

ไลบรารี jQuery คือชุดของ JavaScript รหัสที่มีจุดมุ่งหมายหลักสองประการ:





  • ช่วยลดความยุ่งยากในการดำเนินการจาวาสคริปต์ทั่วไป
  • มันจัดการปัญหา JavaScript ที่เข้ากันได้ระหว่างเบราว์เซอร์ต่างๆ

เป้าหมายที่สองเหมาะสำหรับจุดบกพร่อง แต่ยังระบุถึงความแตกต่างในการใช้งานระหว่างเบราว์เซอร์ เป้าหมายทั้งสองมีความจำเป็นน้อยกว่าที่เคยเป็น เนื่องจากเบราว์เซอร์มีการปรับปรุงเมื่อเวลาผ่านไป แต่ jQuery ยังสามารถเป็นเครื่องมือที่มีค่าได้

องค์ประกอบคืออะไร?

องค์ประกอบบางครั้งเรียกว่าแท็ก แม้ว่าทั้งสองจะใช้แทนกันได้ แต่ก็มีความแตกต่างกันเล็กน้อย แท็กหมายถึงตัวอักษร

หรือ



คุณรวมไว้ในไฟล์ HTML เพื่อมาร์กอัปเนื้อหาข้อความ องค์ประกอบคือวัตถุเบื้องหลังที่แสดงถึงข้อความที่ทำเครื่องหมายไว้ คิดว่าองค์ประกอบเป็น DOM คู่กับแท็ก HTML

วิธีสร้างองค์ประกอบใหม่โดยใช้ jQuery

เช่นเดียวกับการดำเนินการ jQuery ส่วนใหญ่ การสร้างองค์ประกอบเริ่มต้นด้วยฟังก์ชันดอลลาร์ $ () . นี่คือทางลัดสู่แกนกลาง jQuery() การทำงาน. ฟังก์ชันนี้มีจุดประสงค์ที่แตกต่างกันสามประการ คือ:



  • จับคู่องค์ประกอบ มักจะมีอยู่แล้วในเอกสาร
  • สร้างองค์ประกอบใหม่
  • เรียกใช้ฟังก์ชันเรียกกลับเมื่อ DOM พร้อม

เมื่อคุณส่งสตริงที่มี HTML เป็นพารามิเตอร์แรก ฟังก์ชันนี้จะสร้างองค์ประกอบใหม่:

$(' ')

ส่งคืนอ็อบเจ็กต์ jQuery พิเศษซึ่งมีคอลเล็กชันขององค์ประกอบ ในกรณีนี้ มีออบเจ็กต์เดียวที่แสดงถึงองค์ประกอบ 'a' ที่เราเพิ่งสร้างขึ้น



ทำไมโทรศัพท์ของฉันถึงบอกว่าอุปกรณ์เสริมนี้อาจไม่รองรับ

สตริงต้องมีลักษณะเหมือน HTML เพื่อแยกการกระทำนี้ออกจากองค์ประกอบที่ตรงกัน ในทางปฏิบัติ หมายถึงสตริงต้องขึ้นต้นด้วย a < . คุณไม่สามารถเพิ่มข้อความธรรมดาในเอกสารโดยใช้วิธีนี้

สิ่งสำคัญคือต้องเข้าใจว่าสิ่งนี้ไม่ได้เพิ่มองค์ประกอบลงในเอกสารของคุณ แต่จะสร้างเฉพาะองค์ประกอบใหม่ที่พร้อมให้คุณเพิ่มเท่านั้น องค์ประกอบนี้ 'ไม่ได้เชื่อมต่อ' ใช้หน่วยความจำแต่ยังไม่เป็นส่วนหนึ่งของหน้าสุดท้ายจริงๆ

การเพิ่ม HTML ที่ซับซ้อนมากขึ้น

ฟังก์ชันดอลลาร์สามารถสร้างองค์ประกอบได้มากกว่าหนึ่งรายการ อันที่จริง มันสามารถสร้างต้นไม้ขององค์ประกอบ HTML ใดก็ได้ที่คุณต้องการ:

$('
  • one
  • two
  • three
')

คุณยังสามารถใช้รูปแบบนี้เพื่อสร้างองค์ประกอบที่มีแอตทริบิวต์:

$(' my hometown')

วิธีตั้งค่าแอตทริบิวต์ในองค์ประกอบใหม่

คุณสามารถสร้างองค์ประกอบ jQuery ใหม่และตั้งค่าแอตทริบิวต์ได้โดยไม่ต้องสร้างสตริง HTML ทั้งหมดด้วยตนเอง สิ่งนี้มีประโยชน์หากคุณกำลังสร้างค่าแอตทริบิวต์แบบไดนามิก ตัวอย่างเช่น:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

วิธีเพิ่มองค์ประกอบ

เมื่อคุณสร้างองค์ประกอบใหม่แล้ว คุณสามารถเพิ่มองค์ประกอบนั้นลงในเอกสารได้หลายวิธี เอกสาร jQuery รวบรวมวิธีการเหล่านี้เข้าด้วยกันภายใต้ หมวดหมู่ 'การจัดการ' .

เพิ่มเป็นลูกขององค์ประกอบที่มีอยู่

$('body').append($('

Hello, world

'));
$(document.body).append($el);

คุณสามารถใช้วิธีนี้ ตัวอย่างเช่น เพื่อเพิ่มข้อมูลในรายการใหม่ที่ส่วนท้ายของรายการ

เพิ่มเป็นพี่น้องขององค์ประกอบที่มีอยู่

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    นี่เป็นทางเลือกที่ดี ตัวอย่างเช่น หากคุณต้องการเพิ่มย่อหน้าใหม่ตรงกลางอีกสองย่อหน้า

    แทนที่องค์ประกอบที่มีอยู่

    คุณสามารถสลับองค์ประกอบที่มีอยู่สำหรับองค์ประกอบที่สร้างขึ้นใหม่โดยใช้ แทนที่ด้วย () กระบวนการ:

    $('#old').replaceWith('

    New paragraph

    ');

    ล้อมรอบองค์ประกอบที่มีอยู่

    นี่เป็นกรณีการใช้งานที่ค่อนข้างหายาก แต่คุณอาจต้องการรวมองค์ประกอบที่มีอยู่ไว้ในองค์ประกอบใหม่ ตัวอย่างเช่น คุณอาจมี รหัส องค์ประกอบที่คุณต้องการห่อใน สำหรับ :

    $('code#n1').wrap('
    ')
    การเข้าถึงองค์ประกอบที่คุณสร้างขึ้น
     
    NS $ () ฟังก์ชั่นส่งคืนวัตถุ jQuery สิ่งนี้มีประโยชน์สำหรับการดำเนินการติดตามผล:
    $el = $('p');  
    $('body').append($el);
    โปรดทราบว่าตามธรรมเนียมแล้ว โปรแกรมเมอร์ jQuery มักจะตั้งชื่อตัวแปร jQuery ด้วยเครื่องหมายดอลลาร์นำหน้า นี่เป็นเพียงรูปแบบการตั้งชื่อและไม่เกี่ยวข้องโดยตรงกับ $ () การทำงาน.
     
    การสร้างองค์ประกอบโดยใช้ jQuery
     
    แม้ว่าคุณจะสามารถจัดการ DOM ได้โดยใช้ฟังก์ชัน JavaScript ดั้งเดิม แต่ jQuery ทำให้มันง่ายขึ้นมาก การมีความเข้าใจที่ดีเกี่ยวกับ DOM นั้นยังคงมีประโยชน์มาก แต่ jQuery ทำให้การทำงานกับ DOM นั้นน่าพึงพอใจยิ่งขึ้น
      แบ่งปัน    แบ่งปัน      ทวีต      อีเมล      ฮีโร่ที่ซ่อนอยู่ของเว็บไซต์: การทำความเข้าใจ DOM  
    เรียนรู้การออกแบบเว็บและต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ Document Object Model หรือไม่ นี่คือสิ่งที่คุณต้องรู้เกี่ยวกับ DOM
    อ่านต่อไป       หัวข้อที่เกี่ยวข้อง  
       
    • การเขียนโปรแกรม
      •  
    • การพัฒนาเว็บ
      •  
    • jQuery
      •  
      เกี่ยวกับผู้เขียน   Bobby Jack(58 บทความเผยแพร่)      
    Bobby เป็นผู้ที่ชื่นชอบเทคโนโลยีซึ่งทำงานเป็นนักพัฒนาซอฟต์แวร์มาเกือบสองทศวรรษ เขาหลงใหลในการเล่นเกม ทำงานเป็นบรรณาธิการบทวิจารณ์ที่ Switch Player Magazine และหมกมุ่นอยู่กับทุกแง่มุมของการเผยแพร่ออนไลน์และการพัฒนาเว็บ
    เพิ่มเติมจาก Bobby Jack
    สมัครรับจดหมายข่าวของเรา
     
    เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
    คลิกที่นี่เพื่อสมัครสมาชิก