Welcome back, after installing jQuery , we are ready to write our magic code, So this tutorial will help you to learn the basic syntax of jQuery which is realy the most important step when learning any programming language.Unfortunatly , many beginners who wants to learn faster ignore this step and focus on advanced technics and complex functions , but they'll find many big problems because they don't know how this function's built and what does it mean this keyword , ...
Like any other Javascript library , jQuery was simply designed to change and interact the Html document . So , we have to understand the way that javascript could interact with Html , in other words, the DOM (Document Object Model) .The image below represent a DOM structure for an Html document :
The DOM define the way to access and manipulate Html Documents , Every node in Html can be easily accessed by Javascript and then jQuery .Don't worry , you will learn more about DOM interaction in the next tutorials .So , let's move to the jQuery syntax.
Indeed , the process is easy to understand , jQuery access the Html or CSS elemnt using a 'Selector' and then it perform an action .
A jQuery selector start with this symbol : $( ) , Inside the parentheses, we can put :
-Html Tag name : $('h1') to access all the level 1 headers in the Html document.
-Tag Class : The same way when we refer to a Html tag class in CSS using the point : . at the begin of the class name . let's consider the following html code :
<p class = 'paragraph'></p>
to access this element using jQuery , simply add the tag class name inside the parentheses and preced it by a point :
$('.paragraph')
-Tag Id : the same procedure for the class , just replace the point with #
<h1 id='header-1'>this is a header<h1>
$('#header-1')
Note :
If you want to select all the elements in the document , just put this symbol : * inside the parentheses.
example : $('*')
Like any other Javascript library , jQuery was simply designed to change and interact the Html document . So , we have to understand the way that javascript could interact with Html , in other words, the DOM (Document Object Model) .The image below represent a DOM structure for an Html document :
The DOM define the way to access and manipulate Html Documents , Every node in Html can be easily accessed by Javascript and then jQuery .Don't worry , you will learn more about DOM interaction in the next tutorials .So , let's move to the jQuery syntax.
Indeed , the process is easy to understand , jQuery access the Html or CSS elemnt using a 'Selector' and then it perform an action .
A jQuery selector start with this symbol : $( ) , Inside the parentheses, we can put :
-Html Tag name : $('h1') to access all the level 1 headers in the Html document.
-Tag Class : The same way when we refer to a Html tag class in CSS using the point : . at the begin of the class name . let's consider the following html code :
<p class = 'paragraph'></p>
to access this element using jQuery , simply add the tag class name inside the parentheses and preced it by a point :
$('.paragraph')
-Tag Id : the same procedure for the class , just replace the point with #
<h1 id='header-1'>this is a header<h1>
$('#header-1')
Note :
If you want to select all the elements in the document , just put this symbol : * inside the parentheses.
example : $('*')
