jQuery টিপস এবং কৌশল


507

বাক্য গঠন

তথ্য ভান্ডার

অপ্টিমাইজেশান

বিবিধ

উত্তর:


252

একটি HTML উপাদান তৈরি করা এবং একটি রেফারেন্স রাখা

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created, 
   I can just reference it from the "newDiv" variable */


কোনও উপাদান বিদ্যমান কিনা তা পরীক্ষা করা হচ্ছে

if ($("#someDiv").length)
{
    // It exists...
}


আপনার নিজের নির্বাচকদের লেখা

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

93
আপনার নিজের নির্বাচকদের লেখা বেশ চটুল
হুগোয়ার

22
এছাড়াও, যদি এটির কোনও সহায়তা হয় তবে আপনি আসলে $ ("<div />") করতে পারেন এবং $ ("<ডিভি> </ div>") হিসাবে একই জিনিস অর্জন করতে পারেন
হুগোয়ারে

4
আমি নতুন নির্বাচক অংশটি ভালবাসি, সে সম্পর্কে জানতাম না।
পিম জাগার

5
যেহেতু আমি এখনও সম্প্রদায় উইকিস সম্পাদনা করতে পারছি না: অ্যাসাইনমেন্ট এবং অস্তিত্ব চেক এর সাথে একত্রিত করুনif ((var someDiv = $("#someDiv")).length) { /* do stuff with someDiv... */ }
বেন ব্ল্যাঙ্ক

4
@ বেন: আমি জাভাস্ক্রিপ্টে এই জাতীয় প্রতিমা এড়ানোর কারণ হ'ল কারণ আমি বিবৃতিতে someDivবিভক্ত হওয়ার মায়া দিতে চাই না if, কারণ তা নয়; জাভাস্ক্রিপ্ট কেবল ফাংশন স্কোপ সমর্থন করে
Andreas গ্রেচ

111

jQuery এর data()পদ্ধতিটি দরকারী এবং সুপরিচিত নয়। এটি আপনাকে ডিওএম পরিবর্তন না করেই ডিওএম উপাদানগুলিতে ডেটা বাঁধতে দেয়।


4
ডেটা () সত্যই বড় সহায়ক।
পিম জ্যাজার

3
আমি লক্ষ্য করেছি যে সেট আইডি ব্যতীত এটি উপাদানগুলির সাথে কাজ করে না।
চিন্তাবিদ

20
@ থিঙ্কার: হ্যাঁ, তা হয়।
অ্যালেক্স ব্যারেট 11

ইমো, গ্লোবাল জেএস ভেরিয়েবলগুলি ঘোষণার পরিবর্তে ডেটা () ব্যবহার করুন।
জোহান

95

নেস্টিং ফিল্টার

আপনি ফিল্টার বাসাতে পারেন ( নিকফ এখানে যেমন দেখিয়েছেন )।

.filter(":not(:has(.selected))")

3
যদিও এটির সাথে সাবধানতা অবলম্বন করুন ...: একটি পূর্ণ গভীরতার অনুসন্ধান সম্পাদন করেছে, তাই এটি বেশ ব্যয়বহুল হতে পারে।
হার্পো

80

আমি আসলেই $(document).ready(fn)শর্টকাটের ভক্ত নই । নিশ্চিত হয়ে নিন যে এটি কোডটি কেটে ফেলেছে তবে কোডের পঠনযোগ্যতার উপর এটি কমে যায়। আপনি যখন দেখবেন $(document).ready(...), আপনি কী দেখছেন তা আপনি জানেন। $(...)তাত্ক্ষণিকভাবে বোঝার জন্য আরও অনেকগুলি উপায়ে ব্যবহার করা হয়।

আপনার যদি একাধিক ফ্রেমওয়ার্ক থাকে তবে আপনি jQuery.noConflict();যেমনটি বলছেন তেমন ব্যবহার করতে পারেন তবে আপনি এর জন্য আলাদা ভেরিয়েবলও নির্ধারণ করতে পারেন:

var $j = jQuery.noConflict();

$j("#myDiv").hide();

আপনার যদি বেশ কয়েকটি ফ্রেমওয়ার্ক থাকে যা $x(...)স্টাইল কলগুলিতে সিদ্ধ করা যায় ।


1
@ অলি: নথিটি রেডি-শর্টহ্যান্ড সম্পর্কে; তোমার একটা কথা আছে তবে কখনই কম নয়: এটি একটি পরামর্শ / কৌশল। যা আমি আমার সমস্ত কোডগুলিতে খাঁটিভাবে ব্যবহার করি সেহেতু আমার মনে হয় এটি আরও ভাল "দেখাচ্ছে"। ব্যক্তিগত পছন্দের বিষয়, আমি অনুমান করি :)
cllpse

প্রতিদিন আমি অর্থহীন এক্সএমএল / এক্সএলএস / এক্সএলএসটি দিয়ে দেখেছি, বিমূর্ততার অনেকগুলি স্তর সহ লিখিত সাইটগুলি, সাইটগুলিতে জটিল ব্যর্থ ওভার সিস্টেমগুলি যা সার্ভারগুলির নম্রতমিকে কখনই ছাড়িয়ে যাবে না ... এবং এখনও লোকেরা between (এর মধ্যে পার্থক্য সম্পর্কে অভিযোগ করে) <স্ট্রিং>) & $ (<ফাংশন>)। আমাকে কাঁদতে
চাইছে

আমি যখন $ (ফাংশন () {...}) দেখি তখন আমি জানি কী হচ্ছে। আরও স্বাভাবিক জিনিসগুলি খাটো হওয়া উচিত। এজন্য আমরা ঘন ঘন কোড টুকরাগুলিকে ফাংশনে পরিণত করি।
লুইকোর

77

ওহো, আসুন jQuery মেটাডেটা ভুলে যাবেন না ! ডেটা () ফাংশন দুর্দান্ত তবে এটি jQuery কলগুলির মাধ্যমে পপুলেশন করতে হবে।

কাস্টম উপাদান বৈশিষ্ট্যগুলির সাথে ডাব্লু 3 সি সম্মতি ভঙ্গ করার পরিবর্তে যেমন:

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/> 

পরিবর্তে মেটাডেটা ব্যবহার করুন:

<input 
  name="email" 
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>

7
এইচটিএমএল 5 ডেটা অ্যাট্রিবিউটগুলি এটিকে একটি ইস্যুতে কম করে; জেকুরির
ওসকর অস্টেগার্ড

10
@Oskar থেকে - হ্যাঁ এটা jQuery 1.4.3 বাস্তবায়িত হয়েছে - data-*বৈশিষ্ট্যাবলী স্বয়ংক্রিয়ভাবে প্রাপ্তিসাধ্য কল মাধ্যমে হয়.data()
nickf

73

লাইভ ইভেন্ট হ্যান্ডলার

কোনও নির্বাচকের সাথে মেলে এমন কোনও উপাদানগুলির জন্য ইভেন্ট হ্যান্ডলারটি সেট করুন , এমনকি প্রাথমিক পৃষ্ঠা লোড হওয়ার পরে এটি ডিওমে যুক্ত হয়ে গেলে:

$('button.someClass').live('click', someFunction);

এটি আপনাকে এজ্যাক্সের মাধ্যমে সামগ্রী লোড করতে বা জাভাস্ক্রিপ্টের মাধ্যমে যুক্ত করতে এবং ইভেন্ট হ্যান্ডলারগুলিকে স্বয়ংক্রিয়ভাবে সেই উপাদানগুলির জন্য সঠিকভাবে সেট আপ করতে দেয় allows

তেমনি, লাইভ ইভেন্ট হ্যান্ডলিং বন্ধ করতে:

$('button.someClass').die('click', someFunction);

নিয়মিত ইভেন্টগুলির তুলনায় এই লাইভ ইভেন্ট হ্যান্ডলারের কিছু সীমাবদ্ধতা রয়েছে তবে বেশিরভাগ ক্ষেত্রে তারা দুর্দান্ত কাজ করে।

আরও তথ্যের জন্য jQuery ডকুমেন্টেশন দেখুন

আপডেট: live()এবং die()jQuery 1.7 এ অবমূল্যায়িত হয়। অনুরূপ প্রতিস্থাপন কার্যকারিতার জন্য http://api.jquery.com/on/ এবং http://api.jquery.com/off/ দেখুন ।

আপডেট 2: live()jQuery 1.7 এর আগেও দীর্ঘ অবহেলিত হয়েছে। সংস্করণগুলির জন্য jQuery 1.4.2+ এর আগে 1.7 ব্যবহার করুন delegate()এবং undelegate()live()উদাহরণ ( $('button.someClass').live('click', someFunction);) ব্যবহার পুনর্লিখিত করা যেতে পারে delegate()মত যে: $(document).delegate('button.someClass', 'click', someFunction);


1
হ্যাঁ, আমি নতুন লাইভ স্টাফ পছন্দ করি। মনে রাখবেন এটি কেবল jQuery 1.3 দিয়ে শুরু করে works
নসরডেনা

4
+ ১.আপনি আমাকে প্রচুর হার্ট বেদনা থেকে বাঁচিয়েছেন..আমি আপনার প্রবেশটি পড়তে পেরেছিলাম এবং যখন আমি বিরতি নিচ্ছিলাম - কেন আমার ইভেন্টটি গুলি চালাচ্ছে না তা ট্রাবলশুটিং। ধন্যবাদ
লুক 101

2
এই নিবন্ধটিতে অন্য কোনও দেরী-আগতদের জন্য, আপনি প্রতিনিধিদের দিকেও নজর রাখতে পারেন (): api.jquery.com/delegate লাইভের অনুরূপ, তবে আরও দক্ষ।
ওসকার অসটগার্ড

2
কেবল মনে রেখো। লাইভ বুদবুদগুলি শরীর পর্যন্ত আপ করুন যাতে সীমাবদ্ধ লাইভ ইভেন্টটি চালানো যায়। পথে যদি কিছু এই ইভেন্টটিকে বাতিল করে দেয়, তবে সরাসরি ইভেন্টটি আরম্ভ করবে না।
নিকট্যলাইন

1
লাইভ () এবং ডাই () হ'ল jQuery 1.7 থেকে নভেম্বরের 3 য় প্রকাশিত অবধি বাতিল পদ্ধতি। (), Api.jquery.com/on এবং বন্ধ (), api.jquery.com/off-
জোহান

46

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

একটি দৃষ্টান্ত; পরিবর্তে:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

আমি পছন্দ করি:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

দুর্ভাগ্যক্রমে, যেহেতু jQuery ইভেন্ট টার্গেট হিসাবে পাস করেছে this, আপনি ঘেরগুলি ব্যবহার না করেই "যথাযথ" ওও পেতে পারবেন না। আমি সাধারণত সমঝোতার জন্য যাই:$('div').click( function(e) { return self.onClick(e) } );
বেন ফাঁকা

3
আমি দুঃখিত বেন, তবে আপনার মন্তব্যে আমার পোস্টের কোনও প্রাসঙ্গিকতা রয়েছে তা দেখতে আমি ব্যর্থ। তুমি কি বিস্তারিত বলতে পারো? আপনি এখনও আমার পরামর্শ ব্যবহার করে 'স্ব' (বা অন্য কোনও পরিবর্তনশীল) ব্যবহার করতে পারেন; এটি একেবারে কোনও পরিবর্তন করবে না won't
কেন

হ্যাঁ, বেন, তুমি ঠিক কী বোঝাতে চাও !?
জেমস 10

2
আমার অবশ্যই উল্লেখ করতে হবে: সর্বদা পশম পরিবর্তনশীল এবং নেমস্পেসে ফাংশনগুলি রুটে নয় not
jmav

45

উপাদান তৈরিতে বৈশিষ্ট্য নির্ধারণ করা

JQuery 1.4 এ আপনি যখন কোনও উপাদান তৈরি করেন তখন বৈশিষ্ট্যগুলি সংজ্ঞায়িত করতে আপনি কোনও অবজেক্ট আক্ষরিক ব্যবহার করতে পারেন:

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

... আপনি এমনকি শৈলী যোগ করতে পারেন:

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

এখানে ডকুমেন্টেশনের লিঙ্ক


43

jQuery অবজেক্টের জন্য (যখন noConflict ব্যবহার করার জন্য) আলাদা আলাদা ওরফে ব্যবহার করার পরিবর্তে আমি সবসময় আমার jQuery কোডটি সমস্ত বন্ধ করে মোড়ক দিয়ে লিখি। এটি নথিতে করা যেতে পারে। প্রস্তুতি ফাংশন:

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

বিকল্পভাবে আপনি এটি এটি করতে পারেন:

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

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


দ্বিতীয় উদাহরণটি চোখের জন্য দুর্দান্ত :)
cllpse

25
যদিও একটি পার্থক্য রয়েছে, প্রথম উদাহরণটি দস্তাবেজের জন্য অপেক্ষা করবে ready প্রস্তুতি () ইভেন্টটি চালানোর জন্য, যখন দ্বিতীয়টি তা করবে না।
স্যামবারন

1
@ সামবারান: সত্য, দ্বিতীয় উদাহরণটি সঙ্গে সঙ্গে চলবে; তবে আপনি যদি কোনও অবজেক্ট-আক্ষরিক মোড়কে রাখেন তবে আপনি object (ডকুমেন্ট) ব্যবহার করতে পারেন ready
উইল মুর তৃতীয়

4
instanceOfকাজ করবে না, শুধুমাত্র instanceof। এবং এটি কোনওভাবেই কাজ করবে না, কারণ jQuery instanceof jQueryফিরে আসবে false$ == jQueryএটি করার সঠিক উপায়।
nyuszika7h

@ নিউউজিকা 7 এইচ: হ্যাঁ, আপনি ঠিক বলেছেন, কিন্তু কোড কোডের উদাহরণটি এটি সত্যই নয়।
নিকফ

39

সূচকটি পরীক্ষা করুন

jQuery এর .index রয়েছে তবে এটি আপনার ব্যবহারের জন্য ব্যথা, কারণ আপনার উপাদানগুলির তালিকা প্রয়োজন, এবং যে উপাদানটি আপনাকে সূচক চান সেটি পাস করুন:

var index = e.g $('#ul>li').index( liDomObject );

নিম্নলিখিতটি আরও সহজ:

যদি আপনি কোনও অ-বিন্যাসিত তালিকার মধ্যে একটি সেট (যেমন তালিকার আইটেমগুলি) এর মধ্যে কোনও উপাদানের সূচক জানতে চান:

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

মূল সূচক () পদ্ধতিতে কী ভুল? এটি কমপক্ষে 1.2 থেকে মূল হয়েছে। docs.jquery.com/Core/index
কেন

ঠিক আছে, হ্যাঁ আমি কিছুটা শয়তানের উকিল খেলছিলাম, কারণ আমি যখন jQuery এর সূচকটি পর্যালোচনা করছিলাম (তখন) আমি বুঝতে পারলাম এটি পাছার একরকম ব্যথা। স্পষ্টতার জন্য ধন্যবাদ!
কেন

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

2
আমি jQuery 1.4 সাল থেকে বেশ নিশ্চিত, আপনি কেবল এটি ব্যবহার করতে index()এবং তার পিতামাতার কাছ থেকে সূচকটি পেতে পারেন ।
অ্যালেক্স

@ অ্যালেক্স - নিশ্চিত, তবে এই পোস্টের তারিখটি নোট করুন - এটি 1.4 প্রকাশের 5 মাস আগে ছিল!
redsquare

23

শর্টহ্যান্ড প্রস্তুত ইভেন্টের জন্য

স্পষ্ট এবং ভার্জিক উপায়:

$(document).ready(function ()
{
    // ...
});

শর্টহ্যান্ড:

$(function ()
{
    // ...
});

22

মূল jQuery ফাংশনে, নির্বাচক পরামিতি ছাড়াও প্রসঙ্গের প্যারামিটার নির্দিষ্ট করুন। কনটেক্সট প্যারামিটার নির্দিষ্ট করে jQuery DOM এর থেকে আরও গভীর শাখা থেকে শুরু করার অনুমতি দেয়। প্রচুর পরিমাণে ডিওএম দেওয়া হয়েছে, প্রসঙ্গের পরামিতিটি নির্দিষ্ট করে পারফরম্যান্স লাভগুলিতে অনুবাদ করা উচিত।

উদাহরণ: নথির প্রথম ফর্মের মধ্যে রেডিওর ধরণের সমস্ত ইনপুট সন্ধান করে।

$("input:radio", document.forms[0]);

তথ্যসূত্র: http://docs.jquery.com/Core/jQuery#expressioncontext


10
একটি নোট: $(document.forms[0]).find('input:radio')একই জিনিস। আপনি jQuery উত্স তাকান, আপনি দেখতে পাবেন: আপনি যদি দ্বিতীয় প্যারামিটারটি পাস করেন তবে $এটি আসলে কল করবে .find()
nyuszika7h

কি হবে ... $('form:first input:radio')?
দাগ্রাভিস

পল আইরিশ পলিরিশ . com / 2009 / perf (17 স্লাইড থেকে শুরু করে) নির্দেশ করে বলেছেন যে এটি করা পঠনযোগ্যতার দিক থেকে "পিছনের দিকে"। @ ন্যুযজিকা 7 এইচটি যেমন উল্লেখ করেছে, এটি প্রাথমিকভাবে নির্বাচককে প্রসঙ্গটি রাখার তুলনায়, অভ্যন্তরীণভাবে ফাইন্ড () এবং $ (ডকুমেন্ট.ফর্মস [0]) ব্যবহার করে find ('ইনপুট: রেডিও') পড়া খুব সহজ।
লোকালপিসিগুয়ে

21

কেবলমাত্র jQuery নয় তবে আমি jQuery এবং এমএস এজেএক্সের জন্য একটি দুর্দান্ত ছোট সেতু তৈরি করেছি:

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
  return $('#' + this.get_id());
}

আপনি প্রচুর এএসপি.নেট এজ্যাক্স করছেন যদি এটি সত্যিই চমৎকার, যেহেতু jQuery এমএস দ্বারা সমর্থিত এখন একটি দুর্দান্ত সেতু হওয়ার অর্থ jQuery অপারেশন করা সত্যিই সহজ:

$get('#myControl').j().hide();

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


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

this.get_id () ক্লায়েন্টের সুযোগে আপনাকে নিয়ন্ত্রণের আইডি ফিরিয়ে দেবে। সার্ভার-নির্দিষ্ট আইডিটি অপ্রয়োজনীয় কারণ ক্লায়েন্ট আইডি উত্পন্ন হয় পিতামাতার কোট্রোল হাইরাচি উপর নির্ভর করে
অ্যারন পাওয়েল

20

জটিল নির্বাচকদের পারফরম্যান্স অনুকূলিত করুন

জটিল নির্বাচকগুলি ব্যবহারের ক্ষেত্রে তাত্পর্যপূর্ণভাবে পারফরম্যান্সের উন্নতি করার সময় ডিওমের একটি উপসেটটি জিজ্ঞাসা করুন:

var subset = $("");

$("input[value^='']", subset);

7
কেবলমাত্র যদি সেই উপসেটটি ক্যাশে / সংরক্ষণ করা হয়।
ডাইকাম

6
যে অনেক ভিন্ন তারপর $ ( "") নয়। এটি ( "ইনপুট [VALUE ^ = '']")
চাদ মোরান

1
@ ডাইকাম: এটি আমার উদাহরণ-কোডের ক্ষেত্রে। তবে আপনার পয়েন্টটি এখনও বৈধ।
cllpse

4
@ চ্যাড, এটি আসলে অভিন্ন এবং আপনার লেখা ফাংশনের মানচিত্র
মাইক রবিনসন

19

টিপস এবং ট্রিকস এবং সেইসাথে কিছু টিউটোরিয়ালের কথা বলছি। আমি টিউটোরিয়াল এই সিরিজ (পাওয়া "সম্পূর্ণ নতুনরা জন্য jQuery" ভিডিও সিরিজ) দ্বারা Jeffery ওয়ে খুব সহায়ক হয়।

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

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

এখানে একটি উদাহরণ যা আমি " রাইজিং পাঠ্য " পছন্দ করি

1- jQuery ...

<script language="javascript" type="text/javascript">
    $(function() {
        $('a').click(function() {
            var originalSize = $('p').css('font-size'); // get the font size 
            var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
            var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch

            $('p').css('font-size', number / 1.2 + unitOfMeasure);
            if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
         });        
     });
</script>

2- সিএসএস স্টাইলিং ...

<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>

2- এইচটিএমএল ...

<div class="box">
    <a href="#" id="larger">Larger</a> | 
    <a href="#" id="Smaller">Smaller</a>
    <p>
    In todays video tutorial, Ill show you how to resize text every time an associated anchor tag is clicked. Well be examining the slice”, parseFloat”, and CSS Javascript/jQuery methods. 
    </p>
</div>

এই টিউটোরিয়ালগুলির উচ্চতর পরামর্শ দিন ...

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/


19

প্রতিটি () ফাংশন অ্যাসিঙ্ক্রোনাস

আপনার যদি সত্যিই জটিল ডকুমেন্ট থাকে যেখানে প্রতিটি () ফাংশনটি পুনরাবৃত্তির সময় ব্রাউজারটিকে লক করে রাখে এবং / অথবা ইন্টারনেট এক্সপ্লোরারটি ' আপনি কি এই স্ক্রিপ্টটি চালিয়ে যেতে চান ' বার্তাটি পপ আপ করে , এই সমাধানটি দিনটি সংরক্ষণ করবে।

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};


আপনি এটি প্রথম যেভাবে ব্যবহার করতে পারবেন তা প্রতিটি () এর মতো:

$('your_selector').forEach( function() {} );

An চ্ছিক ২ য় প্যারামিটার আপনাকে অ্যানিমেশনগুলির জন্য কার্যকর হতে পারে এমন পুনরাবৃত্তির মধ্যে গতি / বিলম্ব নির্দিষ্ট করতে দেয় ( নীচের উদাহরণটি পুনরাবৃত্তির মধ্যে 1 সেকেন্ড অপেক্ষা করবে ):

$('your_selector').forEach( function() {}, 1000 );

মনে রাখবেন যেহেতু এটি অবিচ্ছিন্নভাবে কাজ করে, আপনি কোডটির পরবর্তী লাইনের পূর্বে পুনরাবৃত্তির উপর নির্ভর করতে পারবেন না, উদাহরণস্বরূপ:

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete


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


18

সিনট্যাকটিক শর্টহ্যান্ড-চিনির জিনিস - একটি বস্তুর সংগ্রহ ক্যাশে করুন এবং এক লাইনে আদেশগুলি সম্পাদন করুন:

পরিবর্তে:

var jQueryCollection = $("");

jQueryCollection.command().command();

আমি করি:

var jQueryCollection = $("").command().command();

কিছুটা "আসল" ব্যবহারের ক্ষেত্রে এই লাইনের পাশাপাশি কিছু হতে পারে:

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

4
স্থানীয়
চলকটিতে

4
এই ক্ষেত্রে (কোনও পাং উদ্দেশ্য নয়) আমি কেবল একবার "এই" ব্যবহার করছি। ক্যাচিংয়ের দরকার নেই।
cllpse

1
একটি ছোট্ট টিপ। যদিও এই ক্ষেত্রে এটি বিবেচ্য নয় তবে ডওমে অতিরিক্ত পরিবর্তন করা সর্বদা একটি খারাপ ধারণা। উদাহরণস্বরূপ বলুন আপনি যে উপাদানটির উপরে ঘুরে বেড়াচ্ছেন তার ইতিমধ্যে "হোভার" শ্রেণি ছিল। আপনি এই শ্রেণিটি সরিয়ে আবার যুক্ত করবেন adding আপনি এটি সঙ্গে পেতে পারেন $(this).siblings().removeClass("hover")। আমি জানি এটি খুব ছোট জিনিসটির মতো শোনাচ্ছে তবে প্রতিবার আপনি ডিওএম পরিবর্তন করলে অন্য ব্রাউজারের পুনরায় চিত্রের সূত্রপাত হতে পারে। অন্যান্য সম্ভাবনার মধ্যে ডিওএমএটিআরটি মোডেফাইডযুক্ত ইভেন্টগুলি বা উপাদানগুলির উচ্চতা পরিবর্তনকারী ক্লাসগুলি অন্তর্ভুক্ত রয়েছে যা অন্যান্য "পুনরায় আকার দেওয়ার" ইভেন্ট শ্রোতাদের আগুন ধরিয়ে দিতে পারে।
গ্রেডবোট

1
আপনি যদি ক্যাশে ব্যবহার করতে চান এবং DOM পরিবর্তনগুলি হ্রাস করতে পারেন তবে আপনি এটি করতে পারেন। cache.not(this).removeClass("hover")
গ্রেডবোট

@ গ্রেডবোট: আপনার শেষ দুটি মন্তব্য আমি বুঝতে পারি না। আপনি কি প্রসারিত করতে পারেন?
র‌্যান্ডম্বলিউ

15

আমি $thisবেনামে ফাংশনগুলির শুরুতে একটি ভেরিয়েবল ঘোষণা করতে চাই , তাই আমি জানি যে আমি কোনও জিকিউরিড এটি উল্লেখ করতে পারি।

তাই ভালো:

$('a').each(function() {
    var $this = $(this);

    // Other code
});

12
আমি এর পরিবর্তে "সে" ব্যবহার করি :)
cllpse

2
আরওএ: হ্যাঁ, এটিই অ্যাসিড হবে :) আপনি নিজেও কোনও বেনামি ফাংশনটি উল্লেখ করার জন্য আর্গুমেন্টস.কলে ব্যবহার করতে পারেন
জো ব্লগস

5
জো - মাত্র একটি মাথা উপরে, কলি ECMAScript 5 এবং কঠোর মোডের সাথে চলে যাবে। দেখুন: ejohn.org/blog/ecmascript-5-strict-mode-json-and-more
মাইক রবিনসন

@ জো আপনি এটিকে একটি নাম দিতে পারতেন, কেবল আইই এর উদ্দীপনা সম্পর্কে সতর্ক থাকুন ।
অ্যালেক্স

স্ট্যান্ডার্ড ভেরিয়েবলের তুলনায় jQuery অবজেক্ট ভেরিয়েবল নির্দেশ করতে ভেরিয়েবল নামের শুরুতে a using ব্যবহারের দুর্দান্ত উদাহরণ Great যে কোনও ভেরিয়েবলের শুরুতে যোগ করুন যা কোনও জিকুয়েরি অবজেক্টকে ক্যাশে করছে, আপনি তাত্ক্ষণিকভাবে এটিকে দেখে বুঝতে পারবেন যে আপনি ভেরিয়েবলের উপর jQuery ফাংশন সম্পাদন করতে পারেন। কোডটি তাত্ক্ষণিকভাবে আরও অনেক পাঠযোগ্য করে তোলে।
লোকালপিসিগুই

14

পুনঃব্যবহারের জন্য ভেরিয়েবলগুলিতে jQuery অবজেক্টগুলি সংরক্ষণ করুন

কোনও ভেরিয়েবলের জন্য jQuery অবজেক্ট সংরক্ষণ করা আপনাকে এটি ডিএমএমে ফিরে অনুসন্ধান না করে এটি পুনরায় ব্যবহার করতে দেয় find

(@ লুইসের পরামর্শ অনুসারে, আমি এখন ব্যবহার করি vari এটি বোঝাতে যে একটি ভেরিয়েবল একটি jQuery অবজেক্ট ধারণ করে))

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

আরও জটিল উদাহরণ হিসাবে বলুন যে আপনি একটি দোকানে খাবারের একটি তালিকা পেয়েছেন, এবং আপনি কেবল সেইগুলিই দেখাতে চান যা ব্যবহারকারীর মানদণ্ডের সাথে মেলে। চেকবাক্সগুলির সাথে আপনার একটি ফর্ম রয়েছে, যার প্রত্যেকটিতে একটি মানদণ্ড রয়েছে। চেকবাক্সগুলির মতো নাম রয়েছে organicএবং lowfat, এবং পণ্যগুলির সাথে সম্পর্কিত ক্লাস রয়েছে - .organicইত্যাদি have

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

এখন আপনি সেই jQuery অবজেক্টের সাথে কাজ চালিয়ে যেতে পারেন। প্রতিবার একটি চেকবক্স ক্লিক করা হয় (চেক বা চেক বাছাই করতে), খাবারের মাস্টার তালিকা থেকে শুরু করুন এবং চেক বাক্সগুলির উপর ভিত্তি করে ফিল্টার ডাউন করুন:

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

8
আমার নামকরণের সম্মেলনটি $সামনে উপস্থিত হ'ল । যেমনvar $allItems = ...
লুই

6
@ লাভিনস্কি - আমি মনে করি যে ধারণাটি হ'ল এটি $ইঙ্গিত করে যে এটি একটি jQuery অবজেক্ট, যা অন্যান্য পরিবর্তনশীলগুলির থেকে দৃশ্যমানভাবে পৃথক করা সহজ করবে।
নাথান লং

@ লুইস - এর পর থেকে আমি আপনার সম্মেলনটি গ্রহণ করেছি এবং সে অনুযায়ী আমার উত্তর আপডেট করব। :)
নাথান লং

11

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

ছোট্ট টিপটি হল jQuery.each (অবজেক্ট, কলব্যাক) ফাংশন। প্রত্যেকে সম্ভবত jQuery অবজেক্টের উপরে পুনরাবৃত্তি করতে jQuery.each (কলব্যাক) ফাংশনটি ব্যবহার করছে কারণ এটি প্রাকৃতিক। JQuery.each (অবজেক্ট, কলব্যাক) ইউটিলিটি ফাংশনটি বস্তু এবং অ্যারেতে পুনরাবৃত্তি করে। দীর্ঘদিন ধরে, আমি কোনওভাবেই এটি দেখতে পাইনি যে এটি আলাদা সিনট্যাক্সের বাইরে কী হতে পারে (আমি সমস্ত ফ্যাশনযুক্ত লুপগুলি লিখতে আপত্তি করি না) এবং আমি সম্প্রতি লজ্জা পেয়ে কিছুটা লজ্জা পেয়েছি।

জিনিস যে যেহেতু হয় jQuery.each (বস্তু, কলব্যাক) এ লুপ শরীরের একটি ফাংশন , আপনি একটি পেতে নতুন সুযোগ লুপ যা বিশেষত সুবিধাজনক যখন আপনার তৈরি করা প্রত্যেক সময় বন্ধ লুপ।

অন্য কথায়, একটি সাধারণ সাধারণ ভুল হ'ল কিছু করা:

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

এখন, আপনি functionsঅ্যারেতে ফাংশনগুলি শুরু করার সময় , আপনি যে সামগ্রীটি undefinedচেয়েছিলেন সম্ভবত তা নয় এমন সামগ্রীতে তিনবার সতর্কতা পাবেন । সমস্যাটি হ'ল এখানে একটি মাত্র পরিবর্তনশীল রয়েছে iএবং তিনটি বন্ধই এটি উল্লেখ করে। লুপ শেষ হয়ে গেলে এর চূড়ান্ত মান 3 iহয় এবং someArrary[3]হয় undefined। আপনি অন্য ফাংশন কল করে এটির চারপাশে কাজ করতে পারেন যা আপনার জন্য বন্ধন তৈরি করবে। অথবা আপনি jQuery ইউটিলিটি ব্যবহার করেন যা এটি মূলত এটি আপনার জন্য করবে:

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

এখন, আপনি যখন ফাংশনগুলি শুরু করবেন আপনি প্রত্যাশা অনুযায়ী 1, 2 এবং 3 সামগ্রী সহ তিনটি সতর্কতা পাবেন।

সাধারণভাবে, এটি এমন কিছু নয় যা আপনি নিজে করতে পারেননি, তবে এটি পেয়ে ভাল লাগছে।


11

আপনি যেমন একটি অ্যারে হিসাবে jQuery ফাংশন অ্যাক্সেস

বুলিয়ানের উপর ভিত্তি করে একটি শ্রেণি যুক্ত / সরান ...

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

এর সংক্ষিপ্ত সংস্করণটি কি ...

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

এটির জন্য অনেকগুলি ব্যবহারের ক্ষেত্রে নয়। কখনই কম নয়; আমি মনে করি এটি ঝরঝরে :)


হালনাগাদ

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

$('selector').toggleClass('name_of_the_class', true/false);

2
এটি ঝরঝরে, এবং কিছু আকর্ষণীয় ব্যবহার রয়েছে, তবে এটি jQuery এর জন্য নির্দিষ্ট কিছু নয় ... এটি কোনও জাভাস্ক্রিপ্ট অবজেক্টে আপনি করতে পারেন এমন কিছু।
টিএম

1
ধন্যবাদ :) ... এটি বেসিক জাভাস্ক্রিপ্ট; হাঁ। তবে আমি যুক্তি দেব যে jQuery হ'ল জাভাস্ক্রিপ্ট। আমি দাবি করছি না যে এটি jQuery- নির্দিষ্ট।
cllpse

7
এই নির্দিষ্ট ক্ষেত্রে আপনি $('selector').toggleClass('name_of_the_class', b);যদিও ব্যবহার করতে চান ।
চোরমাস্টার

9

হালনাগাদ:

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

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

এই লিঙ্কটি দেখুন:

সিএসএস ট্রিকস থেকে

আপডেট: আমি নতুন কিছু খুঁজে পেয়েছি; এটি জিকুয়ের হটবক্স।

জিকুয়ের হটবক্স

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

<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  

    // Load jQuery  
    google.load("jquery", "1.2.6");  

    google.setOnLoadCallback(function() {  
        // Your code goes here.  
    });  

</script>

অথবা

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

আপনি যখন কোনও চিত্র পুরোপুরি লোড হয় তা জানাতে এটি ব্যবহার করতে পারেন।

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Image Loaded');  
});

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

console.time('create list');

for (i = 0; i < 1000; i++) {
    var myList = $('.myList');
    myList.append('This is list item ' + i);
}

console.timeEnd('create list');

ইরানের পিপিএল গুগল এপিআই সহ লোড হওয়া ওয়েব পৃষ্ঠাগুলি দেখতে পাচ্ছে না। আসলে গুগল ইরানীদের গুগল কোড অ্যাক্সেস করতে সীমাবদ্ধ করেছে। so -1
আলিরিজা ইলিয়েদারানী

আমি সবেমাত্র জানতে পেরেছি যে আপনি যে কোনও ব্রাউজারে ফায়ারব্যাগ ব্যবহার করতে পারেন। সেটা খুবই ভালো.
টেবো

9

ছদ্ম নির্বাচকদের উপরে ফিল্টারিংয়ের পদ্ধতিগুলি ব্যবহার করুন যখন সম্ভব হয় তাই jQuery ক্যোয়ারীস্লিটরঅল ব্যবহার করতে পারে (যা সিজলের চেয়ে অনেক দ্রুত)। এই নির্বাচক বিবেচনা করুন:

$('.class:first')

একই নির্বাচন ব্যবহার করে করা যেতে পারে:

$('.class').eq(0)

কোনটি অবশ্যই দ্রুত কারণ '.class' এর প্রাথমিক নির্বাচন QSA সামঞ্জস্যপূর্ণ


@ নিউউজিকা H এইচ আমার মনে হয় আপনি পয়েন্টটি মিস করছেন। মুল বক্তব্যটি হ'ল কিউএসএ বেশিরভাগ সিউডো সিলেক্টরকে অনুকূল করতে পারে না, সুতরাং $ ('। শ্রেণি: eq (0)') $ ('। শ্রেণি') এর চেয়ে ধীর হবে। eq (0)।
রাল্ফ হলজম্যান

9

সংগ্রহ থেকে উপাদানগুলি সরান এবং শৃঙ্খলাবদ্ধতা সংরক্ষণ করুন

নিম্নোক্ত বিবেচনা কর:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>


$("li").filter(function()
{
    var text = $(this).text();

    // return true: keep current element in the collection
    if (text === "One" || text === "Two") return true;

    // return false: remove current element from the collection
    return false;
}).each(function ()
{
    // this will alert: "One" and "Two"       
    alert($(this).text());
});

filter()ফাংশন jQuery এর অবজেক্ট থেকে উপাদানগুলি সরিয়ে ফেলা হয়। এই ক্ষেত্রে: "এক" বা "দুটি" পাঠ্য না থাকা সমস্ত লি-উপাদানগুলি সরানো হবে।


কেবল "প্রতিটি" ব্যবহার এবং মার্জিন পরিবর্তনটি স্যুইচের অভ্যন্তরে সরানো কি সহজ নয়?
অসন্তুষ্ট গোয়াট

আমার উত্তর আপডেট। আমি নিজেকে স্পষ্ট করে দিচ্ছি কিনা তা দয়া করে আমাকে জানান (এআর)
cllpse

এটি কি সত্যিই লি উপাদানগুলিকে সরিয়ে দেয়? এটি উপাদানগুলির একটি ফিল্টার তালিকা সহ সতর্কতা বলে মনে হয়।
চিজো

1
ফিল্টার ফাংশন jQuery অবজেক্টের অভ্যন্তরের সংগ্রহ থেকে উপাদানগুলি সরিয়ে দেয়। এটি ডোমকে প্রভাবিত করে না।
cllpse

6
আপনার ফিল্টার ফাংশনে, আপনি কেবল লিখতে পারেন: রিটার্ন !! $ (এটি)। পাঠ্য ()। ম্যাচ (/ এক | দুই /); ;)
ভিনসেন্ট

8

একটি ইনপুট উপাদানের ধরণ পরিবর্তন করা

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

var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();

newButton.attr("type", "button");
newButton.attr("id", "newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id", "Submit");

7

ফর্ম ক্ষেত্রের বৈধতা বা url পার্সিংয়ের মতো তৃতীয় পক্ষের jQuery স্ক্রিপ্টগুলির ন্যায়বিচারের ব্যবহার। এটি কী এমন তা দেখার মতো, যাতে আপনি যখন পরবর্তী কোনও জাভাস্ক্রিপ্টের প্রয়োজনীয়তার মুখোমুখি হবেন তখন আপনি জানতে পারবেন।


7

লাইন-বিরতি এবং শৃঙ্খলাবদ্ধতা

সংগ্রহগুলিতে একাধিক কল চেইন করার সময় ...

$("a").hide().addClass().fadeIn().hide();

আপনি লাইন ব্রেকগুলির সাথে পাঠযোগ্যতা বাড়াতে পারেন। এটার মত:

$("a")
.hide()
.addClass()
.fadeIn()
.hide();

4
এই ক্ষেত্রে, প্রথমটি আরও বেশি পঠনযোগ্য, তবে হ্যাঁ, কিছু ক্ষেত্রে রয়েছে যখন লাইন ব্রেকগুলি পাঠযোগ্যতা বৃদ্ধি করে।
nyuszika7h

7

অ্যানিমেশনটি ট্রিগার করার সময়। স্টপ (সত্য, সত্য) ব্যবহার করুন এটি এনিমেশনটি পুনরাবৃত্তি করতে বাধা দেয়। এটি রোলওভার অ্যানিমেশনগুলির জন্য বিশেষভাবে সহায়ক।

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

7

কোনও পদ্ধতিতে কল করার মতো কোনও মেথড কলটিতে স্ব-সম্পাদনকারী বেনামি ফাংশন ব্যবহার করা .append()। অর্থাৎ,

$("<ul>").append((function ()
{
    var data = ["0", "1", "2", "3", "4", "5", "6"],
        output = $("<div>"),
        x = -1,
        y = data.length;

    while (++x < y) output.append("<li>" + info[x] + "</li>");

    return output.children();
}()));

আমি এটি এমন জিনিসগুলির মধ্য দিয়ে পুনরাবৃত্তি করতে ব্যবহার করি যা নির্মাণের জন্য আমার শৃঙ্খল থেকে বেরিয়ে আসতে বড় এবং অস্বস্তিকর হতে পারে।


5

এইচটিএমএল 5 ডেটা বৈশিষ্ট্যগুলি স্টেরয়েডগুলিতে সমর্থন করে!

তথ্য ফাংশন আগে উল্লেখ করা হয়েছে। এটির সাহায্যে আপনি DOM উপাদানগুলির সাথে ডেটা সংযুক্ত করতে সক্ষম।

সম্প্রতি jQuery টিম এইচটিএমএল 5 কাস্টম ডেটা- * বৈশিষ্ট্যের জন্য সমর্থন যোগ করেছে । এবং যেমন যথেষ্ট ছিল না; তারা স্টেরয়েডগুলি সহ ডেটা ফাংশনটিকে জোর করে সরবরাহ করেছে, যার অর্থ হল আপনি সরাসরি আপনার মার্কআপে জেএসএন আকারে জটিল জিনিস সংরক্ষণ করতে সক্ষম।

এইচটিএমএল:

<p data-xyz = '{"str": "hi there", "int": 2, "obj": { "arr": [1, 2, 3] } }' />


জাভাস্ক্রিপ্ট:

var data = $("p").data("xyz");

data.str // "hi there"
typeof data.str // "string"

data.int + 2 // 4
typeof data.int // "number"

data.obj.arr.join(" + ") + " = 6" // "1 + 2 + 3 = 6"
typeof data.obj.arr // "object" ... Gobbles! Errrghh!
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.