อะไรคือความแตกต่างระหว่าง '$ (สิ่งนี้)' กับ 'สิ่งนี้'

ฉันกำลังทำงานผ่านบทช่วยสอนนี้: เริ่มต้นกับ jQuery

สำหรับสองตัวอย่างด้านล่าง:

$("#orderedlist").find("li").each(function (i) {
    $(this).append(" BAM! " + i);
});
$("#reset").click(function () {
    $("form").each(function () {
        this.reset();
    });
});

โปรดสังเกตในตัวอย่างแรกเราใช้$(this)เพื่อต่อท้ายข้อความบางส่วนภายในของแต่ละliองค์ประกอบ ในตัวอย่างที่สองเราใช้thisโดยตรงเมื่อรีเซ็ตฟอร์ม

$(this)thisดูเหมือนว่าจะถูกนำมาใช้มากบ่อยกว่า

ฉันเดาในตัวอย่างแรก$()คือการแปลงแต่ละliองค์ประกอบเป็นวัตถุ jQuery ซึ่งเข้าใจการappend()ทำงานในขณะที่ในตัวอย่างที่สองreset()สามารถเรียกได้โดยตรงบนแบบฟอร์ม

โดยทั่วไปเราต้องการ$()ฟังก์ชั่นพิเศษ jQuery เท่านั้น

ถูกต้องหรือไม่

ใช่คุณต้องการ$()เมื่อคุณใช้ jQuery เท่านั้น หากคุณต้องการความช่วยเหลือจาก jQuery ในการทำสิ่ง DOM เพียงจำไว้ในใจ

$(this)[0] === this

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

$("#myDiv")[0] === document.getElementById("myDiv");

และอื่น ๆ ...

$() เป็นฟังก์ชั่นตัวสร้าง jQuery

this เป็นการอ้างอิงถึงองค์ประกอบ DOM ของการเรียก

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

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

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

$(".myCheckboxes").change(function(){ 
    if(this.checked) 
       alert("checked"); 
});

ง่ายกว่าและบริสุทธิ์กว่า

$(".myCheckboxes").change(function(){ 
      if($(this).is(":checked")) 
         alert("checked"); 
});

thisเป็นองค์ประกอบ$(this)คือวัตถุ jQuery ที่สร้างขึ้นด้วยองค์ประกอบนั้น

$(".class").each(function(){
 //the iterations current html element 
 //the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
 var HTMLElement = this;

 //the current HTML element is passed to the jQuery constructor
 //the jQuery API is exposed here (such as .html() and .append())
 var jQueryObject = $(this);
});

มองลึก

this^MDNมีอยู่ในบริบทการดำเนินการ

ขอบเขตหมายถึงปัจจุบันบริบทการดำเนิน ECMA เพื่อที่จะเข้าใจthisมันเป็นสิ่งสำคัญที่จะเข้าใจวิธีการดำเนินการตามบริบทการทำงานใน JavaScript

บริบทการดำเนินการผูกนี้

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

jQuery ผูกสิ่งนี้

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

callback.apply( obj[ i ] )//where obj[i] is the current element

ผลลัพธ์ของการโทรapplyคือภายในฟังก์ชันการเรียกกลับ jQuery thisหมายถึงองค์ประกอบปัจจุบันที่ใช้โดยฟังก์ชันการเรียกกลับ

ยกตัวอย่างเช่นในฟังก์ชั่นการโทรกลับที่ใช้กันทั่วไปช่วยให้.each .each(function(index,element){/*scope*/})ในขอบเขตนั้นthis == elementเป็นจริง

การเรียกกลับ jQuery ใช้ฟังก์ชั่น Apply เพื่อผูกฟังก์ชั่นที่ถูกเรียกด้วยองค์ประกอบปัจจุบัน องค์ประกอบนี้มาจากอาร์เรย์องค์ประกอบของวัตถุ jQuery แต่ละวัตถุ jQuery สร้างขึ้นมีอาร์เรย์ขององค์ประกอบที่ตรงกับตัวเลือก^{jQuery API}ที่ใช้ในการยกตัวอย่างวัตถุ jQuery

$(selector)เรียกฟังก์ชัน jQuery (จำได้ว่า$มีการอ้างอิงถึงjQueryรหัส: window.jQuery = window.$ = jQuery;) ภายในฟังก์ชัน jQuery จะทำให้วัตถุเป็นฟังก์ชันได้ทันที ดังนั้นในขณะที่มันอาจจะไม่ชัดเจนทันทีที่ใช้ภายในการใช้งาน$() new jQuery()ส่วนหนึ่งของการสร้างวัตถุ jQuery นี้คือการค้นหาการแข่งขันทั้งหมดของตัวเลือก ตัวสร้างยังจะยอมรับสตริง HTML และองค์ประกอบ เมื่อคุณผ่านthisไปยังตัวสร้าง jQuery คุณจะผ่านองค์ประกอบปัจจุบันสำหรับวัตถุ jQuery จะถูกสร้างขึ้นด้วย จากนั้นวัตถุ jQuery จะมีโครงสร้างเหมือนอาร์เรย์ขององค์ประกอบ DOM ที่ตรงกับตัวเลือก (หรือเพียงองค์ประกอบเดียวในกรณีของthis)

เมื่อสร้างวัตถุ jQuery แล้ว jQuery API จะถูกเปิดเผย เมื่อมีการเรียกใช้ฟังก์ชัน jQuery api ฟังก์ชันจะทำซ้ำภายในโครงสร้างแบบอาเรย์นี้ สำหรับแต่ละรายการในอาเรย์มันจะเรียกฟังก์ชั่นการโทรกลับสำหรับ API, ผูกพันการโทรกลับของthisองค์ประกอบปัจจุบัน การเรียกนี้สามารถเห็นได้ในข้อมูลโค้ดด้านบนซึ่งobjมีโครงสร้างคล้ายอาร์เรย์และiเป็นตัววนซ้ำที่ใช้สำหรับตำแหน่งในอาร์เรย์ขององค์ประกอบปัจจุบัน

ใช่โดยใช้$(this)คุณเปิดใช้งานฟังก์ชัน jQuery สำหรับวัตถุ โดยใช้เพียงthisมันมีฟังก์ชั่น Javascript ทั่วไปเท่านั้น

thisอ้างอิงวัตถุ javascript และ$(this)ใช้ในการแค็ปซูลกับ jQuery

ตัวอย่าง =>

// Getting Name and modify css property of dom object through jQuery
var name = $(this).attr('name');
$(this).css('background-color','white')

// Getting form object and its data and work on..
this = document.getElementsByName("new_photo")[0]
formData = new FormData(this)

// Calling blur method on find input field with help of both as below
$(this).find('input[type=text]')[0].blur()

//Above is equivalent to
this = $(this).find('input[type=text]')[0]
this.blur()

//Find value of a text field with id "index-number"
this = document.getElementById("index-number");
this.value

or 

this = $('#index-number');
$(this).val(); // Equivalent to $('#index-number').val()
$(this).css('color','#000000')