jQuery Σημειώσεις

Γρήγορος οδηγός για διάσχιση DOM, προσαρμοσμένους ψευδο-επιλογείς και χειρισμό στοιχείων στο jQuery.

Διάσχιση DOM (DOM Traversal)

$(.box)
  .children(p)        // Άμεσα παιδιά που ταιριάζουν με τον επιλογέα
  .closest(div)       // Πλησιέστερος πρόγονος που ταιριάζει με τον επιλογέα
  .filter(:selected)  // Περιορισμός του συνόλου στα στοιχεία που ταιριάζουν
  .find(span)         // Απόγονοι που ταιριάζουν με τον επιλογέα
  .has(ul)            // Στοιχεία που περιέχουν απογόνους που ταιριάζουν
  .first()              // Πρώτο στοιχείο του συνόλου που ταιριάζει
  .next(div)          // Αμέσως επόμενο αδελφό στοιχείο
  .nextUntil(footer)  // Όλα τα επόμενα αδέλφια μέχρι τον επιλογέα
  .parent()             // Άμεσο γονικό στοιχείο
  .siblings()           // Όλα τα αδελφά στοιχεία

Προηγμένοι Προσαρμοσμένοι Επιλογείς

Επέκταση των ψευδοκλάσεων του jQuery:

// Προσαρμοσμένος επιλογέας ":inline"
$.expr[:].inline = function (el) {
  return $(el).css(display) === inline
}

// Χρήση
$(span:inline).addClass(highlight)

Προσαρμοσμένα CSS Hooks

Ανάγνωση και εγγραφή ιδιοτήτων CSS με το $.cssHooks:

$.cssHooks.someCustomProp = {
  get: function (elem, computed, extra) {
    return $.css(elem, transform)
  },
  set: function (elem, value) {
    elem.style.transform = value
  }
}

// Χειρισμός προσαρμοσμένης ιδιότητας χωρίς προεπιλεγμένες μονάδες "px"
$.cssNumber["someCustomProp"] = true

Hooks Βημάτων Κίνησης (Animation Step)

$.fn.step.myEffect = function (fx) {
  // Προσαρμοσμένη ενδιάμεση λογική καρέ κίνησης
}