Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

How Would I Use This In My Html Structure?

Post a Comment
I'm new to jquery and I don't want to end up doing the wrong thing, I've done everything else but, I'm stuck on this part. How do I hook this is up? I've tried using script tags, b

Solution 1:

Put the script tag in between your head tags like so

<head><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"type="text/javascript"></script></head>

put this right before the closing body tag like so

<scripttype="text/javascript">
$(document).ready(function() {
     $('.menu').dropit();
});
</script></body>

Another option, instead of putting your jQuery code at the bottom, is to put all your javascript/jquery in a separate file. And then just link to it.

For example

<script type="text/javascript" src="myjsfilename.js"></script>
</body>  //again, you put this right before the closing body tag

And then in your myjsfilename.js file, you would have

$(document).ready(function() {
     $('.menu').dropit();
});

plus anymore javascript/jquery code you want to add

Doing it that way can help keep things organized

Solution 2:

Add a script tag like this to the head or body of your html:

<scriptsrc="//code.jquery.com/jquery-1.10.2.min.js"></script><scriptsrc="path/to/your/jquery/script.js"></script>

as far as best practices go for where to add it, check here for a good discussion:

Where should I put <script> tags in HTML markup?

The first script tag above links to a CDN, and allows you to include jQuery without having to have it locally. This is a great way to do it as long as you dont include many external scripts. Once you have many scripts it would be better to include everything in a local minified file to increase page load performance.

Solution 3:

I drew a small diagram to help anyone understand the answers visually.

As a rule of thumb, I recommend putting all scripts at the bottom for performance issues.

It is a best practice, I'd say. So put your code before the </body> closes:

<scripttype="text/javascript">
$(document).ready(function() {
     $('.menu').dropit();
});
</script>

And obviously you need to load your jQuery from a CDN, so put it above all script code.

Yes, that would also need to go before the </body> closes.

The diagram explains it better now. Have a look.

enter image description here

Post a Comment for "How Would I Use This In My Html Structure?"