jQuery useful functions for your site

Every Web developer should know jQuery today as it makes web pages interactive and ease to use.
jQuery functions has following general signature as below.

General Signature

jQuery(selector).event_name(callback_function);

Here is selector can be class or id of an element and event call be click,keyup,keypress etc.
All jQuery functions should be written under document.ready() so that it works.

click()

It binds an event handler to the “click” JavaScript event, or trigger that event on an element.
An event handler is a function to execute each time the event is triggered.

<script type="javascript">
jQuery(document).ready(function(){
jQuery("#submitBtn").click(function(){
 alert("Submit button is clicked");
 //do something here
});

});
</script>

after()

Sometimes we need to add some element after an element we can use after() function there.Example to add a span after div with id wrapper.

<script type="javascript">
jQuery(document).ready(function(){
jQuery("#wrapper").after("<span>This is example for after()</span>");

});
</script>

before()

Sometimes we need to add some element before an element we can use before() function there.Example to add a div before div with id wrapper.

<script type="javascript">
jQuery(document).ready(function(){
jQuery("#wrapper").before("<div class='main-wrapper'>This is example for after()</div>");

});
</script>

change()

It binds an event handler to the “change” JavaScript event, or trigger that event on an element.Example to check username existence using ajax on change of input field value.

<script type="javascript">
jQuery(document).ready(function(){
jQuery("#username").change(function(){
 var username = jQuery(this).val();
 jQuery.ajax({
    url:"ajax.php",
    data:{username:username},
    type:"POST",
    success:function(response){
   
      if(response==0){
       alert("User Name already exists.");
      }
    }
  })

});

});
</script>

trigger()

It executes all handlers and behaviors attached to the matched elements for the given event type.

Syntax

jQuery(selector).trigger(event,eventObj,param1,param2,...)

Example to trigger click event for Button1 while Button2 is clicked.

jQuery("#Button2").click(function(){

   jQuery("#Button1").trigger("click");
});

live()

It binds an event handler for all elements which match the current selector with current element or dynamic elements added after page load.

Syntax

$(selector).live( "event-name", function() {
 
});

Example to work with dynamic added an anchor tag and binds its click event using live().I am taking example to process delete a row from table like listing.

$(".delete").live( "click", function() {
 var x = confirm("Do you want to delete this record");
if(x){

  //do something
}
});

bind()

It attaches a handler to an event for the the elements provided as selector.When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound.

Syntax

$(selector).bind( "event-name", function() {
 
});

Example to bind an event handler on a submit button to validate form inputs.

$("#SubmitBtn").bind( "click", function() {
 
//do validation code or do something here
});

serialize()

It encodes a set of form elements as a string for submission.Example to submit a form by ajax.

$("#form1").submit(function() {
$.ajax({
  url:"url here",
  data:$("#form1").serialize(),
  type:"POST",
  success:function(){

   }
})
});

replaceWith()

It replaces each element in the set of matched elements with the provided new content.Example to replace a div content with new content.

$("#divId").replaceWith("<span>New Content here</span>");

eq()

The eq() selects an element with a specific index number.Example to select 2nd p tag and and apply css on it.

$("p:eq(1)").css("background","red");

addClass()

It adds the specified class to each element in the set of matched elements provided as selector. Example to add class active to first li.

$("#menu li:first").addClass("active");

removeClass()

It removes the specified class to each element in the set of matched elements provided as selector. Example to remove class active from first li.

$("#menu li:first").removeClass("active");

siblings()

It used to select all sibling elements by provided selector.Example to find all li of ul element and add class to each li.

$("ul").siblings().addClass("basic");

Leave a Reply