Frequently used jQuery functions for web developers (part-2)

jQuery is one of the best JavaScript library that not only help to davelop an interactive front end interface but also help to connect to server to post or get data in a quick time. It’s a second jQuery list tutorial. If you do not find your desire jQuery function here, you can also visit our first jQuery list tutorial.

 

.trigger()
.trigger() function used to execute all handlers and behaviors attached to the matched elements for the given event type. For example- if you like to fire any jquery event on page load that basically created to fire on click on certain HTML element. See the below code:

$(document).ready(function() {
$(“a.more”).trigger(“click”);
});

We can get the pretty much same job using .live() & .on() . For detail check first part of this tutorial.
.change()
.change() event is used to  fire  JavaScript event, or trigger for particular element. For example we often need to fire some JavaScript (may be for validating input field, calling ajax, and many more) on changing the value of any particular HTML object. Let’s see an example how to submit a form on changing the SELECT dropdown box.

<form action=”” id=”form_id”>
<select name=”city” id=”city”>
<option value=””>Select City</option>
<option value=” New York”>New York</option>
<option value=” Alaska”>Alaska</option>
</select>
</form>

It’s time to submit the form on changing the select dropdown box using jquery:

<script>
$(“#city”).change(function() {
alert(“jQuery change event has fired, below is form submission script!”);
$(“#form_id”).submit();//Here we use jQuery .submit() function to the form with “form_id” id.
});
</script>

.parents()
.parents() used to find the closest parent of given selector. For example: consider the HTML form –

<form action=”” id=”form_id”>
<select name=”city” id=”city”>
<option value=””>Select City</option>
<option value=” New York”>New York</option>
<option value=” Alaska”>Alaska</option>
</select>
</form>

Now we will get the parent form object of the “select” element using jQuery .parent() function.

<script>
$(“#city”).change(function() {
var formObj = $(this).parents(‘form’);//create the form object of select parents
$(formObj).submit();//Submit the form using form Object
});
</script>

.keyup()
.keyup() method is a shortcut of Javascript onKeyUp. Every time we press a key and relaease the .keyup() will fire. For example consider the HTML:

<form>
<input id=”field_id” type=”text” />
</form>

We will bind the event handler to the input field:

$(“#target”).keyup(function() {
alert(‘Handler for .keyup() called.’);
});

.show()
The .show() method used to show any hidden element. Basically This is roughly equivalent to calling .css(‘display’, ‘block’). The simplest way to call a .show() function is with no parameter. But we can call it with three optional parameter.

 

  • First Parameter is duration – A string or number determining how long the animation will run.
  • Second parameter is easing – A string indicating which easing function to use for the transition.
  • and the last parameter is callback – A function to call once the animation is complete.

$(‘#selector_id’).show();

.hide()
The .hide() function is absolutily oppsite of the .show() method. The .hide() method used to hide any hidden element. Basically this is roughly equivalent to calling .css(‘display’, ‘none’). For example:

$(‘#selector_id’).hide();

.fadeIn() & .fadeOut()
.fadeIn() used to display the matched elements by fading them to opaque. on the other hand .fadeOut() used to hide the matched elements by fading them to transparent. For example:

$(‘#selector_id’).click(function() {
$(‘#book’).fadeOut(‘slow’, function() {
// Animation complete.
});
});

Here we are hiding the “book” element by clicking on the “selector_id”. Both .fadeIn() & .fadeOut() get three optional parameter. These are:

 

  • First (duration) – A string or number determining how long the animation will run.
  • Second (easing) – A string indicating which easing function to use for the transition.
  • Last (callback) – A function to call once the animation is complete.

.siblings()
.siblings() method used to get a set of elements containing all of the unique siblings of each of the matched set of elements. Consider the HTML:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

See the below example: (see also)

$(‘li.special’).siblings().css(‘background-color’, ‘red’);

.next()
.next() method used to get a set of elements containing the unique next siblings of each of the given set of elements. Basically .next() method optionally accepts a selector expression of the same type that we can pass to the $() function. For exaple consider the below code:

$(‘#selector_id’).click(function() {
$(“ul li”).next(“.special”).addClass(“hilight”);
});

On clicking the “selector_id” “highlight” class will added to li that has a class “special”.
.prev()
.prev() function works same as .next() jQuery method except it work with prev element.

$(‘#selector_id’).click(function() {
$(“ul li”).prev(“.special”).addClass(“hilight”);
});

 

.hasClass()
.hasClass() function used to return boolean value. .hasClass() function checks if any of the selected elements have a specified class.  If any of the selected elements has the specified class, this .hasClass() method will return “true”.

$(“a”).click(function(){
alert($(“img.selector_class”).hasClass(“highlight”));
});

 

 

Author Info

Shah Alom

Hi, This is Mohammad Shah Alom, My passion is Programming & Web Development. I am Founder of Micro Solutions Bangladesh. My Facebook profile shahalom1983 & Twitter Profile shahalom_83