How do include jQuery in HTML

Question

I'm trying to include jQuery in my HTML-file but I haven't succeed yet.. I know there are a lot of tutorials and stuff on the internet (and this site!) but it still won't work. This is my code in the HTML-file.

<!DOCTYPE html>
<html>
<head>  
<link type="text/css" rel="stylesheet" href="global.css"/>  
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>      
<title>test</title>
</head>
<body>
  <script>
    $(document).ready(function() {
        $("p").css("font-size:50px");
    };
  </script>
<p id="first">Hello there!</p>
</body>
</html>

I just don't understand why nothing is happening.. Would be awesome if someone could help me with this on!

did you place the jquery-2.0.3.min.js file in the same directory as the source file — Arun P Johny
– Arun P Johny, Commented Dec 30, 2013 at 16:36
else use the cdn version like <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script> — Arun P Johny
– Arun P Johny, Commented Dec 30, 2013 at 16:37
also to set the css value you need to use $("p").css("font-size", "50px"); — Arun P Johny
– Arun P Johny, Commented Dec 30, 2013 at 16:37
You also are missing a ); closing your DOM ready, which throws syntax error, which bricks your script. Potential cause. — tymeJV
– tymeJV, Commented Dec 30, 2013 at 16:38

Ennui · Accepted Answer · 2013-12-30 16:38:47Z

You are not using the jQuery css() function quite properly. You also missed a closing parenthesis. Try changing it to this:

<script>
$(document).ready(function() {
    $("p").css("font-size", "50px");
});
</script>

You should always use .css('property-name', 'property-value') in that format for best results. There are other ways (object properties) but they are slightly different syntax and do not conform directly to expected vanilla CSS property names.

jQuery API reference - .css()

If that does not fix it, check to be sure your jquery file is in the same directory as the HTML page. Or (probably better) just replace it with the CDN call recommended by other answers (e.g. replace <script type="text/javascript" src="jquery-2.0.3.min.js"></script> in your head with <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>).

Shyju · Accepted Answer · 2013-12-30 16:38:22Z

1

You missed to close the code properly. You missed the );. Also the css method is little different in your version. The parameters should be property name, property value.

Try this

$(document).ready(function() {
   $("p").css("font-size","50px");
});

Working sample : http://jsbin.com/AfAjihiP/1/

answered Dec 30, 2013 at 16:38

Shyju

220k106 gold badges420 silver badges498 bronze badges

Comments

user3094403 · Accepted Answer · 2013-12-30 16:38:16Z

1

There is a small syntax error. Replace:

$(document).ready(function() {
        $("p").css("font-size:50px");
    };

With this:

$(document).ready(function() {
        $("p").css("font-size", "50px");
    });

You forgot to close a parenthesis, and the .css() function needs two parameters.

answered Dec 30, 2013 at 16:38

user3094403

6,39011 gold badges50 silver badges56 bronze badges

1 Comment

user3094403 Over a year ago

@putvande: I'm sorry, I forgot that the .css() function needs two paraters. I updated my answer.

Orville Patterson · Accepted Answer · 2013-12-30 16:39:28Z

0

YOu can do one of two things. You can use the cdn version and link it like this:

or

<script type="text/javascript" src="jquery-2.0.3.min.js"></script> after making sure the file is in the root of your project. also you should have:

<script>
$(document).ready(function() {
    $("p").css("font-size", "50px");
});
</script>

and not what you currently have.

answered Dec 30, 2013 at 16:39

Orville Patterson

5244 silver badges20 bronze badges

Comments

Abdennour TOUMI · Accepted Answer · 2013-12-30 16:50:20Z

0

Don't write several code: Instead of $(document).ready use $ , it works:

so :

$(function() {
        $("p").css({"font-size": "50px"});
  });

or

$(function() {
        $("p").css("font-size", "50px");
});

answered Dec 30, 2013 at 16:50

Abdennour TOUMI

94.5k42 gold badges271 silver badges274 bronze badges

Collectives™ on Stack Overflow

How do include jQuery in HTML

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Related