เมื่อใดที่ควรใช้ Vanilla JavaScript กับ jQuery

ฉันสังเกตเห็นในขณะที่ตรวจสอบ / พยายามตอบคำถาม jQuery ทั่วไปว่ามีวิธีปฏิบัติบางอย่างในการใช้ javascript แทนที่จะเป็น jQuery ซึ่งจริง ๆ แล้วช่วยให้คุณเขียนได้น้อยลงและทำได้ดีในปริมาณที่เท่ากัน และอาจให้ประโยชน์ด้านประสิทธิภาพ

ตัวอย่างที่เฉพาะเจาะจง

$(this) VS this

ภายในเหตุการณ์คลิกอ้างอิงรหัสวัตถุที่ถูกคลิก

jQuery

$(this).attr("id");

จาวาสคริ

this.id;

มีวิธีปฏิบัติทั่วไปอื่น ๆ เช่นนี้อีกหรือไม่ การดำเนินการ Javascript บางอย่างสามารถทำได้ง่ายขึ้นโดยไม่ต้องนำ jQuery มาผสม หรือเป็นกรณีที่หายากหรือไม่ (จากทางลัด "jQuery" ที่ต้องการรหัสเพิ่มเติม)

แก้ไข:ในขณะที่ฉันขอบคุณคำตอบเกี่ยวกับประสิทธิภาพของ jQuery เทียบกับจาวาสคริปต์ธรรมดา ๆ ฉันกำลังมองหาคำตอบเชิงปริมาณมากขึ้น ในขณะที่การใช้ jQuery , กรณีที่หนึ่งจะจริงจะดีกว่า (การอ่าน / ปึกแผ่น) $()เพื่อใช้จาวาสคริปต์ธรรมดาแทนการใช้ นอกจากตัวอย่างที่ฉันให้ไว้ในคำถามเดิมของฉัน

• this.id (เท่าที่คุณรู้)
• this.value(สำหรับประเภทอินพุตส่วนใหญ่ปัญหาที่ฉันรู้เท่านั้นคือ IE เมื่อ<select>ไม่มีvalueคุณสมบัติที่กำหนดไว้ใน<option>องค์ประกอบหรืออินพุตวิทยุใน Safari)
• this.className เพื่อรับหรือตั้งค่าคุณสมบัติ "คลาส" ทั้งหมด
• this.selectedIndexเทียบกับ a <select>เพื่อรับดัชนีที่เลือก
• this.optionsกับ a <select>เพื่อรับรายการ<option>องค์ประกอบ
• this.textต่อต้าน<option>เพื่อให้ได้เนื้อหาข้อความ
• this.rowsต่อ a <table>เพื่อรับชุดของ<tr>องค์ประกอบ
• this.cellsกับ a <tr>เพื่อให้ได้เซลล์ (td & th)
• this.parentNode เพื่อรับพาเรนต์โดยตรง
• this.checkedเพื่อรับสถานะที่ถูกตรวจสอบของcheckbox Thanks @Tim Down
• this.selectedเพื่อรับสถานะที่เลือกของoption Thanks @Tim Down
• this.disabledเพื่อรับสถานะที่ถูกปิดใช้งานของinput Thanks @Tim Down
• this.readOnlyเพื่อรับสถานะ readOnly ของinput Thanks @Tim Down
• this.hrefกับ<a>องค์ประกอบที่จะได้รับมันhref
• this.hostnameกับ<a>องค์ประกอบที่จะได้รับโดเมนของมันhref
• this.pathnameกับ<a>องค์ประกอบที่จะได้รับเส้นทางของมันhref
• this.searchกับ<a>องค์ประกอบที่จะได้รับการสอบถามของมันhref
• this.src กับองค์ประกอบที่ถูกต้องที่จะมี src

... ฉันคิดว่าคุณเข้าใจ

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

โดยทั่วไปคุณสามารถแทนที่:

$(el).attr('someName');

ด้วย:

ด้านบนเป็นคำพูดไม่ดี getAttributeไม่ใช่การแทนที่ แต่จะดึงค่าของแอ็ตทริบิวต์ที่ส่งจากเซิร์ฟเวอร์และsetAttributeจะตั้งค่าที่สอดคล้องกัน จำเป็นในบางกรณี

ประโยคด้านล่างเรียงลำดับของมันครอบคลุม ดูคำตอบนี้เพื่อการรักษาที่ดีขึ้น

el.getAttribute('someName');

... เพื่อเข้าถึงแอตทริบิวต์โดยตรง โปรดทราบว่าแอตทริบิวต์นั้นไม่เหมือนกับคุณสมบัติ (แม้ว่าบางครั้งก็จะสะท้อนซึ่งกันและกัน) แน่นอนว่ามีsetAttributeเกินไป

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

$('span').unwrap();  // unwrap all span elements

แต่ถ้ามีจำนวนมากคุณอาจต้องการ DOM API ดั้งเดิมเล็กน้อย:

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

รหัสนี้ค่อนข้างสั้นมันทำงานได้ดีกว่ารุ่น jQuery และสามารถทำเป็นฟังก์ชั่นที่ใช้ซ้ำได้ในห้องสมุดส่วนตัวของคุณ

มันอาจดูเหมือนฉันมีห่วงอนันต์กับด้านนอกwhileเพราะwhile(spans[0])แต่เป็นเพราะเราจัดการกับ "รายการสด" parent.removeChild(span[0]);จะได้รับการปรับปรุงเมื่อเราทำ นี่เป็นคุณสมบัติที่ดีงามที่เราพลาดเมื่อทำงานกับ Array (หรือวัตถุที่คล้าย Array) แทน

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

เหตุผลที่ jQuery นั้นทรงพลังคือมันทำให้บางสิ่งที่น่าเบื่อในสถานการณ์ข้ามเบราว์เซอร์ (AJAX เป็นหนึ่งในตัวอย่างที่ดีที่สุด) และทำให้ความไม่ลงรอยกันระหว่างเบราว์เซอร์มากมายพร้อมใช้งานและมี API ที่สอดคล้องกัน นอกจากนี้ยังอำนวยความสะดวกในแนวคิดเช่นการผูกมัดการทำซ้ำโดยนัย ฯลฯ เพื่อให้การทำงานกับกลุ่มขององค์ประกอบต่างๆง่ายขึ้น

การเรียนรู้ jQuery ไม่ได้ใช้แทน JavaScript การเรียนรู้ คุณควรมีพื้นฐานที่มั่นคงในภายหลังเพื่อที่คุณจะได้ซาบซึ้งในสิ่งที่รู้ว่าอดีตนั้นทำง่ายขึ้น

- แก้ไขเพื่อรวมความคิดเห็น -

เนื่องจากความคิดเห็นนั้นชี้ให้เห็นอย่างรวดเร็ว (และฉันเห็นด้วย 100%) ข้อความข้างต้นอ้างถึงการเปรียบเทียบโค้ด โซลูชัน JavaScript 'เนทีฟ' (สมมติว่าเขียนดี) จะมีประสิทธิภาพสูงกว่าโซลูชัน jQuery ที่ทำสิ่งเดียวกันในเกือบทุกกรณี (ฉันชอบที่จะเห็นตัวอย่างเป็นอย่างอื่น) jQuery ทำให้เวลาในการพัฒนาเร็วขึ้นซึ่งเป็นผลประโยชน์ที่สำคัญซึ่งฉันไม่ได้หมายถึง downplay มันอำนวยความสะดวกในการอ่านง่ายและง่ายต่อการติดตามรหัสซึ่งมากกว่านักพัฒนาบางคนมีความสามารถในการสร้างด้วยตัวเอง

ในความคิดของฉันคำตอบนั้นขึ้นอยู่กับสิ่งที่คุณพยายามจะทำ ถ้าเป็นผมเดาว่าน่าจะอยู่บนพื้นฐานของการอ้างอิงของคุณเพื่อผลประโยชน์คุณหลังจากที่ความเร็วที่ดีที่สุดออกมาจากใบสมัครของคุณแล้วใช้แนะนำ jQuery $()ค่าใช้จ่ายทุกครั้งที่คุณโทร หากคุณต้องการความสามารถในการอ่านความสอดคล้องความเข้ากันได้ข้ามเบราว์เซอร์ ฯลฯ มีเหตุผลที่จะสนับสนุน jQuery มากกว่า JavaScript แบบดั้งเดิม

มีกรอบที่เรียกว่า ... โอ้เดาอะไรนะ? Vanilla JS. หวังว่าคุณจะได้รับเรื่องตลก ... : D มันเสียสละความชัดเจนสำหรับผลการดำเนินงาน ... เปรียบเทียบกับjQueryตะโกนคุณจะเห็นว่าการเรียกDOMองค์ประกอบโดยIDเกือบ35Xได้เร็วขึ้น :)

ดังนั้นหากคุณต้องการประสิทธิภาพคุณควรลองวานิลลา JS และสรุปข้อสรุปของคุณเอง บางทีคุณอาจไม่พบ JavaScript ที่แขวน GUI ของเบราว์เซอร์ / ล็อคเธรด UI ในระหว่างการใช้งานโค้ดที่เข้มข้นเหมือนภายในforลูป

Vanilla JS เป็นเฟรมเวิร์กข้ามแพลตฟอร์มที่รวดเร็วน้ำหนักเบาสำหรับการสร้างแอปพลิเคชัน JavaScript ที่ทรงพลังและเหลือเชื่อ

ในหน้าแรกของพวกเขามีการเปรียบเทียบที่สมบูรณ์แบบ:

มีคำตอบที่ได้รับการยอมรับแล้ว แต่ฉันเชื่อว่าไม่มีคำตอบที่พิมพ์โดยตรงที่นี่สามารถครอบคลุมในรายการวิธีการ / คุณลักษณะจาวาสคริปต์ดั้งเดิมที่รับประกันการสนับสนุนข้ามเบราว์เซอร์ สำหรับที่ฉันอาจเปลี่ยนเส้นทางคุณไปที่ quirksmode:

http://www.quirksmode.org/compatibility.html

มันอาจจะเป็นรายการที่ครอบคลุมมากที่สุดของสิ่งที่ใช้งานได้และสิ่งที่ไม่ทำงานบนเบราว์เซอร์ใดก็ได้ เอาใจใส่เป็นพิเศษกับส่วน DOM มันมีจำนวนมากที่จะอ่าน แต่จุดที่ไม่ได้อ่านมันทั้งหมด แต่เพื่อใช้เป็นข้อมูลอ้างอิง

เมื่อฉันเริ่มเขียนเว็บแอปอย่างจริงจังฉันพิมพ์ตาราง DOM ทั้งหมดและแขวนไว้บนฝาผนังเพื่อให้ฉันรู้ได้ทันทีว่ามีความปลอดภัยในการใช้งานอย่างไรและอะไรที่ต้องใช้แฮ็ค วันนี้ฉันแค่ google บางอย่างเช่นquirksmode parentNode compatibilityเมื่อฉันมีข้อสงสัย

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

PS: PPK (ผู้เขียนของเว็บไซต์) ยังมีหนังสือที่ดีมากที่ฉันแนะนำให้อ่าน

เมื่อไหร่:

1. คุณรู้ว่ามีการสนับสนุนข้ามเบราว์เซอร์ที่ไม่ท้อถอยในสิ่งที่คุณกำลังทำและ
2. มันไม่ได้เป็นรหัสมากขึ้นในการพิมพ์และ
3. มันไม่สามารถอ่านได้น้อยลงและ
4. คุณมีความมั่นใจอย่างสมเหตุสมผลว่า jQuery จะไม่เลือกการใช้งานที่แตกต่างกันตามเบราว์เซอร์เพื่อให้ได้ประสิทธิภาพที่ดีขึ้นจากนั้น:

ใช้จาวาสคริปต์ มิฉะนั้นใช้ jQuery (ถ้าคุณสามารถ)

แก้ไข : คำตอบนี้ใช้ทั้งเมื่อเลือกที่จะใช้ jQuery โดยรวมเมื่อเทียบกับการเลิกใช้รวมถึงการเลือกว่าจะใช้วานิลลา JS ภายใน jQuery หรือไม่ การเลือกระหว่างattr('id')และ.idเอนเอียงกับ JS ในขณะที่เลือกระหว่างremoveClass('foo')กับ.className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' )leans เพื่อสนับสนุน jQuery

คำตอบของคนอื่นได้มุ่งเน้นไปที่คำถามกว้าง ๆ ของ "jQuery vs. plain JS" ตัดสินจาก OP ของคุณฉันคิดว่าคุณแค่สงสัยว่าเมื่อใช้วานิลลา JS ดีกว่าถ้าคุณเลือกใช้ jQuery แล้ว ตัวอย่างของคุณเป็นตัวอย่างที่สมบูรณ์แบบเมื่อคุณควรใช้วานิลลา JS:

$(this).attr('id');

เป็นทั้งช้าลงและ (ในความคิดของฉัน) อ่านน้อยกว่า:

this.id.

ช้าลงเพราะคุณต้องหมุนวัตถุ JS ใหม่เพื่อดึงคุณสมบัติ jQuery ทีนี้ถ้าคุณกำลังจะใช้$(this)ในการปฏิบัติการอื่น ๆ ให้เก็บวัตถุ jQuery นั้นไว้ในตัวแปรแล้วดำเนินการกับสิ่งนั้น อย่างไรก็ตามฉันพบเจอสถานการณ์มากมายที่ฉันต้องการแอตทริบิวต์จากองค์ประกอบ (เช่นidหรือsrc)

มีวิธีปฏิบัติทั่วไปอื่น ๆ เช่นนี้อีกหรือไม่ การดำเนินการ Javascript บางอย่างสามารถทำได้ง่ายขึ้นโดยไม่ต้องนำ jQuery มาผสม หรือเป็นกรณีที่หายากหรือไม่ (จากทางลัด "jQuery" ที่ต้องการรหัสเพิ่มเติม)

ฉันคิดว่ากรณีที่พบบ่อยที่สุดคือกรณีที่คุณอธิบายในโพสต์ของคุณ คนกำลังห่อ$(this)วัตถุ jQuery โดยไม่จำเป็น ฉันเห็นสิ่งนี้บ่อยที่สุดด้วยidและvalue(แทนที่จะใช้$(this).val())

แก้ไข: นี่คือบทความที่อธิบายว่าทำไมการใช้ jQuery ในattr()กรณีนี้จึงช้ากว่า คำสารภาพ: ขโมยจากแท็กวิกิ แต่ฉันคิดว่ามันคุ้มค่าที่จะพูดถึงคำถาม

แก้ไขอีกครั้ง:เนื่องจากความสามารถในการอ่าน / ผลการทำงานของการเข้าถึงคุณลักษณะโดยตรงฉันจึงบอกว่ากฎง่าย ๆ น่าจะลองใช้this.<attributename>เมื่อเป็นไปได้ อาจมีบางกรณีที่สิ่งนี้ไม่สามารถใช้งานได้เนื่องจากเบราว์เซอร์ไม่สอดคล้องกัน แต่น่าจะดีกว่าถ้าคุณลองใช้วิธีนี้ก่อนแล้วค่อยกลับมาใช้ jQuery หากไม่ได้ผล

หากคุณกังวลเกี่ยวกับประสิทธิภาพเป็นส่วนใหญ่ตัวอย่างหลักของคุณก็จะตอกตะปูบนหัว การเรียกใช้ jQuery โดยไม่จำเป็นหรือซ้ำซ้อนคือ IMHO สาเหตุหลักที่สองของประสิทธิภาพการทำงานช้า (การสำรวจเส้นทาง DOM ที่ไม่ดีครั้งแรก)

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

// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });

// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });

// poor
$('.something').load('url');
$('.something').show();

// excellent
var something = $('#container').children('p.something');
something.load('url').show();

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

นี่เป็นมุมมองส่วนตัวของฉัน แต่ jQuery เป็น JavaScript ต่อไปฉันคิดว่าในทางทฤษฎีแล้วมันไม่สามารถทำงานได้ดีกว่าวานิลลา JS เลย

แต่ในทางปฏิบัติมันอาจทำงานได้ดีกว่า JS ที่เขียนด้วยมือเนื่องจากโค้ดที่เขียนด้วยมืออาจไม่ได้ประสิทธิภาพเท่า jQuery

ที่บรรทัดล่าง - สำหรับสิ่งเล็ก ๆ ฉันมักจะใช้วานิลลา JS สำหรับโครงการแบบเร่งรัดของ JS ฉันชอบใช้ jQuery และไม่พลิกโฉมวงล้อ - มันก็มีประสิทธิภาพมากกว่า

รายการคุณสมบัติที่อยู่คำตอบแรกของการthisเป็นองค์ประกอบ DOM ค่อนข้างสมบูรณ์

คุณอาจพบว่าน่าสนใจที่จะรู้จักคนอื่น

เมื่อนี่คือเอกสาร:

• this.formsเพื่อรับHTMLCollectionแบบฟอร์มเอกสารปัจจุบัน
• this.anchorsที่จะได้รับHTMLCollectionจากทั้งหมดที่HTMLAnchorElementsมีnameการตั้งค่า
• this.linksเพื่อรับHTMLCollectionของทั้งหมดที่HTMLAnchorElementมีhrefการตั้งค่า
• this.imagesที่จะได้รับHTMLCollectionของทุกHTMLImageElements
• และเหมือนกันกับแอปเพล็ตที่เลิกใช้เป็น this.applets

เมื่อคุณทำงานกับdocument.forms, document.forms[formNameOrId]ได้รับแบบฟอร์มเพื่อให้ชื่อหรือระบุ

เมื่อเป็นแบบฟอร์ม:

• this[inputNameOrId] เพื่อรับฟิลด์ที่ระบุชื่อหรือที่ระบุ

เมื่อนี่คือฟิลด์แบบฟอร์ม:

• this.type เพื่อรับประเภทฟิลด์

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

ตามปกติฉันมาสายเพื่อปาร์ตี้นี้

มันไม่ใช่ฟังก์ชั่นพิเศษที่ทำให้ฉันตัดสินใจใช้ jQuery เพราะมันน่าดึงดูด เพราะไม่มีอะไรหยุดคุณจากการเขียนฟังก์ชั่นของคุณเอง

มันเป็นความจริงที่ว่ามีเทคนิคมากมายที่จะเรียนรู้เมื่อแก้ไข DOM เพื่อหลีกเลี่ยงการรั่วไหลของหน่วยความจำ (ฉันกำลังพูดถึงคุณ IE) เพื่อให้มีทรัพยากรส่วนกลางหนึ่งเดียวที่จัดการปัญหาเหล่านี้ทั้งหมดให้ฉันเขียนโดยคนที่เป็นนักเขียน JS ที่ดีกว่าที่ฉันเคยเป็นมานั่นคือการได้รับการทบทวนปรับปรุงและทดสอบอย่างต่อเนื่อง

ฉันเดาว่าการเรียงลำดับนี้ตกอยู่ภายใต้การสนับสนุนข้ามเบราว์เซอร์ / อาร์กิวเมนต์ที่เป็นนามธรรม

และแน่นอนว่า jQuery ไม่ได้ จำกัด การใช้ JS โดยตรงเมื่อคุณต้องการ ฉันมักจะรู้สึกว่าทั้งสองดูเหมือนจะทำงานร่วมกันได้อย่างราบรื่น

แน่นอนว่าถ้าเบราว์เซอร์ของคุณไม่รองรับ jQuery หรือคุณกำลังรองรับสภาพแวดล้อมต่ำ (โทรศัพท์รุ่นเก่า?) ไฟล์. js ขนาดใหญ่อาจมีปัญหา จำได้ไหมว่าเมื่อ jQuery เคยเป็นเล็ก ๆ ?

แต่โดยทั่วไปแล้วความแตกต่างด้านประสิทธิภาพไม่ใช่ปัญหาที่น่ากังวล มันจะต้องเร็วพอ ด้วย Gigahertz ของรอบ CPU ที่กำลังจะเสียทุกวินาทีฉันกังวลเกี่ยวกับประสิทธิภาพของ coders ของฉันซึ่งเป็นทรัพยากรการพัฒนาเพียงอย่างเดียวที่ไม่ได้ใช้พลังงานเพิ่มขึ้นเป็นสองเท่าทุกๆ 18 เดือน

ที่กล่าวว่าฉันกำลังมองหาปัญหาการเข้าถึงและเห็นได้ชัดว่า. innerHTML เป็นบิตของไม่ไม่กับที่ jQuery ขึ้นอยู่กับ. innerHTML ดังนั้นตอนนี้ฉันกำลังมองหากรอบที่จะขึ้นอยู่กับวิธีที่ค่อนข้างน่าเบื่อที่ได้รับอนุญาต และฉันสามารถจินตนาการกรอบดังกล่าวจะทำงานช้ากว่า jQuery แต่ตราบใดที่มันทำงานได้ดีพอฉันจะมีความสุข

ต่อไปนี้เป็นคำตอบที่ไม่ใช่ด้านเทคนิค - งานจำนวนมากอาจไม่อนุญาตให้ใช้ไลบรารีบางอย่างเช่น jQuery

ในความเป็นจริงในความเป็นจริง Google ไม่อนุญาตให้ jQuery ในรหัสใด ๆ ของพวกเขา (หรือตอบสนองเพราะเป็นเจ้าของโดย Facebook) ซึ่งคุณอาจไม่รู้จักจนกว่าผู้สัมภาษณ์จะพูดว่า "ขออภัย แต่คุณไม่สามารถใช้ jQuery ได้ รายการที่อนุมัติที่ XYZ Corporation " Vanilla JavaScript ทำงานได้ทุกที่ทุกเวลาและจะไม่ให้ปัญหานี้แก่คุณ หากคุณพึ่งพาห้องสมุดใช่คุณจะได้รับความเร็วและความสะดวก แต่คุณสูญเสียความเป็นสากล

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

$(this)แตกต่างจากthis:

โดยการใช้$(this)คุณมั่นใจได้ว่าต้นแบบ jQuery ถูกส่งผ่านไปยังวัตถุ