3 Important Jquery Concepts
What is Jquery ?
Jquery , developed in 1999, was introduced to make writing javascript easier. The purpose behind it was to reduce the typing done in javascript ultimately saving users time and money by having to write less and do more.
In this chapter we will focus on the 3 main fundamental concepts of jquery. These topics include :
- Selector syntax
- DOM get and set actions
- Effects and animation action
1.1 Selector syntax
In Jquery, you select (query) HTML elements and perform "actions" on them. This library is built on selecting elements and performing actions on them.
It's syntax goes as follow:
$(selector).action();
As you can see, each time you try and select anything, a "$" is going to go at the start of your line. followed by the dot notation in order to perform different actions on that specific selector
Here is a real time example:
$("#classA").css("color","blue");
Remember in our javascript DOM css example to target any id we had to do :
document.getElementById("classA").style.color="blue";
Now with Jquery, this typing and the referencing have significantly reduced in length
Here are some other real time examples :
$("#classA").css("color","blue");
$(".headerText").html("Welcome to DisneyWorld")
1.2 Dom actions (set and get )
In Jquery, we are able to manipulate the DOM (Document Object Model) just like we did in javascript. The "get" action will allows us to grab specific values on elements we select
How to properly call a get action:
As you can see, we are accessing text within the selector by using the "text" method this will intern look for any string thats associated.
1.3 Effects and animation
Lastly, one of jquery's most powerful attribute is its use of effects and animations. Jquery has a built in library that focuses on reducing the amount of code it takes to write up a javascript animation.
The animate method allows users to create animation effects on any CSS property. In order to do so, we will need the plain object's property.
The starting file for this example :
In this example, focus on the starting properties of each value in the CSS. We are not displaying anything thats in the div container. As we start the function we are then putting in those attributes in jquery.
In the next example we will take a look at jquery effects.
Like animate, jquery has a built in library that is able to perform basic effects that can save users time. The first example we are going to look at this the standard Fade in/ Fade out