Click here to close now.


Microservices Expo Authors: Carmen Gonzalez, Lori MacVittie, Tim Hinds, Sanjeev Sharma, Elizabeth White

Related Topics: Java IoT, Microservices Expo, IBM Cloud, Weblogic, IoT User Interface, Apache

Java IoT: Article

Book Excerpt: jQuery Essentials | Part 1

An introduction to jQuery

The basics of jQuery programming
In the next three figures, you're going to learn the basics of jQuery programming. Then, you'll study an application that uses these skills. That will show you how jQuery simplifies JavaScript programming.

How to code jQuery selectors
When you use jQuery, you start by selecting the element or elements that you want to apply a jQuery method to. To do that, you can use jQuery selectors as shown in Figure 4.

The syntax for a jQuery selector


The HTML for the elements that are selected by the examples

<section id="faqs">
<h1>jQuery FAQs</h1>
<h2 class="plus">What is jQuery?</h2>
<p>jQuery is a library of the JavaScript functions that you're most
likely to need as you develop web sites.
<h2 class="plus">Why is jQuery becoming so popular?</h2>
<p>Three reasons:</p>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions cross-browser compatible.</li>

How to select elements by element, id, and class

  • By element type: All <p> elements in the entire document
  • By id: The element with "faqs" as its id
  • By class: All elements with "plus" as a class

How to select elements by relationship

  • Descendants: All <p> elements that are descendants of the section element
    $("#faqs p");
  • Adjacent siblings: All div elements that are adjacent siblings of h2 elements
    $("h2 + div")
  • General siblings: All <p> elements that are siblings of ul elements
    $("ul ~ p")
  • Children: All ul elements that are children of div elements
    $("div > ul")

How to code multiple selectors

$("#faqs li, div p")
$("p + ul, div ~ p")

When you use jQuery, the dollar sign ($) is used to refer to the jQuery library. Then, you can code selectors by using the CSS syntax within quotation marks within parentheses.

Figure 4: How to code jQuery selectors

To code a jQuery selector, you start by coding the dollar sign ($) followed by set of parentheses that contains a set of quotation marks. Then, within the quotation marks, you code the CSS selector for the element or elements that you want to select. This is shown by the syntax summary at the top of this figure.

The HTML and the examples that follow show how easy it is to select one or more elements with jQuery. For instance, the first selector in the first group of examples selects all <p> elements within the entire document. The second selector selects the element with "faqs" as its id. And the third selector selects all elements with "plus" as the value of its class attribute.

In the second group of examples, you can see how other types of CSS selectors are coded with jQuery. Here, you can see how descendants, adjacent siblings, general siblings, and children are coded. For instance, the first selector gets all <p> elements that are descendants of the element with "faqs" as its id. That includes all of the <p> elements in the HTML in this figure.

In contrast, the second selector gets the div elements that are adjacent siblings to the h2 elements, which includes all of the div elements. The third selector gets all <p> elements that are siblings of ul elements, which selects the one <p> element in the second div element. And the fourth selector gets all ul elements that are children of div elements, which selects the ul element in the second div element.

The third group of examples shows how to code multiple selectors. To do that, you separate them with commas, just as you do with CSS.

How to call jQuery methods
Once you've selected the element or elements that you want to apply a method to, you call the method using the syntax shown at the top of Figure 5. This is the same way that you call a method of any object. You code the selector that gets the element or elements, the dot, the method name, and any parameters within parentheses.

The syntax for calling a jQuery method


Some common jQuery methods




Get the value of a text box or other form control.


Set the value of a text box or other form control.


Get the text of an element.


Set the text of an element.


Get the next sibling of an element or the next sibling of a specified type if the parameter is coded.


Submit the selected form.


Move the focus to the selected form control or link.


How to get the value from a text box

var gallons = $("#gallons").val();

How to set the value for an input element


How to set the text in an element

$("#email_address_error").text("Email address is required");

How to set the text for the next sibling with object chaining

$("#last_name").next().text("Last name is required");

How to submit a form


How to move the focus to a form control or link



ŸTo call a jQuery method, you code a selector, the dot operator, the method name, and any parameters within parentheses. Then, that method is applied to the element or elements that are selected by the selector.

When you use object chaining with jQuery, you code one method after the other. This works because each method returns the appropriate object.

ŸIf the selector for a method selects more than one element, jQuery applies the method to all of the elements so you don't have to code a loop to do that.

Figure 5: How to call jQuery methods

To get you started with jQuery, the table in this figure summarizes some of the jQuery methods that you'll use the most. For instance, the val method without a parameter gets the value from a selected text box or other form control, and the val method with a parameter sets the value in a selected text box or other form control. The first two examples after the table show how this works.

Similarly, the text method without a parameter can be used to get the text of a selected element, and the text method with a parameter can be used to set the text of a selected element. Methods like these are often referred to as getter and setter methods. Here, third example illustrates the setter version of the text method, which sets the text of an element to "Email address is required".

The fifth method in the table is the next method, which is used to get the next (or adjacent) sibling of an element. This method is often followed by another method. To do that, you use object chaining, which works just as it does with JavaScript. This is illustrated by the fourth example. Here, the next method gets the next sibling after the element that has been selected, and the text method sets the text for that sibling.

The last two methods in the table are the submit and focus methods, which are just like the JavaScript submit and focus methods. The submit method submits the data for a selected form to the server, and the focus method moves the focus to the selected form control or link.

In a moment, you'll see how these selectors and methods work in an application. But first, you need to learn how to set up the event handlers for an application.

How to use jQuery event methods
When you use jQuery, you use event methods to attach event handlers to events. To do that, you use the syntax shown at the top of Figure 6. First, you code the selector for the element that will initiate the event like a button that will be clicked. Then, you code the name of the event method that represents the event that you want to use. Last, you code a function that will be the event handler for the event within parentheses.

The syntax for a jQuery event method

$(selector).eventMethodName(function() {
// the statements of the event handler

Two common jQuery event methods

Event method



The event handler runs when the DOM is ready.


The event handler runs when the selected element is clicked.

Two ways to code an event handler for the jQuery ready event

The long way

$(document).ready(function() {
alert("The DOM is ready");

The short way

$(function(){                // (document).ready is assumed
alert("The DOM is ready");

An event handler for the click event of all h2 elements

$("h2").click(function() {
alert("This heading has been clicked");

The click event handler within the ready event handler

$(document).ready(function() {
$("h2").click(function() {
alert("This heading has been clicked");
}); // end of click event handler
}); // end of ready event handler


  • To code a jQuery event handler, you code a selector, the dot operator, the name of the jQuery event method, and an anonymous function that handles the event within parentheses.
  • The event handler for the ready event will run any methods that it contains as soon as the DOM is ready, even if the browser is loading images and other content for the page. This works better than the JavaScript onload event, which doesn't occur until all of the content for the page is loaded.
  • In this book, the ready event is always coded the long way that's shown above. In practice, though, many programmers use the short way.
  • When coding one event handler within another, the use of the closing braces, parentheses, and semicolons is critical. To help get this right, many programmers code inline comments after these punctuation marks to identify the ends of the handlers.

Figure 6: How to use jQuery event methods

In the table in this figure, the two event methods that you'll use the most are summarized. The ready event is the jQuery alternative to the JavaScript load event, except that it works better. Unlike the load event, the ready event is triggered as soon as the DOM is built, even if other elements like images are still being loaded into the browser. This means that the user can start using the web page faster.

Because the DOM usually has to be built before you can use JavaScript or jQuery, you'll probably use the ready event method in every JavaScript application that you develop. The examples in this figure show two ways to do that. In the long form, you use document as the selector for the web page followed by the dot, the method name (ready), and the function for the event handler.

In the short form, you can omit the selector and event method name and just code the function in parentheses after the dollar sign. Although this form is often used by professional developers, all of the examples in this book use the long form. That way, it's clear where the ready event handler starts.

The next example in this figure shows an event handler for the click event of all h2 elements. This is coded just like the event handler for the ready event except h2 is used as the selector and click is used as the name of the event method.

The last example in this figure shows how you code an event handler within the ready event handler. Note here that the closing brace, parenthesis, and semicolon for each event handler is critical. As you can guess, it's easy to omit one of these marks or get them out of sequence so this is a frequent source of errors. That's why professional programmers often code inline comments after the ending marks for each event handler to identify which event handler the marks are for.

More Stories By Mike Murach

As a freelance writer many years ago, Mike Murach decided that he had to develop his own writing methods because the ones that others were using clearly didn’t work. Since then, Mike and his staff have continued to refine those methods, so today every Murach book becomes the best one on its subject. Now, after a long hiatus from writing, Mike has teamed with Zak Ruvalcaba to write Murach’s JavaScript and jQuery.

More Stories By Zak Ruvalcaba

Zak Ruvalcaba has been researching, designing, and developing for the Web since 1995. He holds a BS from San Diego State University and an MS in instructional technology from National University in San Diego.

Zak's skillset includes HTML/HTML5, CSS/CSS3, JavaScript, jQuery, ASP.NET, ADO.NET, Visual Basic, C#, Web Services, and Flash/ActionScript. He is also a Microsoft Certified Application Developer for .NET (MCAD) and a Microsoft Certified Solutions Developer for .NET (MCSD).

In his spare time, Zak teaches web development courses for the San Diego Community College District, Mt. San Jacinto Community College and Palomar Community College.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

@MicroservicesExpo Stories
Containers have changed the mind of IT in DevOps. They enable developers to work with dev, test, stage and production environments identically. Containers provide the right abstraction for microservices and many cloud platforms have integrated them into deployment pipelines. DevOps and Containers together help companies to achieve their business goals faster and more effectively.
Docker is hot. However, as Docker container use spreads into more mature production pipelines, there can be issues about control of Docker images to ensure they are production-ready. Is a promotion-based model appropriate to control and track the flow of Docker images from development to production? In his session at DevOps Summit, Fred Simon, Co-founder and Chief Architect of JFrog, will demonstrate how to implement a promotion model for Docker images using a binary repository, and then show h...
Application availability is not just the measure of “being up”. Many apps can claim that status. Technically they are running and responding to requests, but at a rate which users would certainly interpret as being down. That’s because excessive load times can (and will be) interpreted as “not available.” That’s why it’s important to view ensuring application availability as requiring attention to all its composite parts: scalability, performance, and security.
Achim Weiss is Chief Executive Officer and co-founder of ProfitBricks. In 1995, he broke off his studies to co-found the web hosting company "Schlund+Partner." The company "Schlund+Partner" later became the 1&1 web hosting product line. From 1995 to 2008, he was the technical director for several important projects: the largest web hosting platform in the world, the second largest DSL platform, a video on-demand delivery network, the largest eMail backend in Europe, and a universal billing syste...
There once was a time when testers operated on their own, in isolation. They’d huddle as a group around the harsh glow of dozens of CRT monitors, clicking through GUIs and recording results. Anxiously, they’d wait for the developers in the other room to fix the bugs they found, yet they’d frequently leave the office disappointed as issues were filed away as non-critical. These teams would rarely interact, save for those scarce moments when a coder would wander in needing to reproduce a particula...
Last month, my partners in crime – Carmen DeArdo from Nationwide, Lee Reid, my colleague from IBM and I wrote a 3-part series of blog posts on We titled our posts the Simple Math, Calculus and Art of DevOps. I would venture to say these are must-reads for any organization adopting DevOps. We examined all three ascpects – the Cultural, Automation and Process improvement side of DevOps. One of the key underlying themes of the three posts was the need for Cultural change – things like t...
In today's digital world, change is the one constant. Disruptive innovations like cloud, mobility, social media, and the Internet of Things have reshaped the market and set new standards in customer expectations. To remain competitive, businesses must tap the potential of emerging technologies and markets through the rapid release of new products and services. However, the rigid and siloed structures of traditional IT platforms and processes are slowing them down – resulting in lengthy delivery ...
Overgrown applications have given way to modular applications, driven by the need to break larger problems into smaller problems. Similarly large monolithic development processes have been forced to be broken into smaller agile development cycles. Looking at trends in software development, microservices architectures meet the same demands. Additional benefits of microservices architectures are compartmentalization and a limited impact of service failure versus a complete software malfunction....
Containers are changing the security landscape for software development and deployment. As with any security solutions, security approaches that work for developers, operations personnel and security professionals is a requirement. In his session at @DevOpsSummit, Kevin Gilpin, CTO and Co-Founder of Conjur, will discuss various security considerations for container-based infrastructure and related DevOps workflows.
It is with great pleasure that I am able to announce that Jesse Proudman, Blue Box CTO, has been appointed to the position of IBM Distinguished Engineer. Jesse is the first employee at Blue Box to receive this honor, and I’m quite confident there will be more to follow given the amazing talent at Blue Box with whom I have had the pleasure to collaborate. I’d like to provide an overview of what it means to become an IBM Distinguished Engineer.
The cloud has reached mainstream IT. Those 18.7 million data centers out there (server closets to corporate data centers to colocation deployments) are moving to the cloud. In his session at 17th Cloud Expo, Achim Weiss, CEO & co-founder of ProfitBricks, will share how two companies – one in the U.S. and one in Germany – are achieving their goals with cloud infrastructure. More than a case study, he will share the details of how they prioritized their cloud computing infrastructure deployments ...
Opinions on how best to package and deliver applications are legion and, like many other aspects of the software world, are subject to recurring trend cycles. On the server-side, the current favorite is container delivery: a “full stack” approach in which your application and everything it needs to run are specified in a container definition. That definition is then “compiled” down to a container image and deployed by retrieving the image and passing it to a container runtime to create a running...
Between the compelling mockups and specs produced by analysts, and resulting applications built by developers, there exists a gulf where projects fail, costs spiral, and applications disappoint. Methodologies like Agile attempt to address this with intensified communication, with partial success but many limitations. In his session at DevOps Summit, Charles Kendrick, CTO and Chief Architect at Isomorphic Software, will present a revolutionary model enabled by new technologies. Learn how busine...
If you are new to Python, you might be confused about the different versions that are available. Although Python 3 is the latest generation of the language, many programmers still use Python 2.7, the final update to Python 2, which was released in 2010. There is currently no clear-cut answer to the question of which version of Python you should use; the decision depends on what you want to achieve. While Python 3 is clearly the future of the language, some programmers choose to remain with Py...
The web app is agile. The REST API is agile. The testing and planning are agile. But alas, data infrastructures certainly are not. Once an application matures, changing the shape or indexing scheme of data often forces at best a top down planning exercise and at worst includes schema changes that force downtime. The time has come for a new approach that fundamentally advances the agility of distributed data infrastructures. Come learn about a new solution to the problems faced by software organ...
Internet of Things (IoT) will be a hybrid ecosystem of diverse devices and sensors collaborating with operational and enterprise systems to create the next big application. In their session at @ThingsExpo, Bramh Gupta, founder and CEO of, and Fred Yatzeck, principal architect leading product development at, discussed how choosing the right middleware and integration strategy from the get-go will enable IoT solution developers to adapt and grow with the industry, while at th...
As we increasingly rely on technology to improve the quality and efficiency of our personal and professional lives, software has become the key business differentiator. Organizations must release software faster, as well as ensure the safety, security, and reliability of their applications. The option to make trade-offs between time and quality no longer exists—software teams must deliver quality and speed. To meet these expectations, businesses have shifted from more traditional approaches of d...
Ten years ago, there may have been only a single application that talked directly to the database and spit out HTML; customer service, sales - most of the organizations I work with have been moving toward a design philosophy more like unix, where each application consists of a series of small tools stitched together. In web example above, that likely means a login service combines with webpages that call other services - like enter and update record. That allows the customer service team to writ...
JFrog has announced a powerful technology for managing software packages from development into production. JFrog Artifactory 4 represents disruptive innovation in its groundbreaking ability to help development and DevOps teams deliver increasingly complex solutions on ever-shorter deadlines across multiple platforms JFrog Artifactory 4 establishes a new category – the Universal Artifact Repository – that reflects JFrog's unique commitment to enable faster software releases through the first pla...
Somebody call the buzzword police: we have a serious case of microservices-washing in progress. The term “microservices-washing” is derived from “whitewashing,” meaning to hide some inconvenient truth with bluster and nonsense. We saw plenty of cloudwashing a few years ago, as vendors and enterprises alike pretended what they were doing was cloud, even though it wasn’t. Today, the hype around microservices has led to the same kind of obfuscation, as vendors and enterprise technologists alike ar...