Jquery - Basic function for beginner

This is a jQuery basic fucntion that developers need to know.

Do something after page load successfully
$(document).ready(function() {
  //do something
});

Select Element by id / class
var element = $("#idOfElement");
var elementByClass = $(".className");

if have more than one element with same class name

var elementByClass = $(".className")[0];

Get selected value (drop down)

var selectedValue = $("#isDropdown").val(); //return selected value

Or

var selectedValue = $("#isDropdown option:selected").val(); //return selected value

Get selected text(drop down)

var selectedValue = $("#isDropdown").text(); //return selected text

Or

var selectedValue = $("#isDropdown option:selected").text(); //return selected text

Get Textbox Value

var valueTextBox = $("#idTextbox).val();
 
Show/hide element

 $("#idElement).show(); or  $("#idElement).fadeIn(500);
 $("#idElement).hide(); or  $("#idElement).fadeOut(500);

Add text/value inside div(innerHTML)

 $("#idElement).html("your value here");

Add event to form element

$("#idElement").change(function(e){
//do something if dropdown list change
});
refer complete event jQuery Event

Prevent form from submit

e.preventDefault();     or    e.stopImmediatePropagation();

Add class to element

$("#idElement").addClass("class name here");

Add style css to element

$("#idElement").css("display","block");

Add attribute to element

$("#idElement").attr("title","value title");

Submit form

$(#formID").submit();

Click Button

$('#ButtonID').click();

Select emenet from its attribute
html exaample :
<label>
    <input type="radio" name="newsletter" value="Hot Fuzz">
    <span>name?</span>
  </label>
jquery selector
$( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" );

Add Blank option to top of DropDownList

$("#DropDownListID").prepend("<option value='' selected='selected'></option>");

Note : This is a basic function in that beginner need to know. Let me know if i miss something very important.

jQuery API Documentation
 

By
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)

Popular posts from this blog

Example to disable save as certain file type in SSRS Report Viewer

How to create DataGrid or GridView in JSP - Servlet

Control Webpart Visible/Enable using macro in Kentico