- jQuery Tutorial
- jQuery Home
- jQuery Intro
- What is jQuery
- jQuery History
- jQuery Example
- jQuery Selectors
- jQuery Get Started
- jQuery Syntax
- jQuery Selectors Manipulate
- jQuery Events
- jQuery Effects
- jQuery Effects
- jQuery Hide/Show
- jQuery Fade
- jQuery Slide
- jQuery Animate
- jQuery stop()
- jQuery Callback
- jQuery Chaining
- jQuery hide()
- jQuery show()
- jQuery toggle()
- jQuery fadeIn()
- jQuery fadeOut()
- jQuery fadeToggle()
- jQuery fadeTo()
- jQuery slideDown()
- jQuery slideUp()
- jQuery slideToggle()
- jQuery animate() Custom
- jQuery delay()
- jQuery HTML
- jQuery html()
- jQuery Get
- jQuery Set
- jQuery Add
- jQuery Remove
- jQuery CSS Classes
- jQuery css()
- jQuery Dimensions
- jQuery text()
- jQuery val()
- jQuery css() Custom
- jQuery before()
- jQuery prepend()
- jQuery after()
- jQuery insertAfter()
- jQuery append()
- jQuery appendTo()
- jQuery clone()
- jQuery remove()
- jQuery empty()
- jQuery detach()
- jQuery scrollTop()
- jQuery attr()
- jQuery prop()
- jQuery offset()
- jQuery position()
- jQuery addClass()
- jQuery hasClass()
- jQuery toggleClass()
- jQuery width()
- jQuery height()
- jQuery innerWidth()
- jQuery innerHeight()
- jQuery outerWidth()
- jQuery outerHeight()
- jQuery wrap()
- jQuery wrapInner()
- jQuery wrapAll()
- jQuery unwrap()
- jQuery Traversing
- jQuery Traversing
- jQuery Ancestors
- jQuery Descendants
- jQuery Siblings
- jQuery Filtering
- jQuery AJAX
- jQuery AJAX Intro
- jQuery Load
- jQuery Get/Post
- jQuery Misc
- jQuery closest() method
- jQuery noConflict()
- jQuery Filters
- jQuery ajax() method
- jQuery children() method
- jQuery data() method
- jQuery each() method
- jQuery eq() method
- jQuery extend() method
- jQuery filter() method
- jQuery find() method
- jQuery get() method
- jQuery grep() method
- jQuery length property
- jQuery is() method
- jQuery not() method
- jQuery param() method
- jQuery radio button
- jQuery read more/read less
- jQuery star rating
- :enabled selector
- :disabled selector
- noConflict() method
- :nth-child selector
- parent() method
- post() method
- ready() function
- removeAttr() method
- replaceWith() method
- resize() method
- siblings() method
- stop() method
- trigger() method
- trim() method
- jQuery getJSON() method
- jQuery replaceAll() method
- jQuery on() method
- jQuery off() method
- jQuery first() method
- jQuery last() method
- jQuery isNumeric() method
- jQuery :reset selector
- jQuery size() method
- jQuery contains() method
- jQuery ajaxSend() method
- jQuery ajaxError() method
- jQuery :lang() selector
- jQuery :lt() selector
- jQuery :gt() selector
- jQuery map() function
- jQuery next() method
- jQuery nextUntil() method
- jQuery error() method
- jQuery now() method
- jQuery parseJSON() method
- jQuery inArray() method
- jQuery dblclick() method
- jQuery $.proxy() method
- jQuery has() method
- jQuery index() method
- jQuery insertBefore() method
- jQuery merge() method
- jQuery nth-of-type() selector
- jQuery prev() method
- jQuery prevAll() method
- jQuery scroll() method
- jQuery scrollLeft() method
- jQuery slice() method
- jQuery contents() method
- jQuery nextAll() method
- jQuery offsetParent() method
- jQuery parents() method
- jQuery parentsUntil() method
- globalEval() method
- undelegate() method
- triggerHandler() method
- toArray() method
- removeProp() method
- removeData() method
- queue() method
- prependTo() method
- noop() method
- makeArray() method
- keypress() method
- isPlainObject() method
- isFunction() method
- isEmptyObject() method
- isArray() method
- focusout() method
- focusin() method
- event.preventDefault() method
- clearQueue() method
- andSelf() method
- andBack() method
- jQuery dequeue() method
- jQuery end() method
- jQuery even() method
- jQuery :file selector
- jQuery :hidden selector
- jQuery isWindow() method
- jQuery odd() method
- jQuery parseXML() method
- jQuery :password selector
- jQuery.unique() method
- jQuery.uniqueSort() method
- jQuery :visible selector
- jQuery.isXMLDoc() method
- jQuery add() method
- jQuery Examples
- jQuery Examples
- jQuery Editor
- jQuery Quiz
- jQuery Exercises
- jQuery Certificate
- jQuery Form
- jQuery serialize()
- jQuery serializeArray()
- jQuery References
- jQuery Overview
- jQuery Selectors
- jQuery Events
- jQuery Events
- jQuery click()
- jQuery bind()
- jQuery unbind() method
- jQuery blur()
- jQuery focus()
- jQuery select()
- jQuery change()
- jQuery submit()
- jQuery keydown()
- jQuery keypress()
- jQuery keyup()
- jQuery mouseenter()
- jQuery mouseleave()
- jQuery hover()
- jQuery mousedown()
- jQuery mouseup()
- jQuery mouseover()
- jQuery mouseout()
- jQuery load()
- jQuery unload()
- jQuery delegate()
- jQuery Effects
- jQuery HTML/CSS
- jQuery Traversing
- jQuery AJAX
- jQuery Misc
- jQuery Properties
- Selected Reading
- How to change the background image using jQuery
- How to Detect a Mobile Device
- offset vs position in jQuery
- Checkbox validation in jQuery
- Use of moment JS to change date format in jquery
- jQuery Redirect to Another Page After 5 Seconds
- JQuery Validation
- jQuery get Difference between two Dates in days
- Dynamic Drag and Drop table rows using JQuery Ajax
- Add Edit Delete Table Row in JQuery
- Add remove input fields dynamically using jQuery with Bootstrap
- JQuery photo gallery with thumbnail
- Dynamically Add Remove input fields using JQuery Ajax
- Barcode jQuery example
- jQuery Timepicker
- Read more functionality using jQuery
- jQuery CDN
- JQuery Pagination
- Get Selected Value in Drop-down in jQuery
- JQuery Input Mask Phone Number Validation
- Integrate jQuery Fullcalendar using Bootstrap, PHP and MySQL
- Allow only 10 numbers in textbox using Jquery
- JQuery left side menu
- Automatically Refresh or Reload a Page using jQuery
- Lazy load images using jQuery
- Create a Tic TAC Toe Game using jQuery
- How to Convert an HTML Table into Excel Spreadsheet using jQuery
- Import Excel data into HTML table using JQuery
- Create a To-Do list using JQuery
- JQuery Page Pilling
- QR Code Generator using HTML, CSS, and jQuery
- Phone Number Keyboard using HTML and jQuery
- JQuery UI Checkboxradio
- How to Create a Custom Image Magnifier using jQuery
- JQuery UI Control groups
- How to create a simple map using jQuery
- JQuery Blockrain/ Tetris game
- How to display a digital clock using HTML, CSS, and JavaScript
- JQuery Multiscroll.js
- JQuery Sort
- JQuery Calendar
- JQuery menu-aim plugin
- JQuery Typewriter
- JQuery Product Tour
- Upload image with progress bar using jQuery
- How to add options to a select element using jQuery
- How to remove close button from jQuery UI dialog using jQuery and css
- JQuery Crop Plugin
- Vertical Dot Navigation Plugin
- jQuery jTippy Tooltip Plugin
- Create a 3D Text Effect using HTML and CSS and jQuery
- Jquery Flickerplate Plugin
- jQuery bootstrapSelect Plugin
- Froala editor plugin
- Gauge chart plugin using jQuery
- Horizontal Scrollable Timeline Plugin - jTimeline
- Skype Chat jQuery Plugin
- Whatsapp Chat Widget
- Twenty Twenty jQuery Plugin to Compare Images
- jQuery Filter Table
- Language Translation with JavaScript
- jQuery Animated Border Plugin
- jQuery Palette Color Picker
- jQuery Excel Export Plugin Library
- jquery social counter plugin
- jQuery Page Flip
- How to create an online radio using jQuery and jPlayer
- jQuery File manager for web
- Automatically Format your Numbers and Currencies using jquery
- jquery cookie consent plugin
- jQuery Coverflow widget
- jQuery PayPal HTML Shop
- Full Screen video Background using jquery
- jQuery Push Notification Plugin
- Create a menu item animation on hover
- Jquery Countdown Timer
- Jquery dragStart Event
- Jquery dragStop event
- Picture Puzzle Game using Jquery
- Jquery Captcha Widget
- Jquery Search Slide out Plugin
- How to Get the Textbox Value in jQuery
- Planetarium Jquery Plugin
- jQuery on-place Confirm Boxes
- Carousel with Drag and Wheel using Jquery
- Before and After Slider using jQuery
- Round Slider jQuery Plugin
- Jquery sticky header
- jQuery Age Verification plugin
- Pietimer jQuery Plugin
- DoubleScroll using Jquery
- Day Night Toggle using Jquery
- Q&A
jQuery Selectors:
jQuery Selectors are used to select and manipulate HTML elements. They are very important part of jQuery library.
With jQuery selectors, you can find or select HTML elements based on their id, classes, attributes, types and much more from a DOM.
In simple words, you can say that selectors are used to select one or more HTML elements using jQuery and once the element is selected then you can perform various operation on that.
All jQuery selectors start with a dollor sign and parenthesis e.g. $(). It is known as the factory function.
The $() factory function
Every jQuery selector start with thiis sign $(). This sign is known as the factory function. It uses the three basic building blocks while selecting an element in a given document.
S.No. | Selector | Description |
---|---|---|
1) | Tag Name: | It represents a tag name available in the DOM. For example: $('p') selects all paragraphs'p'in the document. |
2) | Tag ID: | It represents a tag available with a specific ID in the DOM. For example: $('#real-id') selects a specific element in the document that has an ID of real-id. |
3) | Tag Class: | It represents a tag available with a specific class in the DOM. For example: $('real-class') selects all elements in the document that have a class of real-class. |
Let's take a simple example to see the use of Tag selector. This would select all the elements with a tag name
and the background color is set to "pink".
File: firstjquery.html Test it NowOutput:
This is first paragraph.
This is second paragraph.
This is third paragraph.
Note: 1. All of the above discussed selectors can be used alone or with the combination of other selectors.
Note: 2. If you have any confliction with theuse of dollor sign $ in any JavaScript library then you can use jQuery() function instead of factory function $(). The factory function $() and the jQuery function is the same.
How to use Selectors
The jQuery selectors can be used single or with the combination of other selectors. They are required at every steps while using jQuery. They are used to select the exact element that you want from your HTML document.
S.No. | Selector | Description |
---|---|---|
1) | Name: | It selects all elements that match with the given element name. |
2) | #ID: | It selects a single element that matches with the given id. |
3) | .Class: | It selects all elements that matches with the given class. |
4) | Universal(*) | It selects all elements available in a DOM. |
5) | Multiple Elements A,B,C | It selects the combined results of all the specified selectors A,B and C. |
Different jQuery Selectors
Selector | Example | Description |
---|---|---|
* | $("*") | It is used to select all elements. |
#id | $("#firstname") | It will select the element with id="firstname" |
.class | $(".primary") | It will select all elements with class="primary" |
class,.class | $(".primary,.secondary") | It will select all elements with the class "primary" or "secondary" |
element | $("p") | It will select all p elements. |
el1,el2,el3 | $("h1,div,p") | It will select all h1, div, and p elements. |
:first | $("p:first") | This will select the first p element |
:last | $("p:last") | This will select he last p element |
:even | $("tr:even") | This will select all even tr elements |
:odd | $("tr:odd") | This will select all odd tr elements |
:first-child | $("p:first-child") | It will select all p elements that are the first child of their parent |
:first-of-type | $("p:first-of-type") | It will select all p elements that are the first p element of their parent |
:last-child | $("p:last-child") | It will select all p elements that are the last child of their parent |
:last-of-type | $("p:last-of-type") | It will select all p elements that are the last p element of their parent |
:nth-child(n) | $("p:nth-child(2)") | This will select all p elements that are the 2nd child of their parent |
:nth-last-child(n) | $("p:nth-last-child(2)") | This will select all p elements that are the 2nd child of their parent, counting from the last child |
:nth-of-type(n) | $("p:nth-of-type(2)") | It will select all p elements that are the 2nd p element of their parent |
:nth-last-of-type(n) | $("p:nth-last-of-type(2)") | This will select all p elements that are the 2nd p element of their parent, counting from the last child |
:only-child | $("p:only-child") | It will select all p elements that are the only child of their parent |
:only-of-type | $("p:only-of-type") | It will select all p elements that are the only child, of its type, of their parent |
parent > child | $("div > p") | It will select all p elements that are a direct child of a div element |
parent descendant | $("div p") | It will select all p elements that are descendants of a div element |
element + next | $("div + p") | It selects the p element that are next to each div elements |
element ~ siblings | $("div ~ p") | It selects all p elements that are siblings of a div element |
:eq(index) | $("ul li:eq(3)") | It will select the fourth element in a list (index starts at 0) |
:gt(no) | $("ul li:gt(3)") | Select the list elements with an index greater than 3 |
:lt(no) | $("ul li:lt(3)") | Select the list elements with an index less than 3 |
:not(selector) | $("input:not(:empty)") | Select all input elements that are not empty |
:header | $(":header") | Select all header elements h1, h2 ... |
:animated | $(":animated") | Select all animated elements |
:focus | $(":focus") | Select the element that currently has focus |
:contains(text) | $(":contains('Hello')") | Select all elements which contains the text "Hello" |
:has(selector) | $("div:has(p)") | Select all div elements that have a p element |
:empty | $(":empty") | Select all elements that are empty |
:parent | $(":parent") | Select all elements that are a parent of another element |
:hidden | $("p:hidden") | Select all hidden p elements |
:visible | $("table:visible") | Select all visible tables |
:root | $(":root") | It will select the document's root element |
:lang(language) | $("p:lang(de)") | Select all p elements with a lang attribute value starting with "de" |
[attribute] | $("[href]") | Select all elements with a href attribute |
[attribute=value] | $("[href='default.htm']") | Select all elements with a href attribute value equal to "default.htm" |
[attribute!=value] | $("[href!='default.htm']") | It will select all elements with a href attribute value not equal to "default.htm" |
[attribute$=value] | $("[href$='.jpg']") | It will select all elements with a href attribute value ending with ".jpg" |
[attribute|=value] | $("[title|='Tomorrow']") | Select all elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen |
[attribute^=value] | $("[title^='Tom']") | Select all elements with a title attribute value starting with "Tom" |
[attribute~=value] | $("[title~='hello']") | Select all elements with a title attribute value containing the specific word "hello" |
[attribute*=value] | $("[title*='hello']") | Select all elements with a title attribute value containing the word "hello" |
:input | $(":input") | It will select all input elements |
:text | $(":text") | It will select all input elements with type="text" |
:password | $(":password") | It will select all input elements with type="password" |
:radio | $(":radio") | It will select all input elements with type="radio" |
:checkbox | $(":checkbox") | Itwill select all input elements with type="checkbox" |
:submit | $(":submit") | It will select all input elements with type="submit" |
:reset | $(":reset") | It will select all input elements with type="reset" |
:button | $(":button") | It will select all input elements with type="button" |
:image | $(":image") | It will select all input elements with type="image" |
:file | $(":file") | It will select all input elements with type="file" |
:enabled | $(":enabled") | Select all enabled input elements |
:disabled | $(":disabled") | It will select all disabled input elements |
:selected | $(":selected") | It will select all selected input elements |
:checked | $(":checked") | It will select all checked input elements |