ما الفرق بين '$(this) " و " هذا ؟

Question

أنا أعمل حاليا من خلال هذا البرنامج التعليمي: الشروع في العمل مع مسج

اثنين من الأمثلة أدناه:

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

لاحظ في المثال الأول ، ونحن نستخدم $(this) إلى إلحاق بعض النصوص داخل كل li العنصر.في المثال الثاني نستخدم this مباشرة عند إعادة النموذج.

$(this) ويبدو أن تستخدم في الكثير من الأحيان this.

تخميني هو في المثال الأول ، $() هو تحويل كل li عنصر في مسج الكائن الذي يفهم append() وظيفة بينما في المثال الثاني reset() يمكن أن يسمى مباشرة على النموذج.

في الأساس نحن بحاجة $() خاصة مسج-وظائف فقط.

هل هذا صحيح ؟

Answer 1

ونعم تحتاج $() فقط عندما كنت تستخدم مسج. إذا كنت تريد مساعدة مسج لتفعل أشياء DOM فقط تضع ذلك في الاعتبار.

$(this)[0] === this

وأساسا في كل مرة تحصل على مجموعة من العناصر الوراء مسج يحولها إلى مسج الكائن . إذا كنت تعرف أنك لا تملك إلا نتيجة واحدة، فإنه سيكون في العنصر الأول.

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

وهلم جرا ...

Answer 2

و$() هي وظيفة مسج المنشئ.

وthis هو إشارة إلى عنصر DOM من الاحتجاج.

وذلك أساسا، في $(this)، كنت مجرد تمرير this في $() كمعلمة بحيث يمكن استدعاء الأساليب مسج وظائف.

Answer 3

نعم، تحتاج $(this) لوظائف مسج، ولكن عندما تريد الوصول طرق جافا سكريبت الأساسية للعنصر التي لا تستخدم مسج، يمكنك فقط استخدام this.

Answer 4

عند استخدام jQuery، وينصح لاستخدام $(this) عادة. ولكن إذا كنت تعرف (يجب أن تعلم ومعرفة) الفرق، وأحيانا يكون أكثر ملاءمة وأسرع لمجرد استخدام this. على سبيل المثال:

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

وأسهل وأنقى من

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

Answer 5

this هو العنصر ، $(this) هو كائن مسج شيدت مع هذا العنصر

$(".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, من المهم أن نفهم طريقة التنفيذ سياقات العمل في جافا سكريبت.

تنفيذ السياقات ربط هذا

عندما يدخل أحد سياق التنفيذ (رمز يجري تنفيذها في هذا النطاق) البيئة عن المتغيرات الإعداد (المعجمية بيئات متغيرة - أساسا هذا يضع مجالا المتغيرات لدخول التي يمكن الوصول إليها بالفعل ، منطقة المتغيرات المحلية ليتم تخزينها) ، ملزم this تحدث.

مسج يربط هذا

تنفيذ السياقات شكل منطقي المكدس.والنتيجة هي أن السياقات أعمق في كومة من الوصول إلى المتغيرات السابقة ، ولكن هذه الارتباطات قد تم تغييرها. في كل مرة يدعو مسج وظيفة رد اتصال ، فإنه يغير هذا الربط باستخدام apply^MDN.

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

نتيجة الدعوة apply هو أن داخل مسج رد من المهام ، this يشير إلى العنصر الحالي تستخدم من خلال وظيفة رد الاتصال.

على سبيل المثال ، .each, وظيفة رد الاتصال استخداما يسمح .each(function(index,element){/*scope*/}).في هذا النطاق ، this == element هو صحيح.

مسج الاسترجاعات استخدام تطبيق وظيفة ربط الوظيفة التي دعا مع العنصر الحالي.هذا العنصر يأتي من مسج كائن عنصر الصفيف.كل كائن مسج شيدت يحتوي على مجموعة من العناصر التي تطابق محدد^{مسج API} التي كانت تستخدم إنشاء مثيل الكائن مسج.

$(selector) يدعو وظيفة مسج (تذكر أن $ هو إشارة إلى jQuery, رمز: window.jQuery = window.$ = jQuery;).داخليا, مسج وظيفة إنشاء مثيل كائن وظيفة.وذلك في حين أنه قد لا يكون واضحا على الفور باستخدام $() يستخدم داخليا new jQuery().جزء من بناء هذا الكائن مسج هو العثور على جميع مباريات محدد.منشئ أيضا تقبل html سلاسل و العناصر. عند تمرير this إلى مسج منشئ, يتم تمرير التيار عنصرا مسج كائن أن يكون بناؤها مع.مسج كائن ثم يحتوي على صفيف مثل هيكل عناصر DOM مطابقة محدد (أو مجرد عنصر واحد في حالة this).

مرة واحدة مسج الكائن هي التي شيدت ، مسج API يتعرض الآن.عندما مسج api يسمى وظيفة ، وسوف داخليا تكرار عبر هذه المجموعة-مثل هيكل.لكل عنصر في المصفوفة ، فإنه يدعو رد وظيفة api ، ملزمة رد هو this أن العنصر الحالي.هذه الدعوة يمكن أن ينظر إليه في التعليمات البرمجية المتكررة أعلاه حيث obj هو مجموعة-مثل هيكل ، i هو مكرر تستخدم الموقف في مجموعة من العنصر الحالي.

Answer 6

نعم، باستخدام $(this)، لتمكين وظيفة مسج للكائن. فقط باستخدام this، له وظيفة جافا سكريبت العامة فقط.

Answer 7

this مرجع كائن جافا سكريبت ، $(this) تستخدم لتغليف مع مسج.

مثال =>

// 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')