How to Use Jquery with Node.Js

Using Jquery in NodeJS

Node.js is backend side of your app, jQuery work at frontend side, in browser. Create separate file for jQuery, for frontend code, and add this file to the index.html.

<html>
<body>

 <p>
   <b>Click</b> to change the <span id="tag">html</span>
 </p>
 <p>
   to a <span id="text">text</span> node.
 </p>
 <p>
   This <button name="nada">button</button> does nothing.
 </p>
<script src="index.js"></script>
</body>
</html>

and jQuery file index.js

 $( "p" ).click(function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );
 });

Including JQuery in Client Side Node.js

Using CDN servers will the best option so that browser will cache your library files. and that will help your clients to reduce their page loading time.

If you want to use your own copy downloaded from your server, create a directory structure for example "static/libs/" and copy the jquery library inside that directory then make it as a static directory by

app.use(express.static(__dirname + '/static'));

then you can refer the jquery from your html page by

<script src="/libs/jquery/1.12.0/jquery.min.js"></script>

You can also make the node_module directory as static then all the node_module will be available to public and you can able to refer the jquery file from client side.

in a comment I saw that you have mentioned about npm jquery.
When you do npm jquery, jquery will be installed as a node module and it will be available in node_module directory and using require('jquery') you can use jquery modules in the server side only. If you want to use the require('jquery') method in the client side you have to use requirejs or webpack etc .

How to use jquery with my Node.js EJS template?

You'll have to include jQuery and the clientside script in your EJS template, so it's rendered in the browser.

Installing jQuery with npm in Node, and doing var $ = require('jquery') on the serverside, just lets you use some of jQuery's methods on the server, it doesn't include jQuery on the clientside.

Change the template to something like

<% include ../partials/header %>

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

<div class ="containerMarginsIndex">

        <% for(var i=0; i < fun.length; i++) {%>
            <div class="fun">
                <h3 class="text-left"><%= fun[i].title %></h3>
                <a href="details/<%= fun[i].id %>">
                    <img class = "postImg" src="/images/uploads/<%= fun[i].image %>">
                </a>
                <span class="UpvoteButton"> </span><span class="DownvoteButton"> </span>

            </div>
        <% } %>

</div>
<script>
    $('.UpvoteButton').click(function () {
      $(this).toggleClass('on');
      $('.DownvoteButton').removeClass('on');
    });

    $('.DownvoteButton').click(function () {
      $(this).toggleClass('on');
      $('.UpvoteButton').removeClass('on');
    });
</script>
<% include ../partials/footer %>

How to run jQuery in node.js

Sorry but i don't know how to install jquery. But you apparently need it to request a website and fetch json. You could use request for that. Hope i helped you.

And you could do like :

request('https://en.wikipedia.org/wiki/Washington,_D.C.', function (error, response, body) {
  console.log('error:', error); // Print the error if one occurred
  console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
  console.log('body:', body); // Print the HTML for the Google homepage.
});

how to use jQuery installed with npm in Express app?

When you are installing jQuery with npm it's because you want to use jQuery on the server side of your application (Ex : in your app.js file). You still need to add jQuery to your web page like that :

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

If you want to use it on the client side. If you are using Jade, add the script tag to your template.