This section provides an overview of what jquery-selectors is, and why a developer might want to use it.
It should also mention any large subjects within jquery-selectors, and link out to the related topics. Since the Documentation for jquery-selectors is new, you may need to create initial versions of those related topics.
Installation or Setup
1 Tag Name
Represents a tag name available in the DOM. For example
$('p') selects all paragraphs
<p> in the document.
2 Tag ID
Represents a tag available with the given ID in the DOM. For example
$('#some-id') selects the single element in the document that has an ID of some-id.
3 Tag Class
Represents a tag available with the given class in the DOM. For example
$('.some-class') selects all elements in the document that have a class of some-class.
All the above items can be used either on their own or in combination with other selectors. All the jQuery selectors are based on the same principle except some tweaking.
NOTE − The factory
function $() is a synonym of
Example Following is a simple example which makes use of Tag Selector. This would select all the elements with a tag name p and will set their background to “yellow”.
Jquery selectors are used to manipulate DOM (Document object model), attach events, add element, remove element on runtime.
|element selector||element selector are used to select particular element
To access this “p” tag, we need to add this element and wrap it inside jquery syntax like : $(“p”).
”$” represents the jquery, its just aliasing of jquery and if we want we can use jquery instead of ”$” like jQuery().
If we are working with other library or framework (angular) that has same aliasing as jquery ($), we can alter this conflict by using $.noConflict() method of jquery.
|ID selector||we can write Id selector as $(“#text of id attribute”)
Here text of ID attribute is “selectMe”, so to select this ID selector using jquery we have to write: $(“#selectMe”).
Multiple IDs can be selected using comma seperate Ex: $(“#id1,#id2,#id3…“)
|Class Selector||Class selectors is represented by dot/”.” and written as $(“.className”)
To access class selector, we write $(“.demoClass”), Multiple class can be selected as comman separated values. $(“.class1,.class2,.class3”)
|All element selector||To select Complete DOM element, we have to include character :
<p> This is p Tag </p> <div> This is div Tag</div> <span> This is span Tag</span> <script>$("*") // It will refer all the DOM element</script>
Check jsfiddle for example: https://jsfiddle.net/rezjvrum/
List of various selectors:
- “:first” - Select first element.
- “:last” - Select last element.
- “:even” - Select all even element.
- “:odd” - Select all odd element.
- “:eq(index)” - Select the indexed element. Ex:
:eq(1)will select second child element. Here indexing is starts from “0”.
- “:gt(index)” - Show all element whose index is greater than the index pass. Ex:
:gt(3)will return all the element having index greater than 3.
- “:lt(index)” - Show all element whose index is less than the index pass. Ex:
:lt(2)will return all element having index less than 2.
Above selectors are covered in : https://jsfiddle.net/rezjvrum/2/