Using jquery in js file

Question

Okay so all I am trying to do is make the jquery work in my javascript file which is linked to a html file. I created a totally new file for this to test it. The whole contents of the html file are:

<!DOCTYPE html>
<html>
<script src="C:\Users\Me\Desktop\Programming\jquery-1.12.4"             type="text/javascript"></script>
<script src="check.js"></script>
<head> <h1>test</h1>
</head>
<body>
</body>
</html>

And the whole content of the js file is

$("h1").css("color", "red");

But when I open the html file in chrome the change I put in the js file with jquery doesn't show up (e.g the heading is not red). I just want to figure out how to make it so that it does.

EDIT:

Thanks for the help everybody, I was able to make it work :)

You put H1 inside the HEAD? Wierd

Alon Eitan
– Alon Eitan

2016-05-26 20:51:32 +00:00
Commented May 26, 2016 at 20:51 — Alon Eitan
– Alon Eitan, Commented May 26, 2016 at 20:51

imvain2 · Accepted Answer · 2016-05-26 20:51:07Z

5

did you try this?

$(document).ready(function(){
    $("h1").css("color", "red");
});

answered May 26, 2016 at 20:51

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

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

Comments

PRDeving · Accepted Answer · 2016-05-26 20:58:16Z

4

not sure but, does your browser access local files directly? im pretty sure that browser sandbox gonna reject that, maybe cors plugin on chrome?

EDIT:

try importing this instead...

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

edited May 26, 2016 at 20:58

answered May 26, 2016 at 20:53

PRDeving

6693 silver badges11 bronze badges

Comments

marc_s · Accepted Answer · 2016-05-27 16:23:34Z

3

Try to use jQuery CDN, this way you don't need to worry if jQuery loaded correctly or not.

$(document).ready(function() {
  $("h1").css("color", "red");
});

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="check.js"></script>
<head></head>
<body>
  <h1>test</h1>
</body>
</html>

edited May 27, 2016 at 16:23

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 26, 2016 at 20:59

Emre Bolat

4,5626 gold badges31 silver badges32 bronze badges

Comments

socialpiranha · Accepted Answer · 2016-05-26 21:00:11Z

2

Move your <h1> tag to be in the <body>
Move your <script> tags to the <head>
Replace your code in your JS file with what imvain2 said, so that the JS will load once your document is ready.
Make sure you are correctly referencing your jQuery script. You can even use this to test it out:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
```

answered May 26, 2016 at 21:00

socialpiranha

1721 gold badge1 silver badge10 bronze badges

Comments

Andrew · Accepted Answer · 2016-05-26 21:13:20Z

1

There are a couple issue as described in other posts. All your meta, script, css references, etc. should go int the <head> and never header tags. Also need to correctly reference your javascript files.

<head> 
</head>
<body>
<header>
  <h1>test</h1>
</header>
</body>

Example: JSFiddle

edited May 26, 2016 at 21:13

answered May 26, 2016 at 21:07

Andrew

566 bronze badges

Comments

hiimricky · Accepted Answer · 2023-01-18 20:48:23Z

0

If you want to use jquery in .js file all you need to do is type: src=" ..." above code.

answered Jan 18, 2023 at 20:48

hiimricky

55 bronze badges

Collectives™ on Stack Overflow

Using jquery in js file

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related