[বন্ধ] এড়াতে jQuery সমস্যা

Question

আমি jQuery দিয়ে একটি প্রকল্প শুরু করছি।

আপনার jQuery প্রকল্পে আপনার কোন ক্ষতি / ত্রুটি / ভুল ধারণা / আপত্তি / অপব্যবহার করেছেন?

Comments

এটি "গঠনমূলক নয়" বলে বন্ধ করা উচিত হয়নি । কিছু খুব সহায়ক উত্তর বাস্তবায়িত হয়েছে এবং প্রশ্নটি এখন 220 বার তারাঙ্কিত হয়েছে। আপনার যদি পর্যাপ্ত কর্মফল থাকে তবে দয়া করে পুনরায় খুলতে ভোট দিন।

— রায় প্রিনস

আমার কাছে মনে হচ্ছে, jQuery নিজের মধ্যে একটি সমস্যা

— gromit190

Answer 1

পারফরম্যান্সের বিষয়ে অজানা এবং নির্বাচকদের স্থানীয় ভেরিয়েবলগুলিতে বরাদ্দ না দিয়ে অতিরিক্ত ব্যবহার করা। উদাহরণ স্বরূপ:-

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

বরং:-

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

বা শিকল দিয়ে আরও ভাল : -

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

আমি দেখেছি এই কলটি স্ট্যাকগুলি কীভাবে কাজ করে তা বুঝতে পেরে আমি আলোকময় মুহূর্তটি ।

সম্পাদনা করুন: মন্তব্যে অন্তর্ভুক্ত পরামর্শ।

Comments

ইউটিউব লিঙ্কের জন্য +1। পবিত্র বোকা আমি অনেক কিছু শিখেছি।

— জেসন

আমি মনে করি স্থানীয় ভেরিয়েবলগুলিতে জিনিসগুলি নির্ধারণ করা দুর্দান্ত তবে শৃঙ্খলার শক্তি সম্পর্কে ভুলে যাবেন না (আপনার উদাহরণ থেকে): $ ("# লেবেল")। পদ্ধতি ()। পদ্ধতি 2 ()। সিএসএস ("ব্যাকগ্রাউন্ড-রঙ", " লাল ");

— ল্যান্স ম্যাকনার্নি

ইউটিউব ভিডিওটি দুর্দান্ত ছিল। আমি এই বিষয়ে অন্যান্য গুগল উপস্থাপনা দেখেছি এবং আমি এখনও কয়েকটি জিনিস শিখেছি! ধন্যবাদ!

— গ্যাব্রিয়েল হারলি

লিঙ্কটির জন্যও +1, দুর্দান্ত!

— জোশ স্টোডোলা

JQuery প্রসঙ্গে ভেরিয়েবলের জন্য ডলার সাইন ব্যবহার করার জন্য এটি এক ধরণের কনভেনশন। সুতরাং আপনি লিখতে চানvar $label = $('#label');

— টিম বাথ

Answer 2

প্রসঙ্গটি কীভাবে ব্যবহার করবেন তা বুঝুন। সাধারণত, একটি jQuery নির্বাচনকারী পুরো দস্তাবেজ অনুসন্ধান করবে:

// This will search whole doc for elements with class myClass
$('.myClass');

তবে আপনি একটি প্রসঙ্গের মধ্যে অনুসন্ধান করে জিনিসগুলিকে গতি বাড়িয়ে দিতে পারেন:

var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);

Comments

Aaaaaaah! ঠিক আছে, এটি আমার বাগের প্রায় 1,000,000 ঠিক করা হয়েছে। +1

— জম্মুস

দেখে মনে হচ্ছে আপনার শেষ পয়েন্টটি ভুল - গ্রুপ. google.co.uk/group/jquery-dev/browse_thread/thread/…

— জেমস

এই জেপি নির্দেশ করার জন্য ধন্যবাদ। এখন, কী করব ... আমি কি আমার উত্তরটি মুছে ফেলা উচিত যাতে অন্য কেউ হাগ বন্য না হয় এবং কিছুতেই তাদের কোড পরিবর্তন করে না?

— সোলাইফ

নাহ, এটি এখনও একটি ভাল পয়েন্ট, অপ্টিমাইজেশন-ভিত্তিক। :)

— জেমস

প্রসঙ্গ jQuery এর ইনস্টাস্টেজ কিনা jQuery তা পরীক্ষা করে দেখায় এর কোনও কারণ নেই [0]। $('.myClass', ct);অথবা আপনি যদি জানেন যে সিটি jQuery এর উদাহরণ হিসাবে আপনি সন্ধান করতে পারেনct.find(".myClass")

— গ্রেডবট

Answer 3

খালি শ্রেণি নির্বাচকদের ব্যবহার করবেন না:

$('.button').click(function() { /* do something */ });

এটিতে প্রতিটি একক উপাদানের দিকে তাকানো শেষ হবে এটিতে "বোতাম" এর শ্রেণি রয়েছে কিনা তা দেখার জন্য।

পরিবর্তে, আপনি এটি সাহায্য করতে পারেন, যেমন:

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

আমি রেবেকা মারফি ব্লগ থেকে এই গত বছর শিখেছি

আপডেট - এই উত্তরটি 2 বছর আগে দেওয়া হয়েছিল এবং jQuery এর বর্তমান সংস্করণের জন্য সঠিক নয় । মন্তব্যগুলির মধ্যে একটিতে এটি প্রমাণ করার জন্য একটি পরীক্ষা অন্তর্ভুক্ত। পরীক্ষার একটি আপডেট সংস্করণও রয়েছে যা এই উত্তরের সময় jQuery এর সংস্করণ অন্তর্ভুক্ত করে।

Comments

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

— অ্যালেক্স ব্যারেট

আপনি যে পরিমাণ কাজ করতে চান তা হ্রাস করছেন। এটি আপনার ঘরের মোজা বের করার জন্য বলার পরিবর্তে কাউকে আপনার ড্রেসারের ড্রয়ার থেকে মোজা বের করার কথা বলার মতো। এটি দেখতে যথেষ্ট পরিমাণে 'দেখার' পরিমাণ হ্রাস করে।

— 509

বিপরীতটি সত্য যখন আপনি সিএসএস লিখছেন (অন্তত উপাদান ট্যাগ সহ)। কোড. google.com/speed/page-speed/docs/…

— kmiyashiro

@ স্নিগ্ধতা সবকিছুরই বাস্তব জীবনের সঠিক এনালগ থাকে না। উদাহরণস্বরূপ, ব্রাউজারটি এটি সমর্থন করে যদি $('.b')ব্যবহার করতে পারে document.getElementsByClassName('b')তবে $('a.b')এটি করার ফলে এটি শ্রেণীর সাথে সমস্ত মিলের উপাদান খুঁজে পেতে পারে bএবং তারপরে তারা নিশ্চিত করতে পারে যে তারা দুটি পর্যায়ে অপারেশনে অ্যাঙ্কর রয়েছে are পরেরটি আমার কাছে আরও কাজ বলে মনে হচ্ছে। বাস্তব জীবনের উপমা জন্য, এটি ব্যবহার করে দেখুন: আমার ঘরে সমস্ত মোজা খুঁজে নিন। এখন, আমার ড্রয়ারে নেই এমনগুলি ফেলে দিন।

— অ্যালেক্স

আমি বিশ্বাস করি নির্বাচকদের সম্পর্কে ভুল ধারণাটি জ্যাকুয়ের পুরানো সংস্করণগুলিতে, $ ('# # foo') না দিয়ে do ('# foo') করা দ্রুত ছিল, কারণ সংজ্ঞা অনুসারে একটি আইডি অনন্য। আমি নিশ্চিত যে এটি পরবর্তী প্রকাশগুলিতে অবশ্য ঠিক করা হয়েছিল, তবে সেই সুপারিশটি কেবল আইডির ক্ষেত্রেই প্রযোজ্য, অন্য ধরণের নির্বাচকদের নয়

— অ্যালেক্স হেড

Answer 4

বেনামে ফাংশনগুলি বিভক্ত করার চেষ্টা করুন যাতে আপনি সেগুলি পুনরায় ব্যবহার করতে পারেন।

//Avoid
$('#div').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

$('#div').click( divClickFn );

Comments

আমি মনে করি এটি প্রায় একই ডিগ্রির ক্ষেত্রে প্রযোজ্য যা সিঙ্ক্রোনাস (ইনলাইন) কোডটি নামযুক্ত ফাংশনে বিভক্ত করা উচিত। যদি আপনার কাছে এমন কিছু সংখ্যক কোড পাওয়া যায় যা একটি নাম দেওয়ার জন্য ভিক্ষা করে, তবে এটির জন্য যান। তবে কোডটিকে লাইনের বাইরে সরিয়ে দেবেন না কারণ আপনি এটিকে কোনও ফাংশনের অভ্যন্তরে আবদ্ধ করছেন; বেনাম ফাংশন ভাল কারণে বিদ্যমান।

— ড্যান ব্রেস্লাউ

আসলে আমি আমার ফাংশনে 'নাম' দিতে চাই। আপনি কোডটি ডিবাগ করার সময় এবং বেনামে ফাংশনগুলির একটি অন্তহীন তালিকা দেখার পরিবর্তে, আপনি সঠিকভাবে নামযুক্ত ফাংশনগুলি দেখেন এটি খুব কার্যকর।

— সমাধান

আপনার বক্তব্য ভালভাবে নেওয়া হয়েছে, এবং আমি সম্ভবত কয়েকবার এই দ্বারা নিজেকে ছড়িয়েছি। তবুও, " প্রায় একই ডিগ্রি" এখনও আমার পক্ষে কাজ করে।

— ড্যান ব্রেস্লাউ

ESP। বাঁধাই যদি কোনও লুপে ঘটে থাকে!

— ড্যানিয়েলম্ব

ডিবাগ করার সময় নামযুক্ত ফাংশনগুলিও আপনাকে প্রচুর উপকারে আসে; কলস্ট্যাকের চেয়ে 8 স্তরের গভীরতা ছাড়া আর কিছুই চোখে পড়ে না যার কাছে কিছুই নেই (anonymous)। এই টিপটি সম্পর্কে এখানে আরও পড়ুন: stackoverflow.com/questions/182630/jquery-tips-and-tricks/…

— কেন

Answer 5

• আপত্তিজনক নথি প্রস্তুত এড়ান।
• কেবলমাত্র কোডটি আরম্ভ করার জন্য দস্তাবেজটি প্রস্তুত রাখুন।
• সর্বদা ডকের বাইরে ফাংশন প্রস্তুত করুন যাতে সেগুলি পুনরায় ব্যবহার করতে পারে।

আমি ডক রেডি স্টেটমেন্টের ভিতরে কয়েকশ লাইনের কোড দেখেছি। কুরুচিপূর্ণ, অপঠনযোগ্য এবং বজায় রাখা অসম্ভব।

Comments

+1 টি। সাধারণভাবে, আমি দেখেছি বেশিরভাগ jQuery কোড কয়েকশ লাইনের সাথে ফাংশন ব্যবহার করে। আমি জানি না কেন 'jQuery বিকাশকারীরা' ছোট ফাংশন ব্যবহার করতে পছন্দ করেন না।

— সমাধান

@ সলিউশন যোগী কারণ বেশিরভাগই কেবল জেএস নূব?

— adamJLev

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

— সেজে 88

Answer 6

ব্যবহার করার সময় $.ajaxজন্য ফাংশন আয়াক্স সার্ভারে অনুরোধের, আপনি ব্যবহার এড়িয়ে চলা উচিত completeপ্রক্রিয়া প্রতিক্রিয়া ডেটাতে ইভেন্ট। অনুরোধটি সফল হয়েছিল কি না তা আগুন দিয়ে দেবে।

পরিবর্তে complete, ব্যবহার success।

ডক্সে অ্যাজাক্স ইভেন্টগুলি দেখুন ।

Comments

আমি সাফল্যের বনাম সম্পূর্ণ পিছনে পিছনে এসেছি, আপনি কেন আরও ভাল মনে করেন যে এর উপর প্রসারিত করতে পারেন?

— নিল এন

আমি বলছি না সম্পূর্ণ ভাল হয়। আমি যা বলতে চাইছিলাম তা হ'ল আপনার সম্পূর্ণ বিভ্রান্তিমূলক ব্যবহার এড়ানো উচিত এবং প্রতিক্রিয়া ডেটা প্রক্রিয়া করতে সক্ষম হওয়ার জন্য সাফল্যটি ব্যবহার করা উচিত।

— আর্টেম বার্জার

ভাল এটি সবসময় বলা হয়। তবে আমি একমত হবে না। সম্পূর্ণ লোডিং জিআইএফ গোপনের জন্য সর্বোত্তম। আপনার সাড়া এবং অবশ্যই কোনও ত্রুটির জন্য ত্রুটিটি পরিচালনা করার জন্য সাফল্যটি ব্যবহার করা উচিত।

— redsquare

তিনি সাফল্যের পরিবর্তে ব্যবহারের পরামর্শ দিচ্ছেন। এজাক্স অনুরোধটি 'সম্পূর্ণ' হয়ে গেলে 'সম্পূর্ণ' সর্বদা আগুন জ্বলে ওঠে, এটি সফলভাবে বা ব্যর্থতার সাথে সম্পন্ন হওয়া গুরুত্বপূর্ণ নয়।

— সমাধান

@ রেডস্কয়ার, আপনি যেটির সাথে একমত নন ঠিক সেটির উপর আপনি কি প্রসারিত করতে পারবেন? আমি ডেটা প্রক্রিয়াটির উল্লেখ করছি এবং কোনও ছবি গোপন / দেখানোর সুযোগ নেই যা পুরো হ্যান্ডলারের সাথে আপনার রয়েছে

— আর্টেম বার্জার

Answer 7

কলব্যাক সহ অ্যানিমেশন-ইভেন্টগুলি "চেইনিং"।

মনে করুন আপনি কোনও অনুচ্ছেদে ক্লিক করার পরে এটি অদৃশ্য হয়ে যেতে চেয়েছিলেন। আপনি পরে ডিওএম থেকে উপাদানটি সরিয়ে ফেলতে চেয়েছিলেন। আপনি সম্ভবত পদ্ধতিগুলি শৃঙ্খল করতে পারেন বলে মনে করতে পারেন:

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

এই উদাহরণে, .remove () এর আগে ডাকা হবে .fadeOut () সম্পূর্ণ হয়ে গেলে, আপনার ধীরে ধীরে বিবর্ণ প্রভাবটি ধ্বংস করে এবং উপাদানটি তাত্ক্ষণিকভাবে অদৃশ্য হয়ে যায়। পরিবর্তে, যখন আপনি কেবল পূর্ববর্তীটি শেষ করেই কোনও আদেশ সরিয়ে দিতে চান, কলব্যাকটি ব্যবহার করুন:

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

.FadeOut () এর দ্বিতীয় প্যারামিটারটি একটি বেনামী ফাংশন যা .fadeOut () অ্যানিমেশনটি শেষ হয়ে গেলে একবার চলবে। এটি ধীরে ধীরে বিবর্ণ হয়ে যায় এবং পরবর্তী উপাদানটিকে অপসারণ করে।

Answer 8

যদি আপনি একই ইভেন্টটিকে একাধিকবার বেঁধে রাখেন তবে এটি একাধিকবার জ্বলতে থাকবে। আমি সাধারণত সবসময় unbind('click').bind('click')কেবল নিরাপদ থাকতে যাই

Comments

এটি jQuery এর জন্য সুনির্দিষ্ট নয়, তবে মনে রাখা গুরুত্বপূর্ণ বিষয় thing

— সমাধান

একই ইভেন্টটিকে দু'বার আবদ্ধ করতে না করতে আপনি লাইভ ইভেন্টগুলি ব্যবহার করতে পারেন।

— পাওয়ারলর্ড

লাইভের নিজস্ব (পারফরম্যান্স) সমস্যা রয়েছে যদি অতিরিক্ত ব্যবহার করা হয়। 1.3.3 এ ভাল যেখানে আপনি প্রসঙ্গটি দিতে পারেন।

— redsquare

Answer 9

প্লাগ-ইনগুলি ব্যবহার করবেন না।

বেশিরভাগ সময় আপনার কেবল গ্রন্থাগার এবং সম্ভবত ইউজার ইন্টারফেসের প্রয়োজন হয়। আপনি যদি এটি সহজ রাখেন তবে আপনার কোড দীর্ঘমেয়াদে রক্ষণাবেক্ষণযোগ্য হবে। সমস্ত প্লাগইন সমর্থিত এবং রক্ষণাবেক্ষণ করা হয় না, আসলে বেশিরভাগটি তা নয়। যদি আপনি মূল উপাদানগুলি ব্যবহার করে কার্যকারিতা নকল করতে পারেন তবে আমি দৃ strongly়তার সাথে এটির প্রস্তাব দিচ্ছি।

আপনার কোডগুলিতে প্লাগ-ইনগুলি সন্নিবেশ করা সহজ, আপনার কিছুটা সময় সাশ্রয় হয় তবে যখন আপনার অতিরিক্ত কিছু প্রয়োজন হবে তখন আপনি সম্ভাব্য আপডেটগুলি হারাতে সেগুলি সংশোধন করা খারাপ ধারণা। আপনি যখন শুরুতে সময় সাশ্রয় করবেন আপনি অবহিত প্লাগইনগুলি পরে পরিবর্তন করবেন।

আপনি যে প্লাগইনগুলি বুদ্ধিমানের সাথে ব্যবহার করেন তা চয়ন করুন। লাইব্রেরি এবং ব্যবহারকারীর ইন্টারফেস ছাড়াও, আমি ক্রমাগত $। কুকি , $ .for , $। বৈধকরণ এবং ঘনবক্স ব্যবহার করি । বিশ্রামের জন্য আমি বেশিরভাগ নিজের প্লাগইনগুলি বিকাশ করি।

Comments

গ্রিডের কী হবে? আপনি নিজের তৈরি?

— jmav

হ্যাঁ. প্রকল্প থেকে প্রকল্পের ডেটাতে বিভিন্ন উপায়ে আসে। আমি পুরো নিয়ন্ত্রণ রাখতে পছন্দ করি যে গ্রিডটি বুঝতে পেরে আমাকে কেবল মাঝের দিকে সাহায্য করে এবং তারপরে আমাকে উন্নতি করতে হবে।

— এলজো ভালুগি

যদি যথেষ্ট সময় দেওয়া হয় তবে সাধারণত আমি সমস্ত ডেটা চালিত-ডম-ম্যানিপুলেশন (সিএসএস / এইচটিএমএল) কোডটি সরাসরি লিখতে পছন্দ করি। অন্য কথায় - ডেটা কোনও 'প্লাগইন'-এ পাস করবেন না এবং এটির এইচটিএমএল বানান হবে না। বর্তমান সুযোগের সামঞ্জস্যের জন্য প্লাগইনগুলি (মিডফিল্ড) মূল্যায়নের পক্ষে এটি যথেষ্ট শক্ত, ভবিষ্যতের দাবিগুলি ভুলে যান। চিন্তা করুন ... ডিজাইনার, পরিকল্পনাকারী, পরিচালক, পরিচালক, পরিচালকগণ। ওহ এবং ক্লায়েন্ট এবং ব্যবহারকারীগণ। তবে আপনার যদি এই সমস্ত জিনিস থাকে তবে আপনার কাছে 'সময়' বলার মতো পরিমাণ নেই। সুতরাং আপনি ইতিমধ্যে jqgrid ব্যবহার করুন - আপনি ইচ্ছাকৃত সময় নষ্ট করছেন। এটি এখনও শেষ হয়েছে?}

— ব্যবহারকারী 406905

Answer 10

পিটফল: নির্বাচকদের পরিবর্তে লুপ ব্যবহার করা।

আপনি যদি নিজেকে ডিওএম উপাদানগুলির পুনরাবৃত্তি করতে jQuery '.each' পদ্ধতির কাছে পৌঁছেছেন তবে নিজেকে জিজ্ঞাসা করুন যে পরিবর্তে উপাদানগুলি পেতে কোনও নির্বাচক ব্যবহার করতে পারেন কিনা।

JQuery নির্বাচনকারীদের উপর আরও তথ্য:
http://docs.jquery.com/Selectors

পিটফল: ফায়ারব্যাগের মতো কোনও সরঞ্জাম ব্যবহার করছে না

ফায়ারব্যাগ ব্যবহারিকভাবে এই জাতীয় ডিবাগিংয়ের জন্য তৈরি করা হয়েছিল। আপনি যদি জাভাস্ক্রিপ্টের সাথে ডিওএম নিয়ে ঘুরঘুর করতে চলেছেন তবে আপনাকে দৃশ্যমানতা দেওয়ার জন্য ফায়ারবগের মতো একটি ভাল সরঞ্জামের প্রয়োজন।

ফায়ারব্যাগ সম্পর্কিত আরও তথ্য: http://getfirebug.com/

অন্যান্য দুর্দান্ত ধারণাগুলি পলিমারফিক পডকাস্টের এই পর্বে রয়েছে: (ডেভ ওয়ার্ডের সাথে jQuery সিক্রেটস) http://polymorphicpodcast.com/shows/jquery/

Comments

আমি প্রথমটি অনেকবার করেছি। আপনাকে কেবল মনে রাখতে হবে যে বেশিরভাগ jQuery ফাংশনগুলি নির্বাচক থেকে ফিরে আসা সমস্ত উপাদানগুলিতে কাজ করবে।

— অসন্তুষ্ট গোয়াট

সৎ হওয়ার জন্য .each পদ্ধতিটি অপছন্দ করুন

— সাইমন হাইটার

Answer 11

সঠিক প্রসঙ্গে এই সনাক্তকারীকে ব্যবহার করার ভুল ধারণা unders এই ক্ষেত্রে:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   $(".listOfElements").each( function()
   {
      $(this).someMethod( ); // here 'this' is not referring first_element anymore.
   })
});

এবং কীভাবে আপনি এটি সমাধান করতে পারেন তার একটি নমুনা এখানে:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   var $that = this;
   $(".listOfElements").each( function()
   {
      $that.someMethod( ); // here 'that' is referring to first_element still.
   })
});

Comments

+1 jquery সমস্যার চেয়ে জাভাস্ক্রিপ্ট সমস্যা আরও বেশি, তবে আমি এটির দ্বারা অনেকটাই ফাঁদে ফেলি।

— ম্যামকাওল

Answer 12

পুরো ডোমটি বেশ কয়েকবার অনুসন্ধান করা এড়িয়ে চলুন। এটি এমন কিছু যা সত্যই আপনার স্ক্রিপ্টে বিলম্ব করতে পারে।

খারাপ:

$(".aclass").this();
$(".aclass").that();
...

ভাল:

$(".aclass").this().that();

খারাপ:

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

ভাল:

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

Comments

$ ( "। aclass") এই () যে ()।। ভালো না! ক্লাসের কেবল নির্বাচকরা ধীরে ধীরে

— 21-24 এ

এটি একটি উদাহরণে উদাহরণস্বরূপ যাচাইয়ের একটি নির্বাচনের বিভিন্ন পদ্ধতি ব্যবহার করার ক্ষমতা দেখায়। আমি এই কৌশলটিতে আরও ফোকাস দেওয়ার জন্য নির্বাচনকে সহজ (এবং ধীরে ধীরে) তৈরি করেছি।

— googletorp

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

— কুইন্টিন

Answer 13

সর্বদা ক্যাচ করুন this (এটি) একটি অর্থপূর্ণ পরিবর্তনশীল বিশেষত একটি .each () এ

এটার মত

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

Comments

আপনি ব্যবহার করতে পারেন $selfবা $thisযদি আপনি খুব ভাল ভেরিয়েবল নামের কথা চিন্তা করতে খুব অলস হন।

— গ্রেডবোট

Answer 14

রেপো ম্যান যা বলেছিলেন তার অনুরূপ, তবে বেশ নয়।

এএসপি.এনইটি উইনফর্মগুলি বিকাশ করার সময় আমি প্রায়শই করি

$('<%= Label1.ClientID %>');

# চিহ্নটি ভুলে যাচ্ছি। সঠিক ফর্মটি হ'ল

$('#<%= Label1.ClientID %>');

Answer 15

ঘটনাবলী

$("selector").html($("another-selector").html());

ইভেন্টগুলির কোনও ক্লোন করে না - আপনাকে সেগুলি সমস্ত রিইন্ড করতে হবে।

জেপির কমেন্ট অনুসারে টি - ক্লোন () আপনি যদি সত্যটি পাস করেন তবে ইভেন্টগুলি পুনরায় প্রত্যাবর্তন করবে।

Comments

আপনি সত্যটি পাস করলে ক্লোন () করে।

— জেমস

JQuery 1.3.2 এ লাইভ () সম্পর্কে কী?

— jmav

Answer 16

একই jQuery অবজেক্টের একাধিক সৃষ্টি এড়িয়ে চলুন

//Avoid
function someFunc(){
   $(this).fadeIn();
   $(this).fadeIn();
}

//Cache the obj
function someFunc(){
   var $this = $(this).fadeIn();
   $this.fadeIn();
}

Comments

var $ this = $ (এটি) .ফ্যাডইন () ;? আপনি একটি প্রভাব ক্যাচিং করছি?

— জেসন

এটি উপাদানটি ফেরত দেয়, একে বলা হয় শিকল!

— redsquare

আপনি একটি পরিবর্তনশীল সেট করতে এবং একই সাথে এটিতে কোনও ক্রিয়া সম্পাদন করতে পারেন?

— জেসন

আসলে, তবে এর জন্য আমার কথাটি গ্রহণ করবেন না। চেষ্টা করে দেখুন উপাদানটির প্রতিনিধিত্ব করা জ্যাকারি আইটেমটি ফেরত না দেওয়া হলে আপনি কীভাবে নিম্নলিখিতটি সম্ভব বলে মনে করেন? '(' # ডিভাইড ')। লুকান ()। প্রদর্শন ()। fadeIn () .... ইত্যাদি

— redsquare

এটি কাজ করে, তবে আমি মনে করি এটি $this = $(this);পৃথক লাইনে থাকা আরও পাঠযোগ্য । যদি আপনি (কোনও $this$(this).fadeIn().fadeIn();

— গোলযোগ

Answer 17

আমি এটি জাভাস্ক্রিপ্টের জন্যও বলছি, তবে jQuery, জাভাস্ক্রিপ্টের সিএসএস প্রতিস্থাপন করা উচিত নয়।

এছাড়াও, নিশ্চিত হয়ে নিন যে জাভাস্ক্রিপ্ট বন্ধ থাকা কারও জন্য সাইটটি ব্যবহারযোগ্য is (আজ আগের দিনের মতো প্রাসঙ্গিক নয়, তবে পুরোপুরি ব্যবহারের যোগ্য সাইটটি পাওয়া সর্বদা চমৎকার)।

Answer 18

অনেকগুলি ডিওএম হেরফের তৈরি করা যদিও .html (), .append (), .প্রেপেন্ড () ইত্যাদি পদ্ধতি দুর্দান্ত, ব্রাউজাররা যেভাবে পৃষ্ঠা রেকর্ড করে এবং পুনরায় রেন্ডার করে, সেগুলি প্রায়শই ব্যবহার করা ধীরগতির কারণ হতে পারে। স্ট্রিং হিসাবে এইচটিএমএল তৈরি করা এবং একাধিকবার ডম পরিবর্তনের পরিবর্তে একবার এটি ডিওএমে অন্তর্ভুক্ত করা ভাল।

পরিবর্তে:

var $parent = $('#parent');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $parent.append($div);
}

এটা চেষ্টা কর:

var $parent = $('#parent');
var iterations = 10;
var html = '';

for (var i = 0; i < iterations; i++){
    html += '<div class="foo-' + i + '"></div>';
}

$parent.append(html);

অথবা এটিও (pper র‌্যাপার একটি নতুন তৈরি উপাদান যা এখনও ডিওমে ইনজেকশন করা হয়নি this ):

var $parent = $('#parent');
var $wrapper = $('<div class="wrapper" />');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $wrapper.append($div);
}

$parent.append($wrapper);

Comments

+1 ... আমি প্রতি সেকেন্ডে একাধিক উপাদানগুলিতে .html () ব্যবহার করছি। লক্ষ্য করা যায় এটি সবকিছু ধীর করতে শুরু করে!

— ব্যবহারকারী 2

Answer 19

এএসপি.এনইটি প্রকল্পে নিয়ন্ত্রণের "আসল" আইডি পেতে ক্লায়েন্টআইডি ব্যবহার করা।

jQuery('#<%=myLabel.ClientID%>');

এছাড়াও, আপনি যদি শেয়ার পয়েন্টের ভিতরে jQuery ব্যবহার করছেন তবে আপনাকে অবশ্যই jQuery.noConflict () কল করতে হবে।

Comments

? এ কেমন অবস্থা? এটি এএসপি.এনইটি আচরণের জন্য কার্যকর নয়।

— সমাধান

হ্যাঁ। এটি কোনও jQuery ইস্যু নয়। এটি এসপ নেটওয়ার্ডফর্মগুলির একটি দোষ।

— redsquare

একমত। তবে এএসপি.এনইটিতে jQuery ব্যবহার করার সময় আপনার সচেতন হওয়া দরকার।

— জ্যাকবস ডেটা সলিউশন

ওপিতে এএসপিএনটির কথা উল্লেখ করেনি

— redsquare

Answer 20

ফাংশনে jQuery অবজেক্টের পরিবর্তে আইডি পাস করা:

myFunc = function(id) { // wrong!
    var selector = $("#" + id);
    selector.doStuff();
}

myFunc("someId");

মোড়ানো সেট পাস করা আরও নমনীয়:

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

Answer 21

শৃঙ্খলার অতিরিক্ত ব্যবহার।

এটা দেখ:

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);

ব্যাখ্যা

Comments

এটি মজাদার মনে হচ্ছে, এটি একধরণের আবদ্ধতা।

— ডাইকাম

চেইনিং (এটি নিজেই) 'অতিরিক্ত' ব্যবহার করা কঠিন। দেখে মনে হচ্ছে যে কোডটি জাভাস্ক্রিপ্ট টেরিনারি অপারেটরের অতিরিক্ত ব্যবহার করে। আরও তথ্যের জন্য en.wikedia.org/wiki/Ternary_operation# জাভা স্ক্রিপ্ট দেখুন ।

— ড্যান এস্পারজা

আমি আনন্দিত যে আপনার কোডটি বজায় রাখতে হবে না।

— সিডিএমকেই

Answer 22

স্ট্রিং সংগ্রহকারী-শৈলী ব্যবহার করুন

অপারেটর ব্যবহার করে মেমরিতে একটি নতুন স্ট্রিং তৈরি হয় এবং এর সাথে সংমিশ্রিত মান নির্ধারিত হয়। এর পরে কেবল ফলাফলটি একটি চলককে বরাদ্দ করা হয়। সংক্ষিপ্ত ফলাফলের জন্য মধ্যবর্তী পরিবর্তনশীল এড়াতে, আপনি সরাসরি + = অপারেটর ব্যবহার করে ফলাফলটি বরাদ্দ করতে পারেন। মন্থর:

a += 'x' + 'y';

দ্রুত:

a += 'x';
a += 'y';

আদিম ক্রিয়াকলাপগুলি ফাংশন কলগুলির চেয়ে দ্রুততর হতে পারে

কর্মক্ষমতা সমালোচনামূলক লুপ এবং ফাংশনগুলিতে ফাংশন কলগুলির মাধ্যমে বিকল্প আদিম অপারেশনটি বিবেচনা করুন Consider মন্থর:

var min = Math.min(a, b);
arr.push(val);

দ্রুত:

var min = a < b ? a : b;
arr[arr.length] = val;

জাভাস্ক্রিপ্ট পারফরম্যান্স সেরা অভ্যাসগুলিতে আরও পড়ুন

Answer 23

আপনি যদি ব্যবহারকারীদের তাদের ব্রাউজারে এইচটিএমএল সত্তা দেখতে চান তবে ইউনিকোড স্ট্রিং ইনজেক্ট করতে 'পাঠ্য' পরিবর্তে 'এইচটিএমএল' ব্যবহার করুন, যেমন:

$('p').html("Your Unicode string")

Answer 24

আমার দুই সেন্ট)

সাধারণত, জ্যাকোয়ারি নিয়ে কাজ করার অর্থ আপনাকে সার্বক্ষণিক ডওম উপাদানগুলির বিষয়ে চিন্তা করতে হবে না। আপনি এর মতো কিছু লিখতে পারেন - $('div.mine').addClass('someClass').bind('click', function(){alert('lalala')})- এবং এই কোডটি কোনও ত্রুটি না ছড়িয়ে কার্যকর করা হবে।

কিছু ক্ষেত্রে এটি দরকারী, কিছু ক্ষেত্রে - মোটেও নয়, তবে এটি একটি সত্য যে জ্যাকোয়ারিটি ভাল, খালি-ম্যাচ-বান্ধব হতে থাকে। এখনো,replaceWith কেউ যদি কোনও উপাদানটিকে নথির সাথে সম্পর্কিত না করে এটির সাথে ব্যবহার করার চেষ্টা করে তবে একটি ত্রুটি ফেলবে। আমি এটিকে বরং স্ব-স্বজ্ঞাত বলে মনে করি।

আরেকটি ক্ষতি হ'ল, আমার মতে, নোডের ক্রমটি পূর্বে সমস্ত () পদ্ধতি দ্বারা ফিরে এসেছে - $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll()। আসলে কোনও বড় বিষয় নয়, তবে আমাদের এই সত্যটি মাথায় রাখা উচিত।

Answer 25

যদি আপনি অজ্যাক্সে প্রচুর ডেটাতে পরিকল্পনা করেন, যেমন ধরুন, 20 টি কলাম সহ একটি টেবিলের 1500 সারি, তবে আপনার এইচটিএমএলতে ডেটা jোকাতে jQuery ব্যবহার করার কথা ভাবেন না। সরল জাভাস্ক্রিপ্ট ব্যবহার করুন। jQuery ধীর মেশিনে খুব ধীর হবে।

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

Comments

-1 .html () ফাংশনটি দেশীয় পদ্ধতির চেয়ে তত দ্রুত

— cllpse

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

— areোকাচ্ছেন

যতক্ষণ আপনার ব্রাউজার ফাঁস এবং এগুলি সম্পর্কে চিন্তা করার দরকার নেই ততক্ষণ আপনি তা .innerHTMLকরবেন। তবে আপনি যদি Gmail এর মতো এমন কিছু তৈরি করেন যেখানে ব্যবহারকারী কয়েক ঘন্টার জন্য এই ট্যাবটি খোলা রাখে, আপনাকে কেবল বুলেটটি কামড়তে হবে এবং অতিরিক্ত আস্তে সামলাতে হবে। কৌতূহলের জন্য, এখানে jQuery এর ঠিক কী করছে .html(): james.padolsey.com/jquery/#v=1.4&fn=jQuery.fn.html

— adamJLev

Answer 26

একটি ছোট প্রকল্পে jQuery ব্যবহার করে যা সাধারণ জাভাস্ক্রিপ্টের কয়েকটি লাইন দিয়ে সম্পূর্ণ করা যায়।

Comments

মোডেড হয়ে যাওয়ায় আমার আপত্তি নেই, তবে দয়া করে আপনার পছন্দটি নিয়ে যুক্তি দিন।

— vise

-1 jQuery একটি ভাঙা API এস্ট্রাক্ট করে। এই ভাবে আপনি সর্বদা নিশ্চিত যে আপনার কোডটি কাজ করছে। বলুন আপনি jQuery ব্যবহার করে কিছু কোড লিখেছেন এবং কিছু এলোমেলো ব্রাউজার-বাগ একটি নতুন সংস্করণ সহ প্রবর্তিত হয়েছে - আপনাকে যা করতে হবে তা হল jQuery ফ্রেমওয়ার্কের একটি আপডেট সংস্করণ আমদানি করা। ভার্সাম কীভাবে বাগটি সমাধান করবেন তা নির্ধারণ করার জন্য।

— cllpse

+1 আমার কাছে যুক্তিসঙ্গত বলে মনে হচ্ছে - আপনি যদি কয়েকটি লাইন ব্যবহার করেন তবে কেবল ভ্যানিলা জেএস ব্যবহার করতে পারেন make

— অ্যালেক্স

@roosteronacid, আপনার যুক্তিটি বিন্দুটি মিস করে। কোনও ব্রাউজারের পক্ষে কম জটিলতার কোনও স্ক্রিপ্টে একটি রিগ্রেশন প্রবর্তন করা বা সেই বিষয়ে ক্রসব্রোজার সমস্যার সাথে মোকাবিলা করা খুব সম্ভব নয়। দু'বছর আগে আমি মটুলগুলির সাথে কাজ করেছি এবং একটি নির্দিষ্ট পরিস্থিতিতে এটি IE এ উপাদানগুলির সামগ্রী পড়তে অক্ষম। সমস্যাটি সনাক্ত করার জন্য কয়েক ঘন্টা ট্রাই করার পরে আমি কেবল সেই অংশটি সরল js দিয়ে আবার লিখেছি। সুতরাং, ব্রাউজার আপগ্রেডের কারণে প্লেইন জাভাস্ক্রিপ্ট ব্যর্থ হওয়ার পরিবর্তে jQuery ভাঙার সম্ভাবনা বেশি। আমি কোনও গ্রন্থাগার কোডের মাধ্যমে হ্যাক না করে যে কোনও দিন আমার বাগটি সমাধান করব।

— vise

couple of lines of ordinary JavaScriptঅবশ্যই, কোনো সমস্যা নেই. তবে কখন কখন তা ঠিক হয়? যে লোকেরা "ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করবেন না কেন ??" আইই এখনও যথেষ্ট শক্তভাবে কামড়ায় নি ... এবং সাধারণ পুরানো জেএসে সাধারণ জিনিসগুলি করতে আপনাকে কতটা ক্রাফ্ট এবং বয়লারপ্লেট কোড লিখতে হবে তা উল্লেখ না করে।

— adamJLev

Answer 27

ইভেন্টের বাইন্ডিং বোঝা যাচ্ছে না। জাভাস্ক্রিপ্ট এবং jQuery আলাদাভাবে কাজ করে।

জনপ্রিয় চাহিদা অনুসারে, একটি উদাহরণ:

JQuery এ:

$("#someLink").click(function(){//do something});

JQuery ছাড়া:

<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
    //do something
}
</script>

মূলত জাভাস্ক্রিপ্টের জন্য প্রয়োজনীয় হুকগুলির আর প্রয়োজন নেই। অর্থাত্ ইনলাইন মার্কআপ (অনক্লিক ইত্যাদি) ব্যবহার করুন কারণ আপনি কেবল আইডি এবং ক্লাসগুলি ব্যবহার করতে পারেন যা সাধারণত কোনও বিকাশকারী সিএসএসের উদ্দেশ্যে সাধারণত লাভ করতে পারে।

Comments

বিশদ যত্ন? সম্ভবত একটি উদাহরণ?

— সমাধান

জাভাস্ক্রিপ্ট এটি করার জন্য অ্যাডএভেন্টলিস্টনার () এবং সংযুক্তি () সরবরাহ করে না?

— অ্যালেক্স

উদ্বেগের বিচ্ছেদ, মানুষ। আপনার এইচটিএমএল এবং জেএসকে আলাদা রাখুন

— ডোন