Jquery basic most used selectors and methods
|Following are the common and most used jquery methods –
$(this) – it will select the current element.
$(“div.content”) – it will select elements with class=”content”
$(div).hide(); – it will hide all div.
$(div).show(); – it will show all div on the page.
$(div).toggle(); – it will toggle between the hide() and show().
$(div).text(“div content updated”); – it will change div content
$(div).addClass(“maincontent”) ; it will add a class named mainContent on all divs
$( “div” ).length; -it will count the no of divs on the page
$(“[href]”) – Selects all elements with an href attribute
$(“a[target=’_blank’]”) – Selects all elements with a target attribute value equal to “_blank”
$(“#div1”).fadeIn(); – it is used to fade in a hidden element
$(“#div”).fadeOut(); it is used to fade out a visible element.
$(“#div”).fadeToggle(); it toggles between the fadeIn() and fadeOut() methods.
$(“#div”).slideDown(); – it is used to slide down an element
$(“#div”).slideUp(); – it is used to slide up an element
$(“#div”).slideToggle(); – it toggles between the slideDown() and slideUp() methods
$(“div”).animate({left:’250px’}); – animate() method is used to create custom animations.
$(“#div”).stop(); – it iis used to stop an animation or effect before it is finished.
Eg- how to select child element only
if you want to select child elements only, then you can use direct descendant combinator (>).
Eg – if we want to select all anchor tag element in the following code then we can use li > a selector . it will select all anchor that all children of list items.
<ul id=”tags”>
<li><a href=”www.google.com”> Google </a> <li>
<li><a href=”www.ecomspark.com”>Ecomspark</a></li>
<li><span><a href=”www.blog.ecomspark.com”>Blogs</a></li>
<ul>
jquery code to select all anchor –
$(‘#tags li > a’);
Note – it will select only first 2 p because third p is not direct child of list item. it is child of span.