JS Frameworks & Libraries - jQuery PDF
Document Details
Uploaded by NoteworthyDwarf
Tags
Summary
This document provides an overview of JavaScript frameworks and libraries. It focuses on jQuery, explaining its purpose, usage, and its various components, such as DOM access. The document discusses different functionalities provided by jQuery.
Full Transcript
# JS Frameworks & Libraries ## jQuery Write less, do more - The specificity of the Javascript language has made it one of the most used programming languages in web application development. - Birth of several Frameworks and Libraries that allow accelerating the development of applications using Ja...
# JS Frameworks & Libraries ## jQuery Write less, do more - The specificity of the Javascript language has made it one of the most used programming languages in web application development. - Birth of several Frameworks and Libraries that allow accelerating the development of applications using Javascript ### Libraries - A Library is a collection of definitions for classes and functions. - The objective is to make code reusability easier without changing the application's code at the structural or architectural level. ### Frameworks - A framework defines a skeleton where the application defines its own functionalities to fill the skeleton. - The advantage is that they provide bricks that you can parameterize and use while using a predefined architecture. ## JS Frameworks & Libraries ### Sencha ### Vue.js ### NEXT.JS ### jQuery write less, do more ### Polymer ### React ## jQuery write less, do more - jQuery is one of the most used Javascript libraries in the world. - It simplifies several aspects, considered complex, of Javascript, like DOM and AJAX. - It offers several possibilities for: - Manipulating the HTML DOM - Manipulating CSS - Managing events - AJAX ## jQuery write less, do more ### Utilisation - To use jQuery, just add the .js file of the library as an external script within the HTML page where you want to use it. ```html <html> <head> <script src="jquery-3.4.1.js"></script> </head> ``` ### Syntaxe de base ``` $(selector).action() ``` - Function allowing the selection of any element in the document - Action to apply to the selected element ## jQuery write less, do more #### DOM Access | Function | Description | |---|---| | text() | Retrieves or modifies the textual content of the selected elements. | | html() | Retrieves or modifies the HTML content of the selected elements. | | val() | Retrieves or modifies the value of an element. | | data() | Retrieves or modifies the value of a data-* attribute. | | attr() | Retrieves or modifies the value of an attribute. | | prop() | Retrieves or modifies the value of an empty attribute. | | css() | Retrieves or modifies the value of a CSS property of the selected elements. | ## jQuery write less, do more #### DOM Access | Function | Description | |---|---| | append() | Adds content to the end of the selected elements | | prepend() | Adds content to the beginning of the selected elements | | after() | Adds content after the selected elements | | before() | Adds content before the selected elements | | remove() | Deletes the selected elements (with the possibility of filtering with CSS selectors) | | empty() | Deletes the child elements of the selected elements | ## jQuery write less, do more ### Événements - In addition to existing events in Javascript, jQuery proposes a new event that allows you to run processing at the end of the page loading. #### Événement Ready de l'objet document ```js $(document).ready(function(){ // Traitements }); ``` ## jQuery write less, do more ### Événements - It is possible to assign a function to an event on an element more easily with jQuery. ```js $(element).event(function(){ // Traitements }); ``` #### Example ```js $("#monElt").click(function(){ // Traitements }); ``` - It is possible to associate an event with a callback function through the "on" method. - This method is very useful for some events that are not recognized by jQuery. ```js $(element).on("event",function() { // Traitements }); ``` #### Example ```js ("#monElt").on("play", function(){ // Traitements }); ``` ## jQuery write less, do more ### Effets - jQuery provides a set of functions that allow you to apply an effect to animate elements in an HTML document. ```javascript $("#show").click(function() { $("p").show(); }); ``` ## jQuery write less, do more ### Effets - Some effects offered by jQuery: - **show**: displays an element - **hide**: hides an element - **fadeln**: displays an element with a fade-in effect - **fadeOut**: hides an element with a fade-out effect - **fadeTo**: adjusts the opacity of an element - **slideDown**: displays an element with a slide-down effect - **slideUp**: hides an element with a slide-up effect - **animate**: creates a custom animation by manipulating CSS properties.
