jQuery
jQuery is a library of free software written in Javascript, with MIT License and GNU General Public v2, allows its use in open source projects and private
In line with the principle type less, do more
To achieve this, it allows you to write Javascript code in a simpler way, doing in a single call tasks that requeririan several lines of code
Simplifies many of the tereas common, such as the handling of the DOM, CSS properties and an AJAX call, in addition to allowing the creation of effects or animations
Installation
Download the library in its most stable version from their official website jQuery.com
We load the library in the head of our HTML code:
In the example, version is the current number of version, may vary at the time of your download
It is advisable that in production you use the version min, since it is optimized for faster loading in the browser
There are also repositories CDN third-party that can be viewed on the official website of downloads, us librarian of having to update the current version of the library
However, we run the risk of having security flaws if someone outside of the introduction of malicious code in those repositories, or remain inacesibles for any reason
To include them simply modificariamos the src with the url of the repository CDN to indicate to us
Load the code
We can typically include the code of jQuery inside a script block like we do with Javascript, or use an external file .js where we include our own code
To be able to execute our instructions will be useful that the DOM of our HTML has been completely loaded, but we can execute them before that happens
In the example we have opted to load the DOM tree when it has loaded the HTML completely, including our code inside of the curly braces
In this other example we have an equivalent version that allows us to write less code, choose the one you like the most, although the first is more clear
Basic syntax
The jQuery syntax is very similar to CSS because all of the calls are composed of a selector followed by a call
In the example we can see the $ symbol that allows us to access the elements of jQuery
The selector will allow to select specific elements within the DOM tree
The action will be a function that allows us to interact with the item selected by the selector
In the examples we have the operator this, which represents the current item selected
‘p’ a tag is HTML valid, which represents an element, here we will be able to use any of them to perform searches
When we see with more detail the selectors, we will deepen in how they should be those searches
‘.test’ uses the symbol . to refer to what follows after that is a class, in this case, the test class
‘#test’ use the # symbol to refer to that what follows is an id, in this case, the id test