'$ (এটি)' এবং 'এটি' এর মধ্যে পার্থক্য কী?

Question

আমি বর্তমানে এই টিউটোরিয়ালটির মাধ্যমে কাজ করছি: 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- শুধুমাত্র ফাংশন প্রয়োজন।

এটা কি সঠিক?

Comments

@ রিগেল, কেন এটি সুরক্ষিত ছিল? ওপি প্রশ্নটি করেছে এবং সঠিক উত্তর অনুমান করেছে।

— ভোলআরন

@ রিগেল: আমি মনে করি আমার এটি মেটাতে জিজ্ঞাসা করা উচিত, তবে সুরক্ষার জন্য যদি

— এগুলিই হয় তবে

Answer 1

হ্যাঁ আপনি কেবল $()তখনই প্রয়োজন যখন আপনি jQuery ব্যবহার করেন। আপনি যদি ডওম জিনিসগুলি করতে jQuery এর সহায়তা চান তবে এটি কেবল মনে রাখবেন।

$(this)[0] === this

মূলত প্রতিবারই যখন আপনি উপাদানগুলির একটি সেট পান jQuery এটিকে একটি jQuery অবজেক্টে রূপান্তরিত করে । আপনি যদি জানেন যে আপনার কেবলমাত্র একটি ফলাফল রয়েছে, তবে এটি প্রথম উপাদানটি হতে চলেছে।

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

এবং আরও ...

Comments

যদি তারা সবসময় একই $(this)[0]থাকে thisতবে তাদের ব্যবহার করার কোনও কারণ আছে কি ?

— জয়

@ জয় আপনি যদি 'এটি' ব্যবহার না করে দীর্ঘ টাইপ করতে পছন্দ করেন তবে হ্যাঁ। $ () হল jQuery কনস্ট্রাক্টর ফাংশন। "'এটি' হ'ল ডিওএম উপাদানটির অনুরোধ।

— জুলিভার গ্যালেটো

@ জেয় - $(this)[0]ধারণাটি চিত্রিত করার জন্য আমি এটি ব্যবহার করে আসার উপযুক্ত কোনও কারণ নেই । :) আমি ব্যবহার করব $("#myDiv")[0]ওভার document.getElementById("myDiv")যদিও।

— স্পেনসার রুপোর্ট

Answer 2

$() jQuery কনস্ট্রাক্টর ফাংশন।

this অনুরোধের DOM উপাদানটির একটি উল্লেখ।

তাই মূলত, এ $(this), আপনি শুধু ক্ষণস্থায়ী হয় thisমধ্যে $()একটি প্যারামিটার যাতে আপনি jQuery পদ্ধতি এবং ফাংশন বলতে পেরেছিলাম।

Answer 3

হ্যাঁ, আপনার $(this)jQuery ফাংশন প্রয়োজন , তবে আপনি যখন jQuery ব্যবহার করেন না এমন উপাদানগুলির প্রাথমিক জাভাস্ক্রিপ্ট পদ্ধতিগুলি অ্যাক্সেস করতে চান, আপনি কেবল ব্যবহার করতে পারেন this।

Answer 4

ব্যবহার করার সময় jQuery, এটি $(this)সাধারণত ব্যবহার করার পরামর্শ দেওয়া হয় । তবে যদি আপনি এই পার্থক্যটি জানেন (আপনার শিখতে হবে এবং জানা উচিত) তবে কখনও কখনও এটি ব্যবহার করা আরও সুবিধাজনক এবং দ্রুত হয় this। এই ক্ষেত্রে:

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

তুলনায় সহজ এবং বিশুদ্ধ

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

Comments

আমি উদাহরণ পছন্দ। ধন্যবাদ!

— আম্মার

Answer 5

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 একটি সম্পাদন প্রসঙ্গে থাকে

সুযোগটি বর্তমান এক্সিকিউশন কনটেক্সট ^{ইসিএমএকে} বোঝায় । বোঝার জন্য this, জাভাস্ক্রিপ্টে কার্যকরকরণ প্রসঙ্গগুলি যেভাবে কাজ করে তা বোঝা গুরুত্বপূর্ণ।

মৃত্যুদন্ড কার্যকর প্রসঙ্গে এটি বাঁধাই করে

যখন নিয়ন্ত্রণ কোনও কার্যকরকরণের প্রসঙ্গে প্রবেশ করে (কোডটি সেই সুযোগে কার্যকর করা হচ্ছে) ভেরিয়েবলের জন্য পরিবেশ সেটআপ হয় (লেক্সিকাল এবং ভেরিয়েবল এনভায়রনমেন্টস - মূলত এটি ভেরিয়েবলের প্রবেশের জন্য একটি ক্ষেত্র স্থাপন করে যা ইতিমধ্যে অ্যাক্সেসযোগ্য ছিল এবং স্থানীয় ভেরিয়েবলগুলির জন্য একটি অঞ্চল হতে পারে) সঞ্চিত), এবং এর বাঁধাই thisঘটে।

jQuery এটি আবদ্ধ

সম্পাদন প্রসঙ্গে একটি লজিক্যাল স্ট্যাক তৈরি হয়। ফলাফলটি হ'ল স্ট্যাকের আরও গভীর প্রসঙ্গে পূর্বের চলকগুলিতে অ্যাক্সেস রয়েছে তবে তাদের বাইন্ডিংগুলি পরিবর্তন করা যেতে পারে। প্রতিবার jQuery একটি কলব্যাক ফাংশন কল করে, এটি apply^MDN ব্যবহার করে এই বাইন্ডিংটিকে পরিবর্তন করে ।

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

কলিং ফলাফল applyযে , jQuery এর কলব্যাক ফাংশন ভিতরে thisবর্তমান উপাদান বোঝায় কলব্যাক ফাংশন দ্বারা ব্যবহৃত হচ্ছে।

উদাহরণস্বরূপ, ইন .each, সাধারণত ব্যবহৃত কলব্যাক ফাংশন এর জন্য মঞ্জুরি দেয় .each(function(index,element){/*scope*/})। যে সুযোগে, this == elementসত্য।

jQuery কলব্যাকগুলি বর্তমান ফাংশনটি বর্তমান উপাদানটির সাথে আবদ্ধ করার জন্য প্রয়োগ ফাংশনটি ব্যবহার করে। এই উপাদানটি jQuery অবজেক্টের উপাদান অ্যারে থেকে আসে। নির্মিত প্রতিটি jQuery অবজেক্টে উপাদানগুলির একটি অ্যারে রয়েছে যা নির্বাচক ^{jQuery API এর সাথে} মেলে যা jQuery অবজেক্টটি ইনস্ট্যান্ট করতে ব্যবহৃত হয়েছিল।

$(selector)jQuery ফাংশন কল করে (মনে রাখবেন যে $এটি একটি jQueryকোড, কোড window.jQuery = window.$ = jQuery;:) is অভ্যন্তরীণভাবে, jQuery ফাংশন একটি ফাংশন অবজেক্ট ইনস্ট্যান্ট করে ates সুতরাং এটি $()অভ্যন্তরীণ ব্যবহারগুলি অবিলম্বে সুস্পষ্ট নাও হতে পারে new jQuery()। এই jQuery অবজেক্টটি নির্মাণের অংশটি নির্বাচকের সমস্ত মিল খুঁজে পাওয়া। কনস্ট্রাক্টর এইচটিএমএল স্ট্রিং এবং উপাদানগুলিও গ্রহণ করবে । আপনি যখন thisjQuery কনস্ট্রাক্টর পাস করেন, আপনি jQuery অবজেক্টের জন্য তৈরি করার জন্য বর্তমান উপাদানটি পার করছেন । JQuery অবজেক্টের পরে নির্বাচক (বা ক্ষেত্রে কেবল একক উপাদান this) মেলে DOM উপাদানগুলির একটি অ্যারের মতো কাঠামো থাকে ।

একবার jQuery অবজেক্টটি তৈরি হয়ে গেলে, jQuery এপিআই এখন উন্মুক্ত করা হবে। যখন একটি jQuery এপিআই ফাংশন বলা হয়, এটি অভ্যন্তরীণভাবে এই অ্যারের মতো কাঠামোর উপরে পুনরাবৃত্তি করবে। অ্যারের প্রতিটি আইটেমের জন্য, এটি কলটির কলটিকে thisবর্তমান উপাদানটির সাথে আবদ্ধ করে, এপিআইয়ের জন্য কলব্যাক ফাংশন কল করে । এই কলটি উপরের কোড স্নিপেটে দেখা যাবে যেখানে objঅ্যারের মতো কাঠামো রয়েছে এবং iএটি বর্তমান উপাদানটির অ্যারেতে অবস্থানের জন্য ব্যবহৃত পুনরাবৃত্তকারী।

Answer 6

হ্যাঁ, ব্যবহার করে $(this)আপনি বস্তুর জন্য jQuery কার্যকারিতা সক্ষম করেছেন। কেবল ব্যবহার করে this, এটিতে কেবল জেনারিক জাভাস্ক্রিপ্ট কার্যকারিতা রয়েছে।

Answer 7

thisএকটি জাভাস্ক্রিপ্ট অবজেক্ট রেফারেন্স এবং $(this)jQuery সঙ্গে encapsulate ব্যবহৃত।

উদাহরণ =>

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