Javascript

How to get started with jquery?

Amarnath DK
by Amarnath DK May 23, 2020
image1





We need basic knowledge of html to get started to learn jquery.
jquey is a client side language used to manipulate DOM elements in HTML.
this is advanced version of java script.

Use Visual studio code for html and jquery learning.

first create a file with extension .html in notepad or visual studio code.

img2
in browser you open this file it will look like below.
img3
Then jquery is provided as CDN link to add to your file. 
To add go to this website https://code.jquery.com/

img4
click latest minified version and copy the script tag provided.
it will look like below.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>


take only few from this 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>

you can manipulate dom by using id or class

id will be refereed with "#"
class will be refereed with "."

with id:

img5


Code:
<html>
    <title>
        First Program
    </title>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
    </head>
    <body>      
        <h1>
            Hello <div id='Name'></div>
        </h1>
    </body>
    <script>
        $(function () {
            $('#Name').html('Johnwick')
        });
    </script>
</html> 

with class:
img6

Code:
<html>
    <title>
        First Program
    </title>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
    </head>
    <body>      
        <h1>
            Hello <div class='Name'></div>
        </h1>
    </body>
    <script>
        $(function () {
            $('.Name').html('Johnwick')
        });
    </script>
</html>

Post a Comment

0 Comments