Selector

sniper selector is most powerful tool sniper has made available

Basic syntax is:

$('valid_css_selector')

or you can simply select an element with:

$niper('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".

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

$niper('.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 arguement 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

Last updated