JQuery अजीब वाक्यविन्यास

Question

मैं JQuery के लिए नया हूं और JSON ऑब्जेक्ट्स के लिए क्वेरी के परिणामों के आधार पर गतिशील रूप से HTML बनाने के लिए इसका उपयोग करने का प्रयास कर रहा हूं। JQuery API साइट पर किसी भी तरह (http://api.jquery.com/jQuery.getJSON/) मुझे यह उदाहरण मिला जहां मैं वाक्यविन्यास को समझ नहीं पा रहा हूं और मुझे यह कोई स्पष्टीकरण नहीं मिल रहा है कि यह वाक्यविन्यास कानूनी क्यों है या इसका उपयोग कैसे करें।

$.getJSON('ajax/test.json', function(data) { 
    var items = []; 

    $.each(data, function(key, val) { 
    items.push('<li id="' + key + '">' + val + '</li>'); 
    }); 

    // *** THIS IS THE PART THAT IS WEIRD *** 
    $('<ul/>', { 
    'class': 'my-new-list', 
    html: items.join('') 
    }).appendTo('body'); 
}); 

क्या कोई मुझे दस्तावेज में संदर्भित कर सकता है जो इसके ऊपर टिप्पणी के साथ वाक्यविन्यास बताता है?

Answer 1

jQuery दस्तावेज़ here देखें। विशेष रूप से अनुभाग हकदार:

नए तत्वों बनाना

यह खंड jQuery(html, props) अधिभार के उपयोग पर विवरण शामिल हैं, संस्करण 1.4 में जोड़ा। यह आपके उदाहरण में उपयोग किया जाने वाला अधिभार है। यह html स्ट्रिंग तर्क लेता है जिसका उपयोग एक नया DOM तत्व बनाने के लिए किया जाता है और फिर props ऑब्जेक्ट तर्क में निहित विशेषताओं को जोड़ता है।

Answer 2

$('<ul/>', { 
    'class': 'my-new-list', 
    html: items.join('') 
}).appendTo('body'); 

यह आसानी से 'मेरी-नई सूची' और वस्तुओं की सामग्री के साथ एक नया यूएल तत्व बनाता है। ऐसा लगता है कि एक संरचना का निर्माण करेगा:

<ul class='my-new-list'> 
<li id="key1">val1</li><li id="key2">val2</li><li id="key3">val3</li> 
</ul> 

इस के लिए बस कम हाथ है:

$('<ul></ul>').attr('class', 'my-new-list').attr('html', items.join('')).appendTo('body'); 

प्रलेखन: http://api.jquery.com/jQuery/#jQuery2

Answer 3

इसका मतलब है कि आप के लिए my-new-list वर्ग के साथ एक <ul> तत्व जोड़ रहे हैं तन। <li> आइटम आप items सरणी में निर्माण किया गया है तो, <ul> लिए जोड़ रहे हैं तो आप की तरह कुछ के साथ खत्म हो जाएगा:

<ul class="my-new-list"> 
    <li id="key1">val1</li><li id="key2">val2</li>... 
</ul> 

Answer 4

बाहर चेक jQuery ($) के लिए दस्तावेज़। विशेष रूप से, भाग अधिभार jQuery(html, props) के साथ काम को देखो:

एचटीएमएल: एक स्ट्रिंग एक एकल, स्टैंडअलोन HTML तत्व (जैसे या) को परिभाषित।

प्रोप: नव निर्मित तत्व पर कॉल करने के लिए विशेषताओं, घटनाओं और विधियों का नक्शा।

इसके अलावा अधिक जानकारी नहीं है नीचे

:

jQuery 1.4, jQuery के लिए दूसरा तर्क (के रूप में) एक नक्शे के गुण को पारित किया जा सकता है कि का सुपरसेट से मिलकर स्वीकार कर सकते हैं .attr() विधि। इसके अलावा, किसी भी घटना प्रकार को पारित किया जा सकता है, और jQuery विधियों के बाद कहा जा सकता है: वैल, सीएसएस, एचटीएमएल, टेक्स्ट, डेटा, चौड़ाई, ऊंचाई या ऑफसेट। "कक्षा" नाम को में उद्धृत किया जाना चाहिए क्योंकि यह एक जावास्क्रिप्ट आरक्षित शब्द है, और "className" का उपयोग नहीं किया जा सकता है क्योंकि यह सही विशेषता नाम नहीं है।

Answer 5

$('<ul/>', { 
    'class': 'my-new-list', 
    html: items.join('') 
    }).appendTo('body'); 

jQuery में, डोम तत्वों के लिए खोज के अलावा, आप भी उन्हें बना सकते हैं।

$('<ul/>') // or $('<ul></ul>') 

यह एक नया <ul> तत्वों बनाता है और एक jQuery वस्तु के रूप में यह देता है।

ऑब्जेक्ट पारित किया गया दूसरा पैरामीटर इसके गुण सेट करता है।इस प्रकार इस बनाने:

<ul class="my-new-list"><li id="one">O Hai</li></ul> 

यह <ul> तो body में जोड़ा जाता है।

Answer 6

वह हिस्सा जो आप समझ में नहीं आता है वह $ फ़ंक्शन का एक पूरी तरह से अलग उपयोग है। ज्यादातर मामलों में आप एक चयनकर्ता के रूप में $ फ़ंक्शन का उपयोग करते हैं जो jquery तत्वों (jquery ऑब्जेक्ट्स के रूप में लिपटे डोम नोड्स) का एक सेट देता है जिसे आप किसी प्रकार का ऑपरेशन कर सकते हैं।

इस मामले में आप डीओएम नोड्स (वास्तव में, jquery ऑब्जेक्ट्स) बनाने के लिए $ फ़ंक्शन का उपयोग कर रहे हैं और फिर उन ऑब्जेक्ट्स पर आप कार्य कर सकते हैं, जैसे कि उदाहरण में दिखाया गया है।

यह

var node = document.createElement("ul"); 
node.setAttribute("class", "my-new-list"); 
node.innerHTML = items.join(''); 

document.body.appendChild(node); 

Answer 7

$('<ul/>') 

की तरह कुछ बनाता लेखन डोम

$('<ul/>', {'class':'my-new-list'}) 

सेट एक कुंजी मान का उपयोग कर उस तत्व के लिए चर Dom से जुड़ी नहीं एक नया UL तत्व को काफी equavalent है जोड़ी। तो अब आपके पास UL तत्व है जो मेरी नई सूची के वर्ग के साथ है।

$('<ul/>', {'class':'my-new-list', 'html': items.join('')}) 

यह तत्व एक स्ट्रिंग में एक साथ शामिल होने के ऊपर बनाया LI तत्वों की सरणी ले जा रहा है (इस मामले में कोई सीमांकक के साथ, .join('-') प्रत्येक LI तत्व के बीच एक हाइफन डाल करती है) और के भीतरी एचटीएमएल को बताए UL।

$('<ul/>', {'class':'my-new-list', 'html': items.join('')}).appendTo('body'); 

इतना ही नहीं बल्कि, यह नव निर्मित UL तत्व इस बच्चे के साथ यह पृष्ठ पर दिखाई बनाने BODY तत्व को LI तत्वों जोड़ देता है।