An Intro to jQuery

jQuery is a lightweight, "write less, do more" JavaScript library. Released in 2006, it's purpose is to offer you a much easier way to traverse and manipulate the HTML DOM, or Document Object Model, handle events and CSS, and simplify AJAX calls. jQuery replaces a lot of common JavaScript functions that require many lines of code to run with simple methods that can be called with a single line.

First, in order to use jQuery you need to bring it in to your web page. This can be accomplished by either downloading a local copy or by using the content delivery network (CDN). Downloading is usually recommended for larger projects and production while accessing jQuery with a CDN is a simple way to use it in smaller projects. Either way you choose, make sure to include a link to it in the HTML file using the <script> element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Although it is not unique to jQuery, the dollar sign $ is one of its most recognizable features. Indicating the following code is going to be jQuery,it is essentially another variable for jQuery, and is used to distinguish it from regular JavaScript.

// bling example
$(function() {
  $( "p" ).text( "Bling!" );
});

// jQ example
jQuery(function() {
  jQuery( "p" ).text( "Same thing!" );
});

After calling jQuery with the dollar sign $, you pass it the DOM element you wish to access and then the method you want to perform, i.e., $("selector").action(). There are different ways to access different elements on the DOM:

• $("tags") - nothing precedes tag name
• $(".class") - class name is preceded by dot
• $("#id") - id name is preceded by pound symbol / hashtag

There are tons of different methods you can perform with jQuery, but I'll go over just a few of the most commonly used.

1. text() - The result of the .text() method is a string containing the combined text of all matched elements. $("h3").text() will return a string of all text in h3 tags.
2. prop() - Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element. $("#button1").prop("disabled", true); will disable the button's functionality
3. addClass() - Adds the specified class(es) to each element in the set of matched elements. $("#button2").addClass("btn-primary"); will add the class of btn-primary to the elements with the button2 id.
4. css.() - Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element. $("button").css("color", "red"); will change the text color of all button tags red.

jQuery also gives you to simplified method to make AJAX (Asynchronous JavaScript And XML) requests. AJAX requests allow you to load and manipulate remote data on your website. jQuery lets you specify authentication details, request parameters, and the data type you want back in calls to the server. These calls are chained to success or fail callbacks which you use to handle the data you are sending or receiving.

$.ajax({
  type: "POST",             // specify type of request
  url: "/players/submit",   // url location
  data: {
    name: "Drew",           // data you wish to send the server
    team: "New Orleans"
  }
})
  .then(function(msg) {     // success callback
    alert("Data Saved: " + msg);
  })
  .catch(function(xmlHttpRequest, statusText, errorThrown) {    // error callback
    alert(
      "Your form submission failed.\n\n" +
        "XML Http Request: " +
        JSON.stringify(xmlHttpRequest) +
        ",\nStatus Text: " +
        statusText +
        ",\nError Thrown: " +
        errorThrown
    );
  });

These are just a few of the jQuery methods you can use to affect your code and make your page more dynamic, and as you can see they are quite simple to implement. This makes jQuery a great tool for JavaScript beginners especially. Overly-complicated JavaScript functions get replaced by easy to learn one-line methods, allowing you to write simpler, cleaner, easier to read code. If you are a JavaScript beginner, like myself, jQuery is a great tool for you to learn to help you build your programming skills.