Advertisement:
Read Later
In this tutorial, I wanted to show you how to control multi-elements by merely using the same function in jQuery for your web projects. In JavaScript, it is, sometimes, hard to write a function to control all elements and variables that of a class especially when you want to control its parents and children. However, you can achieve that easily by using jQuery without making your code complicated and incoherent. jQuery selectors give you more option to get information from elements rather than pure JavaScript. Plus, the ajax() method provided by jQuery is a simple way to send that information to another page, for instance, a PHP file which retrieves data from a server via MySQL. To better comprehend this, we have to understand the structure of jQuery selectors. jQuery selectors allow us to select elements in various ways and most importantly manipulate them with simple methods as opposed to plain and pure JavaScript.
By taking the steps below, you will learn to make colored option buttons in jQuery as an example of this topic.
What is jQuery?(1)
jQuery is a JavaScript library that allows web developers to add extra functionality to their websites. It is open source and provided for free under the MIT license. In recent years, jQuery has become the most popular JavaScript library used in web development.
To implement jQuery, a web developer simply needs to reference the jQuery JavaScript file within the HTML of a webpage. Some websites host their own local copy of jQuery, while others simply reference the library hosted by Google or the jQuery server. For example, a webpage may load the jQuery library using the following line within the <head> section of the HTML:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Once the jQuery library is loaded, a webpage can call any jQuery function supported by the library. Common examples include modifying text, processing form data, moving elements on a page, and performing animations. jQuery can also work with Ajax code and scripting languages, such as PHP and ASP to access data from a database. Since jQuery runs on the client side (rather than the web server), it can update information on a webpage in realtime, without reloading the page. A common example is "autocomplete," in which a search form automatically displays common searches as you type your query. In fact, this is how TechTerms.com provides search suggestions when you type in the search box.
Besides its free license, the other main reason jQuery has gained such popularity is its cross-browser compatibility. Since each browser renders HTML, CSS, and JavaScript differently, it can be difficult for a web developer to make a website appear the same across all browsers. Instead of having to write custom functions for each browser, a web developer can use a single jQuery function that will work in Chrome, Safari, Firefox, and Internet Explorer. This multi-browser support has led many developers to switch from standard JavaScript to jQuery, since it greatly simplifies the coding process.
Use $(“ ”) select an element.
Define the event, the child and the function to be executed by using the on() method in jQuery.
Use $(this) to select the clicked element and .parent() method to select its parent – .children(“child ”) to select a specific child.
Use the animate() and css() methods to make css declarations.
To change the parent color after the animation finishes, use the animation method complete function as depicted on the code below – .animate( properties [, duration ] [, easing ] [, complete ] ).
The target property(.target) is for getting the triggered element only without its children.
And the last but not least, do not forget to use the removeAttr('style') method to reset the animation and be able to manipulate the opposite declarations for the same element – left and right.
I digress. I wanted the animation to repeat when the object class is clicked even though it is already triggered. If you do not want this action, you can remove the right property and use the left property instead.
<div class="multi_elements">
<br>
<div class="container"><section class="object"></section></div>
<br>
<div class="container"><section class="object"></section></div>
<br>
<div class="container"><section class="object"></section></div>
<br>
</div>
<script>
// When the object class under the multi_elements is clicked, animate it from left to right and change the color of its parent.
$(".multi_elements").on("click", ".object", function(){
$(this).removeAttr('style');
$(this).animate({right: '0'}, 1000, function(){
$(this).parent().css('background-color', '#F3D060');
});
});
// When the container class under the multi_elements is clicked, animate its child from right to left and change its color.
$(".multi_elements").on("click", ".container", function(event){
if(event.target == this){
$(this).children(".object").animate({left: '0'}, 1000, function(){
$(this).parent().css('background-color', '#E4E4E2');
});
}else{ return }
});
</script>
Result:
(1) Christensson, Per. "jQuery Definition." TechTerms. Sharpened Productions, 01 March 2013. Web. 05 March 2019. <https://techterms.com/definition/jquery>.