Frequently used jQuery functions for web developers

Now a days an web developer thought without jQuery. jQuery not just make a page eye catching but also make the page faster & easier. To help an web developer be more productive, we can use the power of JavaScript libraries, and in this article we will take a good look at jQuery in action.

 

Some About jQuery:

jQuery is a JavaScript library. Currently jQuery is the JavaScript library that can perform a lot on your Web pages (from animation to data transfer) and make Web development much easier and enjoyable. Cascading Styles Sheet play a big part in the look and feel of any website. But CSS works static. In this case jQuery help us change them dynamically. An web developer can use jQuery to create some very smooth animations and effects with minimal effort. We can use jQuery to perform wonders with the DOM (document object model) when all page elements have been loaded. lets check the jQuery functions:

 

.click()

The .click is may be the highest used function of jQuery. The .click() method is used to bind a trigger or action that fire on click on an element. The .click() method can get two parameter, on which both are optional.

  • The first parameter used to map of data that will be passed to the event handler.
  • And the second parameter is a function to execute each time the event is triggered.

//The event handler can be bound to any HTML tag:
$(“#element_id”).click(function() {
alert(“yes the .click() method called.”);
});

 

.val()

This method is primarily used to get and set the values of form elements such as textarea, input field, etc.

//To get value from an element with the id “name_field”
var username = $(“#name_field”).val();

//or to set value to an element with the id “name_field”
var useremail = “solaiman@test.com”;
$(“#email_field”).val(useremail);

 

 .attr()

Basically we used the .attr() function to get the attribute value for only the first element in the matched set. If we like to get the value for each element individually, we need to use a looping construct such as jQuery’s .each() method. The .attr() method get two parameter: second parameter is optional. If only first parameter given it used to give you the value of match attribute, if two parameter is given it will set the value of second parameter to match attribute as given in the first parameter. for example:

//to get title text of a anchor tag with the id “site_logo”
var site_title = $(“#site_logo”).attr(“title”);

//to set title text of a anchor tag with the id “site_logo”
$(“#site_logo”).attr(“title”, “This is the title of site logo”);

 

.removeAttr()

To remove any attribute of HTML tag you can us the .removeAttr().

 //remove the title attribute of HTML anchor tag
$(“#site_logo”).removeAttr();

 

.css()

We can use the .css() to change our website’s styles dynamically. For example:

$(“div#div_id”).css({
color: “#000”,
‘background-color’: “#fff”,
‘font-size’: ’10pt’
});

 

.html()

Using .html() is the most common way to get or set the content of an element using jQuery. These functions are browser-dependent (i.e. .html() uses the browser’s innerHTML property), so the results returned (including white space and line breaks) will always depend on the browser you are using.

//If the HTML code is like-
<div class=”demo-class”>
<div class=”demo-class-inner”>Any html in this Box</div>
</div>

//if we use the jquery in script
$(‘div.demo-class’).html();

//The result will be
<div class=”demo-class-inner”>Any html in this Box</div>

 

.empty()

We can also make use of the .empty() function, which is a quick way to get rid of the content within. The .empty() method removes not only child elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element. Check the below example:

 //If the HTML code is like-
<div class=”demo-class”>
<div class=”demo-class-inner”>Any html in this Box</div>
</div>

//if we use the jquery in script
$(‘.demo-class’).empty();

//The result will be
<div class=”demo-class”></div>

 

 .preventDefault()

The .preventDefault() method is responsible to prevent default action that trigger by default, like clicking on a form submit button, or click on a anchor tag. For example:

$(“.submit_btn”).click(function(event) {
event.preventDefault();
});

 

.append(), prepend(), .after() and .before()

These collection of functions provide the means of inserting content in particular places relative to elements already on the Web page. Though the differences may appear smaller, every single funtion has its own purpose. For example:

var txt = $(“#div_id span:first”).html();

$(“#div_id a.append”).live(“click”, function (event) {
event.preventDefault();
$(“#div_id .innerDiv”).append(txt);
});

$(“#div_id a.prepend”).live(“click”, function (event) {
event.preventDefault();
$(“#div_id .innerDiv”).prepend(txt);
});

$(“#div_id a.after”).live(“click”, function (event) {
event.preventDefault();
$(“#div_id .innerDiv”).after(txt);
});

$(“#div_id a.before”).live(“click”, function (event) {
event.preventDefault();
$(“#div_id .innerDiv”).before(txt);
});

 

 .bind() & .unbind()

The .bind() function can be useful for adding event triggers, handlers to your DOM elements. We can bind your DOM elements to a whole list of events, such as submit, change. On the other hand the .unbind() function is used to remove any events that have already been bound.

$(“#div_id div”).bind(“click”, function (event) {
$(this).html(“click”);
}).bind(“mouseenter”, function (event) {
$(this).html(“mouseenter”);
}).bind(“mouseleave”, function (event) {
$(this).html(“mouseleave”);
});

 

.live()

The .live() function works basically the same as .bind() method, but the difference is it can capture events on new elements that didn’t exist on the page when it was loaded. As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

//Cancel only the default action by using the preventDefault method.
$(“a”).live(“click”, function(event){
event.preventDefault();
});

 

.on()

The .on() method used to attach an event handler function for one or more events to the selected elements. The .on() method gets 4 parameter.

  • First paramete specify that one or more space-separated event types and optional namespaces, such as “click”
  • Second parameter specify a selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
  • Third parameter is Data to be passed to the handler in event.data when an event is triggered.
  • And the last parameter is a function to execute when the event is triggered.

//Display the text in the div in an alert when it is clicked:
$(“div#div_id”).on(“click”, function(){
alert( $(this).html() );
});

 

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