# jQuery Library ## Including jQuery ### Download and link the file ```html ``` ### Use a CDN ```html ``` ### What is a CDN A **content delivery network** or **content distribution network** (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance. CDNs serve a large fraction of the Internet content today, including web objects (text, graphics and scripts), downloadable objects (media files, software, documents), applications (e-commerce, portals), live streaming media, on-demand streaming media, and social networks. ## HTML Manipulation ### [Finding DOM elements](https://api.jquery.com/category/selectors/) ```js $('tag'); $("#id"); $(".class"); ``` ### Manipulating DOM elements ```js $("p").addClass("special"); ``` ```html

Welcome to jQuery

``` ### Reading Elements ```html Yahoo! ``` ```js // find it & store it var link = $('a#yahoo'); // get info about it link.html(); // 'Yahoo!' link.attr('href'); // 'http://www.yahoo.com' link.css('font-size'); // '20px ``` ### Modifying Elements ```js // jQuery $('a').html('Yahoo!'); $('a').attr('href', 'http://www.yahoo.com'); $('a').css({'color': 'purple'}); ``` ```html Google Yahoo ``` ### Create, Store, Manipulate and inject ```js let paragraph = $('

Welcome

'); // create and store element paragraph.css('property', 'value'); // manipulate element $("body").append(paragraph); // inject in DOM ``` ### Regular DOM Nodes to jQuery Objects ```js var paragraphs = $('p'); // an array var aParagraph = paragraphs[0]; // a regular DOM node var $aParagraph = $(paragraphs[0]); // a jQuery Object // can also use loops for(var i = 0; i < paragraphs.length; i++) { var element = paragraphs[i]; var paragraph = $(element); paragraph.html(paragraph.html() + ' WOW!'); } ``` ## [Events](https://api.jquery.com/category/events/) ```js var onButtonClick = function() { console.log('clicked!'); } // with named callback & .on $('button').on('click', onButtonClick); // with anonymous callback & .on $('button').on('click', function(){ console.log('clicked!'); }); // with .click & named callback $('button').click(onButtonClick); ``` ### Preventing Default Event ```js $('selector').on('event', function(event) { event.preventDefault(); // custom logic }); ``` ## Plugins In the HTML, add a `