JQUERY METHODS
.width():These methods can set or get the width of the given element. It returns only the width of the element it does not include the padding, margin and border. To learn about the padding and margin click here.Syntax: $(selector).width();$(selector).width('100px');Eg:<body><script>$(document).ready(function(){alert($('firstdiv').width());$('firstdiv').width('100px');});</script><div id="firstdiv" class="sample">Hello Jquery</div></body>Live Example click here. Try live example for compare this function with Javascript..height():These methods can set or get the height of the given element. It returns only the height of the element it does not include the padding, margin and border. To learn about the padding and margin click here.Syntax: $(selector).height();$(selector).height('100px');Eg:<body><script>$(document).ready(function(){alert($('firstdiv').height());$('firstdiv').height('100px');});</script><div id="firstdiv" class="sample">Hello Jquery</div></body>Live Example click here. Try live example for compare this function with Javascript..innerWidth():These method are also same as the .width() method in Jquery. The only difference is .width() return the width of the element without padding, margin, border. But these methods returns the width with padding.Syntax: $(selector).innerWidth();Eg:<body><script>$(document).ready(function(){alert($('firstdiv').innerWidth());});</script><div id="firstdiv" class="sample">Hello Jquery</div></body>Live Example click here. Try live example for compare this function with Javascript..innerHeight():These method are also same as the .height() method in Jquery. The only difference is .height() return the height of the element without padding, margin, border. But these methods returns the height with padding.Syntax: $(selector).innerHeight();Eg:<body><script>$(document).ready(function(){alert($('firstdiv').innerHeight());});</script><div id="firstdiv" class="sample">Hello Jquery</div></body>.outerWidth():outerWidth return the width of the element including the padding and border of the given element.Syntax: $(selector).outerWidth();Note: $(selector).outerWidth(true) returns width including padding, border and margin.Eg:<body><script>$(document).ready(function(){alert($('firstdiv').outerWidth());alert($(“#firstdiv”).outerWidth(true));});</script><div id="firstdiv" class="sample">Hello Jquery</div></body>.outerHeight():outerHeight return the height of the element including the padding and border of the given element.Syntax: $(selector).outerHeight();Note: $(selector).outerHeight(true) returns width including padding, border and margin.Eg:<body><script>$(document).ready(function(){alert($('firstdiv').outerHeight());alert($(“#firstdiv”).outerHeight(true));});</script><div id="firstdiv" class="sample">Hello Jquery</div></body>.scrollTop()We can scroll the top of page using these method in Jquery.Syntax: $(selector).scrollTop();Eg:<body><script>$(document).ready(function(){$('#firstdiv').scrollTop();$('#firstdiv').scrollTop(“0px”);});</script><div id="firstdiv" class="sample">Hello Jquery</div></body>.scrollLeft()We can scroll the left of page using these method in Jquery.Syntax: $(selector).scrollLeft();Eg:<body><script>$(document).ready(function(){$('#firstdiv').scrollLeft();$('#firstdiv').scrollLeft(“0px”);});</script><div id="firstdiv" class="sample">Hello Jquery</div></body>.position()These methods returns the position relative to its parent element of the first matched selector element.Syntax: $(selector).position();Eg:<body><script>$(document).ready(function(){$('#firstdiv').position().top;});</script><div id="firstdiv" class="sample">Hello Jquery</div></body>.offset()These methods returns the position which is relative to the document of the given selector.Syntax: $(selector).offset();Eg:<body><script>$(document).ready(function(){$('#firstdiv').offset().top;$('#firstdiv').offset().left;});</script><div id="firstdiv" class="sample">Hello Jquery</div></body>.removeAttr()These methods is used to remove the attribute in the HTML element.Syntax: $(selector).removeAttr('attrname');Eg:<body><script>$(document).ready(function(){$('#firstdiv').removeAttr('foo');});</script><div id="firstdiv" class="sample" value='foo'>Hello Jquery</div></body>Live Example click here. Try live example for compare this function with Javascript..prop(), /removeProp()These methods is same as the .attr() methods in jquery but the only difference is attr() methods returns the string but .prop() method returns its datatype. The removeProp() is used to remove the assigned properties in the particular HTML element. Try online example to get better understanding about attr() and prop().Syntax: $(selector).prop('propname');Eg:<body><script>$(document).ready(function(){$('#firstdiv').prop('foo');$('#firstdiv').removeProp('foo');});</script><div id="firstdiv" class="sample" value='foo'>Hello Jquery</div></body>.hasClass()These methods used to find the selected element has the given class. It returns true if it has the given class or else false.Syntax: $(selector).hasClass('classname');Eg:<body><script>$(document).ready(function(){$('#firstdiv').hasClass('sample');});</script><div id="firstdiv" class="sample" value='foo'>Hello Jquery</div></body>
Continue in part 3.
No comments:
Post a Comment