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> </ div>")
हुग्वारे

4
मुझे नए चयनकर्ता भाग से प्यार है, इस बारे में नहीं पता था।
पीम जगर

5
चूँकि मैं अभी तक कम्युनिटी विकिस का संपादन नहीं कर सकता हूँ: साथ काम असाइनमेंट और अस्तित्व की जाँच करेंif ((var someDiv = $("#someDiv")).length) { /* do stuff with someDiv... */ }
बेन ब्लैंक

4
@ बान: मैं जावास्क्रिप्ट में इस तरह के मुहावरों से बचने का कारण यह है क्योंकि मैं बयान someDivमें डांटे जाने का भ्रम नहीं देना चाहता if, क्योंकि यह नहीं है; जावास्क्रिप्ट केवल फंक्शन स्कोप को सपोर्ट करती है
Andreas Grech

111

jQuery की data()विधि उपयोगी है और अच्छी तरह से ज्ञात नहीं है। यह आपको DOM को संशोधित किए बिना DOM तत्वों में डेटा को बाँधने की अनुमति देता है।


4
डेटा () वास्तव में बहुत मदद की है।
पिम जगेर

3
मैंने देखा है कि यह बिना सेट आईडी के तत्वों के साथ काम नहीं करता है।
विचारक

20
@ टिंकर: हाँ, यह करता है।
एलेक्स बैरेट

ग्लोबल जेएस वैरिएबल की घोषणा करने के बजाय डेटा () का उपयोग करें।
जोहान

95

नेस्टिंग फिल्टर

आप फ़िल्टर को घोंसला बना सकते हैं (जैसा कि यहाँ दिखाया गया है )।

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

3
हालांकि इसके साथ सावधान रहें ...: ने पूरी गहराई से खोज की है, इसलिए यह काफी महंगा हो सकता है।
हार्पो

80

मैं वास्तव में $(document).ready(fn)शॉर्टकट का प्रशंसक नहीं हूं । यकीन है कि यह कोड में कटौती करता है, लेकिन यह कोड की पठनीयता पर भी कटौती करता है। जब आप देखते हैं $(document).ready(...), तो आप जानते हैं कि आप क्या देख रहे हैं।$(...)बहुत दूर तक कई अन्य तरीकों से उपयोग किया जाता है।

यदि आपके पास कई चौखटे jQuery.noConflict();हैं, जिनका उपयोग आप अपनी इच्छानुसार कर सकते हैं, लेकिन आप इसके लिए एक भिन्न चर भी दे सकते हैं:

var $j = jQuery.noConflict();

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

बहुत उपयोगी है अगर आपके पास कई रूपरेखाएं हैं, जिन्हें $x(...)-स्टाइल कॉल के लिए उबला जा सकता है ।


1
@ ओली: दस्तावेज़ के बारे में तैयार-शॉर्टहैंड; तुम्हारी बात तथ्य पूर्ण है। लेकिन कभी कम नहीं: यह एक टिप / ट्रिक है। एक जो मैं अपने सभी कोड में शुद्ध रूप से उपयोग करता हूं क्योंकि मुझे लगता है कि यह "बेहतर" दिखता है। व्यक्तिगत पसंद की बात है, मुझे लगता है :)
अक्टूबर'08 क्लैप्स

हर दिन मैं व्यर्थ XML / XLS / XLST के माध्यम से उकसाता हूं, साइटों पर अमूर्तता की बहुत सारी परतें लिखी जाती हैं, साइटों पर जटिल विफल-ओवर सिस्टम जो कभी भी सर्वर के हंबल को नहीं उखाड़ पाएंगे ... और अभी भी लोग $ के बीच अंतर के बारे में शिकायत करते हैं <string>) और $ (<function>)। मुझे रोना चाहता है :)
जोकॉग्स

जब मैं $ (फ़ंक्शन () {...}) देखता हूं तो मुझे पता है कि क्या चल रहा है। अधिक सामान्य चीजें कम होनी चाहिए। इसीलिए हम अक्सर फंक्शन कोड्स को फंक्शन में कहते हैं।
लुइकोर

77

ओहो, चलो jQuery मेटाडेटा को मत भूलना ! डेटा () फ़ंक्शन बहुत अच्छा है, लेकिन इसे jQuery कॉल के माध्यम से आबाद करना होगा।

कस्टम तत्व विशेषताओं जैसे W3C अनुपालन को तोड़ने के बजाय:

<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
HTML5 डेटा विशेषताएँ इसे किसी समस्या से कम करती हैं; वहाँ jquery के डेटा के साथ html5 डेटा विशेषता इनलाइन लाने पर चर्चा चल रही है () समारोह: forum.jquery.com/topic/…
Oskar ऑस्टेगार्ड

10
@ ऑस्कर - हाँ यह jQuery के 1.4.3 में लागू किया गया है - data-*विशेषताएँ स्वचालित रूप से कॉल के माध्यम से उपलब्ध हैं.data()
21

73

लाइव इवेंट हैंडलर

किसी भी तत्व के लिए एक ईवेंट हैंडलर सेट करें जो चयनकर्ता से मेल खाता हो, भले ही यह प्रारंभिक पृष्ठ लोड के बाद DOM में जोड़ा गया हो:

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

इससे आप अजाक्स के माध्यम से सामग्री लोड कर सकते हैं, या उन्हें जावास्क्रिप्ट के माध्यम से जोड़ सकते हैं और स्वचालित रूप से अपने तत्वों के लिए घटना संचालकों को ठीक से स्थापित कर सकते हैं।

इसी तरह, लाइव इवेंट हैंडलिंग को रोकने के लिए:

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

ये लाइव इवेंट हैंडलर नियमित घटनाओं की तुलना में कुछ सीमाएं हैं, लेकिन वे अधिकांश मामलों के लिए महान काम करते हैं।

अधिक जानकारी के लिए jQuery प्रलेखन देखें

अद्यतन: live()और die()jQuery के 1.7 में पदावनत हैं। इसी तरह की प्रतिस्थापन कार्यक्षमता के लिए http://api.jquery.com/on/ और http://api.jquery.com/off/ देखें ।

UPDATE2: live()jQuery 1.7 से पहले भी लंबे समय से पदावनत किया गया है। संस्करणों के लिए 1.7 उपयोग करने से पहले jQuery 1.4.2+ delegate()और undelegate()live()उदाहरण ( $('button.someClass').live('click', someFunction);) को इस delegate()तरह उपयोग करके फिर से लिखा जा सकता है $(document).delegate('button.someClass', 'click', someFunction);:।


1
हाँ, मुझे नया लाइव सामान बहुत पसंद है। ध्यान दें कि यह केवल jQuery 1.3 के साथ काम करना शुरू करता है।
नोसरेडना

4
+ 1. आप ने मुझे दिल के दर्द से बचाया है..मैं सिर्फ आपकी प्रविष्टि को पढ़ने के लिए हुआ था और जब मैं एक ब्रेक ले रहा था - ट्रोबेलोवेटिंग क्यों मेरी घटना फायरिंग नहीं थी। धन्यवाद
ल्यूक101

2
इस लेख के लिए किसी भी अन्य देर से आने वालों के लिए, आप प्रतिनिधि को भी देखना चाहते हैं (): api.jquery.com/delegate जीने के समान, लेकिन अधिक कुशल।
ओस्कर ऑस्ट्रगार्ड

2
बस याद रखें। शरीर पर बुलबुले रखें ताकि बाध्य लाइव घटना को निकाल दिया जा सके। अगर रास्ते में कुछ उस घटना को रद्द कर देता है, तो लाइव इवेंट में आग नहीं लगेगी।
निकटनलाइन

1
लाइव () और डाई () jQuery के 1.7 जारी किए गए 3 जी के बाद से पदावनत विधियां हैं। द्वारा (), api.jquery.com/on और off (), api.jquery.com/off
जोहान

46

अनाम फ़ंक्शंस को नामांकित फ़ंक्शंस से बदलें। यह वास्तव में jQuery के संदर्भ को सुपरस्टार करता है, लेकिन कॉलबैक फ़ंक्शन पर निर्भरता के कारण यह jQuery का उपयोग करते समय अधिक लगता है। इनलाइन अनाम फ़ंक्शंस के साथ मुझे जो समस्याएँ हैं, वे यह हैं कि वे डिबग करना कठिन हैं (विशिष्ट नाम वाले कार्यों के बजाय एक कॉलस्टैक को देखना आसान है, बजाय "अनाम" के 6 स्तर), और यह भी तथ्य यह है कि एक ही के भीतर कई अनाम फ़ंक्शंस 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, आप बाड़ों का उपयोग किए बिना "उचित" OO प्राप्त नहीं कर सकते। मैं आमतौर पर एक समझौते के लिए जाता हूं:$('div').click( function(e) { return self.onClick(e) } );
बेन ब्लैंक

3
मुझे खेद है कि बेन, लेकिन मैं यह देखने में विफल हूं कि आपकी टिप्पणी से मेरी पोस्ट की कोई प्रासंगिकता है। क्या आप विस्तार से समझा सकते हैं? आप अभी भी मेरे सुझाव का उपयोग करके 'स्वयं' (या किसी अन्य चर) का उपयोग कर सकते हैं; यह बिल्कुल भी नहीं बदलेगा।
कीन

हाँ, बेन, वास्तव में आप क्या मतलब है !?
जेम्स

2
मुझे उल्लेख करना चाहिए: हमेशा फर चर और फ़ंक्शन नाम स्थान में नहीं जड़ में !!
जेमव २ j

45

तत्व निर्माण में गुणों को परिभाषित करना

जब आप कोई तत्व बनाते हैं, तो jQuery 1.4 में आप किसी ऑब्जेक्ट शाब्दिक का उपयोग गुणों को परिभाषित करने के लिए कर सकते हैं:

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

... आप शैलियों को भी जोड़ सकते हैं:

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

यहाँ प्रलेखन के लिए एक कड़ी है


43

jQuery ऑब्जेक्ट के लिए एक अलग उपनाम का उपयोग करने के बजाय (जब noConflict का उपयोग करते हुए), मैं हमेशा एक क्लोजर में यह सब लपेटकर अपना jQuery कोड लिखता हूं। यह document.ready फ़ंक्शन में किया जा सकता है:

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 दोनों का उपयोग करती है और इन तकनीकों ने सभी संघर्षों से बचा लिया है।


दूसरा उदाहरण आँखों के लिए अच्छा है :)
19

25
हालांकि एक अंतर है, पहला उदाहरण दस्तावेज़ के लिए प्रतीक्षा करेगा।
समरबेरन

1
@SamBeran: सच है, दूसरा उदाहरण तुरंत चलेगा; हालाँकि, यदि आप किसी ऑब्जेक्ट-शाब्दिक को लपेट रहे हैं, तो आप ऑब्जेक्ट-शाब्दिक के अंदर $ (डॉक्यूमेंट) (।) (...) का उपयोग कर सकते हैं, जिसका अर्थ है कि आप निर्दिष्ट कर सकते हैं कि आप प्रत्येक कोड को कब चलाना चाहते हैं।
विल् मूर III

4
instanceOfकाम नहीं करेगा, केवल instanceof। और यह वैसे भी काम नहीं करेगा, क्योंकि jQuery instanceof jQueryवापस आ जाएगा false$ == jQueryयह करने का सही तरीका है।
nyuszika7h

@ Nyuszika7H: हाँ, आप सही कह रहे हैं, लेकिन यह वास्तव में कोड उदाहरण की बात नहीं है।
nickf

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
ken

ठीक है, हाँ मैं कुछ हद तक शैतान के वकील की भूमिका निभा रहा था, क्योंकि जब मैं jQuery के सूचकांक () की समीक्षा कर रहा था, तब मुझे एहसास हुआ कि यह बट में दर्द की तरह था। स्पष्टीकरण के लिए धन्यवाद!
केन

4
यह अच्छा है, लेकिन यह जानना महत्वपूर्ण है कि यदि आपके पास पिछले भाई-बहन थे जो चयन का हिस्सा नहीं थे, तो यह बहुत सही नहीं है।
टीएम।

2
मुझे पूरा यकीन है कि jQuery 1.4 के बाद से, आप बस इसका उपयोग कर सकते हैं index()और इसके मूल से सूचकांक प्राप्त कर सकते हैं ।
एलेक्स

@alex - यकीन है, लेकिन इस पोस्ट की तारीख पर ध्यान दें - यह 1.4 रिलीज से 5 महीने पहले था!
redsquare

23

रेडी-इवेंट के लिए आशुलिपि

स्पष्ट और क्रिया तरीका:

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

आशुलिपि:

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

22

कोर jQuery फ़ंक्शन पर, चयनकर्ता पैरामीटर के अलावा संदर्भ पैरामीटर निर्दिष्ट करें। संदर्भ पैरामीटर निर्दिष्ट करना jQuery को DOM की तुलना में 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')?
डेग्रीविस

पॉल आयरिश ने paulirish.com/2009/perf (स्लाइड 17 पर शुरू) में बताया कि ऐसा करना पठनीय दृष्टिकोण से "पीछे" है। जैसा कि @ Nyuszika7H ने बताया कि, यह .find () का उपयोग आंतरिक रूप से करता है, और $ (document.forms (0 [))। खोज ('इनपुट: रेडियो') प्रारंभिक चयनकर्ता में संदर्भ डालने की तुलना में पढ़ना बहुत आसान है।
लोकलपीसीग्युई

21

केवल jQuery ही नहीं, लेकिन मैंने jQuery और MS AJAX के लिए एक अच्छा सा पुल बनाया:

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

यदि आप ASP.NET AJAX के बहुत सारे काम कर रहे हैं तो यह वास्तव में अच्छा है, क्योंकि jQuery को MS द्वारा समर्थित किया गया है, अब एक अच्छा पुल होने का मतलब है कि jQuery के संचालन करना वास्तव में आसान है:

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

इसलिए उपरोक्त उदाहरण बहुत अच्छा नहीं है, लेकिन यदि आप ASP.NET AJAX सर्वर नियंत्रण लिख रहे हैं, तो यह आपके क्लाइंट-साइड नियंत्रण कार्यान्वयन के अंदर jQuery के लिए आसान बनाता है।


क्या अजाक्स क्लाइंटसाइड लाइब्रेरी आपके द्वारा सौंपे गए मूल आईडी द्वारा एक नियंत्रण खोजने का एक तरीका प्रदान करता है (
क्रिस

यह .get_id () आपको क्लाइंट स्कोप में नियंत्रण की आईडी लौटाएगा। सर्वर-आईडी निर्दिष्ट नहीं है क्योंकि क्लाइंट आईडी जनक कॉट्रोल पदानुक्रम के आधार पर उत्पन्न होता है
आरोन पॉवेल

20

जटिल चयनकर्ताओं के प्रदर्शन का अनुकूलन

जटिल चयनकर्ताओं का उपयोग करने पर DOM का एक सबसेट क्वेरी को काफी बेहतर बनाता है:

var subset = $("");

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

7
केवल तभी कि सबसेट को कैश / सेव किया गया है।
दायकाम Dy

6
यह बहुत भिन्न नहीं है तब $ ("")। "इनपुट (मूल्य [मूल्य ^ = '']")
चाड मोरन

1
@Dykam: जो यह है, मेरे उदाहरण-कोड के मामले में। लेकिन आपकी बात अभी भी मान्य है।
cllpse

4
@ सच, ​​यह वास्तव में समान है और आपके द्वारा लिखित फ़ंक्शन के नक्शे
माइक रॉबिन्सन

19

टिप्स एंड ट्रिक्स की और साथ ही कुछ ट्यूटोरियल्स की भी बात करें। मुझे ट्यूटोरियल की ये श्रृंखला मिली ( जेफरी वे द्वारा "निरपेक्ष शुरुआती के लिए वीडियो श्रृंखला") बहुत मददगार हैं।

यह उन डेवलपर्स को लक्षित करता है जो 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- HTML ...

<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 चल रहा है () फ़ंक्शन ब्राउज़र को पुनरावृत्ति के दौरान लॉक करता है, और / या इंटरनेट एक्सप्लोरर ' क्या आप इस स्क्रिप्ट को जारी रखना चाहते हैं ' संदेश को पॉप अप करते हैं , तो यह समाधान दिन को बचाएगा।

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() {} );

एक वैकल्पिक 2 पैरामीटर आपको पुनरावृत्तियों के बीच गति / विलंब को निर्दिष्ट करने देता है जो एनिमेशन के लिए उपयोगी हो सकता है ( निम्न उदाहरण पुनरावृत्तियों के बीच 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
इस मामले में (कोई भी इरादा नहीं) मैं केवल एक बार "इस" का उपयोग कर रहा हूं। कैशिंग की कोई आवश्यकता नहीं है।
क्लेप्स जूल 15'09

1
एक छोटी सी नोक। हालांकि इस मामले में यह मायने नहीं रखता है कि DOM पर अतिरिक्त परिवर्तन करना हमेशा एक बुरा विचार है। उदाहरण के लिए कहें जिस तत्व पर आप पहले से ही मंडरा रहे हैं, वह वर्ग "होवर" था। आप इस वर्ग को हटाकर इसे फिर से जोड़ देंगे। तुम उस के साथ चारों ओर प्राप्त कर सकते हैं $(this).siblings().removeClass("hover")। मुझे पता है कि यह एक छोटी सी बात है, लेकिन हर बार जब आप DOM बदलते हैं तो एक और ब्राउजर redraw ट्रिगर हो सकता है। अन्य संभावनाओं में DOMAttrModified से जुड़ी घटनाएं या तत्व की ऊंचाई को बदलने वाली कक्षाएं शामिल हैं जो अन्य श्रोताओं को "आकार बदलने" में बदल सकती हैं।
धीरे

1
यदि आप कैश का उपयोग करना चाहते हैं और डोम परिवर्तन को कम कर सकते हैं तो आप ऐसा कर सकते हैं। cache.not(this).removeClass("hover")
ग्रेडबोट

@gradbot: मैं आपकी पिछली दो टिप्पणियों को नहीं समझता। क्या आप विस्तार कर सकते हैं?
Randomblue

15

मुझे ऐलान पसंद है $this अनाम फ़ंक्शंस की शुरुआत में वैरिएबल , इसलिए मुझे पता है कि मैं इस बात का संदर्भ दे सकता हूं।

इस तरह:

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

    // Other code
});

12
मैं "वो" का उपयोग करता हूं :)
cllpse

2
आरओए: हां, यह एसिड :) आप भी खुद को संदर्भित करने के लिए एक गुमनाम समारोह सक्षम करने के लिए arguments.callee का उपयोग कर सकते हो जाएगा
JoeBloggs

5
जो - बस एक सिर, कैलली ईसीएमएस्क्रिप्ट 5 और सख्त मोड के साथ दूर हो जाएगा। देखें: ejohn.org/blog/ecmascript-5-strict-mode-json-and-more
माइक रॉबिन्सन

@ जो आप इसे एक नाम दे सकते हैं, बस IE के quirks से सावधान रहें ।
एलेक्स

एक मानक चर की तुलना में jQuery वस्तु चर को इंगित करने के लिए चर नाम की शुरुआत में $ का उपयोग करने का महान उदाहरण भी। किसी भी वैरिएबल की शुरुआत में जो कि एक jQuery ऑब्जेक्ट को कैशिंग कर रहा है, को जोड़कर, आप तुरंत इसे देखकर जानते हैं कि आप वेरिएबल पर jQuery फ़ंक्शंस कर सकते हैं। कोड को और अधिक पठनीय बनाता है।
लोकलपीसीग्युई

14

पुन: उपयोग के लिए चर में jQuery वस्तुओं को बचाओ

किसी jQuery ऑब्जेक्ट को एक वैरिएबल में सेव करने से आप इसे खोजने के लिए DOM के माध्यम से वापस खोजे बिना इसका पुनः उपयोग कर सकते हैं।

(जैसा कि @Louis ने सुझाव दिया है, अब मैं यह दर्शाने के लिए $ का उपयोग करता हूं कि एक चर 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आदि।

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.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, और सभी तीन क्लोजर इसे संदर्भित करते हैं। जब लूप खत्म हो जाता है, तो अंतिम मान i3 है, और someArrary[3]है undefined। आप किसी अन्य फ़ंक्शन को कॉल करके इसके चारों ओर काम कर सकते हैं जो आपके लिए क्लोजर बनाएगा। या आप jQuery उपयोगिता का उपयोग करते हैं जो यह मूल रूप से आपके लिए करेगा:

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

अब, जब आप कार्यों को लागू करते हैं, तो आपको अपेक्षित रूप से सामग्री १, २ और ३ के साथ तीन अलर्ट मिलते हैं।

सामान्य तौर पर, यह ऐसा कुछ भी नहीं है जिसे आप स्वयं नहीं कर सकते, लेकिन यह अच्छा है।


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");
    }
}

इसके लिए कई उपयोग-मामले नहीं हैं। कभी कम नहीं; मुझे लगता है कि यह साफ है :)


अपडेट करें

बस अगर आप टिप्पणी-पठन-प्रकार नहीं हैं, तो ThiefMaster बताता है कि टॉगलक्लास एक बूलियन मूल्य को स्वीकार करता है , जो निर्धारित करता है कि एक वर्ग जोड़ा जाना चाहिए या हटा दिया जाना चाहिए। इसलिए जहाँ तक ऊपर मेरा उदाहरण कोड है, यह सबसे अच्छा तरीका होगा ...

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

2
यह साफ है, और इसके कुछ दिलचस्प उपयोग हैं, लेकिन यह jQuery के लिए कुछ खास नहीं है ... यह सिर्फ कुछ है जो आप किसी भी जावास्क्रिप्ट ऑब्जेक्ट पर कर सकते हैं।
टीएम।

1
धन्यवाद :) ... यह बुनियादी जावास्क्रिप्ट है; हाँ। लेकिन मेरा तर्क है कि jQuery जावास्क्रिप्ट है। मैं यह दावा नहीं कर रहा हूं कि यह jQuery- विशिष्ट है।
cllpse

7
इस विशिष्ट मामले में आप वास्तव में उपयोग करना चाहते हैं $('selector').toggleClass('name_of_the_class', b);
ThiefMaster

9

अपडेट करें:

बस इस स्क्रिप्ट को साइट पर शामिल करें और आपको फ़ायरबग कंसोल मिलेगा जो किसी भी ब्राउज़र में डीबगिंग के लिए पॉप अप करता है। पूरी तरह से चित्रित नहीं है, लेकिन यह अभी भी बहुत उपयोगी है! जब आप कर रहे हैं तो इसे हटाने के लिए याद रखें।

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

इस लिंक को देखें:

सीएसएस ट्रिक्स से

अपडेट: मुझे कुछ नया मिला; इसका JQuery हॉटबॉक्स है।

JQuery के हॉटबॉक्स

Google, Google कोड पर कई जावास्क्रिप्ट पुस्तकालयों की मेजबानी करता है। इसे वहां से लोड करने से बैंडविड्थ की बचत होती है और यह जल्दी से लोड होता है इसे पहले ही कैश किया जा चुका है।

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

ईरान में ppl google api के साथ लोड किए गए वेब पेज नहीं देख सकते हैं। वास्तव में Google ने ईरानियों को Google कोड तक पहुंचने के लिए प्रतिबंधित कर दिया है। सो -1
एलेरिज़ा एलियादेरानी

मुझे अभी पता चला है कि आप किसी भी ब्राउज़र में फायरबग का उपयोग कर सकते हैं। वह तो कमाल है।
तेबो

9

छद्म चयनकर्ताओं के लिए संभव हो तो फ़िल्टरिंग विधियों का उपयोग करें ताकि jQuery, क्वेरीसेलरऑल का उपयोग कर सके (जो कि सीज़ल की तुलना में बहुत तेज़ है)। इस चयनकर्ता पर विचार करें:

$('.class:first')

एक ही चयन का उपयोग करके किया जा सकता है:

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

जो कि तेज होना चाहिए क्योंकि '.class' का प्रारंभिक चयन QSA संगत है


@ Nyuszika7H मुझे लगता है कि आप इस बिंदु को याद कर रहे हैं। मुद्दा यह है कि QSA अधिकांश छद्म चयनकर्ताओं का अनुकूलन नहीं कर सकता है, इस प्रकार $ ('वर्ग: 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 वस्तु से तत्वों को हटा। इस स्थिति में: "एक" या "दो" पाठ न रखने वाले सभी झूठे तत्वों को हटा दिया जाएगा।


क्या केवल "प्रत्येक" का उपयोग करना और स्विच के अंदर मार्जिन परिवर्तन को स्थानांतरित करना सरल नहीं है?
असंतुष्टगीत

मेरे उत्तर को अपडेट किया। कृपया मुझे बताएं कि क्या मैं खुद को स्पष्ट (एर) कर रहा हूं
क्लैपसे

क्या यह वास्तव में झूठे तत्वों को हटाता है? यह तत्वों की एक फ़िल्टर्ड सूची के साथ चेतावनी देता है।
चेसो

1
फ़िल्टर फ़ंक्शन jQuery ऑब्जेक्ट के अंदर संग्रह से तत्वों को निकालता है। यह DOM को प्रभावित नहीं करता है।

6
अपने फ़िल्टर फ़ंक्शन में, आप बस लिख सकते हैं: वापसी !! $ (यह) .text ()। Match (/ One। Two /); ;)
विन्सेन्ट

8

एक इनपुट तत्व के प्रकार को बदलना

मैं इस मुद्दे में भाग गया जब मैं पहले से ही डोम से जुड़े इनपुट तत्व के प्रकार को बदलने की कोशिश कर रहा था। आपको मौजूदा तत्व को क्लोन करना होगा, पुराने तत्व से पहले सम्मिलित करना होगा, और फिर पुराने तत्व को हटाना होगा। अन्यथा यह काम नहीं करता है:

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

थर्ड-पार्टी jQuery स्क्रिप्ट्स का विवेकपूर्ण उपयोग, जैसे फॉर्म फील्ड सत्यापन या url पार्सिंग। यह देखने लायक है कि आप के बारे में क्या जानते हैं जब आप अगली बार एक जावास्क्रिप्ट आवश्यकता का सामना करेंगे।


7

लाइन-ब्रेक और चेनबिलिटी

जब संग्रह पर कई कॉल का पीछा ...

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

आप लाइनब्रेक के साथ पठनीयता बढ़ा सकते हैं। ऐशे ही:

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

4
इस मामले में, पहला अधिक पठनीय है, लेकिन हाँ, कुछ मामले हैं जब लाइन टूटने से पठनीयता बढ़ जाती है।
nyuszika7h

7

एनीमेशन को ट्रिगर करते समय .stop (सही, सत्य) का प्रयोग करें। यह एनीमेशन को दोहराने से रोकता है। यह रोलओवर एनिमेशन के लिए विशेष रूप से सहायक है।

$("#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 टीम ने HTML5 कस्टम डेटा- * विशेषताओं के लिए समर्थन जोड़ा है । और जैसे कि वह पर्याप्त नहीं था; उन्होंने स्टेरॉयड के साथ डेटा फ़ंक्शन को बलपूर्वक खिलाया है, जिसका अर्थ है कि आप JSON के रूप में जटिल वस्तुओं को सीधे अपने मार्कअप में स्टोर करने में सक्षम हैं।

HTML:

<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!
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.