According to its Website, “JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” And it is true.
jQuery makes it possible for your code to get an HTML element and do something cool with it. In the example, I’ll show how you can show and hide sections inside your page. But there are plenty more things you can do.
About jQuery
jQuery is a lightweight open source JavaScript library (only 15kb in size) that in a relatively short span of time has become one of the most popular libraries on the web.
In the past you would have needed to write something like this to access a value from a radio button in a group named someRadioGroup.
But in jQuery, all you need is
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var checkedValue = $('[name = "someRadioGroup"]:checked').val(); |
A big part of the appeal of jQuery is that it allows you to elegantly (and efficiently) find and manipulate HTML elements with minimum lines of code. jQuery supports this via a nice “selector” API that allows developers to query for HTML elements, and then apply “commands” to them. One of the characteristics of jQuery commands is that they can be “chained” together – so that the result of one command can feed into another. jQuery also includes a built-in set of animation APIs that can be used as commands.
Getting jQuery
jQuery is incredibly popular. So there are several ways you can get it. You can:
- Download it and then include it in the head or body of your HTML page.
- If your application is online, use a content delivery network to host the files, reference them from your HTML page.
Download
You can install the code into your site. Choose between:
- You can download jQuery from the jQuery website. And install it in a folder in your app.
- You can include jQuery in your Visual Studio project by using NuGet. To launch NuGet, right-click on the project’s references node and select the Manage NuGet Packages option. This launches the Manage NuGet Packages dialog. You can search for jQuery in the search box.
Note:If you are using Visual Studio there is a good chance that jQuery has already been included as part of the template you used to create your project. Be sure the version has the features you need.
CDN
You can get it from CDN.
Both Microsoft Ajax Content Delivery Network (CDN) and Google Hosted Libraries hosts popular third party JavaScript libraries such as jQuery and enables you to easily add them to your Web applications. For example, you can start using jQuery which is hosted on this CDN simply by adding a tag to your page that points to the host.
Both platforms make many versions available and also minified (optimized) or non-minified versions. See:
To allow your page to fallback to loading jQuery from a local path on your own website if the CDN happens to be unavailable, add the following element immediately after the element referencing the CDN:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| // Fallback to loading jQuery from a local path if the CDN is unavailable | |
| (window.jQuery || document.write('<script src="/scripts/jquery-1.9.0.min.js"><\/script>')); | |
| </script> |
Generally it will not matter which to use. Check that the network hosts the library you need.
Important Note: If you’re building an intranet application, stay away from the CDN approach. It doesn’t matter who’s hosting it, unless you’re on a very overloaded server internally, no CDN will give you more performance than local 100mb/1GB ethernet will. If you use a CDN for a strictly internal application you’re hurting performance. Set your cache expiration headers correctly and ignore CDNs exist in the intranet-only scenario.
Magic $
You can get to all of the jQuery functionality by calling jQuery() — which can also be written as $()
The jQuery function searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements. More on that. But first, you need to be sure jQuery is ready for you.
jQuery creates the $() alias for you, so you don’t have to type jQuery() every time you want to use it.
Making Sure jQuery is Loaded
You will want to be sure your jQuery has loaded before you start running your jQuery Code. A page can’t be manipulated safely until the document is “ready.” jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function () { | |
| //Code here | |
| }); |
Add a couple element in your HTML and at this point your page looks like this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <p id="hellothere" class="hello">Hello</p> | |
| <p class="hello">World</p> | |
| <script src="Scripts/jquery-2.1.0.js"></script> | |
| <script> | |
| $(document).ready(function () { | |
| //Code here | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Using CSS Selector to Get Access to HTML5
jQuery offers a powerful set of tools for matching a set of elements in a document. jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element by first getting the element or attribute.
What makes jQuery so easy to select elements is its selector engine, Sizzle, and it’s easy syntax, which is based on the same syntax you would use to select elements in CSS by borrowing from CSS 1-3.
Select by ID
In this example, we select some text using the <p> tag’s identifier hello using a #
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p id="hello">Hello World</p> | |
| .. omitted code | |
| //Select the element by it's ID | |
| var element = $("#hello"); |
Putting it all together, use this code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <p id="hellothere" class="hello">Hello</p> | |
| <p class="hello">World</p> | |
| <script src="Scripts/jquery-2.1.0.js"></script> | |
| <script> | |
| $(document).ready(function () { | |
| //Code here | |
| alert($("#hellothere").text()); // Hello | |
| }); | |
| </script> | |
| </body> | |
| </html> |
And then we get its text and show it in an alert.
Valid HTML requires that each ID be unique on the page. A page is not considered valid if there is more then one of the same ID on the page. Because of this, jQuery will only match the first element that matches that ID on the page.
Class Selector
Use the . to select a class. For example, you can recognize this as a selector of multiple elements by class:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p class="hello">Hello</p> | |
| <p class="hello">World</p> | |
| <script> | |
| //Select both element by it's class | |
| var elements = $(".hello"); | |
| </script> |
Note: Selectors return a jQuery object known as the “wrapped set,” which is an array-like structure that contains all the selected DOM elements. You can iterate over the wrapped set like an array or access individual elements via the indexer ($(sel)[0] for example). More importantly, you can also apply jQuery functions against all the selected elements.
This means you can continue working with return values. In the following example, The class selector returns elements that you can continue to operate on. In this case, an elements object are returned and then the background color is set to yellow.
Which give you this remarkable user experience:
More Complex Selectors
More complex selectors work the same way, using the same hierarchy as CSS.
jQuery selectors are required at every step while using jQuery. Selectors allow you to get the exact element/attribute you want from your HTML document. For example:
- $(“*”) selects all elements.
- $(“p”) selects all <p> elements.
- $(“p.intro”) selects all <p> elements with class=”intro”.
- $(“p#intro”) selects the first <p> elements with id=”intro”.
In the following example, we use assorted selectors and then apply the jQuery css function to the results.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body> | |
| <div> | |
| <div id="div1">My div with id attribute of div1</div> | |
| <div class="required">Here is the second message</div> | |
| <span>Here is the third message</span> | |
| </div> | |
| <script src="Scripts/jquery-2.1.0.js"></script> | |
| <script> | |
| $(document).ready(function () { | |
| // we'll put our code here | |
| alert('page ready'); | |
| // Id selector | |
| $("#div1").css("backgroundColor", "pink"); | |
| // Class selector | |
| $(".required").css("border", "dashed 2px red"); | |
| // Element selector | |
| $("span").css("color", "purple"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
NOTE: jQuery will fail silently if there are no elements that match your selection. There maybe a time when you will want to perform some actions based on if an element is present or not in the DOM. To test for an element we use the length property to test how many elements are in the DOM.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if ($(“div”).length) { | |
| //do something. | |
| } |
Selecting Multiple Elements
Using the CSS selector, you can also use multiple items in your selector such as
$('p a')
which would return the links (<a> elements) inside of a paragraph (<p> elements). so just as you would describe elements for styling purposes, you can get those items and then take action.
You can also select multiple elements:
$("div,span,p.myClass").css("border","3px solid red");
Filter Selectors
You can narrow your selection by using filters.
There are three kinds of filter selectors that you can use, numerical or positioned filters:
:first – Matches the first item in the context
:last – Matches the last item in the context
:first-child – Matches the first child item in the context
:last-child – Matches the last child item in the context
:only-child – Returns all items that have no siblings
:nth-child(n) – Matches the nth child item in the context
:nth-child(even|odd) – Matches the even or odd children in the context
:nth-child(xn+y) – Matches the nth children based on the formula. Examples: (3x+1) Get the first element after every third child. (3x) get every third child element.
:even – Match the even children in the context
:odd – Match the odd children in the context
:eq(n) – Match the child at the nth position in the context
:gt(n) – Match the children that are greater then the nth position in the context
:lt(n) – Match the children that are lesser then the nth position in the context
Traditional CSS filters:
:checked – Matches checkbox/radio button elements in checked state
:disabled – Matches disabled elements
:enabled – Matches enabled elements
:not(selector) – Matches elements that are not in the selection
Pseudo Selectors
jQuery also adds additional pseudo selectors to enable you to narrow your selection further. You can find out more about selectors by reviewing the complete reference Selector category on jQuery API site.
:animated – Matches elements that are being animated.
:button – Matches button elements
:checkbox – Matches checkbox elements
:contains(string) – Matches elements that contain specified string (i.e. $(“p:contains(jQuery)”);)
:file – Matches file input elements
:has(selector) – Matches elements that have at least one of the specified matched selector.
:header – Matches header elements. (i.e. h1-h6)
:hidden – Matches hidden elements
:image – Matches image input elements
:input – Matches form elements
:parent – Matches elements that have children, including text, which are not empty
:password – Matches elements of type password
:radio – Matches radio elements
:reset – Matches reset buttons
:selected – Matches option elements in selected state
:submit – Matches elements of type submit
:text – Matches elements of type text
:visible – Matches elements that are visible
References
- Microsoft CDN for jQuery or Google CDN?
- Learn more about the selectors in the NextechU post CSS3, jQuery Tutorial – Selectors Reference.
Sample Code
Sample code is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials