1. Selection & Basic Methods
Select elements and manipulate them
Click a button to see the result...
2. DOM Manipulation
append, prepend, before, after, remove, clone, wrap
3. CSS & Classes
css(), addClass(), removeClass(), toggleClass()
4. Traversing
parent(), children(), siblings(), find(), closest(), next(), prev()
Parent
Child 1
Child 2
Grandchild
Child 3
Sibling 1
Sibling 2
5. Events
on(), off(), one(), trigger(), bind(), delegate()
Event log will appear here...
6. Effects
show(), hide(), toggle()
fadeIn(), fadeOut(), fadeToggle(), fadeTo()
slideUp(), slideDown(), slideToggle()
animate(), stop(), finish()
7. Attributes & Data
8. Dimensions & Position
width(), height(), offset(), position(), scrollTop()
serialize(), serializeArray(), val()
10. AJAX NEW in v2.0
pluck.ajax(), pluck.get(), pluck.post(), pluck.getJSON(), pluck.getScript(), .load()
How AJAX Works
AJAX = Asynchronous JavaScript And XML. Server se data fetch karta hai bina page reload kiye.
Click a button to test AJAX...
// pluck.ajax() - Full control
pluck.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
method: 'GET',
dataType: 'json',
success: function(data) { console.log(data); },
error: function(xhr, status, err) { console.log(err); }
});
// pluck.get() - Simple GET request
pluck.get('/api/users', function(data) {
console.log(data);
});
// pluck.post() - POST with data
pluck.post('/api/users', { name: 'John' }, function(response) {
console.log(response);
});
// pluck.getJSON() - GET JSON directly
pluck.getJSON('/api/data.json', function(json) {
console.log(json);
});
// .load() - Load HTML into element
p('#container').load('/partial.html');
// AJAX with Deferred/Promise pattern
pluck.ajax({ url: '/api/data' })
.done(function(data) { console.log('Success:', data); })
.fail(function(err) { console.log('Error:', err); })
.always(function() { console.log('Complete!'); });
11. Deferred Object NEW in v2.0
pluck.Deferred(), .done(), .fail(), .always(), .then(), pluck.when()
const deferred = pluck.Deferred();
deferred.done(fn).fail(fn).always(fn);
deferred.resolve('success') or deferred.reject('error');
pluck.when(d1, d2, d3).done(fn);
12. Callbacks Object NEW in v2.0
pluck.Callbacks(), .add(), .fire(), .remove(), flags: once, memory, unique
Callbacks will execute here...
const callbacks = pluck.Callbacks('once memory');
callbacks.add(fn1, fn2);
callbacks.fire('arg1', 'arg2');
callbacks.remove(fn1);
13. Animation Queue NEW in v2.0
.queue(), .dequeue(), .clearQueue(), .promise()
p('#box').queue(function(next) {
// do something
next(); // continue queue
}).promise().done(fn);
14. Custom Selectors NEW in v2.0
.filterCustom() - :hidden, :visible, :contains, :input, :checked, etc.
p('.items').filterCustom('visible')
p('.items').filterCustom('contains', 'text')
p('input').filterCustom('checked')
pluck.expr[':'].hidden(element) // direct access
15. Static Utilities
pluck.each(), pluck.extend(), pluck.isArray(), pluck.type(), pluck.Deferred(), etc.
16. Method Chaining
Chain multiple methods together
p('#chain-box')
.addClass('active')
.css('transform', 'scale(1.1)')
.html('<b>Chained!</b>')
.fadeOut(500)
.delay(500)
.fadeIn(500);