jQuery Selectors
Introduction
A jQuery selectors selects or finds a DOM (document object model) element in an HTML document. It is used to select HTML elements based on id, name, types, attributes, class and etc. It is based on existing CSS selectors.
Syntax
- Tag: No marker, use the tag directly
- Id:
#id - Class:
.className - Attribute:
[attributeName] - Attribute with value:
[attributeName ='value'] - Attribute starts with value
^=:[attributeName ^= 'value'] - Attribute ends with value
$=:[attributeName $='value'] - Attribute contains value
*=:[attributeName *= 'value'] - Pseudo-selector:
:pseudo-selector - Any descendant: Space between selectors
- Direct children:
>between selectors - Adjacent sibling following the first:
+ - Non-adjacent sibling following the first:
~ - Or:
,(comma) between selector
Remarks
When writing selectors for class or id or attribute which contains some special characters like
! " # $ % & ' ( ) * + , . / : ; < = > ? @ [ \ ] ^ { | } ~
the characters need to be escaped using two backslashes \\ .
eg.
<span id="temp.foobar"><span>
the selectors will be framed like,
$('#temp\\.foobar')
