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>

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.

Jquery brief Introduction – Basic of Jquery

Leave a Reply