jquery के बजाय कच्चे जावास्क्रिप्ट (उदाहरण निम्नानुसार)

यह मेरा पहला प्रश्न है। मेरे पास निम्न jquery कोड है:jquery के बजाय कच्चे जावास्क्रिप्ट (उदाहरण निम्नानुसार)

$(document).ready(function(){ 
    $("a").click(function(){ 
     $(this).parent("li").css({textDecoration: "line-through"}); 
     return false; 
    }); 
});

जो ठीक काम करता है। यह किसी भी क्लिक किए गए एंकर के मूल ली के माध्यम से हमला करता है (एचटीएमएल में कई एंकर और सूचियां हैं, केवल एक ही नहीं)। लेकिन मुझे बस यह कार्यक्षमता चाहिए, और कुछ नहीं। क्या यह पूरी jquery लाइब्रेरी को शामिल करने के लिए एक overkill नहीं है?

दुर्भाग्यवश मुझे कच्चे जावास्क्रिप्ट को बहुत अच्छी तरह से नहीं पता, क्या कोई इसे मेरे लिए परिवर्तित कर सकता है? मैं आभारी रहूँगा।

संपादित करें: वाह मैं गति और उत्तर की गुणवत्ता पर चकित हूं! तो सबसे पहले आप सभी को एक बड़ा धन्यवाद! मैं या तो जोनाथन (संपादन 2: रोलैंड) समाधान के लिए जाऊंगा या बस बाद में jquery शामिल करूँगा। एक बार फिर धन्यवाद!

स्रोत

2010-02-09 fractalbit

"यदि यह तोड़ा नहीं गया है ..." आप इसे शुद्ध जावास्क्रिप्ट में परिवर्तित कर सकते हैं, लेकिन आप क्रॉस-ब्राउज़र संगतता को तोड़ने का जोखिम चलाते हैं। –

मैं जेएस कोड के माध्यम से कदम उठाने की कोशिश करता हूं और देखता हूं कि उस स्क्रिप्ट के लिए कौन से jQuery फ़ंक्शंस का उपयोग किया जाता है, और बाकी सब कुछ हटा दें। – Dor

@ रॉबर्ट हार्वे: आम तौर पर हां बोलना यह अच्छी सलाह है। लेकिन ओपी क्या हासिल करने की कोशिश कर रहा है उसे काफी सरल ब्राउज़र स्वतंत्र तरीके से हल किया जा सकता है। (मूल डीओएम कार्यान्वयन मानते हैं) @ डोर: यदि ओपी वास्तव में जावास्क्रिप्ट में अच्छी तरह से ज्ञात नहीं है, तो jQuery के माध्यम से कदम उठाने से वह खुश नहीं होगा। क्या तुमने किया? मेरा मतलब है, jQuery का कोई अपमान नहीं है - यह ग्रह पर सबसे महान जेएस libs में से एक है, लेकिन मैं उस कोड का विश्लेषण करने के लिए एक शुरुआती अभ्यास के रूप में इसकी सिफारिश नहीं करता। –

निम्नलिखित इसे ब्राउज़र में स्वतंत्र तरीके से प्राप्त करेंगे।

<html> 

    <body onload="loaded()"> 
     ...content goes here.... 
     <script> 
      function linkClickHandler(){ 
       var parentNode = this.parentNode; 
       if(parentNode.tagName.toLowerCase()==="li"){ 
        parentNode.style.textDecoration = "line-through"; 
       } 
       return false; 
      } 

      function loaded(){ 
       for (var i=0, links = document.links, numLinks = links.length; i<numLinks; i++){ 
        links[i].onclick = linkClickHandler; 
       } 
      } 
     </script> 
    </body> 
</html>

स्रोत

2010-02-09 21:07:55

jQuery $ (दस्तावेज़) नहीं है .ready() विधि window.onload() से अलग है? – Dor

डोर: शायद। मुझे लगता है कि ओपी क्या हासिल करने की कोशिश कर रहा है, यह पुराना स्कूल समाधान ठीक काम करता है। –

jQuery 'तैयार' घटना काफी जटिल है: यह 'DOMContentLoaded' ईवेंट का उपयोग करता है जहां उपलब्ध (विश्वसनीय), आईई (भरोसेमंद नहीं) पर एक भयानक संपत्ति-पढ़ने-परामर्श हैक, और हर जगह अन्य 'ऑनलोड' (विश्वसनीय 'पर वापस आ जाता है , लेकिन बाद में आग)। यदि आप सामग्री-लोड पर चलाना चाहते हैं, तो केवल 100% विश्वसनीय विधि (चाहे jQuery या कच्ची जावास्क्रिप्ट) दस्तावेज़ के अंत में ट्रिगर '

क्या यह पूरी jquery लाइब्रेरी को शामिल करने के लिए एक ओवरकिल नहीं है?

आप मुझे बताओ। आप Google द्वारा होस्ट की गई लाइब्रेरी की सेवा कर सकते हैं, जिसे पहले से ही क्लाइंट-साइड में कैश किया जा सकता है।

मेरी राय में, लगातार होना महत्वपूर्ण है। यदि आप jQuery के लिए उपयोग किया जाता है, तो इसका उपयोग क्यों जारी नहीं है? आपका कोड बनाए रखना आसान होगा।

तुम मेरे पहले सवाल दिलचस्प में से एक हो सकते हैं: When is it acceptable to use jQuery?

स्रोत

2010-02-09 21:06:06

+1 सीडीएन – Pharabus

आप कच्चे जावास्क्रिप्ट के माध्यम से कर यदि आप प्रत्येक ली

<ul> 
    <li id='distinctID'><a href="javascript:strikeThrough('distinctId')">Click Me</a></li> 
</ul>

करने के लिए प्रत्येक लंगर के लिए एक onclick घटना और एक आईडी जोड़ने की जरूरत करने जा रहे हैं

अपने html परिवर्तन

function strikeThrough(id){ 
    var li = document.getElementById(id) 
    li.style. textDecoration = "line-through" 
}

है कि thats अपने जावास्क्रिप्ट समारोह

0,123,

मैं अनुशंसा करता हूं कि आप केवल JQuery शामिल करें ताकि आपको

स्रोत

2010-02-09 21:06:29 RHicke

के उपयोग का उल्लेख करने के लिए +1 नहीं, आपको इनलाइन ईवेंट हैंडलर विशेषताओं की आवश्यकता नहीं है, आप जावास्क्रिप्ट से 'element.onclick = function' लिख सकते हैं और यह लगभग हमेशा सबसे अच्छी बात है। निश्चित रूप से (हमेशा) 'जावास्क्रिप्ट:' छद्म-यूआरएल का उपयोग न करें। – bobince

चिह्नित करने के लिए आपको आईडी का एक टन जोड़ने की आवश्यकता नहीं है यदि आप कभी भी अपनी वेबसाइट के साथ और अधिक नहीं करने जा रहे हैं, तो शायद यह अधिक हो गया है। एक क्रॉस-ब्राउजर तरीके से जो छोटा अस्पष्ट होता है उसके बराबर करना सिरदर्द है। यह jQuery का उपयोग करने का मूल्य है: एक बार कुछ लिखना और इसे आमतौर पर बिना किसी परेशानी के काम करना। यदि आपको लगता है कि आपके पृष्ठ पर आगंतुकों के लिए अतिरिक्त 20 केबी बैंडविड्थ एक अवांछित बोझ है, तो ईवेंट हैंडलर, डोम और सीएसएस मैनिपुलेशन पर पढ़ना शुरू करें।

आप कहते हैं कि आप जेएस अच्छी तरह से नहीं जानते ... क्या आपने किसी अन्य व्यक्ति से इस jQuery उपयोग का उत्तराधिकारी किया है या आपने इसे किसी उदाहरण से कॉपी किया है?

स्रोत

2010-02-09 21:07:52

परिवर्तित एक कभी कभी एक कच्चे जावास्क्रिप्ट कोड को jQuery कोड से सरल समारोह लगता है एक क्रॉस ब्राउज़र बग, एक ब्लोट काम करता है, और एक संभावनाओं कि अपनी आवश्यकताओं के लिए भविष्य में बढ़ेगा के साथ पकड़ लेंगे।

ऐसे कार्यों के लिए jQuery का उपयोग करना अधिक नहीं है, मेरा विश्वास करो। अब आप भविष्य में jQuery की स्वच्छ सुविधा के बारे में और क्या नहीं चाहते हैं। jQuery छोटा रूप में छोटा है, पेज लोड के लिए कोई अंतर नहीं करेगा।

स्रोत

2010-02-09 21:09:45

गैर jQuery दृष्टिकोण:

[...your html...] 

    <script type="text/javascript"> 
     var anchors = document.getElementsByTagName("a"); 
     var numAnchors = anchors.length; 
     for(var i = 0; i < numAnchors; i++) { 
      var anchor = anchors[i]; 
      anchor.onclick = function() {   
       var parentEl = this.parentNode; 
       if(parentEl.tagName.toLowerCase() == "li"){ 
        parentEl.style.textDecoration = "line-through"; 
       } 
       return false; 
      } 
     } 
    </script> 
</body>

जब आप इसे अपने दस्तावेज़ के बिल्कुल नीचे तक जोड़ने तुम भी पेज लोड के लिए एक ऑनलोड हैंडलर जरूरत नहीं है।

स्रोत

2010-02-09 21:48:12 Alex

संबंधित मुद्दे