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
$
signA (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
$("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