JQUERY INTRODUCTION

What is JQuery?

JQuery is a JavaScript library
JQuery greatly simplifies JavaScript programming
JQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that dev 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

Adding JQuery

Download the jQuery library from jQuery.com
  • There are 2 versions of jQuery available for downloading
  • 1. Production version (this is for your live website because it has been minified and compressed)
  • 2. Development version (this is for testing and development - uncompressed and readable code)
  • Place the downloaded file in the same directory as the pages where you wish to use it
  • The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag
  • Notice that the <script> tag should be inside the <head> section
  • <head> <script src="jquery-3.7.1.min.js"></script> </head>
    • Include jQuery from a CDN
  • <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head>

    • JQuery Syntaxes

    Basic syntax is: $(mySelector).myAction()
  • A $ sign to define/access jQuery
  • A (mySelector) to "query (or find)" HTML elements
  • A myAction() is the action to be performed on the element(s)
    • Syntax for the Document Ready Event is $(document).ready(function(){ // jQuery methods go here... });
    The shorter version is $(function(){ // jQuery methods go here... });
    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

    JQuery Selectors

    All selectors in jQuery start with the dollar sign and parentheses, $()
    JQuery Element Selectors
  • The jQuery element selector selects elements based on the element name
  • Example; $("p")
    • JQuery Id Selectors
  • The jQuery #id selector uses the id attribute of an HTML tag to find the specific element
  • Example; $("#myID")
    • JQuery Class Selectors
  • The jQuery .class selector finds elements with a specific class
  • Example; $(".myClass")
    • More jQuery selectors
  • $("*") = Select all elements
  • $(this) = Select current element
  • $("p.myClass") = Select paragraph element class="myClass"