jQuery alkalmazást, hogyan kezdjem.

A jquery használatához, mindig meg kell hívni, valamelyik jquery motor típusát, a <head> szakaszban. (Lehetőleg, a legújabbat.)
Alapismeretek elsajátításához, megismeréséhez, a következő jQuery meghívása is, megfelel:
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>

Meghívása ugyan úgy történik, mint a JavaScript fájlok meghívása.

A jquery motor típusait, lásd a következő címeken:
1. https://code.jquery.com/jquery/
2. https://jquery.com/download/

JavaScript programunkat megírhatjuk közvetlen a html fájlban vagy külső js fájlban.
Script megírása vagy külső js fájl meghívása hól legyen, ezt a program készítője dönti el.
1. Script megírása vagy külső js fájl meghívása a head szakaszban. (Ez a gyakorlati alkalmazás.)
2. Script megírása vagy külső js fájl meghívása body szakaszban, a szövegfolyamban.
3. Script megírása vagy külső js fájl meghívása body szakaszban, a szövegfolyam végén.

A ready metódussal közöljük a program felé, hogy ebben a függvényben (function) megírt scriptünk betöltődése, az oldal tartalmának betöltődése után történjen.

$(document).ready(function(){ ............... .............. .............. });

1. Példa.

<head>
<title>jquery</title>
      // Valamelyik jquery verzió meghívása.
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<link href="stilus.css" rel="stylesheet" type="text/css" />

                             <script type="text/javascript">
                               $(document).ready(function(){
                                     // Ide jön, vagy jönnek a jquery vagy JavaScript meghatározások.
                               });
                             </script>
</head>

<body>
<h1>Címsor</h1>
<p>html tartalom.</p>
		
</body>

2. Példa.

<head>
<title>jquery</title>
      // Valamelyik jquery verziójának meghívása.
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<link href="stilus.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1>Címsor</h1>
<p>html tartalom.</p>

                             <script type="text/javascript">
                               $(document).ready(function(){
                                     // Ide jön, vagy jönnek a jquery vagy JavaScript meghatározások.
                               });
                             </script>
<p>html tartalom.</p>		
</body>

3. Példa.

<head>
<title>jquery</title>
      // Valamelyik jquery verziójának meghívása.
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<link href="stilus.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1>Címsor</h1>
<p>html tartalom.</p>
<p>html tartalom.</p>

                             <script type="text/javascript">
                               $(document).ready(function(){
                                     // Ide jön, vagy jönnek a jquery vagy JavaScript meghatározások.
                               });
                             </script>
</body>

Bemutató példa.

Stílusok meghatározása, CSS fájlban:
.kek{font-weight: bold; color: blue;}
.sargah{background-color: yellow; padding-right: 5px; padding-left: 5px;}

Első példa:A jQuery, azaz, a JavaScript programot, head szakaszban írjuk meg.

<html>
<head>
<title>A jquery.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<link href="stilus.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function(){

                   $("#btn01").click(function(){
                        $("p.cls01").addClass("kek");
                    });	
			
                   $("#btn02").click(function(){
                        $("p.cls01").addClass("sargah");
                    });
			
                   $("#btn03").click(function(){
                        $("p.cls01").removeClass("kek sargah");
                    });	
	
        }); 
    </script>

</head>
<body>

Második példa:A jQuery, azaz, a JavaScript programot, külön js fájlban írjuk meg.

<html>
<head>
<title>A jquery.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js></script>
<link href="stilus.css" rel="stylesheet" type="text/css" />

<script language="JavaScript" type="text/javascript" src="jquery_teszt.js"></script>

</head>
<body>

<p class="cls01"> ----------------- Ez egy jquery teszt! ----------------- </p>

<button id="btn01">Kattints ide!</button> 
<button id="btn02">Kattints ide!</button>  
<button id="btn03">Kattints ide!</button>

</body>
</html>

jquery_teszt nevű, és js kiterjesztésű fájlunk, megírása.

        $(document).ready(function(){

                   $("#btn01").click(function(){
                        $("p.cls01").addClass("kek");
                    });	
			
                   $("#btn02").click(function(){
                        $("p.cls01").addClass("sargah");
                    });
			
                   $("#btn03").click(function(){
                        $("p.cls01").removeClass("kek sargah");
                    });	
	
        });

Fenti példák megjelenése.

<p class="cls01"> Ez egy jQuery teszt! </p>