jQuery Concept and Examples PDF

**Concept and Examples of jQuery** - -jQuery is a JavaScript Library. - -jQuery greatly simplifies JavaScript programming. - -jQuery is easy to learn. A screenshot of a computer program Description automatically generated **What is jQuery?** - jQuery is a lightweight, \"write less, do...

**Concept and Examples of jQuery** - -jQuery is a JavaScript Library. - -jQuery greatly simplifies JavaScript programming. - -jQuery is easy to learn. A screenshot of a computer program Description automatically generated **What is jQuery?** - jQuery is a lightweight, \"write less, do more\", JavaScript library. - The purpose of jQuery is to make it much easier to use JavaScript on your website. - jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish and wraps them into methods that you can call with a single line of code. - jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. **Features of jQuery** - The jQuery library contains the following features:  **Why jQuery?** - There are lots of other JavaScript libraries out there, but jQuery is probably the most popular, and the most extendable. - Many of the biggest companies on the Web use jQuery, such as: A screenshot of a computer Description automatically generated **Advantages of jQuery** - Simple implementation of interactive processing with short and concise code - Easy and convenient implementation of animation effects through various plug-ins - HTML document Object Model (DOM) and Easy implementation of event handling - Simple application of CSS styles - Supported by most browsers, including older versions of web browsers.  **Adding jQuery to Your Web Pages** - There are several ways to start using jQuery on your web site. A screenshot of a chat Description automatically generated **Two versions of jQuery** - Download the jQuery library file from the official site and load it into HTML - Access the http://www.jQuery.com site and download the latest version - Use it by specifying the path where the file is saved as the src attribute in the \\~\  A screenshot of a computer code Description automatically generated **jQuery CDN** - If you don\'t want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). - The Way of loading using a CDN (Content Delivery Network) has the advantage of faster content transmission time.  **Basic syntax of jQuery** - With jQuery you select (query) HTML elements and perform \"actions\" on them. - The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). A screenshot of a computer program Description automatically generated **The Document Ready Event** - You might have noticed that all jQuery methods in our examples, are inside a document ready event. - This is to prevent any jQuery code from running before the document is finished loading (is ready). - It is good practice to wait for the document to be fully loaded and ready before working with it. - This also allows you to have your JavaScript code before the body of your document, in the head section.  - Here are some examples of actions that can fail if methods are run before the document is fully loaded. - Trying to hide an element that is not created yet - Trying to get the size of an image that is not loaded yet - The jQuery team has also created an even shorter method for the document ready event. A white card with green text Description automatically generated **Concept of bxSlider** - Responsive jQuery Content Slider with Animations,  **Installing the bxSlider** - -The Easy Way A screenshot of a computer code Description automatically generated - -The Other Ways  **Examples of bxSlider** - Image gallery with bxSlider A screenshot of a computer program Description automatically generated **Concept of Carousel Slider** - Let\'s start with the basics, image carousels have several different names, including \'carousel sliders\', \'image sliders\' or \'image carousels'. - These terms are interchangeable and mean the same thing, a set of images, often with links, that slide, fade or otherwise transition through a sequence.  **Learning Summary** 1\. Concept of jQuery - jQuery is a JavaScript Library and greatly simplifies JavaScript programming. - The purpose of jQuery is to make it much easier to use JavaScript on your website. - There are two versions of jQuery available for downloading - Download the jQuery library from jQuery.com - Include jQuery from a CDN, like Google **2. jQuery Syntax** - The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). \$(selector).action() - The Carousel Slider is interchangeable and means the same thing, a set of images, often with links, that slide, fade or otherwise transition through a sequence. - The bxSlider is Responsive jQuery Content Slider with Animations