Tuesday, 21 January 2014

Jquery - Basic function for beginner

Leave a Comment
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 =)

0 comments:

Post a Comment

Subscribe to our newsletter to get the latest updates to your inbox.

Your email address is safe with us!




Founder of developersnote.com, love programming and help others people. Work as Software Developer. Graduated from UiTM and continue study in Software Engineering at UTMSpace. Follow him on Twitter , or Facebook or .



Powered by Blogger.