August 04, 2014

JQuery tutorial, Get set values,window,height,width frequently used tags, JQuery basics for professionals Part 2

We have seen basics of Jquery with sample code with short and easy examples in our Part 1 (JS Basics, Selectors and scroll bar). Now this is part 2, in this blog we will see how to select elements of different types and set and get values of them using JQuery. 

 // get value from text box  
  alert("Text : "+$("#myText").val());   
  // dropdown get selected value  
  alert("Selected : "+$("#MySelect :selected").val());  
  // get value from Textarea  
  alert("Text : "+$("#myTextArea").val());   
  // get value of check box  
  alert("Checked : "+$("[name='sex']:checked").val());   

and Sample Html is:
 <input name="foop" id="myText" type="text" value="Praveen" />   
   <select name="foo" id="MySelect" >  
     <option value="one">one</option>  
     <option value="two">two</option>  
     <option value="three">three</option>  
 <textarea name="foop" id="myTextArea" rows="2" cols="20" >Good blog for learning </textarea>  
 <input type="radio" name="sex" value="male" checked='true'>Male   
 <input type="radio" name="sex" value="female" >Female  

How to Set values in html controls or elements using Jquery,

 $('input[name="sex"][value="male"]').attr("checked", true); // checked value of radio box  
 $("#MySelect").val("three"); // dropdown value set  
 $("#myText").val("Praveen");// text box  

var windowWidth = $(window).width(); //retrieve current window width

var windowHeight = $(window).height(); //retrieve current window height

var documentWidth = $(document).width(); //retrieve current document width

var documentHeight = $(document).height(); //retrieve current document height

var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll Top position

var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position

Blog Part 1 (Basics, Selectors and scroll bar)
Blog Part 2 (Get and set values of different elements)
Blog Part 3 (JavaScript windows code and Cookies) 

Praveen Pandit

No comments:

Post a Comment