Book Excerpt: jQuery Essentials | Part 1

The basics of jQuery programmingIn 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 selectorsWhen 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

$("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> <div> <p>jQuery is a library of the JavaScript functions that you're most likely to need as you develop web sites. </p> </div> <h2 class="plus">Why is jQuery becoming so popular?</h2> <div> <p>Three reasons:</p> <ul> <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> </ul> </div> </section>

How to select elements by element, id, and class

By element type: All <p> elements in the entire document$("p")

By id: The element with "faqs" as its id$("#faqs")

By class: All elements with "plus" as a class$(".plus")

How to select elements by relationship

Descendants: All <p> elements that are descendants of the section element$("#faqs p");

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")

DescriptionWhen 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 methodsOnce 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

$("selector").methodName(parameters)

Some common jQuery methods

Method

Description

val()

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

val(value)

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

text()

Get the text of an element.

text(value)

Set the text of an element.

next([type])

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

submit()

Submit the selected form.

focus()

Move the focus to the selected form control or link.

Examples

How to get the value from a text box

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

How to set the value for an input element

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

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

$("#join_list").submit();

How to move the focus to a form control or link

$("#email_address").focus();

Description

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.

CIO, CTO & Developer Resources

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 methodsWhen 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 });

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.

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.

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.

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.

"We're here to tell the world about our cloud-scale infrastructure that we have at Juniper combined with the world-class security that we put into the cloud," explained Lisa Guess, VP of Systems Engineering at Juniper Networks, in this SYS-CON.tv interview at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.

Enterprise architects are increasingly adopting multi-cloud strategies as they seek to utilize existing data center assets, leverage the advantages of cloud computing and avoid cloud vendor lock-in. This requires a globally aware traffic management strategy that can monitor infrastructure health across data centers and end-user experience globally, while responding to control changes and system specification at the speed of today’s DevOps teams. In his session at 20th Cloud Expo, Josh Gray, Chie...

"We're a cybersecurity firm that specializes in engineering security solutions both at the software and hardware level. Security cannot be an after-the-fact afterthought, which is what it's become," stated Richard Blech, Chief Executive Officer at Secure Channels, in this SYS-CON.tv interview at @ThingsExpo, held November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA.

In his session at 20th Cloud Expo, Mike Johnston, an infrastructure engineer at Supergiant.io, discussed how to use Kubernetes to set up a SaaS infrastructure for your business. Mike Johnston is an infrastructure engineer at Supergiant.io with over 12 years of experience designing, deploying, and maintaining server and workstation infrastructure at all scales. He has experience with brick and mortar data centers as well as cloud providers like Digital Ocean, Amazon Web Services, and Rackspace. H...

SYS-CON Events announced today that Grape Up will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct. 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Grape Up is a software company specializing in cloud native application development and professional services related to Cloud Foundry PaaS. With five expert teams that operate in various sectors of the market across the U.S. and Europe, Grape Up works with a variety of customers from emergi...

You know you need the cloud, but you’re hesitant to simply dump everything at Amazon since you know that not all workloads are suitable for cloud. You know that you want the kind of ease of use and scalability that you get with public cloud, but your applications are architected in a way that makes the public cloud a non-starter. You’re looking at private cloud solutions based on hyperconverged infrastructure, but you’re concerned with the limits inherent in those technologies.

SYS-CON Events announced today that Massive Networks will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Massive Networks mission is simple. To help your business operate seamlessly with fast, reliable, and secure internet and network solutions. Improve your customer's experience with outstanding connections to your cloud.

DevOps is under attack because developers don’t want to mess with infrastructure. They will happily own their code into production, but want to use platforms instead of raw automation. That’s changing the landscape that we understand as DevOps with both architecture concepts (CloudNative) and process redefinition (SRE).
Rob Hirschfeld’s recent work in Kubernetes operations has led to the conclusion that containers and related platforms have changed the way we should be thinking about DevOps and...

SYS-CON Events announced today that SkyScale will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. SkyScale is a world-class provider of cloud-based, ultra-fast multi-GPU hardware platforms for lease to customers desiring the fastest performance available as a service anywhere in the world. SkyScale builds, configures, and manages dedicated systems strategically located in maximum-security...

The question before companies today is not whether to become intelligent, it’s a question of how and how fast. The key is to adopt and deploy an intelligent application strategy while simultaneously preparing to scale that intelligence.
In her session at 21st Cloud Expo, Sangeeta Chakraborty, Chief Customer Officer at Ayasdi, will provide a tactical framework to become a truly intelligent enterprise, including how to identify the right applications for AI, how to build a Center of Excellence to...

Everything run by electricity will eventually be connected to the Internet. Get ahead of the Internet of Things revolution and join Akvelon expert and IoT industry leader, Sergey Grebnov, in his session at @ThingsExpo, for an educational dive into the world of managing your home, workplace and all the devices they contain with the power of machine-based AI and intelligent Bot services for a completely streamlined experience.

Because IoT devices are deployed in mission-critical environments more than ever before, it’s increasingly imperative they be truly smart. IoT sensors simply stockpiling data isn’t useful. IoT must be artificially and naturally intelligent in order to provide more value
In his session at @ThingsExpo, John Crupi, Vice President and Engineering System Architect at Greenwave Systems, will discuss how IoT artificial intelligence (AI) can be carried out via edge analytics and machine learning techn...

FinTechs use the cloud to operate at the speed and scale of digital financial activity, but are often hindered by the complexity of managing security and compliance in the cloud. In his session at 20th Cloud Expo, Sesh Murthy, co-founder and CTO of Cloud Raxak, showed how proactive and automated cloud security enables FinTechs to leverage the cloud to achieve their business goals. Through business-driven cloud security, FinTechs can speed time-to-market, diminish risk and costs, maintain continu...

With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, will examine the regulations and provide insight on how it affects technology, challenges the established rules and will usher in new levels of diligence a...

Existing Big Data solutions are mainly focused on the discovery and analysis of data. The solutions are scalable and highly available but tedious when swapping in and swapping out occurs in disarray and thrashing takes place. The resolution for thrashing through machine learning algorithms and support nomenclature is through simple techniques. Organizations that have been collecting large customer data are increasingly seeing the need to use the data for swapping in and out and thrashing occurs ...

As many know, the first generation of Cloud Management Platform (CMP) solutions were designed for managing virtual infrastructure (IaaS) and traditional applications. But that’s no longer enough to satisfy evolving and complex business requirements. In his session at 21st Cloud Expo, Scott Davis, Embotics CTO, will explore how next-generation CMPs ensure organizations can manage cloud-native and microservice-based application architectures, while also facilitating agile DevOps methodology. He wi...

yperConvergence came to market with the objective of being simple, flexible and to help drive down operating expenses. It reduced the footprint by bundling the compute/storage/network into one box. This brought a new set of challenges as the HyperConverged vendors are very focused on their own proprietary building blocks. If you want to scale in a certain way, let’s say you identified a need for more storage and want to add a device that is not sold by the HyperConverged vendor, forget about it....

Cloud adoption is often driven by a desire to increase efficiency, boost agility and save money. All too often, however, the reality involves unpredictable cost spikes and lack of oversight due to resource limitations.
In his session at 20th Cloud Expo, Joe Kinsella, CTO and Founder of CloudHealth Technologies, tackled the question: “How do you build a fully optimized cloud?” He will examine:
Why TCO is critical to achieving cloud success – and why attendees should be thinking holistically ab...

SYS-CON Events announced today that Datera, that offers a radically new data management architecture, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
Datera is transforming the traditional datacenter model through modern cloud simplicity.
The technology industry is at another major inflection point. The rise of mobile, the Internet of Things, data storage and Big...

Blockchain is a shared, secure record of exchange that establishes trust, accountability and transparency across business networks. Supported by the Linux Foundation's open source, open-standards based Hyperledger Project, Blockchain has the potential to improve regulatory compliance, reduce cost as well as advance trade. Are you curious about how Blockchain is built for business? In her session at 21st Cloud Expo, René Bostic, Technical VP of the IBM Cloud Unit in North America, will discuss th...

In 2016, artificial intelligence (AI) reached its climax. Research and advisory firm Tractica predicted that the annual worldwide AI revenue will grow from $643.7 million in 2016 to $38.8 billion by 2025. The revenue for enterprise AI applications will increase from $358 million in 2016 to $31.2 billion by 2025, representing a compound annual growth rate (CAGR) of 64.3%. Thus, IT and business decision makers must face up to the potentials of AI already today. For each kind of organization this leads to the question, which type of technologies or infrastructure they can leverage to operate an A...

I recently had the opportunity to give a 10-minute keynote at DataWorks Summit 2017. I know what most of you are thinking: Schmarzo can barely introduce himself in 10 minutes! What sort of keynote could he give in just 10 minutes? And to be honest, I too struggled with what to say.
But after some brainstorming with my marketing experts (Jeff Abbott, Erin Banks, and Chris Hill), we came up with an idea: Pose 5 questions that every organization needs to consider as they prepare themselves for digital transformation. And while I didn’t have enough time in 10 minutes to answer those questions...

In preparation for General Data Protection Regulation (GDPR) compliance, a global 100 financial services organization embarked on a journey to assess its core information processing environments with the objective of identifying opportunities to strengthen its data privacy protection programs. This article focuses on the technology challenges, approach, and lessons learned for the centralized testing environment.

Existing Big Data solutions are mainly focused on the discovery and analysis of data. The solutions are scalable and highly available but tedious when swapping in and swapping out occurs in disarray and thrashing takes place. The resolution for thrashing through machine learning algorithms and support nomenclature is through simple techniques. Organizations that have been collecting large customer data are increasingly seeing the need to use the data for swapping in and out and thrashing occurs in both transaction processing and online analytical processing. Therefore, there is a growing need ...

We all probably remember the movie (“Jurassic Park”), even if we don’t remember this exact scene: Dr. Malcolm, played by Jeff Goldblum is explaining Chaos Theory to Dr. Ellie Sattler, played by Laura Dern.
Dr. Malcolm is explaining how random, seemingly negligible events can disrupt even the most carefully laid out plans.
Dr. Ian Malcolm: [after the T-Rex failed to appear for the tour group]. “You see a Tyrannosaur doesn’t follow a set pattern or park schedules, the essence of chaos.”

Increasingly, in a world of compressed times and distances, humans will be the inventors, designers and managers of digital systems and processes, rather than the operators. Operations will be measured in milliseconds, an inhumane speed where only the machines can deliver.
Professor Paul Virilio, a philosopher of speed, urbanist and cultural theorist, wrote at length about the impact of speed on society. He wrote that speed compresses both time and distance. Where once it took a letter 6 months to get to the other side of the world, an email can now arrive in seconds. Today's near real-tim...

The renowned military strategist John Boyd taught that people and institutions collect favorite philosophies, strategies, theories and ideologies over a period of time, and then try to align the future to fit them. The problem with this is the future is rarely like the past, and trying to fit new data into old paradigms often forces us to perform irrational mental gymnastics, which leaves us farther from the truth.

With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, Cloud Expo and @ThingsExpo are two of the most important technology events of the year. Since its launch over eight years ago, Cloud Expo and @ThingsExpo have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, I provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading these essential tips, please take a moment and watch this brief video from Sandy Carter.

In the cloud era, you as an IT professional are being forced to adopt new roles and take on new responsibilities you may not feel equipped to handle. Businesses are becoming increasingly hybrid, leaving you to manage, secure, monitor, and remediate technology on-premises and in the cloud. Of course, this comes with risks because it means you must manage mission-critical layers of application services across networks, systems, and services you neither own nor control. In fact, in many cases, you may not even have visibility into all the environments you’re responsible to ensure the performance ...

SYS-CON Events announced today that DXWorldExpo has been named “Global Sponsor” of SYS-CON's 21st International Cloud Expo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Digital Transformation is the key issue driving the global enterprise IT business. Digital Transformation is most prominent among Global 2000 enterprises and government institutions.

Having a well-rounded brand strategy helps you identify the marketing channels you must focus on, and defines every aspect of how your business is viewed by your customers.
Marketing and advertising is an integral component of every business. The US Small Business Administration recommends that businesses with do under $5 million in gross sales and whose net profit margin is in the 10-12% should spend at least 7-8% of their gross revenue in marketing and advertising. In other words, if you are doing $100,000 in annual revenue, you should be spending around $8,000 a year in advertising your b...

I have had the opportunity to work for and around a good many start-ups during the course of my career. Often the start-up founders would simply define a problem, develop a solution and launch a company. The marketing department would then do their very best to identify the individuals in each target company that experienced the problem and had a budget to fix it. This was always a challenging task, that has become even harder today.

Deep learning has been very successful in social sciences and specially areas where there is a lot of data. Trading is another field that can be viewed as social science with a lot of data. With the advent of Deep Learning and Big Data technologies for efficient computation, we are finally able to use the same methods in investment management as we would in face recognition or in making chat-bots. In his session at 20th Cloud Expo, Gaurav Chakravorty, co-founder and Head of Strategy Development at qplum, discussed the transformational impact of Artificial Intelligence and Deep Learning in maki...

From manual human effort the world is slowly paving its way to a new space where most process are getting replaced with tools and systems to improve efficiency and bring down operational costs. Automation is the next big thing and low code platforms are fueling it in a significant way.
The Automation era is here. We are in the fast pace of replacing manual human efforts with machines and processes. In the world of Information Technology too, we are linking disparate systems, softwares and tools to make things self sustaining. This is called Automation.It has been helping companies overcome t...

Cloud computing budgets worldwide are reaching into the hundreds of billions of dollars, and no organization can survive long without some sort of cloud migration strategy. Each month brings new announcements, use cases, and success stories.