Selector

SniperJs provides a simple, expressive way to query and manipulate HTML elements using familiar CSS selector syntax.

Basic syntax is:

$('valid_css_selector')

• A selector should begin with $ sign

• A (selector) to "query (or find)" HTML elements

• An action() to be performed on the element(s)

Examples:

$("p").hide() - hides a <p> element.

$(".test").hide() - hides an element with class="test".

$("#test").hide() - hides the element with id="test".

$('#button').remove(); - removes the button

$('.myParagragh').text("Hello World") - Writes the text 'Hello World into the selected element'

Selecting multiple elements

$(".button*") — Selects all the elements with class of .button

or pass a second argument to the selector with true

$(".button",true) — Selects all the elements with class of .button NOTE: Without an asterisk * in front, it will always return only one element

$(".button") — Selects only an element with the class of .button

More Examples:

You can use your CSS selectors

Syntax	Description
$("p.intro")	Selects all elements with class="intro"
$("ul li:first")	Selects the first <li> element of the first <ul>
$("ul li:first-child")	Selects the first <li> element of every <ul>
$("[href]")	Selects an element with the href attribute
$("a[target='_blank']*")	Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']*")	Selects all <a> elements with a target attribute value NOT equal to "_blank"
$("#button")	Selects an element with the ID of button

In next project feel to Replace document.querySelector('') with $('')

You can use sniper selector with your regular JavaScript codes

$('input').value;
$('main > div*').classList.add('active'); //adds class of active to all the matched element