How to use a jQuery function in my javascript source code?

Question

I'm very sorry to ask such an easy question for you. I can use a jQuery function in my html pages. But I do not know how to use one in my javascript source file? Please let me know.

Thank you in advance.

Edit: Currently , I use the following declaration at the head of my javascript source file.

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

Wes Crow · Accepted Answer · 2012-02-11 14:39:04Z

4

You can do it in exactly the same way. You will just need to link the jQuery source file before you link the external JS file with the jQuery in it so that it knows how to handle it.

Here is an example for hosted jquery:

test.html

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
    <script type="text/javascript" src="./test.js"></script>
  </head>
</html>

test.js

$(document).ready( function(){ 
  var t = $.trim(" abc ");
  alert('...'+t+'...'); 
});

Here is an example for embedded jquery:

test.html

<html>
  <head>
    <script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="./test.js"></script>
  </head>
</html>

test.js

(function($){ 
  var t = $.trim(" abc ");
  alert('...'+t+'...'); 
})(jQuery);

edited Feb 11, 2012 at 14:39

answered Feb 11, 2012 at 14:00

Wes Crow

2,96722 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

seven_swodniw Over a year ago

Borrowing your test.js, how to use jQuery.trim(" abc ") ? Although it may sounds impolite , alert is not suitable here as an example.Please re arrange test.js again.

Wes Crow Over a year ago

Wow. That totally was impolite. I have caved to your request, but if you have something specific in mind you should request it in your question.

seven_swodniw Over a year ago

Let me apologize to you .I am very sorry.

seven_swodniw Over a year ago

Thank you very much .I finally understood your sample code.It works well.

roobeedeedada · Accepted Answer · 2012-02-11 14:15:30Z

1

Do you mean you're not sure how to add it to the header of the file so that it affects DOM elements after it? Like wescrow said, you should first import the jQuery file then your script file. Then, in your script file, make sure you have something like:

$(document).ready(function(){
     // your javascript here
});

or

$(function(){
     // your javascript here
});

This ensures that your DOM's loaded before your jQuery code kicks in. For more info, check out the official doc: http://api.jquery.com/ready/ They have a very good example there.

answered Feb 11, 2012 at 14:15

roobeedeedada

5214 silver badges11 bronze badges

Comments

osahyoun · Accepted Answer · 2012-02-11 14:23:56Z

1

And here's a small taste of what you can quickly knock up with jQuery:

$(function(){
  // Few lines of code will query Twitter's search API and append the results to the browser.
  var url = "http://search.twitter.com/search.json?callback=?&q=weather";

  $.getJSON(url, function(data){
    $.each(data.results, function(i, tweet){
      $('body').append("<p>" + tweet.text + " by " + tweet.from_user_name + "</p>");
    });
  });
});

answered Feb 11, 2012 at 14:23

osahyoun

5,2312 gold badges19 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to use a jQuery function in my javascript source code?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related