187

आप HTML दस्तावेज़ में जावास्क्रिप्ट फ़ाइल को ठीक से कैसे लिंक करते हैं?

दूसरे, आप जावास्क्रिप्ट फ़ाइल के भीतर jQuery का उपयोग कैसे करते हैं?

javascript jquery html

3

मुझे यहाँ उत्तर पसंद हैं: मुझे HTML मार्कअप में <script> टैग कहां लगाना चाहिए?

— कारम्बा

@caramba लेकिन क्या होगा यदि मुझे JS को कुछ और जटिल करने की आवश्यकता है? मैं इसे एक फ़ाइल लिखने की कोशिश कर रहा हूं ताकि मैं const fs = require('fs');नोड से कॉल करूं ।

— नाथन

1

नोड के साथ @ नथन। जेएस यह एक पूरी तरह से अलग कहानी है। इस उम्मीद को पढ़ें यह मदद करता है

— कारम्बा

मुझे एक वर्कअराउंड मिला, लेकिन मुझे यकीन है कि किसी और को लिंक के लिए खुशी होगी!

— नाथन

189

सबसे पहले आपको http://jquery.com/ से JQuery लाइब्रेरी को डाउनलोड करने की आवश्यकता है और फिर jquery लाइब्रेरी को अपने html हेड टैग के भीतर निम्न तरीके से लोड करें

तो फिर आप परीक्षण कर सकते हैं कि jquery लोडिंग स्क्रिप्ट के बाद jquery आपके jquery कोड को कोड करके काम कर रहा है या नहीं

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
   $(function(){
      alert("My First Jquery Test");
   });
</script>

</head>
<body><!-- Your web--></body>
</html>

यदि आप अपनी jquery स्क्रिप्ट फ़ाइल का उपयोग करना चाहते हैं, तो आपको jquery लाइब्रेरी लोड होने के बाद बाहरी .js फ़ाइल को इस तरह परिभाषित करना होगा।

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>

वास्तविक समय में परीक्षण करें

कोड स्निपेट दिखाएं

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
   $(function(){
      alert("My First Jquery Test");
   });
</script>

</head>
<body><!-- Your web--></body>
</html>

स्निपेट का विस्तार करें

— Swarne27
स्रोत

7

बहुत बहुत धन्यवाद। यह वास्तव में जवाब है कि मैं अंत में पता चला है! मुझे पता है कि सवाल प्राथमिक था लेकिन मुझे यह दिखाने के लिए समय निकालने के लिए धन्यवाद! क्या मुझे याद आ रहा था javascript फ़ाइल से पहले jQuery लाइब्रेरी को रखा गया था!

— firstofth300

53

यह है कि आप HTML में JS फाइल कैसे लिंक करते हैं

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

<script> - टैग का उपयोग क्लाइंट-साइड स्क्रिप्ट को परिभाषित करने के लिए किया जाता है, जैसे कि जावास्क्रिप्ट।

type - स्क्रिप्ट का प्रकार निर्दिष्ट करें

src - स्क्रिप्ट फ़ाइल नाम और पथ

— मुथु कुमारन
स्रोत

13

आप अपने HTML दस्तावेज़ में स्क्रिप्ट टैग जोड़ सकते हैं, आदर्श रूप से जो आपकी जावास्क्रिप्ट फ़ाइलों के लिए इंगित करता है। स्क्रिप्ट टैग का क्रम महत्वपूर्ण है। यदि आप अपनी स्क्रिप्ट से jQuery का उपयोग करना चाहते हैं, तो अपनी स्क्रिप्ट फ़ाइलों से पहले jQuery लोड करें।

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="relative/path/to/your/javascript.js"></script>

तब आपकी जावास्क्रिप्ट फ़ाइल में आप $साइन या का उपयोग करके jQuery को संदर्भित कर सकते हैं jQuery। उदाहरण:

jQuery.each(arr, function(i) { console.log(i); });

— BuddhiP
स्रोत

12

एक बाहरी जावास्क्रिप्ट फ़ाइल शामिल करने के लिए आप <script>टैग का उपयोग करते हैं । srcविशेषता अपने वेब परियोजना के भीतर अपने जावास्क्रिप्ट फ़ाइल के स्थान को इंगित करता है।

<script src="some.js" type="text/javascript"></script>

JQuery केवल एक जावास्क्रिप्ट फ़ाइल है, इसलिए यदि आप फ़ाइल की एक प्रति डाउनलोड करते हैं तो आप इसे स्क्रिप्ट टैग का उपयोग करके अपने पेज में शामिल कर सकते हैं। आप Google द्वारा होस्ट की गई सामग्री जैसे सामग्री वितरण नेटवर्क से Jquery को भी शामिल कर सकते हैं।

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

— केविन बोवर्सॉक्स
स्रोत

2

नीचे आपके पास कुछ VALID html5 उदाहरण दस्तावेज हैं। typeमें विशेषता scriptटैग है अनिवार्य नहीं एचटीएमएल 5 में।

आप $चारित्र द्वारा जक्वेरी का उपयोग करते हैं । पुस्तकालयों (जैसे jquery) को <head>टैग में रखें - लेकिन आपकी स्क्रिप्ट को दस्तावेज़ ( <body>टैग) के निचले भाग में डाल दिया जाता है - इसके कारण आपको यह सुनिश्चित हो जाएगा कि आपकी स्क्रिप्ट का निष्पादन शुरू होने पर सभी पुस्तकालय और HTML दस्तावेज़ लोड हो जाएंगे। आप srcनीचे दिए गए js कोड को डालने की बजाय स्क्रिप्ट फ़ाइल को शामिल करने के लिए नीचे स्क्रिप्ट टैग में भी विशेषता का उपयोग कर सकते हैं ।

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
    <div>Im the content</div>

    <script>
        alert( $('div').text() ); // show message with div content
    </script>
</body>
</html>

स्निपेट का विस्तार करें

— कामिल कियॉलेजवस्की
स्रोत

0

this is demo code but it will help 

<!DOCTYPE html>
<html>
<head>
<title>APITABLE 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>


$(document).ready(function(){

$.ajax({
    type: "GET",
    url: "https://reqres.in/api/users/",

    data: '$format=json',

    dataType: 'json',
    success: function (data) {
 $.each(data.data,function(d,results){
     console.log(data);

 $("#apiData").append(
                        "<tr>"
                          +"<td>"+results.first_name+"</td>"
                          +"<td>"+results.last_name+"</td>"
                          +"<td>"+results.id+"</td>"
                          +"<td>"+results.email+"</td>"
  +"<td>"+results.bentrust+"</td>"
                        +"</tr>" )
                    })
 } 

});

});


</script>
</head>
<body>


    <table id="apiTable">

        <thead>
            <tr>
            <th>Id</th>
            <br>
            <th>Email</th>
            <br>
            <th>Firstname</th>
            <br>
            <th>Lastname</th>
        </tr>
        </thead>
        <tbody id="apiData"></tbody>    





</body>
</html>

— Hozaifa
स्रोत

मैं एक जावास्क्रिप्ट फाइल को एक HTML फाइल से कैसे जोड़ूँ?

वास्तविक समय में परीक्षण करें