12 Replies - 996 Views - Last Post: 05 September 2013 - 04:43 PM

#1 jimbang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 49
  • Joined: 28-October 12

Adding jquery to page

Posted 04 September 2013 - 11:54 AM

Hey people, What do you do for calling j query?
---
1. Use googles option that seems easy as pie?

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
(in the head tag)

then using the script tags in the head or body

<script language="javascript" type="text/javascript">

your javascript here

</script>

---
2. Or something else? Perhaps another link like googles? Whats the difference between these links..is it the same library?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>


then using the script tags in the head or body

<script language="javascript" type="text/javascript">

your javascript here

</script>

---
3. Or the good old fashion download this script (copy and paste it any where into a blank file and just save it as jquery.js if i'm not mistaken)

then use it like this
<script type="text/javascript" src="jquery.js"></script>
in the head tags

and this
<script language="javascript" type="text/javascript">
in the body or head...

Which way is easiest? I'm betting on google cause i already tried copy and pasting the entire j query library into a blank file and saving it...then calling it per the #2 option. #1 seems so much easier as agreed with here http://encosia.com/3...jquery-for-you/

1. google does all the work
2. then you just use the basic script tags and everything should work...

Does anyone have any links that show source code of the first option that I can see for my self? (or #3)
---
This is the w3 example for query notice how it uses the #1 option

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>


Does that mean you can put any jquery code into this file and it will work? Also are the <script></script> and <script language="javascript" type="text/javascript"> tags interchangeable?

ps i even downloaded homebrew (whatever that does) http://brew.sh

final question: if using the gooogle jquery library is really that easy why doesnt everyone do it?
thanks

This post has been edited by laytonsdad: 04 September 2013 - 12:05 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Adding jquery to page

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 433
  • View blog
  • Posts: 1,829
  • Joined: 30-April 10

Re: Adding jquery to page

Posted 04 September 2013 - 12:28 PM

Your first link is to the Google CDN for the jQuery ui 1.8.5 minimized library.
Your second link is to the Google CDN for the jQuery 1.4.2 minimized library.

You can also download it from jQuery and use it as a file in your js folder, Copying and pasting the code is not necessary as when you download it you can just add it to your project and change the name is you need to.

When adding jquery code that you write, the best practice is to add it with a script tag at the bottom of the document just above the closing body tag inside of the $(document).ready() method so it will not run before the entire document has been loaded.

The reason for the Google CDN is so you are not downloading the library from your server every time you call a page the you need jquery in.

Also I would like to note, Make sure when posting code you use code tags and give the thread a more searchable title.

If you have any more questions please let us know.

This post has been edited by laytonsdad: 04 September 2013 - 12:33 PM

Was This Post Helpful? 1
  • +
  • -

#3 jimbang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 49
  • Joined: 28-October 12

Re: Adding jquery to page

Posted 04 September 2013 - 12:55 PM

Great response laytonsdad
Ill try to find some source code so I can take a look see myself at the cdn format etc
cheers
Was This Post Helpful? 0
  • +
  • -

#4 jimbang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 49
  • Joined: 28-October 12

Re: Adding jquery to page

Posted 04 September 2013 - 01:15 PM

So to be clear all one has to do when editing jquery source code is replace the
<script type="text/javascript" src="jquery.js"></script>


with the cdn version?
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>


and itll work? :bananaman:/>
(if you'd rather use google cdn)

This post has been edited by jimbang: 04 September 2013 - 01:16 PM

Was This Post Helpful? 0
  • +
  • -

#5 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 433
  • View blog
  • Posts: 1,829
  • Joined: 30-April 10

Re: Adding jquery to page

Posted 04 September 2013 - 01:28 PM

Well, yes. If you want to use the jQuery-ui library from Google. Notice that you have posted the link for the jQuery-ui library not the jQuery core library.
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>

These are two different libraries and the jQuery-ui library is dependent on the jquery library.

Also it should be said that if you going to use anything that is dependent on the jQuery library you add the library first so it can be loaded first.

IE
//load jQuery library
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

//load others here
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>


Was This Post Helpful? 1
  • +
  • -

#6 jimbang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 49
  • Joined: 28-October 12

Re: Adding jquery to page

Posted 04 September 2013 - 01:55 PM

Thanks
Do you have any suggestions for viewing sorce code? Im using virtualbox emulator for IE so the source displays ins sections. And alot of the sections dont show where the head begins and ends know what I'm saying? Kind of like x code or visual studio the way the code is sectioned in files.

How would you personally get the source code to tweak this page

http://www.tomtilley...cts/t800-xeyes/

also notice there is the code the author posted, how would you incorperate that into a file personally?

ps I already have an xeyes script it just doesnt work in ie or chrome or firefox :(/>

Im just playing with this one to see if i can replace the .js tags to make it work with can

(this is my last question hopefully)

This post has been edited by jimbang: 04 September 2013 - 01:56 PM

Was This Post Helpful? 0
  • +
  • -

#7 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 433
  • View blog
  • Posts: 1,829
  • Joined: 30-April 10

Re: Adding jquery to page

Posted 04 September 2013 - 02:00 PM

The developers console is the best place to do this. Here is a link that will help you.
Was This Post Helpful? 1
  • +
  • -

#8 jimbang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 49
  • Joined: 28-October 12

Re: Adding jquery to page

Posted 04 September 2013 - 02:02 PM

Why are you so helpful?
Are they paying you for this?
you're a good man..
Was This Post Helpful? 1
  • +
  • -

#9 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 433
  • View blog
  • Posts: 1,829
  • Joined: 30-April 10

Re: Adding jquery to page

Posted 04 September 2013 - 02:06 PM

I learn more by explaining. no I don't get payed in money. I am payed in satisfaction. Satisfaction that someone else will not have to have the same troubles/frustrations I had before I found DIC. ;)

Thank you for the kind words. :blush:
Was This Post Helpful? 2
  • +
  • -

#10 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3243
  • View blog
  • Posts: 10,883
  • Joined: 12-December 12

Re: Adding jquery to page

Posted 04 September 2013 - 03:01 PM

View Postlaytonsdad, on 04 September 2013 - 07:28 PM, said:

The reason for the Google CDN is so you are not downloading the library from your server every time you call a page the you need jquery in.

To clarify, your copy of the library would not be downloaded for every page as it would be in the browser's cache after the first page that used it (assuming, sensibly, that you reference the same library-file across your site).

One reason to use a CDN is that it may already be in the user's cache. (Some developers argue against the use of CDNs, but most are happy to use them.)

In theory, if your jQuery script is placed at the bottom of the page, it is not necessary to wrap it in document.ready, as all modern browsers will ensure that the DOM is fully loaded before this script (which is before the closing BODY-tag) is run. There are a few gotchas though, mentioned here at SO.

Personally, though, I'm still using document.ready ;)
Was This Post Helpful? 3
  • +
  • -

#11 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: Adding jquery to page

Posted 05 September 2013 - 11:52 AM

One important thing to point out if you are writing secure sites. There is a difference between doing:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">


And:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">



It's best to leave out the protocol, like in the second version, which allows the browser to decide which protocol to use based on which protocol is being used to request the actual HTML page. If you are writing a secure site (https) and you include a script using a non-secure URL (http) then the browsers tend to prompt the user with a warning that elements on the site are insecure. - That's not exactly going to fill users with a sense of security :)
Was This Post Helpful? 3
  • +
  • -

#12 jimbang  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 49
  • Joined: 28-October 12

Re: Adding jquery to page

Posted 05 September 2013 - 02:46 PM

and make sure you save your jquery.js file in the same folder as your pages that use it
</solved>
Was This Post Helpful? 0
  • +
  • -

#13 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 433
  • View blog
  • Posts: 1,829
  • Joined: 30-April 10

Re: Adding jquery to page

Posted 05 September 2013 - 04:43 PM

It does not have to be in the same folder but you must make sure the reference to it is correct.

File layout
index.html
**js
***jquery.min.js



Script tag for the jquery.min.js file
<script src="js/jquery.min.js"></script> 
// note that the index page will hold the script tag and the jquery file is in
// the js folder and not in the root with the index.html


Was This Post Helpful? 2
  • +
  • -

Page 1 of 1