Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying jQuery 2.0 Development Cookbook
  • Table Of Contents Toc
  • Feedback & Rating feedback
jQuery 2.0 Development Cookbook

jQuery 2.0 Development Cookbook

By : Leon Revill
4.2 (12)
Buy this Book
close
close
jQuery 2.0 Development Cookbook

jQuery 2.0 Development Cookbook

4.2 (12)
By: Leon Revill
Buy this Book

Overview of this book

Taking a recipe-based approach, this book presents numerous practical examples that you can use directly in your applications. The book covers the essential issues you will face while developing your web applications and gives you solutions to them. The recipes in this book are written in a manner that rapidly takes you from beginner to expert level. This book is for web developers of all skill levels. Although some knowledge of JavaScript, HTML, and CSS is required, this Cookbook will teach jQuery newcomers all the basics required to move on to the more complex examples of this book, which will benefit the more seasoned jQuery developer. If you want to learn how to create modern website features quickly, using best practice techniques, then this book is for you.
Table of Contents (12 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Document Object Model Manipulation
chevron up
Icon
1. Document Object Model Manipulation
Icon
Introduction
Icon
Selecting elements
Icon
Finding and selecting sibling elements
Icon
Creating DOM elements
Icon
Inserting content into an element
Icon
Modifying the DOM element properties
Icon
Adding and removing CSS classes to dynamically change their style
Icon
Enabling and disabling buttons by changing their properties
Icon
Updating an image within a page
Icon
Populating list elements
Icon
Understanding pagination
Icon
Removing DOM elements
Icon
Re-using DOM elements
2
2. Interacting with the User by Making Use of jQuery Events
Icon
2. Interacting with the User by Making Use of jQuery Events
Icon
Introduction
Icon
Detecting button clicks
Icon
Detecting element clicks
Icon
Detecting change
Icon
Updating content based on user input
Icon
Detecting key press events on inputs
Icon
Restricting input character length
Icon
Changing page elements on mouse hover
Icon
Triggering events manually
Icon
Preventing event triggers
Icon
Creating a custom event
3
3. Loading and Manipulating Dynamic Content with AJAX and JSON
Icon
3. Loading and Manipulating Dynamic Content with AJAX and JSON
Icon
Introduction
Icon
Loading HTML from a web server into a page
Icon
Using AJAX and handling server errors
Icon
Processing JSON data
Icon
Searching JavaScript objects
Icon
Sorting JavaScript objects
Icon
Caching JSON and AJAX requests
Icon
Creating a search feature
Icon
Creating an autosuggest feature
Icon
Waiting for an AJAX response
4
4. Adding Attractive Visuals with jQuery Effects
Icon
4. Adding Attractive Visuals with jQuery Effects
Icon
Introduction
Icon
Sliding page elements
Icon
Hiding and showing elements
Icon
Fading elements
Icon
Toggling effects
Icon
Stopping effects
Icon
Chaining effects
Icon
Creating a basic photo gallery
Icon
Creating a blinking button
Icon
Removing elements with effects
5
5. Form Handling
Icon
5. Form Handling
Icon
Introduction
Icon
Implementing basic form validation
Icon
Adding number validation
Icon
Adding credit card number validation
Icon
Adding date validation
Icon
Adding e-mail address validation
Icon
Implementing live form validation
Icon
Adding a password strength indicator
Icon
Adding anti-spam measures
Icon
Implementing input character restrictions
6
6. User Interface
Icon
6. User Interface
Icon
Introduction
Icon
Manipulating element CSS
Icon
Creating a news ticker
Icon
Creating sticky elements
Icon
Implementing smooth scrolling
Icon
Creating a dynamic table of contents
Icon
Creating a basic drag-and-drop functionality
Icon
Creating a dynamic animated tree menu
Icon
Creating an accordion content slider
Icon
Creating tabbed content
Icon
Creating a modal pop up
Icon
Creating a draggable content pop up
7
7. User Interface Animation
Icon
7. User Interface Animation
Icon
Introduction
Icon
Creating an animated login form
Icon
Adding photo zoom
Icon
Creating an animated content slider
Icon
Animating background images
Icon
Creating an animated navigation menu
8
8. Understanding Plugin Development
Icon
8. Understanding Plugin Development
Icon
Introduction
Icon
Creating a plugin template
Icon
Creating a tooltip plugin
Icon
Building a content and image slider plugin
Icon
Creating an RSS feed reader plugin
Icon
Coding an image cropper plugin from scratch
9
9. jQuery UI
Icon
9. jQuery UI
Icon
Introduction
Icon
Creating stylish and functional buttons
Icon
Creating dialog boxes for user information and input
Icon
Implementing progress bars within your application
Icon
Adding date picker interfaces to input boxes quickly
Icon
Creating an autocomplete search feature
10
10. Working with jQuery Mobile
Icon
10. Working with jQuery Mobile
Icon
Introduction
Icon
Creating a basic mobile website template
Icon
Building a complete static website
Icon
Building a dynamic mobile website
Icon
Implementing the quick call functionality
Icon
Implementing the send SMS functionality
Icon
Adding mobile-friendly lists
Icon
Using touch-oriented events
Icon
Creating mobile-compatible forms
Icon
Building a complete registration and login system
Icon
Building a complete mobile web app
11
Index
Icon
Index

Adding and removing CSS classes to dynamically change their style

jQuery comes bundled with class manipulation functions in order to allow developers to easily alter the style of any HTML element.

Getting ready

For element style changes to be of any use, we first need to declare some styles within an HTML document. The following HTML code has a range of styles and elements that we can work with to illustrate this functionality of jQuery:

<!DOCTYPE html>
<html>
<head>
   <title>Add and remove CSS classes to dynamically change their style</title>
   <script src="jquery.min.js"></script>
   <script></script>
   <style type="text/css">
      .green {
         background-color: #008000;
         color: #FFFFFF;
      }
      .red {
         background-color: #FF0000;
         color: #FFFFFF;
      }
      .yellow {
         background-color: #FFFF00;
         color: #000000;
      }
   </style>
</head>
<body>
   <p id="sometext">
      Here is some text that can have different styles applied to it dynamically</p>
   <button id="green-btn">Green</button>
   <button id="red-btn">Red</button>
   <button id="yellow-btn">Yellow</button>
</body>
</html>

Within this HTML code, we have three buttons with their own unique IDs. We also have a paragraph with an ID. There are three CSS classes defined: green, red, and yellow. With jQuery, we can listen for the click of either of these buttons and then dynamically apply one of these classes to the paragraph element.

If you save this HTML file and open it within a browser, you should have the following web page:

Getting ready

How to do it…

  1. Add the following JavaScript code within the script tags in the HTML page you have just created:
    $(function(){
   //Listen for a click event on the green button
$('#green-btn').click(function(){
   //When the green button has been clicked
   //Remove all classes current on the #sometext paragraph
   $('#sometext').removeClass();
   //Add the .green class to the #sometext paragraph
   $('#sometext').addClass('green');
});
   //Listen for a click on the red button
$('#red-btn').click(function(){
   //When the red button has been clicked
   //Remove all classes from the #sometext paragraph
   $('#sometext').removeClass(); 
   //Add the .red class to the #sometext paragraph 
   $('#sometext').addClass('red');
   });
   //Listen for a click on the yellow button
   $('#yellow-btn').click(function(){
      //When the yellow button has been clicked
      //Remove all classes from the #sometext paragraph
   $('#sometext').removeClass();
   //Add the .yellow class to the #sometext paragraph 
   $('#sometext').addClass('yellow');
   });
});
  2. Opening the HTML document in your browser will now allow you to change the #sometext paragraph style by selecting either of the three available buttons.

How it works…

jQuery allows us to attach a click event handler to any element by using the click() function. We can then execute a set of code of our choice by passing a function as an argument to the click() method. To add a class to an element, we can use the addClass() function and provide the class name as a string argument. This function will add the specified class name to the selected element.

jQuery also provides us with a removeClass() function. This allows us to either remove a specific class from an element by providing removeClass() with a string, or when a string is not provided, it will remove all the classes from the selected element. We will need to use this in order to prevent multiple classes being added to the paragraph element when either of the buttons has been clicked more than once.

The following screenshot illustrates this web page after the Yellow button has been clicked:

How it works…

See also

  • Modifying the DOM element properties
  • Enabling and disabling buttons by changing their properties
Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
jQuery 2.0 Development Cookbook
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon