jQuery বনাম ডকুমেন্ট.কোয়ারী নির্বাচনকারী সমস্ত

161

আমি বেশ কয়েকবার শুনেছি যে ডকুমে উপাদানগুলির অনুসন্ধান এবং জালিয়াতি করার জন্য jQuery এর সবচেয়ে শক্তিশালী সম্পদ: আপনি নিয়মিত জাভাস্ক্রিপ্টে করা খুব কঠিন হতে পারে এমন জটিল প্রশ্নগুলি তৈরি করতে আপনি CSS প্রশ্নগুলি ব্যবহার করতে পারেন। তবে যতদূর আমি জানি, আপনি ইন্টারনেট এক্সপ্লোরার 8 এবং তারপরে সমর্থিত document.querySelectorবা এর সাথে একই ফলাফল অর্জন করতে পারেন document.querySelectorAll।

সুতরাং প্রশ্নটি হ'ল কেন 'ঝুঁকি' jQuery এর ওভারহেড যদি এর সবচেয়ে শক্তিশালী সম্পদ খাঁটি জাভাস্ক্রিপ্ট দ্বারা অর্জন করা যায়?

আমি জানি jQuery এর মধ্যে কেবল সিএসএস সিলেক্টর রয়েছে, উদাহরণস্বরূপ ক্রস ব্রাউজার AJAX, দুর্দান্ত ইভেন্ট সংযুক্তি ইত্যাদি But তবে এর অনুসন্ধান অংশটি jQuery এর শক্তির খুব বড় অংশ is

কোন চিন্তা?

javascript  jquery  html  css-selectors  jquery-selectors 
— Joel_Blum
সূত্র
4
(1) ডকুম ট্র্যাভারসাল / পরিবর্তন jQuery এর সাথে অনেক দ্রুত এবং সহজ। (২) এটি নিজস্ব নির্বাচকগুলি যুক্ত করে যা querySelectorপদ্ধতিগুলিতে কাজ করবে না । (3) এজেএক্স কল করা jQuery এর সাথে অনেক দ্রুত এবং সহজ। (4) আই 6 + এ সমর্থন। আমি নিশ্চিত যে আরও অনেক পয়েন্ট রয়েছে যেগুলিও তৈরি করা যেতে পারে।
— জেমস এলার্ডিস
12
(5) ... অলস টাইপিস্টদের জন্য শর্টহ্যান্ড $ () অবশ্যই আবশ্যক।
— ডেক্সটার হুন্ডা
4
সহজ হ্যাঁ, দ্রুত কেন? jQuery যতদূর আমি জানি নিয়মিত জাভাস্ক্রিপ্টে অনুবাদ করে ...
— জোয়েল_ ব্লুম
4
@ জেমস অ্যালার্ডাইস— ক্রস-ব্রাউজারের এক্সএমএলএইচটিপিআরকোয়েস্টের জন্য "সমস্ত জগাখিচুড়ি" সম্ভবত 30 টি কোড লাইন যা আপনি একবার লিখেছিলেন এবং আপনার নিজের লাইব্রেরিতে রেখেছেন।
— রবজি
6
@ রবজি - হ্যাঁ, আমি বলছি না যে আপনি যদি কেবল এটির জন্য ব্যবহার করার চেষ্টা করছেন তবে jQuery ব্যবহার করুন। এটি কেবল একটি সুবিধা আপনার যদি সহজ ডোম ট্র্যাভারসাল, এজ্যাক্স এবং querySelectorAllআপনার পুরানো ব্রাউজারগুলিতে কাজ করার দরকার হয় তবে jQuery একটি সুস্পষ্ট পছন্দ। আমি বলছি না যে আপনি এটি ব্যবহার করা উচিত ভালো ।
— জেমস আলার্ডাইস

উত্তর:

127

document.querySelectorAll() ব্রাউজারগুলির জুড়ে বেশ কয়েকটি অসঙ্গতি রয়েছে এবং পুরানো ব্রাউজারগুলিতে এটি সমর্থন করে না এটি আজকাল আর সম্ভবত কোনও সমস্যায় ফেলবে না । এটির একটি খুব অবিস্মরণীয় স্কোপিং মেকানিজম এবং অন্য কিছু এত সুন্দর বৈশিষ্ট্য নেই । জাভাস্ক্রিপ্টের সাহায্যে আপনার এই ক্যোয়ারির ফলাফল সেটগুলির সাথে কাজ করা আরও কঠিন সময় যা আপনি অনেক ক্ষেত্রেই করতে চাইতে পারেন। : jQuery মত তাদের উপর কাজ ফাংশন প্রদান করে filter(), find(), children(), parent(), map(), not()এবং বেশ কিছু আরও অনেক কিছু। সিউডো-বর্গ নির্বাচনকারীদের সাথে কাজ করার jQuery ক্ষমতা উল্লেখ না করা।

যাইহোক, আমি এই বিষয়গুলিকে jQuery এর শক্তিশালী বৈশিষ্ট্য হিসাবে বিবেচনা করব না তবে ক্রোস ব্রাউজারের সামঞ্জস্যপূর্ণ উপায়ে বা এজাক্স ইন্টারফেসে ডোম (ইভেন্টস, স্টাইলিং, অ্যানিমেশন এবং ম্যানিপুলেশন) হিসাবে "কাজ করা" এর মতো অন্যান্য বিষয়গুলি বিবেচনা করব না ।

আপনি যদি কেবল jQuery থেকে নির্বাচক ইঞ্জিন চান তবে আপনি যে jQuery নিজেই ব্যবহার করছেন তা ব্যবহার করতে পারেন : সিজল সেভাবে আপনার বাজে ওভারহেড ছাড়াই jQuerys সিলেক্টর ইঞ্জিনের শক্তি রয়েছে।

সম্পাদনা: কেবল রেকর্ডের জন্য, আমি একটি বিশাল ভ্যানিলা জাভাস্ক্রিপ্ট ফ্যান। তবুও এটি একটি সত্য যে আপনার মাঝে মাঝে জাভাস্ক্রিপ্টের 10 লাইন প্রয়োজন যেখানে আপনি 1 লাইন jQuery লিখবেন।

অবশ্যই আপনাকে এই জাতীয় jQuery না লিখতে শৃঙ্খলাবদ্ধ হতে হবে:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

এটি পড়তে চূড়ান্ত, যদিও দ্বিতীয়টি বেশ পরিষ্কার:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

সমতুল্য জাভাস্ক্রিপ্ট উপরের সিউডোকোড দ্বারা চিত্রিত আরও জটিল হবে:

1) উপাদানটি সন্ধান করুন, সমস্ত উপাদান বা শুধুমাত্র প্রথম গ্রহণ বিবেচনা করুন।

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) কয়েকটি (সম্ভবত নেস্টেড বা পুনরুক্তিযোগ্য) লুপগুলির মাধ্যমে শিশু নোডের অ্যারের উপরে আইট্রেট করুন এবং ক্লাসটি পরীক্ষা করুন (সমস্ত ব্রাউজারে শ্রেণি তালিকা উপলব্ধ নেই!)

//.find('.foo')
for (var i = 0;i<e.length;i++){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('foo');
     // do some more magic stuff here
}

3) সিএসএস স্টাইল প্রয়োগ করুন

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

এই কোডটি আপনি jQuery দিয়ে লিখেছেন এমন কোডের লাইন কমপক্ষে দ্বিগুণ হবে। এছাড়াও আপনাকে ক্রস ব্রাউজার সম্পর্কিত বিষয়গুলি বিবেচনা করতে হবে যা নেটিভ কোডের তীব্র গতির সুবিধা (নির্ভরযোগ্যতা ছাড়াও) আপস করবে ।

— ক্রিস্টোফ
সূত্র
33
querySelectorAllব্রাউজারগুলির মধ্যে কী ধরণের অসঙ্গতি রয়েছে? এবং jQuery ব্যবহার কীভাবে এটি সমাধান করবে, যেহেতু উপলব্ধ থাকে যখন jQuery ব্যবহার করে querySelectorAll ?
3
সত্য, এক লাইনের কোডে অন্তহীন কোডের চেইন থাকতে পারে যা ডিবাগিংয়ের সময় খুব বিরক্তিকর হতে পারে।
— ডেক্সটার হুন্দা
1
"২) কয়েকটি (সম্ভবত নেস্টেড বা পুনরুক্তিযোগ্য) লুপগুলির মাধ্যমে চাইল্ডনোডগুলির অ্যারের উপরে পুনরাবৃত্তি করুন এবং ক্লাসটি পরীক্ষা করুন" << এটি মোট ক্র্যাপ is আপনি আগের পদক্ষেপে উপাদানটিতে ক্যোরিসেক্টর সমস্ত ব্যবহার করতে পারেন।
— ভানুয়ান
5
@ ভানুয়ান এটি প্রয়োজনীয় নাও হতে পারে তবে আপনি যদি আমার উত্তরটি পুরোপুরি পড়তেন তবে আপনি খেয়াল করতে পারেন, ক্যোয়ারী নির্বাচনকের একটি গুরুতর স্কোপিং সমস্যা রয়েছে যা আপনার প্রস্তাবের পথে ব্যবহার করার সময় আপনাকে অনেক মিথ্যা ইতিবাচক দিক দিতে পারে। তবুও আপনার কোনও নির্জন কারণে নিখরচায় বা ডাউনটাতে নির্দ্বিধায় থাকাকালীন, আমি মনে করি এটি অভদ্র ভাষা ব্যবহারের কোনও কারণ নয়।
— ক্রিস্টোফ
2
@ ক্রিসটফ যেহেতু এটি সহজ, আমি IE8 এবং তারপরের জন্য সামঞ্জস্যতা যুক্ত করেছি। এখনও বিশাল গতির সুবিধার (5-20 বার)। আইই 8 এর মতো কোডটি পুরানো ব্রাউজারে ধীর হয়ে চলবে এটি একটি ভুল অনুমান।
— পাসক্যালিয়াস
60

আপনি যদি আইই 8 বা নতুনটির জন্য আপনার পৃষ্ঠাটি অপ্টিমাইজ করছেন তবে আপনার জিকিউরি দরকার কিনা তা আপনার সত্যিই বিবেচনা করা উচিত। আধুনিক ব্রাউজারগুলিতে স্থানীয়ভাবে অনেক সম্পদ রয়েছে যা jquery সরবরাহ করে।

আপনি যদি পারফরম্যান্সের জন্য যত্ন নেন তবে নেটিভ জাভাস্ক্রিপ্ট ব্যবহার করে আপনার অবিশ্বাস্য পারফরম্যান্স সুবিধা (2-10 দ্রুত) থাকতে পারে : http://jsperf.com/jquery-vs-native-selector-and-element-style/2

আমি jquery থেকে নেটিভ জাভাস্ক্রিপ্ট (আই 8 + সামঞ্জস্যপূর্ণ) এ একটি ডিভ ট্যাগগ্লাউডকে রূপান্তরিত করেছি , ফলাফল চিত্তাকর্ষক are 4 বার দ্রুত সামান্য ওভারহেড দিয়ে faster

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

আপনার দরকার নেই জ্যাকুয়েরি সত্যিই দুর্দান্ত ওভারভিউ সরবরাহ করে, কোন ব্রাউজার সংস্করণের জন্য কোন স্থানীয় পদ্ধতিগুলি প্রতিস্থাপন করে।

http://youmightnotneedjquery.com/

পরিশিষ্ট: আরও গতির সাথে তুলনা করা হয় যে কীভাবে দেশীয় পদ্ধতিগুলি jquery এর সাথে প্রতিযোগিতা করে

— Pascalius
সূত্র
কোডের কয়েকটি উদাহরণ ভুল হলেও চমৎকার ওভারভিউ ... উদাহরণ $(el).find(selector)সমান নয় el.querySelectorAll(selector)এবং স্থানীয় পদ্ধতিগুলির কার্য সম্পাদন প্রায়শই বেশ ভয়ঙ্কর: স্ট্যাকওভারফ্লো.com
— ক্রিস্টোফ
@ ক্রিসটফ আপনি কী ব্যাখ্যা দিতে পারেন, কেন আপনি ভাবেন যে পদ্ধতিগুলি আলাদা? অবশ্যই প্রান্তের কেসগুলি রয়েছে যেখানে jquery আরও ভাল পারফরম্যান্স করতে পারে তবে আমি DOM- ম্যানিপুলেশনের জন্য একটিও দেখিনি।
— পাসক্যালিয়াস
1
আরও বিশদ দেওয়ার দরকার নেই, কেবল আমার উত্তরটি পড়ুন, ফ্রেড এবং আমি যে নিবন্ধটি লিঙ্ক করেছি তা দেখুন। এছাড়াও, (কমপক্ষে এটিএম) বেশিরভাগ নেটিভ অ্যারে পদ্ধতিগুলি নিখুঁত জেএস বাস্তবায়নের তুলনায় গতিতে নিকৃষ্ট হয় (যেমন আমি আমার প্রথম মন্তব্যে প্রশ্নটিতে লিঙ্ক করেছি)। এবং এগুলি প্রান্তের মামলা নয়, বরং মানক ক্ষেত্রে। কিন্তু আবার, এই প্রশ্নের মূল ফোকাস ছিল গতি নয়।
— ক্রিস্টোফ
2
@ ক্রিসটফ অবশ্যই, এই পদ্ধতিগুলি 100% সমান নয় এবং jquery প্রায়শই আরও বেশি সুবিধা দেয়। আমি উত্তরটি আপডেট করে দেখিয়েছি যে এটি কেবলমাত্র একটি প্রান্তের মামলা, আমি আসলে অন্য কোনও মামলা খুঁজে পাইনি যেখানে jquery আরও ভাল অভিনয় করেছে। প্রশ্নের মূল ফোকাস নেই।
— পাসক্যালিয়াস
+1 দুর্দান্ত উত্তর! আমি গত 4 বা 5 বছর ধরে যেখানেই এবং যেখানেই সম্ভব কাঁচা জাভাস্ক্রিপ্টের সাথে পুরানো জিকুয়ের কোডটি আস্তে আস্তে প্রতিস্থাপন করছি .. অবশ্যই, jQuery কিছু জিনিসের জন্য দুর্দান্ত এবং যখন আমি মনে করি আমি একটি শক্ত সুবিধা পেয়েছি তখন আমি এই জিনিসগুলির জন্য এটি ব্যবহার করি ।
— হ্যা ব্যারি
13

JQuery কেন এত জনপ্রিয় তা বুঝতে, আমরা কোথা থেকে আসছি তা বোঝা গুরুত্বপূর্ণ!

প্রায় এক দশক আগে, শীর্ষ ব্রাউজারগুলি আই 6, নেটস্কেপ 8 এবং ফায়ারফক্স 1.5 ছিল। সেই দিনগুলিতে, ডিওএম থেকে কোনও উপাদান নির্বাচন করার জন্য খুব কম ক্রস ব্রাউজারের উপায় ছিল Document.getElementById()।

সুতরাং, যখন জিকুয়ারি 2006 সালে মুক্তি পেয়েছিল , তখন এটি বেশ বিপ্লবী ছিল। তারপরে, jQuery কীভাবে সহজেই এইচটিএমএল উপাদানগুলি নির্বাচন / পরিবর্তন করতে এবং ইভেন্টগুলি ট্রিগার করতে পারে তার মান নির্ধারণ করে, কারণ এর নমনীয়তা এবং ব্রাউজার সমর্থন নজিরবিহীন ছিল।

এখন, এক দশকেরও বেশি সময় পরে, jQuery কে এত জনপ্রিয় করে তুলেছে এমন অনেকগুলি বৈশিষ্ট্য জাভাস্ক্রিপ্ট স্ট্যান্ডার্ডে অন্তর্ভুক্ত হয়ে গেছে:

এগুলি সাধারণত ২০০৫ সালে ফিরে পাওয়া যায় নি they আজ এগুলি সত্যই স্পষ্টতই আমাদের কেন jQuery ব্যবহার করা উচিত সে প্রশ্নটি উত্থাপন করে। এবং প্রকৃতপক্ষে, লোকেরা ক্রমবর্ধমানভাবে ভাবছে যে আমাদের কিছুটা jQuery ব্যবহার করা উচিত ।

সুতরাং, আপনি যদি মনে করেন যে আপনি জাভাস্ক্রিপ্টটি jQuery ব্যতীত যথেষ্ট ভালভাবে বুঝতে পারছেন তবে দয়া করে করুন! JQuery ব্যবহার করতে বাধ্য হবেন না, কারণ আরও অনেকে এটি করছেন!

— জন স্লেজার্স
সূত্র
7

এর কারণ jQuery এর চেয়ে আরও অনেক বেশি কিছু করতে পারে querySelectorAll।

সবার আগে, jQuery (এবং বিশেষত সিজল), IE7-8 এর মতো পুরানো ব্রাউজারগুলির জন্য কাজ করে যা CSS2.1-3 নির্বাচকদের সমর্থন করে না।

প্লাস, সিজল (যা jQuery এর পিছনে নির্বাচক ইঞ্জিন) আপনাকে :selectedসিউডো-ক্লাস, একটি উন্নত :not()নির্বাচক, আরও জটিল সিনট্যাক্সের মতো আরও অনেকগুলি উন্নত সিলেক্ট্রের সরঞ্জাম সরবরাহ $("> .children")করে।

এবং এটি ক্রস-ব্রাউজারগুলি নির্বিঘ্নে, jQuery যে সমস্ত অফার করতে পারে তা প্রস্তাব করে (প্লাগইন এবং এপিআই) দেয়।

হ্যাঁ, আপনি যদি ভাবেন যে আপনি সাধারণ শ্রেণি এবং আইডি নির্বাচকদের উপর নির্ভর করতে পারেন, jQuery আপনার জন্য খুব বেশি, এবং আপনি একটি অতিরঞ্জিত বেতন-অফ দিয়ে যাচ্ছেন। তবে আপনি যদি তা না করেন এবং সমস্ত jQuery ধার্মিকতার সুযোগ নিতে চান তবে এটি ব্যবহার করুন।

— MaxArt
সূত্র
7

jQuery এর সিজল সিলেক্টর ইঞ্জিন querySelectorAllএটি উপলভ্য থাকলে ব্যবহার করতে পারে । এটি অভিন্ন ফলাফল অর্জন করতে ব্রাউজারগুলির মধ্যে অসঙ্গতিগুলি মসৃণ করে। আপনি যদি সব jQuery ব্যবহার করতে না চান তবে আপনি কেবল সিজল আলাদাভাবে ব্যবহার করতে পারেন। এটি উদ্ভাবনের জন্য একটি দুর্দান্ত মৌলিক চাকা।

উত্স থেকে কিছু চেরি-পিকিং যা আপনার জন্য jQuery (ডাব্লু / সিজল) সাজানোর জিনিসগুলি দেখায়:

সাফারি quirks মোড:

if ( document.querySelectorAll ) {
  (function(){
    var oldSizzle = Sizzle,
      div = document.createElement("div"),
      id = "__sizzle__";

    div.innerHTML = "<p class='TEST'></p>";

    // Safari can't handle uppercase or unicode characters when
    // in quirks mode.
    if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
      return;
    }

যদি সেই প্রহরী ব্যর্থ হয় তবে এটি সিজলের একটি সংস্করণ যা এর সাথে বাড়ানো হয় না querySelectorAll। আরও নীচে আইই, অপেরা এবং ব্ল্যাকবেরি ব্রাউজারে অসঙ্গতিগুলির জন্য নির্দিষ্ট হ্যান্ডলগুলি রয়েছে।

  // Check parentNode to catch when Blackberry 4.6 returns
  // nodes that are no longer in the document #6963
  if ( elem && elem.parentNode ) {
    // Handle the case where IE and Opera return items
    // by name instead of ID
    if ( elem.id === match[3] ) {
      return makeArray( [ elem ], extra );
    }

  } else {
    return makeArray( [], extra );
  }

এবং যদি সমস্ত কিছু ব্যর্থ হয় তবে এর ফলাফলটি ফিরে আসবে oldSizzle(query, context, extra, seed)।

— KGZM
সূত্র
6

কোড রক্ষণাবেক্ষণের ক্ষেত্রে, বহুল ব্যবহৃত ব্যবহৃত লাইব্রেরিটির সাথে আটকে থাকার বেশ কয়েকটি কারণ রয়েছে।

প্রধানগুলির মধ্যে একটি হ'ল এগুলি যথাযথ নথিভুক্ত, এবং সম্প্রদায় যেমন ... বলুন ... স্ট্যাকেক্সচেঞ্জ, যেখানে গ্রন্থাগারগুলির সাহায্য পাওয়া যায় have একটি কাস্টম কোডেড লাইব্রেরি সহ আপনার সোর্স কোড এবং সম্ভবত কোনও ডকুমেন্ট কীভাবে হবে, যদি না কোডার (গুলি) কোডটি লেখার চেয়ে বেশি সময় ব্যয় না করে, যা বিরলভাবে বিরল।

আপনার নিজের লাইব্রেরিটি লিখতে আপনার পক্ষে কাজ করতে পারে তবে পরবর্তী ডেস্কে বসে ইন্টার্নে jQuery এর মতো কিছু নিয়ে দ্রুত গতিতে উঠতে আরও সহজ সময় হতে পারে।

পছন্দ হলে এটিকে নেটওয়ার্ক এফেক্ট বলুন। এটি jQuery ক্ষেত্রে কোডটি উন্নততর হবে তা বলার অপেক্ষা রাখে না; কোডটির সংক্ষিপ্ত প্রকৃতিটি সমস্ত দক্ষতার স্তরের প্রোগ্রামারদের সামগ্রিক কাঠামোটি উপলব্ধি করা সহজ করে তোলে কেবল যদি আপনি যে ফাইলটি দেখছেন তাতে একযোগে আরও কার্যকর কোড রয়েছে visible এই অর্থে, 5 টি লাইন কোড 10 এর চেয়ে ভাল।

সংক্ষেপে, আমি jQuery এর প্রধান সুবিধাগুলি সংক্ষিপ্ত কোড এবং সর্বব্যাপী হিসাবে দেখছি।

— ডোম ডে
সূত্র
6

আমি যদি একই বৈশিষ্ট্যটি প্রয়োগ করতে চাই তবে এখানে একটি তুলনা করুন, উদাহরণস্বরূপ "আমার-শ্রেণি" শ্রেণীর সমস্ত উপাদান লুকান। JQuery ব্যবহার করার এটি একটি কারণ।

JQuery:

$('.my-class').hide();

javascript:

var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
}

JQuery ইতিমধ্যে এত জনপ্রিয় সঙ্গে, তাদের উচিত ডকুমেন্ট.কোয়ারী নির্বাচনকারী () ঠিক $ () এর মতো আচরণ করা উচিত। পরিবর্তে ডকুমেন্ট.কোয়ারিসিলিেক্টর () কেবল প্রথম মিলের উপাদান নির্বাচন করে যা এটি কেবলমাত্র অর্ধেক উপযোগী করে তোলে।

— স্টিভেন
সূত্র
4
আমি এখানে একটি করতাম।
— ফিলিপ সেন
ভাল আপনি সবসময় একটি সহজ রুট সঙ্গে যেতে পারেন document.querySelectorAll('.my-class').forEach(el => el.style.display = 'none');। তবুও খাটো হলেও, পারফরম্যান্স অনুযায়ী নেটিভ সবসময় ভাল।
— আলাইন ক্রুজ
ব্যবহারকারীর দৃষ্টিকোণ থেকে, 0.1 সেকেন্ডেরও কম সময়ে ঘটে যাওয়া সমস্ত কিছু সঙ্গে সঙ্গে ঘটে। সুতরাং নেটিভ এমনকি আরও দ্রুত হচ্ছে, কেবল তখনই ভাল যখন jQuery বাস্তবায়ন ধীরে ধীরে 0.1 সেকেন্ড হয়। এবং বাস্তব বিশ্বের প্রয়োগে এটি কখনও হয় না in
— ইয়ুরিন
3

অফিসিয়াল সাইট যেমন বলেছে: "jQuery: কম লেখুন, আরও কিছু করুন, জাভাস্ক্রিপ্ট লাইব্রেরি"

কোনও লাইব্রেরি ছাড়াই নিম্নলিখিত jQuery কোডটি অনুবাদ করার চেষ্টা করুন

$("p.neat").addClass("ohmy").show("slow");
— সাইমন xu
সূত্র
1
আমি এর সাথে একমত, তবে পাঠযোগ্যতার কী হবে? প্রচুর অ-সম্পর্কিত জিনিসগুলির সাথে আপনি কোডের দীর্ঘ লাইন কীভাবে নথিভুক্ত করতে পারেন? আপনি কীভাবে এই ধর্মাবলম্বীদের ডিবাগ করতে পারেন?
— জোয়েল_ ব্লুম
@ user1032663 এটি ডকুমেন্টেশন-কনভেনশনগুলির বিষয়।
— ক্রিস্টোফ
1
JQuery এর বিকল্প (বা আপনি যে কোনও "জনপ্রিয়" লাইব্রেরি চয়ন করেন) স্ক্র্যাচ থেকে সমস্ত কিছু লেখার জন্য নয়, তবে আপনার উদ্দেশ্য অনুসারে এমন একটি লাইব্রেরি ব্যবহার করুন যা ভাল লেখা আছে। আপনার নিজের লেখা অংশ থাকতে পারে বা মাই লাইব্রেরির মতো একটি মডিউলার লাইব্রেরি বেছে নিয়েছেন যা আপনার প্রয়োজন কেবল তা অন্তর্ভুক্ত করতে পারেন ।
— রবজি
2
আপনি যে উদাহরণটি বেছে নিয়েছেন তা সত্যিই আপনার বক্তব্য প্রমাণ করে না: প্রশ্নটি "নির্বাচক" প্রদেশের পার্থক্যের জন্য অনুসন্ধান করছে। addClass()এবং show()সত্যিই গণনা করবেন না। এবং হিসাবে $('p.neat'), আপনি ক্যোয়ারী নির্বাচনকারী / সমস্ত তাকান করতে পারেন।
— কুমারহর্ষ
document.querySelectorAll('p.neat').forEach(p=>p.classList.add('ohmy'));এবং সিএসএসকে বাকী কাজটি করতে দিন। সামান্য আর কোড, কিন্তু অনেক বেশি দক্ষ। অবশ্যই, লিগ্যাসির আইই দিনগুলিতে তার সমাধানটি এতটা উপলভ্য ছিল না। "আরও কিছু করুন" অংশটি বিদ্রূপাত্মক। jQuery কিছু সন্ধান করতে প্রায় একশ লাইনের কোড নেয়, তাই বেশি করে করা সবসময় ফলদায়ক হয় না।
— ম্যাঙ্গো
2

আমি মনে করি আসল উত্তর হ'ল querySelector/querySelectorAllসমস্ত বড় ব্রাউজারে উপলভ্য হওয়ার আগেই jQuery বিকাশ করা হয়েছিল ।

জিকুয়ের প্রাথমিক প্রকাশ 2006 সালে হয়েছিল । আসলে, jQuery এমনকি প্রথম নয় যা সিএসএস নির্বাচকদের প্রয়োগ করেছিল ।

আই ই গত ব্রাউজার ছিল বাস্তবায়ন querySelector/querySelectorAll। এর অষ্টম সংস্করণটি ২০০৯ সালে প্রকাশিত হয়েছিল ।

সুতরাং এখন, ডোম উপাদান নির্বাচনকারীরা আর jQuery এর সবচেয়ে শক্তিশালী বিন্দু নয়। যাইহোক, এটির এখনও অনেকগুলি গুডিজ রয়েছে যেমন এলিমেন্টের সিএসএস এবং এইচটিএমএল সামগ্রী, অ্যানিমেশন, ইভেন্টস বাইন্ডিং, এজাক্স পরিবর্তন করতে শর্টকাট like

— Vanuan
সূত্র
1

পুরানো প্রশ্ন, তবে অর্ধ দশক পরে, এটি পুনরায় দেখার মতো worth এখানে আমি কেবল jQuery এর নির্বাচক দিকটি নিয়ে আলোচনা করছি।

document.querySelector[All]আইই 8-র নিচে সমস্ত বর্তমান ব্রাউজার দ্বারা সমর্থিত , সুতরাং সামঞ্জস্যতা আর কোনও সমস্যা নয়। আমি কথা বলার জন্য কোনও পারফরম্যান্সের সমস্যাও খুঁজে পাইনি (এটির চেয়ে ধীর হওয়া উচিত ছিল document.getElementById, তবে আমার নিজের পরীক্ষা থেকে বোঝা যায় যে এটি কিছুটা দ্রুত)।

সুতরাং যখন কোনও উপাদান সরাসরিভাবে চালিত করার কথা আসে তখন এটি jQuery এর চেয়ে বেশি পছন্দ করা উচিত।

উদাহরণ স্বরূপ:

var element=document.querySelector('h1');
element.innerHTML='Hello';

এর থেকে অনেক বেশি উন্নত:

var $element=$('h1');
$element.html('hello');

যেকোন কিছু করার জন্য, jQuery কে একশ লাইনের কোডের মধ্য দিয়ে চলতে হবে (আমি একবার উপরের মত কোডের সাহায্যে দেখেছিলাম যে jQuery আসলে এর সাথে কী করছে)। এটি স্পষ্টভাবে সবার সময় নষ্ট করা।

JQuery এর অন্যান্য উল্লেখযোগ্য ব্যয় হ'ল এটি একটি নতুন jQuery অবজেক্টের ভিতরে সমস্ত কিছু আবৃত করে। এই ওভারহেডটি বিশেষত অপব্যয়যুক্ত যদি আপনাকে আবারও বস্তুটি মোড়কের প্রয়োজন হয় বা মূল উপাদানটিতে ইতিমধ্যে প্রকাশিত বৈশিষ্ট্যগুলি মোকাবেলা করার জন্য অবজেক্টের কোনও পদ্ধতি ব্যবহার করতে হবে।

যেখানে jQuery এর একটি সুবিধা রয়েছে তবে এটি কীভাবে সংগ্রহগুলি পরিচালনা করে। যদি প্রয়োজন হয় একাধিক উপাদানের বৈশিষ্ট্য নির্ধারণ করা, jQuery একটি অন্তর্নির্মিত eachপদ্ধতি আছে যা এর মতো কিছুতে অনুমতি দেয়:

var $elements=$('h2');  //  multiple elements
$elements.html('hello');

ভ্যানিলা জাভাস্ক্রিপ্টের সাথে এটি করার জন্য এর মতো কিছু দরকার হবে:

var elements=document.querySelectorAll('h2');
elements.forEach(function(e) {
    e.innerHTML='Hello';
});

যা কিছু আশঙ্কাজনক বলে মনে হয়।

jQuery নির্বাচনকারীরাও কিছুটা আলাদা, তবে আধুনিক ব্রাউজারগুলি (আই 8 বাদে) খুব বেশি সুবিধা পাবে না।

একটি নিয়ম হিসাবে, আমি নতুন প্রকল্পগুলির জন্য jQuery ব্যবহার করা থেকে সতর্কতা অবলম্বন করছি :

  • jQuery একটি বাহ্যিক গ্রন্থাগার যা প্রকল্পের ওভারহেড এবং তৃতীয় পক্ষের উপর আপনার নির্ভরতার সাথে যুক্ত করে।
  • jQuery ফাংশনটি অত্যন্ত ব্যয়বহুল, প্রক্রিয়াকরণ-ভিত্তিক।
  • jQuery একটি পদ্ধতি প্রয়োগ করে যা শিখতে হবে এবং আপনার কোডের অন্যান্য দিকগুলির সাথে প্রতিযোগিতা করতে পারে।
  • jQuery জাভাস্ক্রিপ্টে নতুন বৈশিষ্ট্য প্রকাশ করতে ধীর।

যদি উপরেরগুলির কোনও বিষয় না থাকে তবে আপনি যা চান তা করুন। যাইহোক, jQuery এখন আর ক্রস-প্ল্যাটফর্মের বিকাশের জন্য ততটা গুরুত্বপূর্ণ নয়, যেমন আধুনিক জাভাস্ক্রিপ্ট এবং সিএসএস আগের চেয়ে অনেক বেশি এগিয়ে যায়।

এটি jQuery এর অন্যান্য বৈশিষ্ট্যগুলির কোনও উল্লেখ করে না। যাইহোক, আমি মনে করি যে তাদেরও খুব কাছ থেকে নজর দেওয়া দরকার।

— Manngo
সূত্র
1
আপনার সিনট্যাক্সটি "জাভাস্ক্রিপ্টে নতুন বৈশিষ্ট্যগুলি উদ্ঘাটন করতে ধীর" মত অন্য ভুল সামগ্রীর উল্লেখ না করাও সঠিক নয় জ্যাকুয়েরির কাজটি নতুন বৈশিষ্ট্যগুলি প্রকাশ করাও নয়, এটি আপনার পক্ষে ডিওএমের কৌশলে সহজ করা এবং যে সাধারণ জিনিস হতে পারে তা করা সহজ করে তোলে জাভাস্ক্রিপ্টে 10 টি লাইনের মতো। আপনার সম্পূর্ণ মন্তব্যটি কোনও অর্থ দেয় না এবং এতে অনেকগুলি ভুল জিনিস রয়েছে। এটি উন্নতি বিবেচনা করুন।
— ছেলে
@ বুপ্রো আপনার মন্তব্যের জন্য ধন্যবাদ, তবে এটিও ত্রুটি দ্বারা পরিপূর্ণ। সম্ভবত আপনি আমার উত্তর সম্পর্কে যা ভাগ করে নিতে চান যা আপনাকে এতটা আপত্তিজনক করে তোলে। যা "এমনকি সঠিক নয়"। আরও ভাল, আপনি নিজের অ্যাংসার অবদান রাখতে পছন্দ করতে পারেন। প্রশ্নটি যখন ভিনিলা জাভাস্ক্রিপ্ট এত কিছু করতে পারে তখন jQuery ব্যবহারের ব্যয় সম্পর্কে। এর উত্তর বিবেচনা করুন।
— মাঙ্গো
0 
"(" # আইডি ") বনাম ডকুমেন্ট.কোয়ারী নির্বাচনকারী সমস্ত (" # আইডি ")

চুক্তিটি $ () ফাংশনটির সাথে এটি একটি অ্যারে তৈরি করে এবং পরে এটি আপনার জন্য বিচ্ছিন্ন করে দেয় তবে ডকুমেন্ট.কোয়ারিসিলিটরঅল () দিয়ে এটি একটি অ্যারে তৈরি করে এবং আপনাকে এটি ভেঙে ফেলতে হবে।

0

এ সম্পর্কে কেবল একটি মন্তব্য, উপাদান ডিজাইন লাইট ব্যবহার করার সময়, jquery নির্বাচনকারী কোনও কারণে উপাদান ডিজাইনের জন্য সম্পত্তিটি ফিরিয়ে দেয় না।

এর জন্য:

<div class="logonfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="myinputfield" required>
        <label class="mdl-textfield__label" for="myinputfield">Enter something..</label>
      </div>

এইটা কাজ করে:

document.querySelector('#myinputfield').parentNode.MaterialTextfield.change();

এটি করে না:

$('#myinputfield').parentNode.MaterialTextfield.change();
— আশ্বিন ভট্টু
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.