diff --git a/jquery-closure-clojurescript-comparison.md b/jquery-closure-clojurescript-comparison.md
new file mode 100644
index 0000000..3c5e397
--- /dev/null
+++ b/jquery-closure-clojurescript-comparison.md
@@ -0,0 +1,2499 @@
+# jQuery vs Google Closure Library vs ClojureScript Comparison
+
+A comprehensive comparison of jQuery 4.0.0 with Google Closure Library and ClojureScript (with Google Closure), providing equivalent code for every example in the jQuery documentation.
+
+---
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Installation](#installation)
+3. [Core Selection](#core-selection)
+4. [Utility Functions](#utility-functions)
+5. [DOM Manipulation](#dom-manipulation)
+6. [Event Handling](#event-handling)
+7. [Traversal](#traversal)
+8. [Data Storage](#data-storage)
+9. [AJAX](#ajax)
+10. [Deferred/Promises](#deferredpromises)
+11. [Callbacks](#callbacks)
+12. [Animation](#animation)
+13. [Security Features](#security-features)
+
+---
+
+## Overview
+
+| Aspect | jQuery 4.0.0 | Google Closure Library | ClojureScript + Closure |
+|--------|-------------|----------------------|------------------------|
+| **Status** | Active (Jan 2026) | Sunset (Aug 2024) | Active |
+| **Size** | ~30kb gzipped | Modular (tree-shaken) | Compiled & optimized |
+| **Philosophy** | Imperative, chaining | Object-oriented, modular | Functional, immutable |
+| **Browser compat** | Last 3 versions | Cross-browser normalized | Via Closure Compiler |
+| **Build system** | Optional | Closure Compiler | ClojureScript compiler |
+
+### Key Differences
+
+**jQuery**: Designed for simplicity and DOM manipulation with a fluent chaining API. Excellent for quick prototyping and small projects.
+
+**Google Closure Library**: A comprehensive, modular library built for large-scale applications. Designed to work with the Closure Compiler for aggressive optimizations. Note: The library was sunset in August 2024.
+
+**ClojureScript**: A Clojure dialect that compiles to JavaScript. Automatically includes Google Closure Library and uses the Closure Compiler. Offers functional programming paradigms with immutable data structures.
+
+---
+
+## Installation
+
+### jQuery 4.0.0
+
+```html
+<!-- CDN -->
+<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
+```
+
+```javascript
+// ES Module
+import $ from 'jquery';
+
+// CommonJS
+const $ = require('jquery');
+```
+
+### Google Closure Library
+
+```html
+<!-- Include base.js -->
+<script src="closure-library/closure/goog/base.js"></script>
+<script>
+  goog.require('goog.dom');
+  goog.require('goog.events');
+</script>
+```
+
+```javascript
+// Modern ES modules (if using Closure Compiler)
+goog.module('myapp.main');
+const dom = goog.require('goog.dom');
+const events = goog.require('goog.events');
+```
+
+### ClojureScript
+
+```clojure
+;; deps.edn
+{:deps {org.clojure/clojurescript {:mvn/version "1.11.132"}}}
+
+;; In your namespace
+(ns myapp.core
+  (:require [goog.dom :as gdom]
+            [goog.events :as gevents])
+  (:import [goog.events EventType]))
+```
+
+---
+
+## Core Selection
+
+### jQuery: Select by ID
+
+```javascript
+// jQuery
+const $header = $('#header');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+const header = goog.dom.getElement('header');
+// or shorthand
+const header = goog.dom.$('header');
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript with goog.dom
+(require '[goog.dom :as gdom])
+(def header (gdom/getElement "header"))
+
+;; Or using native JS interop
+(def header (.getElementById js/document "header"))
+```
+
+---
+
+### jQuery: Select by Class
+
+```javascript
+// jQuery
+const $buttons = $('.btn');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - single element
+const button = goog.dom.getElementByClass('btn');
+
+// Multiple elements
+const buttons = goog.dom.getElementsByClass('btn');
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(def button (gdom/getElementByClass "btn"))
+(def buttons (gdom/getElementsByClass "btn"))
+
+;; With dommy library
+(require '[dommy.core :as dommy :refer-macros [sel sel1]])
+(def button (sel1 :.btn))
+(def buttons (sel :.btn))
+```
+
+---
+
+### jQuery: Select by Tag
+
+```javascript
+// jQuery
+const $paragraphs = $('p');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+const paragraphs = goog.dom.getElementsByTagName('p');
+
+// With class filter
+const items = goog.dom.getElementsByTagNameAndClass('div', 'item');
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(def paragraphs (gdom/getElementsByTagName "p"))
+
+;; With dommy
+(def paragraphs (sel :p))
+```
+
+---
+
+### jQuery: Select with Context
+
+```javascript
+// jQuery
+const $items = $('.item', '#container');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+const container = goog.dom.getElement('container');
+const items = goog.dom.getElementsByClass('item', container);
+
+// Using query selector
+const items = goog.dom.query('.item', container);
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(def container (gdom/getElement "container"))
+(def items (gdom/getElementsByClass "item" container))
+
+;; With dommy
+(def items (sel container :.item))
+```
+
+---
+
+### jQuery: Create Elements
+
+```javascript
+// jQuery
+const $newDiv = $('<div class="new">Content</div>');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+const newDiv = goog.dom.createDom('div', {'class': 'new'}, 'Content');
+
+// Shorthand
+const newDiv = goog.dom.$dom('div', {'class': 'new'}, 'Content');
+
+// Complex nesting
+const complex = goog.dom.createDom('div', {'class': 'wrapper'},
+  goog.dom.createDom('h1', null, 'Title'),
+  goog.dom.createDom('p', null, 'Paragraph')
+);
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript with goog.dom
+(def new-div (gdom/createDom "div" #js {:class "new"} "Content"))
+
+;; With hiccup-style libraries (hipo, hiccups)
+(require '[hipo.core :as hipo])
+(def new-div (hipo/create [:div.new "Content"]))
+
+;; Complex with hiccup
+(def complex (hipo/create
+  [:div.wrapper
+    [:h1 "Title"]
+    [:p "Paragraph"]]))
+```
+
+---
+
+## Utility Functions
+
+### jQuery: $.extend() - Object Merging
+
+```javascript
+// jQuery - Shallow merge
+const defaults = { color: 'blue', size: 'medium' };
+const options = { color: 'red' };
+const settings = $.extend({}, defaults, options);
+// Result: { color: 'red', size: 'medium' }
+
+// jQuery - Deep merge
+const obj1 = { a: { b: 1, c: 2 } };
+const obj2 = { a: { b: 3 } };
+const result = $.extend(true, {}, obj1, obj2);
+// Result: { a: { b: 3, c: 2 } }
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - goog.object
+goog.require('goog.object');
+
+// Shallow merge (modifies target)
+const settings = {};
+goog.object.extend(settings, defaults, options);
+
+// Clone then merge
+const settings = goog.object.clone(defaults);
+goog.object.extend(settings, options);
+
+// Note: No built-in deep merge - use goog.object.unsafeClone for deep copy
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript - native merge (immutable, shallow)
+(def defaults {:color "blue" :size "medium"})
+(def options {:color "red"})
+(def settings (merge defaults options))
+;; => {:color "red" :size "medium"}
+
+;; Deep merge
+(def obj1 {:a {:b 1 :c 2}})
+(def obj2 {:a {:b 3}})
+(def result (merge-with merge obj1 obj2))
+;; => {:a {:b 3 :c 2}}
+
+;; Or use a deep-merge library
+(require '[clojure.walk :refer [postwalk]])
+```
+
+---
+
+### jQuery: $.each() - Iteration
+
+```javascript
+// jQuery - Array iteration
+$.each(['a', 'b', 'c'], function(index, value) {
+    console.log(`${index}: ${value}`);
+});
+
+// jQuery - Object iteration
+$.each({ name: 'John', age: 30 }, function(key, value) {
+    console.log(`${key}: ${value}`);
+});
+
+// jQuery - Return false to break
+$.each([1, 2, 3, 4, 5], function(i, num) {
+    if (num > 3) return false;
+    console.log(num);
+});
+// Output: 1, 2, 3
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - goog.array and goog.object
+goog.require('goog.array');
+goog.require('goog.object');
+
+// Array iteration
+goog.array.forEach(['a', 'b', 'c'], function(value, index) {
+    console.log(index + ': ' + value);
+});
+
+// Object iteration
+goog.object.forEach({ name: 'John', age: 30 }, function(value, key) {
+    console.log(key + ': ' + value);
+});
+
+// Break with goog.array.some (return true to stop)
+goog.array.some([1, 2, 3, 4, 5], function(num) {
+    if (num > 3) return true;
+    console.log(num);
+    return false;
+});
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript - Array iteration
+(doseq [[index value] (map-indexed vector ["a" "b" "c"])]
+  (println (str index ": " value)))
+
+;; Simpler
+(run! println ["a" "b" "c"])
+
+;; Object/map iteration
+(doseq [[k v] {:name "John" :age 30}]
+  (println (str (name k) ": " v)))
+
+;; Early termination with reduced
+(reduce (fn [_ num]
+          (if (> num 3)
+            (reduced nil)
+            (println num)))
+        nil [1 2 3 4 5])
+;; Output: 1, 2, 3
+```
+
+---
+
+### jQuery: $.map() - Transform Array
+
+```javascript
+// jQuery
+const numbers = [1, 2, 3, 4];
+const doubled = $.map(numbers, n => n * 2);
+// Result: [2, 4, 6, 8]
+
+// Return multiple values
+const expanded = $.map([1, 2], n => [n, n * 2]);
+// Result: [1, 2, 2, 4]
+
+// Return null to remove
+const filtered = $.map([1, 2, 3, 4], n => n > 2 ? n : null);
+// Result: [3, 4]
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.array');
+
+// Map
+const doubled = goog.array.map([1, 2, 3, 4], function(n) {
+    return n * 2;
+});
+
+// Flat map (expand)
+const expanded = goog.array.flatten(
+    goog.array.map([1, 2], function(n) {
+        return [n, n * 2];
+    })
+);
+
+// Filter then map (no null removal in map)
+const filtered = goog.array.filter([1, 2, 3, 4], function(n) {
+    return n > 2;
+});
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript - map
+(def numbers [1 2 3 4])
+(def doubled (map #(* % 2) numbers))
+;; => (2 4 6 8)
+
+;; mapcat for expansion (flat map)
+(def expanded (mapcat (fn [n] [n (* n 2)]) [1 2]))
+;; => (1 2 2 4)
+
+;; filter + map or keep
+(def filtered (filter #(> % 2) [1 2 3 4]))
+;; => (3 4)
+
+;; Or use keep (removes nils)
+(def filtered (keep #(when (> % 2) %) [1 2 3 4]))
+```
+
+---
+
+### jQuery: $.grep() - Filter Array
+
+```javascript
+// jQuery
+const numbers = [1, 2, 3, 4, 5, 6];
+
+// Keep elements where callback returns true
+const evens = $.grep(numbers, n => n % 2 === 0);
+// Result: [2, 4, 6]
+
+// With invert=true, keep elements where callback returns false
+const odds = $.grep(numbers, n => n % 2 === 0, true);
+// Result: [1, 3, 5]
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.array');
+
+const numbers = [1, 2, 3, 4, 5, 6];
+
+// Filter
+const evens = goog.array.filter(numbers, function(n) {
+    return n % 2 === 0;
+});
+
+// Inverted (negate the condition)
+const odds = goog.array.filter(numbers, function(n) {
+    return n % 2 !== 0;
+});
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(def numbers [1 2 3 4 5 6])
+
+;; Filter
+(def evens (filter even? numbers))
+;; => (2 4 6)
+
+;; Inverted with remove or complement
+(def odds (remove even? numbers))
+;; => (1 3 5)
+
+;; Or
+(def odds (filter odd? numbers))
+(def odds (filter (complement even?) numbers))
+```
+
+---
+
+### jQuery: $.merge() - Merge Arrays
+
+```javascript
+// jQuery
+const arr1 = [1, 2];
+const arr2 = [3, 4];
+$.merge(arr1, arr2);
+// arr1 is now [1, 2, 3, 4]
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.array');
+
+const arr1 = [1, 2];
+const arr2 = [3, 4];
+
+// Extend modifies first array
+goog.array.extend(arr1, arr2);
+// arr1 is now [1, 2, 3, 4]
+
+// Or create new array
+const merged = goog.array.concat(arr1, arr2);
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript - concat (immutable, creates new sequence)
+(def arr1 [1 2])
+(def arr2 [3 4])
+(def merged (concat arr1 arr2))
+;; => (1 2 3 4)
+
+;; As vector
+(def merged (into arr1 arr2))
+;; => [1 2 3 4]
+```
+
+---
+
+### jQuery: $.inArray() - Find Index
+
+```javascript
+// jQuery
+const arr = ['a', 'b', 'c', 'd'];
+
+$.inArray('b', arr);     // Returns: 1
+$.inArray('x', arr);     // Returns: -1
+$.inArray('b', arr, 2);  // Returns: -1 (starts search at index 2)
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.array');
+
+const arr = ['a', 'b', 'c', 'd'];
+
+goog.array.indexOf(arr, 'b');        // Returns: 1
+goog.array.indexOf(arr, 'x');        // Returns: -1
+goog.array.indexOf(arr, 'b', 2);     // Returns: -1
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(def arr ["a" "b" "c" "d"])
+
+;; Using .indexOf on vector
+(.indexOf arr "b")  ;; => 1
+(.indexOf arr "x")  ;; => -1
+
+;; Or idiomatic ClojureScript
+(defn index-of [coll item]
+  (first (keep-indexed #(when (= %2 item) %1) coll)))
+
+(index-of arr "b")  ;; => 1
+(index-of arr "x")  ;; => nil
+```
+
+---
+
+### jQuery: $.isPlainObject() / $.isEmptyObject()
+
+```javascript
+// jQuery
+$.isPlainObject({});              // true
+$.isPlainObject({ a: 1 });        // true
+$.isPlainObject([]);              // false
+$.isPlainObject(new Date());      // false
+
+$.isEmptyObject({});              // true
+$.isEmptyObject({ a: 1 });        // false
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.object');
+
+goog.isObject({});              // true (but also true for arrays!)
+
+// Check plain object more carefully
+function isPlainObject(obj) {
+    return goog.isObject(obj) &&
+           !goog.isArray(obj) &&
+           Object.getPrototypeOf(obj) === Object.prototype;
+}
+
+// Empty object check
+goog.object.isEmpty({});          // true
+goog.object.isEmpty({ a: 1 });    // false
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(map? {})              ;; true
+(map? {:a 1})          ;; true
+(map? [])              ;; false
+
+;; Empty check
+(empty? {})            ;; true
+(empty? {:a 1})        ;; false
+
+;; For JS objects specifically
+(object? #js {})       ;; true
+(goog.object/isEmpty #js {})  ;; true
+```
+
+---
+
+### Removed jQuery Functions (Use Native)
+
+```javascript
+// jQuery 3.x (deprecated) -> Native JavaScript
+
+// $.isArray() -> Array.isArray()
+if (Array.isArray(myVar)) { /* ... */ }
+
+// $.isFunction() -> typeof
+if (typeof callback === 'function') { /* ... */ }
+
+// $.trim() -> String.prototype.trim()
+var trimmed = userInput.trim();
+
+// $.parseJSON() -> JSON.parse()
+var data = JSON.parse(jsonString);
+
+// $.now() -> Date.now()
+var timestamp = Date.now();
+```
+
+### Google Closure Equivalents
+
+```javascript
+// Google Closure
+goog.isArray(myVar);
+goog.isFunction(callback);
+goog.string.trim(userInput);
+// JSON.parse is native, or use goog.json.parse for older browsers
+var timestamp = goog.now();
+```
+
+### ClojureScript Equivalents
+
+```clojure
+;; ClojureScript
+(array? my-var)
+(fn? callback)
+(clojure.string/trim user-input)
+(js/JSON.parse json-string)
+(.now js/Date)
+```
+
+---
+
+## DOM Manipulation
+
+### jQuery: DOM Ready
+
+```javascript
+// jQuery - Shorthand (recommended)
+$(function() {
+    console.log('DOM ready');
+});
+
+// jQuery - Explicit ready
+$(document).ready(function() {
+    console.log('DOM ready');
+});
+
+// jQuery - Arrow function
+$(() => {
+    console.log('DOM ready');
+});
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.dom');
+goog.require('goog.events');
+
+// Using DOMContentLoaded
+goog.events.listen(document, 'DOMContentLoaded', function() {
+    console.log('DOM ready');
+});
+
+// Or check if already ready
+if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    console.log('DOM already ready');
+} else {
+    goog.events.listen(document, 'DOMContentLoaded', function() {
+        console.log('DOM ready');
+    });
+}
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(require '[goog.events :as gevents])
+
+;; Using goog.events
+(gevents/listen js/document "DOMContentLoaded"
+  (fn [_] (println "DOM ready")))
+
+;; Or with native JS
+(.addEventListener js/document "DOMContentLoaded"
+  (fn [_] (println "DOM ready")))
+
+;; Check if already loaded
+(if (or (= "complete" (.-readyState js/document))
+        (= "interactive" (.-readyState js/document)))
+  (println "Already ready")
+  (gevents/listen js/document "DOMContentLoaded"
+    (fn [_] (println "DOM ready"))))
+```
+
+---
+
+### jQuery: Append/Remove Elements
+
+```javascript
+// jQuery - Append
+$('#container').append('<p>New paragraph</p>');
+
+// jQuery - Prepend
+$('#container').prepend('<p>First paragraph</p>');
+
+// jQuery - Remove
+$('#element').remove();
+
+// jQuery - Empty (remove children)
+$('#container').empty();
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.dom');
+
+const container = goog.dom.getElement('container');
+
+// Append
+const newP = goog.dom.createDom('p', null, 'New paragraph');
+goog.dom.appendChild(container, newP);
+
+// Prepend
+const firstP = goog.dom.createDom('p', null, 'First paragraph');
+goog.dom.insertChildAt(container, firstP, 0);
+
+// Remove
+const element = goog.dom.getElement('element');
+goog.dom.removeNode(element);
+
+// Empty (remove children)
+goog.dom.removeChildren(container);
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript with goog.dom
+(require '[goog.dom :as gdom])
+
+(def container (gdom/getElement "container"))
+
+;; Append
+(let [new-p (gdom/createDom "p" nil "New paragraph")]
+  (gdom/appendChild container new-p))
+
+;; Prepend
+(let [first-p (gdom/createDom "p" nil "First paragraph")]
+  (gdom/insertChildAt container first-p 0))
+
+;; Remove
+(gdom/removeNode (gdom/getElement "element"))
+
+;; Empty
+(gdom/removeChildren container)
+
+;; With dommy library
+(require '[dommy.core :as dommy :refer-macros [sel1]])
+(dommy/append! (sel1 :#container) some-element)
+(dommy/remove! (sel1 :#element))
+```
+
+---
+
+### jQuery: Class Manipulation
+
+```javascript
+// jQuery
+$('#element').addClass('active');
+$('#element').removeClass('inactive');
+$('#element').toggleClass('visible');
+$('#element').hasClass('active');  // returns boolean
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.dom.classlist');
+
+const element = goog.dom.getElement('element');
+
+goog.dom.classlist.add(element, 'active');
+goog.dom.classlist.remove(element, 'inactive');
+goog.dom.classlist.toggle(element, 'visible');
+goog.dom.classlist.contains(element, 'active');  // returns boolean
+
+// Multiple classes
+goog.dom.classlist.addAll(element, ['class1', 'class2']);
+goog.dom.classlist.removeAll(element, ['class1', 'class2']);
+
+// Swap classes
+goog.dom.classlist.swap(element, 'old-class', 'new-class');
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript with goog.dom.classlist
+(require '[goog.dom.classlist :as classlist])
+
+(def element (gdom/getElement "element"))
+
+(classlist/add element "active")
+(classlist/remove element "inactive")
+(classlist/toggle element "visible")
+(classlist/contains element "active")  ;; returns boolean
+
+;; With dommy
+(require '[dommy.core :as dommy :refer-macros [sel1]])
+(dommy/add-class! (sel1 :#element) :active)
+(dommy/remove-class! (sel1 :#element) :inactive)
+(dommy/toggle-class! (sel1 :#element) :visible)
+(dommy/has-class? (sel1 :#element) :active)
+```
+
+---
+
+### jQuery: CSS/Style Manipulation
+
+```javascript
+// jQuery - Get style
+const color = $('#element').css('color');
+
+// jQuery - Set single style
+$('#element').css('color', 'red');
+
+// jQuery - Set multiple styles
+$('#element').css({
+    color: 'red',
+    fontSize: '16px',
+    backgroundColor: '#fff'
+});
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.style');
+
+const element = goog.dom.getElement('element');
+
+// Get style
+const color = goog.style.getStyle(element, 'color');
+
+// Set single style
+goog.style.setStyle(element, 'color', 'red');
+
+// Set multiple styles
+goog.style.setStyle(element, {
+    'color': 'red',
+    'font-size': '16px',
+    'background-color': '#fff'
+});
+
+// Other style utilities
+goog.style.setOpacity(element, 0.5);
+goog.style.setSize(element, 100, 200);  // width, height
+goog.style.setPosition(element, 10, 20);  // x, y
+goog.style.showElement(element, true);  // show/hide
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript with goog.style
+(require '[goog.style :as gstyle])
+
+(def element (gdom/getElement "element"))
+
+;; Get style
+(def color (gstyle/getStyle element "color"))
+
+;; Set single style
+(gstyle/setStyle element "color" "red")
+
+;; Set multiple styles
+(gstyle/setStyle element #js {:color "red"
+                               :font-size "16px"
+                               :background-color "#fff"})
+
+;; With dommy
+(dommy/set-style! (sel1 :#element) :color "red")
+(dommy/set-style! (sel1 :#element) :font-size "16px")
+```
+
+---
+
+### jQuery: Text and HTML Content
+
+```javascript
+// jQuery - Get/Set text
+const text = $('#element').text();
+$('#element').text('New text content');
+
+// jQuery - Get/Set HTML
+const html = $('#element').html();
+$('#element').html('<strong>Bold text</strong>');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.dom');
+
+const element = goog.dom.getElement('element');
+
+// Get/Set text
+const text = goog.dom.getTextContent(element);
+goog.dom.setTextContent(element, 'New text content');
+
+// Get/Set HTML (be careful with XSS)
+const html = element.innerHTML;
+element.innerHTML = '<strong>Bold text</strong>';
+
+// Safe HTML setting (with Trusted Types support)
+goog.require('goog.dom.safe');
+goog.dom.safe.setInnerHtml(element, trustedHtml);
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript with goog.dom
+(def element (gdom/getElement "element"))
+
+;; Get/Set text
+(def text (gdom/getTextContent element))
+(gdom/setTextContent element "New text content")
+
+;; Get/Set HTML
+(def html (.-innerHTML element))
+(set! (.-innerHTML element) "<strong>Bold text</strong>")
+
+;; With dommy
+(dommy/text (sel1 :#element))
+(dommy/set-text! (sel1 :#element) "New text")
+(dommy/html (sel1 :#element))
+(dommy/set-html! (sel1 :#element) "<strong>Bold</strong>")
+```
+
+---
+
+### jQuery: Attributes
+
+```javascript
+// jQuery - Get attribute
+const href = $('a').attr('href');
+
+// jQuery - Set attribute
+$('a').attr('href', 'https://example.com');
+
+// jQuery - Set multiple attributes
+$('#img').attr({
+    src: 'image.jpg',
+    alt: 'Description'
+});
+
+// jQuery - Remove attribute
+$('#input').removeAttr('disabled');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+const element = goog.dom.getElement('link');
+
+// Get attribute
+const href = element.getAttribute('href');
+
+// Set attribute
+element.setAttribute('href', 'https://example.com');
+
+// Set multiple with goog.dom
+goog.dom.setProperties(element, {
+    'href': 'https://example.com',
+    'target': '_blank'
+});
+
+// Remove attribute
+element.removeAttribute('disabled');
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(def element (gdom/getElement "link"))
+
+;; Get attribute
+(def href (.getAttribute element "href"))
+
+;; Set attribute
+(.setAttribute element "href" "https://example.com")
+
+;; Set multiple
+(gdom/setProperties element #js {:href "https://example.com"
+                                  :target "_blank"})
+
+;; Remove
+(.removeAttribute element "disabled")
+
+;; With dommy
+(dommy/attr (sel1 :a) :href)
+(dommy/set-attr! (sel1 :a) :href "https://example.com")
+(dommy/remove-attr! (sel1 :#input) :disabled)
+```
+
+---
+
+## Event Handling
+
+### jQuery: Basic Event Binding
+
+```javascript
+// jQuery - on() method
+$('#button').on('click', function(e) {
+    console.log('Button clicked');
+});
+
+// jQuery - Shorthand
+$('#button').click(function() {
+    console.log('Button clicked');
+});
+
+// jQuery - Multiple events
+$('#input').on('focus blur', function(e) {
+    console.log('Focus state changed');
+});
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.events');
+goog.require('goog.events.EventType');
+
+const button = goog.dom.getElement('button');
+
+// Basic listener
+goog.events.listen(button, goog.events.EventType.CLICK, function(e) {
+    console.log('Button clicked');
+});
+
+// Multiple events
+const input = goog.dom.getElement('input');
+goog.events.listen(input, [goog.events.EventType.FOCUS, goog.events.EventType.BLUR],
+    function(e) {
+        console.log('Focus state changed');
+    }
+);
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript with goog.events
+(require '[goog.events :as gevents])
+(import '[goog.events EventType])
+
+(def button (gdom/getElement "button"))
+
+;; Basic listener
+(gevents/listen button EventType.CLICK
+  (fn [e] (println "Button clicked")))
+
+;; Multiple events
+(doseq [event-type [EventType.FOCUS EventType.BLUR]]
+  (gevents/listen input event-type
+    (fn [e] (println "Focus state changed"))))
+
+;; With dommy
+(dommy/listen! (sel1 :#button) :click
+  (fn [e] (println "Button clicked")))
+```
+
+---
+
+### jQuery: Event Delegation
+
+```javascript
+// jQuery - Event delegation
+$('#container').on('click', '.item', function(e) {
+    console.log('Item clicked:', $(this).text());
+});
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - Manual delegation
+goog.require('goog.events');
+goog.require('goog.dom');
+
+const container = goog.dom.getElement('container');
+
+goog.events.listen(container, goog.events.EventType.CLICK, function(e) {
+    // Check if target matches selector
+    const target = e.target;
+    if (goog.dom.classlist.contains(target, 'item')) {
+        console.log('Item clicked:', goog.dom.getTextContent(target));
+    }
+
+    // Or find closest matching ancestor
+    const item = goog.dom.getAncestorByClass(target, 'item');
+    if (item) {
+        console.log('Item clicked:', goog.dom.getTextContent(item));
+    }
+});
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript - Manual delegation
+(gevents/listen (gdom/getElement "container") EventType.CLICK
+  (fn [e]
+    (let [target (.-target e)]
+      (when (classlist/contains target "item")
+        (println "Item clicked:" (gdom/getTextContent target))))))
+
+;; With dommy - built-in delegation
+(dommy/listen! [(sel1 :#container) :.item] :click
+  (fn [e]
+    (println "Item clicked:" (dommy/text (.-selectedTarget e)))))
+```
+
+---
+
+### jQuery: One-time Events
+
+```javascript
+// jQuery - one() for single execution
+$('#button').one('click', function() {
+    console.log('This only fires once');
+});
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.events.listenOnce(button, goog.events.EventType.CLICK, function(e) {
+    console.log('This only fires once');
+});
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(gevents/listenOnce button EventType.CLICK
+  (fn [e] (println "This only fires once")))
+
+;; With dommy
+(dommy/listen-once! (sel1 :#button) :click
+  (fn [e] (println "This only fires once")))
+```
+
+---
+
+### jQuery: Removing Event Handlers
+
+```javascript
+// jQuery - Named handler for removal
+function clickHandler(e) {
+    console.log('Clicked');
+}
+
+$('#button').on('click', clickHandler);
+$('#button').off('click', clickHandler);
+
+// Remove all click handlers
+$('#button').off('click');
+
+// Remove all handlers
+$('#button').off();
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+function clickHandler(e) {
+    console.log('Clicked');
+}
+
+// Listen returns a key for removal
+const key = goog.events.listen(button, goog.events.EventType.CLICK, clickHandler);
+
+// Remove specific handler
+goog.events.unlistenByKey(key);
+
+// Or remove by parameters
+goog.events.unlisten(button, goog.events.EventType.CLICK, clickHandler);
+
+// Remove all handlers from element
+goog.events.removeAll(button);
+
+// Remove all handlers of specific type
+goog.events.removeAll(button, goog.events.EventType.CLICK);
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(defn click-handler [e]
+  (println "Clicked"))
+
+;; Store the key
+(def key (gevents/listen button EventType.CLICK click-handler))
+
+;; Remove by key
+(gevents/unlistenByKey key)
+
+;; Remove by parameters
+(gevents/unlisten button EventType.CLICK click-handler)
+
+;; Remove all
+(gevents/removeAll button)
+
+;; With dommy
+(dommy/listen! (sel1 :#button) :click click-handler)
+(dommy/unlisten! (sel1 :#button) :click click-handler)
+```
+
+---
+
+### jQuery: Focus Event Order (W3C in 4.0)
+
+```javascript
+// jQuery 4.0 order (W3C compliant):
+// blur → focusout → focus → focusin
+
+const $input = $('#myInput');
+
+$input.on('blur', () => console.log('1. blur'));
+$input.on('focusout', () => console.log('2. focusout'));
+$input.on('focus', () => console.log('3. focus'));
+$input.on('focusin', () => console.log('4. focusin'));
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - Uses native event order
+const input = goog.dom.getElement('myInput');
+
+goog.events.listen(input, goog.events.EventType.BLUR, function() {
+    console.log('blur');
+});
+
+goog.events.listen(input, goog.events.EventType.FOCUS, function() {
+    console.log('focus');
+});
+
+// focusin/focusout via FocusHandler for cross-browser support
+goog.require('goog.events.FocusHandler');
+const focusHandler = new goog.events.FocusHandler(input);
+goog.events.listen(focusHandler, goog.events.FocusHandler.EventType.FOCUSIN, function() {
+    console.log('focusin');
+});
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(gevents/listen input EventType.BLUR #(println "blur"))
+(gevents/listen input EventType.FOCUS #(println "focus"))
+
+;; For focusin/focusout
+(import '[goog.events FocusHandler])
+(def focus-handler (FocusHandler. input))
+(gevents/listen focus-handler (.-FOCUSIN FocusHandler.EventType) #(println "focusin"))
+```
+
+---
+
+## Traversal
+
+### jQuery: .find()
+
+```javascript
+// jQuery - Find all paragraphs inside #content
+$('#content').find('p').addClass('styled');
+
+// Chained traversal
+$('#nav')
+    .find('li')
+    .find('a')
+    .addClass('nav-link');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+const content = goog.dom.getElement('content');
+const paragraphs = goog.dom.getElementsByTagName('p', content);
+goog.array.forEach(paragraphs, function(p) {
+    goog.dom.classlist.add(p, 'styled');
+});
+
+// Or with query
+const links = goog.dom.query('#nav li a');
+goog.array.forEach(links, function(a) {
+    goog.dom.classlist.add(a, 'nav-link');
+});
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(let [content (gdom/getElement "content")
+      paragraphs (gdom/getElementsByTagName "p" content)]
+  (doseq [p (array-seq paragraphs)]
+    (classlist/add p "styled")))
+
+;; With dommy
+(doseq [p (sel (sel1 :#content) :p)]
+  (dommy/add-class! p :styled))
+```
+
+---
+
+### jQuery: .filter()
+
+```javascript
+// jQuery - Filter by selector
+$('li').filter('.active').css('font-weight', 'bold');
+
+// Filter by function
+$('input').filter(function() {
+    return $(this).val().length > 0;
+}).addClass('has-value');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.array');
+
+// Filter by class
+const items = goog.dom.getElementsByTagName('li');
+const activeItems = goog.array.filter(items, function(li) {
+    return goog.dom.classlist.contains(li, 'active');
+});
+goog.array.forEach(activeItems, function(li) {
+    goog.style.setStyle(li, 'font-weight', 'bold');
+});
+
+// Filter by function
+const inputs = goog.dom.getElementsByTagName('input');
+const filledInputs = goog.array.filter(inputs, function(input) {
+    return input.value.length > 0;
+});
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(->> (array-seq (gdom/getElementsByTagName "li"))
+     (filter #(classlist/contains % "active"))
+     (run! #(gstyle/setStyle % "font-weight" "bold")))
+
+;; Filter inputs with values
+(->> (array-seq (gdom/getElementsByTagName "input"))
+     (filter #(> (count (.-value %)) 0))
+     (run! #(classlist/add % "has-value")))
+
+;; With dommy
+(->> (sel :li)
+     (filter #(dommy/has-class? % :active))
+     (run! #(dommy/set-style! % :font-weight "bold")))
+```
+
+---
+
+### jQuery: .closest()
+
+```javascript
+// jQuery - Find parent form
+$('input').on('blur', function() {
+    const $form = $(this).closest('form');
+    validateForm($form);
+});
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.dom');
+
+goog.events.listen(input, 'blur', function(e) {
+    const form = goog.dom.getAncestorByTagNameAndClass(e.target, 'form');
+    validateForm(form);
+});
+
+// By class
+const container = goog.dom.getAncestorByClass(element, 'container');
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(gevents/listen input "blur"
+  (fn [e]
+    (let [form (gdom/getAncestorByTagNameAndClass (.-target e) "form")]
+      (validate-form form))))
+
+;; By class
+(def container (gdom/getAncestorByClass element "container"))
+```
+
+---
+
+### jQuery: .has()
+
+```javascript
+// jQuery - Only select divs that contain a span
+$('div').has('span').addClass('has-span');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+const divs = goog.dom.getElementsByTagName('div');
+goog.array.forEach(divs, function(div) {
+    if (goog.dom.getElementsByTagName('span', div).length > 0) {
+        goog.dom.classlist.add(div, 'has-span');
+    }
+});
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(->> (array-seq (gdom/getElementsByTagName "div"))
+     (filter #(pos? (.-length (gdom/getElementsByTagName "span" %))))
+     (run! #(classlist/add % "has-span")))
+```
+
+---
+
+### jQuery: .index()
+
+```javascript
+// jQuery
+$('li.active').index();  // Position among siblings
+
+const $items = $('li');
+$items.index($('.active'));  // Position in collection
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.array');
+
+// Among siblings
+const active = goog.dom.getElementByClass('active');
+const siblings = goog.dom.getChildren(active.parentNode);
+const index = goog.array.indexOf(siblings, active);
+
+// In collection
+const items = goog.dom.getElementsByTagName('li');
+const activeItem = goog.dom.getElementByClass('active');
+const indexInCollection = goog.array.indexOf(items, activeItem);
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(let [active (gdom/getElementByClass "active")
+      siblings (gdom/getChildren (.-parentNode active))]
+  (.indexOf (array-seq siblings) active))
+```
+
+---
+
+### jQuery: .add()
+
+```javascript
+// jQuery - Combine selections
+$('p')
+    .add('span')
+    .add('div.highlight')
+    .addClass('styled');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - Combine into array
+const combined = goog.array.concat(
+    goog.array.toArray(goog.dom.getElementsByTagName('p')),
+    goog.array.toArray(goog.dom.getElementsByTagName('span')),
+    goog.array.toArray(goog.dom.getElementsByClass('highlight'))
+);
+
+goog.array.forEach(combined, function(el) {
+    goog.dom.classlist.add(el, 'styled');
+});
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(let [combined (concat
+                (array-seq (gdom/getElementsByTagName "p"))
+                (array-seq (gdom/getElementsByTagName "span"))
+                (array-seq (gdom/getElementsByClass "highlight")))]
+  (run! #(classlist/add % "styled") combined))
+```
+
+---
+
+## Data Storage
+
+### jQuery: .data()
+
+```javascript
+// jQuery - Set data
+$('#element').data('userId', 123);
+$('#element').data('config', { theme: 'dark', lang: 'en' });
+
+// Get data
+const userId = $('#element').data('userId');  // 123
+const config = $('#element').data('config');
+
+// Get all data
+const allData = $('#element').data();
+
+// HTML5 data attributes are auto-loaded
+// <div id="user" data-user-id="456" data-role="admin">
+$('#user').data('userId');  // 456
+$('#user').data('role');    // 'admin'
+
+// Remove data
+$('#element').removeData('temp');
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - Using dataset API (HTML5)
+const element = goog.dom.getElement('element');
+
+// Set data (via dataset)
+element.dataset.userId = '123';
+element.dataset.config = JSON.stringify({ theme: 'dark', lang: 'en' });
+
+// Get data
+const userId = element.dataset.userId;
+const config = JSON.parse(element.dataset.config);
+
+// Or use a WeakMap for complex data
+const dataStore = new WeakMap();
+
+function setData(element, key, value) {
+    let data = dataStore.get(element) || {};
+    data[key] = value;
+    dataStore.set(element, data);
+}
+
+function getData(element, key) {
+    const data = dataStore.get(element) || {};
+    return key ? data[key] : data;
+}
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript - Using dataset
+(def element (gdom/getElement "element"))
+
+;; Set via dataset
+(set! (.. element -dataset -userId) "123")
+
+;; Get
+(.. element -dataset -userId)
+
+;; For complex data, use atoms or state management
+(def data-store (atom {}))
+
+(defn set-data! [element key value]
+  (swap! data-store assoc-in [element key] value))
+
+(defn get-data [element key]
+  (get-in @data-store [element key]))
+
+;; Or use a library like reagent for reactive state
+```
+
+---
+
+## AJAX
+
+### jQuery: $.ajax() and Shortcuts
+
+```javascript
+// jQuery - Full AJAX
+$.ajax({
+    url: '/api/data',
+    method: 'GET',
+    dataType: 'json'
+})
+.done(function(data) {
+    console.log('Success:', data);
+})
+.fail(function(jqXHR, textStatus, error) {
+    console.error('Error:', error);
+})
+.always(function() {
+    console.log('Complete');
+});
+
+// jQuery - Shorthand GET
+$.get('/api/data', function(data) {
+    console.log(data);
+});
+
+// jQuery - Shorthand POST
+$.post('/api/data', { name: 'John' }, function(response) {
+    console.log(response);
+});
+
+// jQuery - Get JSON
+$.getJSON('/api/data.json', function(data) {
+    console.log(data);
+});
+
+// jQuery - Get Script
+$.getScript('https://example.com/script.js')
+    .done(function() {
+        console.log('Script loaded');
+    });
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.net.XhrIo');
+goog.require('goog.events');
+
+// GET request
+goog.net.XhrIo.send('/api/data', function(e) {
+    const xhr = e.target;
+    if (xhr.isSuccess()) {
+        const data = xhr.getResponseJson();
+        console.log('Success:', data);
+    } else {
+        console.error('Error:', xhr.getStatus());
+    }
+    console.log('Complete');
+});
+
+// POST request
+goog.net.XhrIo.send('/api/data', function(e) {
+    const data = e.target.getResponseJson();
+    console.log(data);
+}, 'POST', 'name=John', {'Content-Type': 'application/x-www-form-urlencoded'});
+
+// With instance for more control
+const xhr = new goog.net.XhrIo();
+goog.events.listen(xhr, goog.net.EventType.COMPLETE, function(e) {
+    if (xhr.isSuccess()) {
+        console.log(xhr.getResponseJson());
+    }
+});
+goog.events.listen(xhr, goog.net.EventType.ERROR, function(e) {
+    console.error('Request failed');
+});
+xhr.send('/api/data', 'GET');
+
+// JSON with headers
+const headers = {'Content-Type': 'application/json'};
+goog.net.XhrIo.send('/api/data', callback, 'POST',
+    JSON.stringify({name: 'John'}), headers);
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript with goog.net.XhrIo
+(require '[goog.net.XhrIo :as xhr])
+
+;; GET request
+(xhr/send "/api/data"
+  (fn [e]
+    (let [target (.-target e)]
+      (if (.isSuccess target)
+        (println "Success:" (.getResponseJson target))
+        (println "Error:" (.getStatus target))))))
+
+;; POST request
+(xhr/send "/api/data"
+  (fn [e] (println (.getResponseJson (.-target e))))
+  "POST"
+  (js/JSON.stringify #js {:name "John"})
+  #js {"Content-Type" "application/json"})
+
+;; With cljs-ajax library (recommended)
+(require '[ajax.core :refer [GET POST]])
+
+(GET "/api/data"
+  {:handler (fn [response] (println "Success:" response))
+   :error-handler (fn [error] (println "Error:" error))})
+
+(POST "/api/data"
+  {:params {:name "John"}
+   :format :json
+   :response-format :json
+   :handler (fn [response] (println response))})
+
+;; With cljs-http and core.async
+(require '[cljs-http.client :as http]
+         '[cljs.core.async :refer [<!]])
+(require-macros '[cljs.core.async.macros :refer [go]])
+
+(go
+  (let [response (<! (http/get "/api/data"))]
+    (println (:body response))))
+```
+
+---
+
+### jQuery: $.when() - Parallel Requests
+
+```javascript
+// jQuery
+function fetchUser() {
+    return $.ajax('/api/user');
+}
+
+function fetchPosts() {
+    return $.ajax('/api/posts');
+}
+
+$.when(fetchUser(), fetchPosts())
+    .done(function(userData, postsData) {
+        console.log('User:', userData[0]);
+        console.log('Posts:', postsData[0]);
+    })
+    .fail(function() {
+        console.error('One or more requests failed');
+    });
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - Using goog.Promise.all (or native Promise.all)
+goog.require('goog.Promise');
+goog.require('goog.net.XhrIo');
+
+function fetchUser() {
+    return new goog.Promise(function(resolve, reject) {
+        goog.net.XhrIo.send('/api/user', function(e) {
+            if (e.target.isSuccess()) {
+                resolve(e.target.getResponseJson());
+            } else {
+                reject(e.target.getStatus());
+            }
+        });
+    });
+}
+
+function fetchPosts() {
+    return new goog.Promise(function(resolve, reject) {
+        goog.net.XhrIo.send('/api/posts', function(e) {
+            if (e.target.isSuccess()) {
+                resolve(e.target.getResponseJson());
+            } else {
+                reject(e.target.getStatus());
+            }
+        });
+    });
+}
+
+goog.Promise.all([fetchUser(), fetchPosts()])
+    .then(function(results) {
+        console.log('User:', results[0]);
+        console.log('Posts:', results[1]);
+    })
+    .thenCatch(function(error) {
+        console.error('Failed:', error);
+    });
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript with core.async
+(require '[cljs-http.client :as http]
+         '[cljs.core.async :refer [<! go]])
+
+(go
+  (let [user-chan (http/get "/api/user")
+        posts-chan (http/get "/api/posts")
+        user (<! user-chan)
+        posts (<! posts-chan)]
+    (println "User:" (:body user))
+    (println "Posts:" (:body posts))))
+
+;; Or with promesa library
+(require '[promesa.core :as p])
+
+(-> (p/all [(fetch-user) (fetch-posts)])
+    (p/then (fn [[user posts]]
+              (println "User:" user)
+              (println "Posts:" posts)))
+    (p/catch (fn [error]
+               (println "Failed:" error))))
+```
+
+---
+
+## Deferred/Promises
+
+### jQuery: $.Deferred()
+
+```javascript
+// jQuery
+function asyncOperation() {
+    const deferred = $.Deferred();
+
+    setTimeout(function() {
+        const success = Math.random() > 0.5;
+
+        if (success) {
+            deferred.resolve('Operation succeeded');
+        } else {
+            deferred.reject('Operation failed');
+        }
+    }, 1000);
+
+    return deferred.promise();
+}
+
+asyncOperation()
+    .done(function(result) {
+        console.log(result);
+    })
+    .fail(function(error) {
+        console.error(error);
+    })
+    .always(function() {
+        console.log('Complete');
+    });
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - goog.Promise (or native Promise)
+goog.require('goog.Promise');
+
+function asyncOperation() {
+    return new goog.Promise(function(resolve, reject) {
+        setTimeout(function() {
+            const success = Math.random() > 0.5;
+
+            if (success) {
+                resolve('Operation succeeded');
+            } else {
+                reject('Operation failed');
+            }
+        }, 1000);
+    });
+}
+
+asyncOperation()
+    .then(function(result) {
+        console.log(result);
+    })
+    .thenCatch(function(error) {
+        console.error(error);
+    })
+    .thenAlways(function() {
+        console.log('Complete');
+    });
+
+// Or with native Promise
+function asyncOperation() {
+    return new Promise(function(resolve, reject) {
+        // ... same as above
+    });
+}
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript with core.async channels
+(require '[cljs.core.async :refer [<! >! chan go timeout]])
+
+(defn async-operation []
+  (let [c (chan)]
+    (go
+      (<! (timeout 1000))
+      (if (> (rand) 0.5)
+        (>! c {:status :success :result "Operation succeeded"})
+        (>! c {:status :error :error "Operation failed"})))
+    c))
+
+(go
+  (let [{:keys [status result error]} (<! (async-operation))]
+    (case status
+      :success (println result)
+      :error (println "Error:" error))
+    (println "Complete")))
+
+;; With promesa library (Promise-based)
+(require '[promesa.core :as p])
+
+(defn async-operation []
+  (p/create
+    (fn [resolve reject]
+      (js/setTimeout
+        (fn []
+          (if (> (rand) 0.5)
+            (resolve "Operation succeeded")
+            (reject "Operation failed")))
+        1000))))
+
+(-> (async-operation)
+    (p/then #(println %))
+    (p/catch #(println "Error:" %))
+    (p/finally #(println "Complete")))
+```
+
+---
+
+## Callbacks
+
+### jQuery: $.Callbacks()
+
+```javascript
+// jQuery - Basic usage
+const callbacks = $.Callbacks();
+
+function fn1(value) {
+    console.log('fn1:', value);
+}
+
+function fn2(value) {
+    console.log('fn2:', value);
+}
+
+callbacks.add(fn1);
+callbacks.add(fn2);
+callbacks.fire('hello');
+// Output:
+// fn1: hello
+// fn2: hello
+
+// With flags
+const onceCallbacks = $.Callbacks('once');
+onceCallbacks.add(fn1);
+onceCallbacks.fire('first');   // fn1: first
+onceCallbacks.fire('second');  // (nothing - already fired)
+
+// Memory flag
+const memoryCallbacks = $.Callbacks('memory');
+memoryCallbacks.fire('done');
+memoryCallbacks.add(fn1);  // Immediately called with 'done'
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - Custom implementation
+goog.provide('app.Callbacks');
+
+app.Callbacks = function(flags) {
+    this.list_ = [];
+    this.fired_ = false;
+    this.lastArgs_ = null;
+    this.once_ = flags && flags.indexOf('once') !== -1;
+    this.memory_ = flags && flags.indexOf('memory') !== -1;
+};
+
+app.Callbacks.prototype.add = function(fn) {
+    this.list_.push(fn);
+    if (this.memory_ && this.fired_) {
+        fn.apply(null, this.lastArgs_);
+    }
+};
+
+app.Callbacks.prototype.fire = function() {
+    if (this.once_ && this.fired_) return;
+
+    this.fired_ = true;
+    this.lastArgs_ = arguments;
+
+    for (var i = 0; i < this.list_.length; i++) {
+        this.list_[i].apply(null, arguments);
+    }
+};
+
+// Usage
+var callbacks = new app.Callbacks();
+callbacks.add(fn1);
+callbacks.fire('hello');
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript - Using atoms
+(defn create-callbacks [& {:keys [once memory]}]
+  (let [callbacks (atom [])
+        fired (atom false)
+        last-args (atom nil)]
+    {:add (fn [f]
+            (swap! callbacks conj f)
+            (when (and memory @fired)
+              (apply f @last-args)))
+     :fire (fn [& args]
+             (when-not (and once @fired)
+               (reset! fired true)
+               (reset! last-args args)
+               (doseq [f @callbacks]
+                 (apply f args))))}))
+
+;; Usage
+(def cbs (create-callbacks))
+((:add cbs) (fn [v] (println "fn1:" v)))
+((:add cbs) (fn [v] (println "fn2:" v)))
+((:fire cbs) "hello")
+
+;; With memory
+(def mem-cbs (create-callbacks :memory true))
+((:fire mem-cbs) "done")
+((:add mem-cbs) (fn [v] (println "Late callback:" v)))
+;; Immediately prints: Late callback: done
+```
+
+---
+
+## Animation
+
+### jQuery: fadeIn/fadeOut
+
+```javascript
+// jQuery
+$('.dynamic-content').fadeIn();
+$('.dynamic-content').fadeOut();
+$('.dynamic-content').fadeToggle();
+
+// With duration
+$('#element').fadeIn(400);
+$('#element').fadeOut('slow');
+
+// With callback
+$('#element').fadeIn(400, function() {
+    console.log('Fade complete');
+});
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.fx.dom');
+goog.require('goog.events');
+
+const element = goog.dom.getElement('element');
+
+// Fade in
+const fadeIn = new goog.fx.dom.FadeIn(element, 400);
+fadeIn.play();
+
+// Fade out
+const fadeOut = new goog.fx.dom.FadeOut(element, 400);
+fadeOut.play();
+
+// With callback
+goog.events.listen(fadeIn, goog.fx.Transition.EventType.END, function() {
+    console.log('Fade complete');
+});
+
+// Fade to specific opacity
+const fade = new goog.fx.dom.Fade(element, 0, 0.5, 400);
+fade.play();
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript with goog.fx.dom
+(require '[goog.fx.dom :as fx])
+(import '[goog.fx Transition])
+
+(def element (gdom/getElement "element"))
+
+;; Fade in
+(let [anim (fx/FadeIn. element 400)]
+  (.play anim))
+
+;; Fade out
+(let [anim (fx/FadeOut. element 400)]
+  (.play anim))
+
+;; With callback
+(let [anim (fx/FadeIn. element 400)]
+  (gevents/listen anim (.-END Transition.EventType)
+    (fn [_] (println "Fade complete")))
+  (.play anim))
+```
+
+---
+
+### jQuery: slide animations
+
+```javascript
+// jQuery
+$('#element').slideDown();
+$('#element').slideUp();
+$('#element').slideToggle();
+
+// With duration and callback
+$('#element').slideDown(400, function() {
+    console.log('Slide complete');
+});
+```
+
+### Google Closure
+
+```javascript
+// Google Closure
+goog.require('goog.fx.dom');
+
+const element = goog.dom.getElement('element');
+const size = goog.style.getSize(element);
+
+// Slide down (from 0 height)
+const slideDown = new goog.fx.dom.Resize(
+    element,
+    [size.width, 0],
+    [size.width, size.height],
+    400
+);
+slideDown.play();
+
+// Slide up (to 0 height)
+const slideUp = new goog.fx.dom.Resize(
+    element,
+    [size.width, size.height],
+    [size.width, 0],
+    400
+);
+slideUp.play();
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(require '[goog.fx.dom :as fx]
+         '[goog.style :as gstyle])
+
+(def element (gdom/getElement "element"))
+(def size (gstyle/getSize element))
+
+;; Slide down
+(let [anim (fx/Resize. element
+             #js [(.-width size) 0]
+             #js [(.-width size) (.-height size)]
+             400)]
+  (.play anim))
+```
+
+---
+
+### jQuery: Custom Animations
+
+```javascript
+// jQuery - animate()
+$('#element').animate({
+    opacity: 0.5,
+    left: '+=50px',
+    height: 'toggle'
+}, 1000, 'swing', function() {
+    console.log('Animation complete');
+});
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - Combining animations
+goog.require('goog.fx');
+goog.require('goog.fx.dom');
+goog.require('goog.fx.AnimationParallelQueue');
+
+const element = goog.dom.getElement('element');
+
+// Create parallel animations
+const queue = new goog.fx.AnimationParallelQueue();
+
+// Fade to 0.5
+queue.add(new goog.fx.dom.Fade(element, 1, 0.5, 1000));
+
+// Move right
+const pos = goog.style.getPosition(element);
+queue.add(new goog.fx.dom.Slide(
+    element,
+    [pos.x, pos.y],
+    [pos.x + 50, pos.y],
+    1000
+));
+
+goog.events.listen(queue, goog.fx.Transition.EventType.END, function() {
+    console.log('Animation complete');
+});
+
+queue.play();
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(require '[goog.fx :as gfx]
+         '[goog.fx.dom :as fx])
+(import '[goog.fx AnimationParallelQueue Transition])
+
+(def element (gdom/getElement "element"))
+(def pos (gstyle/getPosition element))
+
+(let [queue (AnimationParallelQueue.)]
+  (.add queue (fx/Fade. element 1 0.5 1000))
+  (.add queue (fx/Slide. element
+                #js [(.-x pos) (.-y pos)]
+                #js [(+ 50 (.-x pos)) (.-y pos)]
+                1000))
+  (gevents/listen queue (.-END Transition.EventType)
+    (fn [_] (println "Animation complete")))
+  (.play queue))
+```
+
+---
+
+## Security Features
+
+### jQuery: Prototype Pollution Prevention
+
+```javascript
+// jQuery 4.0 blocks these attempts
+$.extend(true, {}, JSON.parse('{"__proto__": {"polluted": true}}'));
+$.extend(true, {}, { constructor: { prototype: { polluted: true } } });
+
+// Object.prototype remains unpolluted
+console.log({}.polluted);  // undefined
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - goog.object doesn't have deep merge by default
+// Use Object.freeze for protection
+const safeDefaults = Object.freeze({
+    setting1: 'value1'
+});
+
+// Manual safe merge
+function safeMerge(target, source) {
+    for (const key in source) {
+        if (source.hasOwnProperty(key) &&
+            key !== '__proto__' &&
+            key !== 'constructor') {
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript - Immutable data structures prevent this by design
+;; Clojure maps don't have prototype chain issues
+
+(def defaults {:setting1 "value1"})
+(def user-input (js->clj (js/JSON.parse "{\"__proto__\": {\"polluted\": true}}")))
+
+;; merge just treats __proto__ as a regular key
+(def merged (merge defaults user-input))
+;; => {:setting1 "value1", "__proto__" {"polluted" true}}
+
+;; The JS Object.prototype is unaffected
+```
+
+---
+
+### jQuery: XSS Mitigation
+
+```javascript
+// jQuery - Escape selectors
+const userInput = 'div"><script>alert("xss")</script>';
+const escaped = $.escapeSelector(userInput);
+$(escaped);  // Safe
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - String escaping
+goog.require('goog.string');
+goog.require('goog.html.SafeHtml');
+
+// HTML escaping
+const escaped = goog.string.htmlEscape(userInput);
+
+// Safe HTML creation
+const safeHtml = goog.html.SafeHtml.htmlEscape(userInput);
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(require '[goog.string :as gstring])
+
+;; HTML escaping
+(def escaped (gstring/htmlEscape user-input))
+
+;; With hiccup libraries, escaping is automatic
+;; (hipo/create [:div user-input]) - auto-escaped
+```
+
+---
+
+### jQuery: Trusted Types Support
+
+```javascript
+// jQuery 4.0 accepts TrustedHTML objects
+const policy = trustedTypes.createPolicy('myPolicy', {
+    createHTML: (string) => DOMPurify.sanitize(string)
+});
+
+const trustedContent = policy.createHTML('<p>Safe content</p>');
+$('#container').html(trustedContent);
+```
+
+### Google Closure
+
+```javascript
+// Google Closure - Built-in safe DOM methods
+goog.require('goog.dom.safe');
+goog.require('goog.html.SafeHtml');
+
+// Create safe HTML
+const safeHtml = goog.html.SafeHtml.create('p', {}, 'Safe content');
+
+// Set inner HTML safely
+goog.dom.safe.setInnerHtml(container, safeHtml);
+```
+
+### ClojureScript
+
+```clojure
+;; ClojureScript
+(require '[goog.dom.safe :as safe]
+         '[goog.html.SafeHtml :as SafeHtml])
+
+(def safe-html (SafeHtml/create "p" nil "Safe content"))
+(safe/setInnerHtml container safe-html)
+```
+
+---
+
+## Summary: Choosing Between Libraries
+
+| Use Case | Recommendation |
+|----------|---------------|
+| Quick prototyping | jQuery - simplest API |
+| Large-scale app | ClojureScript - functional, optimized |
+| Legacy codebase | jQuery + migrate plugin |
+| Functional programming | ClojureScript |
+| Maximum optimization | ClojureScript (Closure Compiler) |
+| React/modern framework | Consider native APIs or framework tools |
+
+### Migration Path
+
+If migrating from jQuery:
+1. **To Google Closure**: Replace jQuery calls with `goog.dom`, `goog.events`, `goog.style`
+2. **To ClojureScript**: Use `goog.dom` namespace or wrapper libraries like `dommy`
+
+### Key Takeaways
+
+- **jQuery** provides the most concise syntax for DOM manipulation
+- **Google Closure** offers modular, optimizable code (but is sunset)
+- **ClojureScript** combines functional programming with Closure Library benefits
+- Modern browsers support many jQuery features natively (`querySelector`, `fetch`, `classList`)
+
+---
+
+## Resources
+
+### jQuery
+- [jquery.com](https://jquery.com)
+- [api.jquery.com](https://api.jquery.com)
+
+### Google Closure Library
+- [google.github.io/closure-library](https://google.github.io/closure-library)
+- [Closure Cheatsheet](https://anton.shevchuk.name/wp-demo/closure-tutorials/cheatsheet.html)
+
+### ClojureScript
+- [clojurescript.org](https://clojurescript.org)
+- [ClojureScript Google Closure Reference](https://clojurescript.org/reference/google-closure-library)
+- [Dommy Library](https://github.com/plumatic/dommy)
+- [cljs-ajax](https://github.com/JulianBirch/cljs-ajax)
+
+---
+
+*Comparison document for jQuery 4.0.0 (January 2026) vs Google Closure Library vs ClojureScript*