JQuery के 1.6 में नवाचार

हाल ही में (3 मई को), jQuery 1.6 जारी किया गया था और यहाँ इस js लाइब्रेरी में क्या नया है, आइए देखें।

मज़ेदार बात यह है कि नई रिलीज़ में महत्वपूर्ण परिवर्तन हैं जो कि jQuery के पिछले संस्करणों के साथ असंगत हैं। और परिणामस्वरूप, जब एक नए संस्करण पर स्विच किया जाता है, तो यह काफी संभव है कि आपको मौजूदा कोड को देखना और संशोधित करना होगा।

महत्वपूर्ण परिवर्तन

पुराने संस्करणों के लिए कोड को नीचे लाने वाले परिवर्तन नीचे वर्णित हैं।

डेटा विशेषताओं में एक्सेस डेटा

अब इन विशेषताओं में मानों की पहुंच W3C HTML5 युक्ति विनिर्देश से मेल खाती है, अर्थात ऊंट-केस प्रारूप में चाबियाँ भेजनी चाहिए।

<div id="div1" data-test-value="123"></div> 

JQuery 1.5 के लिए उन्होंने इस तरह लिखा है:

 var tv = $('#div1').data('test-value'); // => 123 //   var d = $('#div1').data(); // => { "test-value": 123 } tv = d['test-value']; // => 123 

अब jQuery 1.6 के लिए आपको इस तरह लिखना होगा:

 var tv = $('#div1').data('testValue'); // => 123 //   var d = $('#div1').data(); // => { "testValue": 123 } tv = d.testValue; // => 123 

.prop (), .removeProp () और .attr ()

इसके अलावा अब तत्वों के गुणों को उनके गुणों से अलग किया जाता है। विशेषताओं तक पहुंचने के लिए, .attr () विधि बनी हुई है, और तत्व गुणों को एक्सेस करने के लिए जो गतिशील रूप से बदल सकते हैं (विशेषता मान एक ही समय में नहीं बदलते हैं), अब आपको इसे .prop () के माध्यम से करने की आवश्यकता है। सबसे सरल उदाहरण <input type="checkbox" /> का व्यवहार होगा: 1.5 में, .attr('checked') लिए एक कॉल ध्वज की सेटिंग के आधार पर सही / गलत लौटा, संस्करण 1.6 में .attr('checked') एक स्ट्रिंग मान लौटाएगा। , यदि विशेषता अनुपस्थित है, और विशेषता को .prop('checked') लिखा जाता है, और ध्वज स्थिति को .prop('checked') माध्यम से प्राप्त किया जाना चाहिए।
आप यहां उदाहरणों के साथ खेल सकते हैं: 1.5 jsfiddle.net/dV27a/1 पर , 1.6 jsfiddle.net/9zEC9/1 पर
.removeProp () का उपयोग अत्यधिक सावधानी के साथ किया जाना चाहिए कुछ ब्राउज़रों में गड़बड़ से भरा हुआ।

दूसरे उदाहरण में, आप Google Chrome में एक गड़बड़ देख सकते हैं, और यह ब्राउज़र की एक गड़बड़ है - यह jQuery के बिना पुन: पेश करता है। गड़बड़ इस प्रकार है: यदि <input type="checkbox" /> तत्व को उसके जेएस-ऑब्जेक्ट मॉडल के माध्यम से चेक की गई संपत्ति पर सेट किया जाता है, तो ध्वज शुरू में बदल जाता है, लेकिन यदि आप इस संपत्ति को delete cb.checked हैं तो delete cb.checked , तो संपत्ति बदलने का कारण नहीं delete cb.checked है। ध्वज स्थिति परिवर्तन।

उपरोक्त के संबंध में, बूलियन विशेषताओं के लिए कुछ बदलाव हैं (जैसे कि चेक किया गया, चयनित और जैसे), अब .attr('checked', true/false) निर्दिष्ट विशेषता को जोड़ता है या हटाता है (और हमें याद है कि अब यह फ़ंक्शन ठीक काम करता है एक विशेषता के साथ, एक वस्तु संपत्ति नहीं)।

गैर-महत्वपूर्ण परिवर्तन

एक्स्टेंसिबिलिटी .attr () और .val ()

नए संस्करण में, jQuery.attrHooks ऑब्जेक्ट .val() jQuery.attrHooks ऑब्जेक्ट .attr() माध्यम से .attr() फ़ंक्शंस के संचालन को प्रभावित करने की क्षमता jQuery.valHooks । उदाहरण के लिए:

 jQuery.attrHooks.selected = { set: function( elem, value ) { if ( value === false ) { jQuery.removeAttr(elem, “selected”); return value; } } }; 

jQuery.map (ऑब्जेक्ट)

अब jQuery.map () फ़ंक्शन न केवल एक सरणी ले सकता है, बल्कि इसके पहले तर्क के रूप में एक ऑब्जेक्ट भी ले सकता है, हालांकि, यह किसी भी मामले में मूल्यों की एक सरणी लौटाएगा।

 $.map({ f: 1, s: 2 }, function(v, k) { return ++v; }); // => [ 2, 3 ] 

सीएसएस डिपेंडेंट चेंज

डेवलपर्स ने "+ =" और "- =" निर्देशों का उपयोग करके, उनके मान के आधार पर .css() फ़ंक्शन के साथ तत्वों के सीएसएस गुणों को बदलने की क्षमता जोड़ी, जैसा कि .animate() में किया गया है।

 $("#item").css("left", "+=10px"); 

आस्थगित वस्तु

1.5 में जोड़े गए ऑब्जेक्ट्स को स्थगित करने के लिए सुधार भी किए गए थे (उन लोगों के लिए जो अभी तक उनके बारे में नहीं जानते हैं, मैं आपको jQuery Deferred Object (विस्तृत विवरण) पढ़ने की सलाह देता हूं)

deferred.always ()

जब आप चाहते हैं कि किसी हैंडलर को किसी भी परिणाम पर बुलाया जाए, तो आपको पहले deferred.then(handler, handler) लिखना होगा, और अब आप deferred.always(handler) लिख सकते हैं

deferred.pipe ()

यह एक नई विधि है और एक साथ कई समस्याओं को हल करती है, सबसे पहले, इसका उपयोग करके आप हैंडलर द्वारा मापदंडों को दिए गए मानों के फ़िल्टर बना सकते हैं, दूसरे, आप आस्थगित कार्यों की श्रृंखला बना सकते हैं (उदाहरण के लिए, अतुल्यकालिक अनुरोध - यह विषय मेरे पिछले लेख में टिप्पणियों में उठाया गया था। और अब डेवलपर्स ने इस समस्या का समाधान प्रदान किया है)।
फ़िल्टर का एक उदाहरण (deferred.reject के लिए - इसी तरह), दूसरे हैंडलर में, पहले और एकमात्र पैरामीटर को वह मूल्य मिलता है जो पहले हैंडलर देता है।

 var defer = $.Deferred(), filtered = defer.pipe(function( value ) { return value * 2; }); defer.resolve( 5 ); filtered.done(function( value ) { alert( "Value is ( 2*5 = ) 10: " + value ); // value = 10 }); 

रन: jsfiddle.net/txzPj

अतुल्यकालिक अनुरोधों की श्रृंखला का एक उदाहरण, दूसरा हैंडलर उन मापदंडों को पारित करेगा जिनके साथ दूसरी आस्थगित वस्तु पूरी हो जाएगी।

 var request = $.ajax( '/echo/json/', { dataType: "json", type: 'post', data: { json: '{ "test": 8 }' }, delay: 3 } ), chained = request.pipe(function( data ) { console.log(data); alert('first response'); return $.ajax( '/echo/json/', { type: 'post', data: { delay: 3, json: '' + data.test } } ); }); chained.done(function( data ) { console.log(data); alert('second response'); }); 

रन: jsfiddle.net/5gfS8

एनीमेशन

स्वयं एनीमेशन प्रक्रिया में सुधार के अलावा, संस्करण 1.6 में आप आस्थगित वस्तुओं का उपयोग कर सकते हैं जो एनीमेशन से बंधे हैं। नहीं, .animate () विधि (और उसके संक्षिप्तीकरण .fadeOut (), slideUp (), आदि) स्थगित नहीं लौटे, इसके बजाय यह संभव है कि किसी भी jquery वस्तु का उपयोग पैरामीटर के रूप में $ .when () फ़ंक्शन के लिए किया जाए, और यदि बीच में हो। यदि एनीमेशन के साथ कोई तत्व चुना गया है, तो परिणामी आस्थगित वस्तु पूरे एनीमेशन के पूरा होने के बाद पूरी हो जाएगी।

 $(".elements").fadeOut(); $.when($(".elements")).done(function(elements) { //    ".elements"   }); 

jQuery.holdReady ()

यह विधि आपको तैयार इवेंट हैंडलर के निष्पादन को निलंबित करने की अनुमति देती है, इसका उपयोग मुख्य रूप से प्लगइन डेवलपर्स (कम से कम, jQuery के लेखकों के रूप में) द्वारा किया जाएगा।

 jQuery.holdReady( true ); //    //  - ,    //      ,      jQuery.holdReady( false ); 

चयनकर्ता ": फोकस"

अब उस तत्व को ढूंढना काफी आसान हो गया है जिस पर दस्तावेज़ में ध्यान केंद्रित किया गया है।

DOM ट्रैवर्सल फ़ंक्शंस में अतिरिक्त सुविधाएँ

नए संस्करण में, उन्होंने jquery ऑब्जेक्ट्स को .find() , .closest() और .is() फ़ंक्शंस, अंत में पास करने की क्षमता को जोड़ा ...

---

इस लेख का पाठ blog.jquery.com/2011/05/03/jquery-16-released (अनुवाद नहीं है, हालांकि यह पाठ के बहुत करीब है) की एक नि: शुल्क रीटेलिंग है।