0
# Enhanced Selectors
1

2
jQuery-compatible pseudo-selectors and advanced selection capabilities. The selector module extends CSS selectors with additional pseudo-selectors for common filtering operations.
3

4
## Capabilities
5

6
### Visibility Selectors
7

8
Pseudo-selectors for filtering elements based on visibility state.
9

10
```javascript { .api }
11
/**
12
 * Selects elements that are visible (display not 'none', visibility not 'hidden')
13
 */
14
$(':visible');
15

16
/**
17
 * Selects elements that are hidden (display 'none' or visibility 'hidden')
18
 */
19
$(':hidden');
20
```
21

22
**Usage Examples:**
23

24
```javascript
25
// Find all visible elements
26
const visibleElements = $(':visible');
27

28
// Hide all currently visible div elements
29
$('div:visible').hide();
30

31
// Show all hidden form elements
32
$('form :hidden').show();
33

34
// Toggle visibility of specific elements
35
$('.toggleable:visible').hide();
36
$('.toggleable:hidden').show();
37
```
38

39
### Form State Selectors
40

41
Pseudo-selectors for form element states.
42

43
```javascript { .api }
44
/**
45
 * Selects form elements that are checked (checkboxes and radio buttons)
46
 */
47
$(':checked');
48

49
/**
50
 * Selects form elements that are selected (option elements)
51
 */  
52
$(':selected');
53
```
54

55
**Usage Examples:**
56

57
```javascript
58
// Get all checked checkboxes
59
const checkedBoxes = $('input:checked');
60

61
// Get selected option values
62
const selectedValues = $('select option:selected').map(function() {
63
  return $(this).val();
64
});
65

66
// Style checked elements
67
$('input:checked').parent().addClass('selected');
68

69
// Count selected items
70
const selectedCount = $('#items :checked').length;
71
```
72

73
### Content Selectors
74

75
Pseudo-selectors for filtering based on element content and relationships.
76

77
```javascript { .api }
78
/**
79
 * Selects elements that have child elements (not empty)
80
 */
81
$(':parent');
82

83
/**
84
 * Selects elements containing the specified text
85
 * @param text - Text to search for
86
 */
87
$(':contains(text)');
88

89
/**
90
 * Selects elements that contain elements matching the selector
91
 * @param selector - CSS selector to match descendants
92
 */
93
$(':has(selector)');
94
```
95

96
**Usage Examples:**
97

98
```javascript
99
// Find non-empty list items
100
const nonEmptyItems = $('li:parent');
101

102
// Find elements containing specific text
103
const elementsWithText = $('p:contains("important")');
104

105
// Find containers that have specific child elements
106
const containersWithImages = $('div:has(img)');
107

108
// Find articles containing links
109
const articlesWithLinks = $('article:has(a)');
110
```
111

112
### Position Selectors
113

114
Pseudo-selectors for element position within collections.
115

116
```javascript { .api }
117
/**
118
 * Selects the first element in the matched set
119
 */
120
$(':first');
121

122
/**
123
 * Selects the last element in the matched set
124
 */
125
$(':last');
126

127
/**
128
 * Selects the element at the specified index (0-based)
129
 * @param index - Zero-based index
130
 */
131
$(':eq(index)');
132
```
133

134
**Usage Examples:**
135

136
```javascript
137
// Style the first item in each list
138
$('ul li:first').addClass('first-item');
139

140
// Remove the last paragraph
141
$('p:last').remove();
142

143
// Highlight the third item (index 2)
144
$('.item:eq(2)').addClass('highlighted');
145

146
// Select every other row starting from the second
147
$('tr:eq(1), tr:eq(3), tr:eq(5)').addClass('alternate');
148
```
149

150
### Selector Expression API
151

152
Direct access to selector expressions for programmatic use.
153

154
```javascript { .api }
155
/**
156
 * Expression functions for pseudo-selectors
157
 */
158
$.expr[':'].visible = function(element) { /* visibility check */ };
159
$.expr[':'].hidden = function(element) { /* hidden check */ };
160
$.expr[':'].checked = function(element) { /* checked state check */ };
161
$.expr[':'].selected = function(element) { /* selected state check */ };
162
$.expr[':'].parent = function(element) { /* has children check */ };
163
$.expr[':'].contains = function(element, match, args, text) { /* text content check */ };
164
$.expr[':'].has = function(element, match, args, selector) { /* descendant check */ };
165
$.expr[':'].first = function(element, match, args, set) { /* first in set */ };
166
$.expr[':'].last = function(element, match, args, set) { /* last in set */ };
167
$.expr[':'].eq = function(element, match, args, index) { /* index position */ };
168
```
169

170
### Combining Enhanced Selectors
171

172
Enhanced selectors can be combined with standard CSS selectors for powerful filtering.
173

174
```javascript
175
// Complex selector combinations
176
$('div.container:has(img):visible');           // Visible divs with images
177
$('form input:not(:checked):visible');         // Unchecked visible form inputs  
178
$('ul li:contains("active"):first');           // First li containing "active"
179
$('table tr:eq(0) td:has(input:checked)');     // Cells with checked inputs in first row
180

181
// Chaining with enhanced selectors
182
$('.items')
183
  .find(':visible')
184
  .filter(':contains("priority")')
185
  .addClass('priority-item');
186

187
// Using in complex queries
188
const importantVisibleElements = $('section')
189
  .find(':visible')
190
  .filter(':has(.important)')
191
  .filter(':contains("critical")');
192
```
193

194
### Performance Considerations
195

196
Enhanced selectors are implemented as JavaScript functions and may be slower than native CSS selectors:
197

198
```javascript
199
// Faster - use native CSS when possible
200
$('.visible-item');           // CSS class
201
$('input[checked]');          // CSS attribute selector
202

203
// Slower - but more flexible
204
$(':visible');                // JavaScript-based filtering
205
$(':contains("text")');       // Text content search
206
```
207

208
### Browser Compatibility
209

210
Enhanced selectors work consistently across all supported browsers, providing uniform behavior where native CSS selector support varies.
211

212
```javascript
213
// Consistent behavior across browsers
214
$(':checked').length;         // Always returns checked element count
215
$(':visible').hide();         // Reliable visibility detection
216
$(':contains("test")').size(); // Text search works everywhere
217
```