tessl/npm-jquery

JavaScript library for DOM manipulation, event handling, animations, and AJAX interactions

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

jQuery

Name: tessl/npm-jquery
Author: tessl

jQuery is a comprehensive JavaScript library that simplifies HTML document traversing, manipulation, event handling, animation, and Ajax interactions for rapid web development. It provides a powerful selector engine based on CSS selectors, cross-browser compatibility, and a chainable API that enables developers to write less code while accomplishing more.

Package Information

Package Name: jquery
Package Type: npm
Language: JavaScript
Installation: npm install jquery
CDN: <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Core Imports

// ES6 modules
import $ from 'jquery';

// CommonJS/Node.js
const $ = require('jquery');

// AMD
define(['jquery'], function($) {
  // jQuery available as $
});

// Global (browser)
// jQuery automatically available as $ and jQuery

Basic Usage

import $ from 'jquery';

// DOM selection and manipulation
$('#myButton').click(function() {
  $(this).addClass('clicked');
  $('.content').slideUp();
});

// AJAX request
$.get('/api/data', function(data) {
  $('#result').html(data);
});

// Animation
$('.box').animate({
  width: '200px',
  height: '200px'
}, 1000);

Architecture

jQuery is built around several core concepts:

jQuery Object: Array-like object containing DOM elements with chainable methods
Selector Engine: CSS selector-based element selection with cross-browser compatibility
Method Chaining: Fluent API where most methods return jQuery objects for continued chaining
Implicit Iteration: Methods automatically operate on all elements in the selection
Event System: Comprehensive event handling with delegation, namespacing, and custom events
Animation Queue: Queued animations with promise-based completion tracking
Plugin Architecture: Extensible via jQuery.fn and jQuery namespace extensions

Capabilities

DOM Selection and Traversal

Powerful CSS selector-based element selection and DOM tree navigation with cross-browser compatibility.

// Main jQuery constructor
function $(selector, context?): jQuery;
function jQuery(selector, context?): jQuery;

// Core traversal methods
interface jQuery {
  find(selector: string): jQuery;
  filter(selector: string | function): jQuery;
  not(selector: string | function): jQuery;
  is(selector: string): boolean;
  closest(selector: string, context?: Element): jQuery;
  parent(selector?: string): jQuery;
  children(selector?: string): jQuery;
  siblings(selector?: string): jQuery;
  next(selector?: string): jQuery;
  prev(selector?: string): jQuery;
}

DOM Selection and Traversal

DOM Manipulation

Comprehensive methods for modifying DOM structure, content, and attributes with automatic cross-browser handling.

interface jQuery {
  // Content manipulation
  html(content?: string): jQuery | string;
  text(content?: string): jQuery | string;
  val(value?: string): jQuery | string;
  
  // Structure manipulation
  append(...content: (string | Element | jQuery)[]): jQuery;
  prepend(...content: (string | Element | jQuery)[]): jQuery;
  before(...content: (string | Element | jQuery)[]): jQuery;
  after(...content: (string | Element | jQuery)[]): jQuery;
  remove(selector?: string): jQuery;
  empty(): jQuery;
  
  // Attribute manipulation
  attr(name: string, value?: string): jQuery | string;
  prop(name: string, value?: any): jQuery | any;
  addClass(className: string): jQuery;
  removeClass(className?: string): jQuery;
  toggleClass(className: string, state?: boolean): jQuery;
}

DOM Manipulation

Event Handling

Robust event system with delegation, namespacing, custom events, and cross-browser normalization.

interface jQuery {
  // Event binding
  on(events: string, selector?: string, data?: any, handler?: function): jQuery;
  off(events?: string, selector?: string, handler?: function): jQuery;
  one(events: string, selector?: string, data?: any, handler?: function): jQuery;
  
  // Event triggering
  trigger(eventType: string, extraParameters?: any[]): jQuery;
  triggerHandler(eventType: string, extraParameters?: any[]): jQuery;
}

// jQuery Event object
interface JQueryEvent {
  type: string;
  target: Element;
  currentTarget: Element;
  preventDefault(): void;
  stopPropagation(): void;
  stopImmediatePropagation(): void;
  isDefaultPrevented(): boolean;
  isPropagationStopped(): boolean;
}

Event Handling

CSS and Styling

Dynamic CSS manipulation with computed style access, class management, and responsive styling support.

interface jQuery {
  css(propertyName: string): string;
  css(propertyName: string, value: string | number): jQuery;
  css(properties: object): jQuery;
  
  // Dimensions
  height(value?: number | string): jQuery | number;
  width(value?: number | string): jQuery | number;
  innerHeight(value?: number | string): jQuery | number;
  innerWidth(value?: number | string): jQuery | number;
  outerHeight(includeMargin?: boolean, value?: number | string): jQuery | number;
  outerWidth(includeMargin?: boolean, value?: number | string): jQuery | number;
  
  // Position
  offset(coordinates?: {top: number, left: number}): jQuery | {top: number, left: number};
  position(): {top: number, left: number};
  scrollTop(value?: number): jQuery | number;
  scrollLeft(value?: number): jQuery | number;
}

CSS and Styling

Animations and Effects

Comprehensive animation system with easing, queuing, promise integration, and pre-built effects.

interface jQuery {
  // Custom animations
  animate(properties: object, duration?: number | string, easing?: string, complete?: function): jQuery;
  animate(properties: object, options: AnimationOptions): jQuery;
  stop(clearQueue?: boolean, jumpToEnd?: boolean): jQuery;
  finish(queue?: string): jQuery;
  
  // Pre-built effects
  show(duration?: number | string, easing?: string, complete?: function): jQuery;
  hide(duration?: number | string, easing?: string, complete?: function): jQuery;
  toggle(duration?: number | string, easing?: string, complete?: function): jQuery;
  fadeIn(duration?: number | string, easing?: string, complete?: function): jQuery;
  fadeOut(duration?: number | string, easing?: string, complete?: function): jQuery;
  slideUp(duration?: number | string, easing?: string, complete?: function): jQuery;
  slideDown(duration?: number | string, easing?: string, complete?: function): jQuery;
}

interface AnimationOptions {
  duration?: number | string;
  easing?: string;
  complete?: function;
  step?: function;
  progress?: function;
  done?: function;
  queue?: boolean | string;
}

Animations and Effects

AJAX

Full-featured AJAX solution with promises, request/response preprocessing, and multiple data formats.

// Static AJAX methods
declare namespace $ {
  function ajax(url: string, settings?: JQueryAjaxSettings): JQueryXHR;
  function ajax(settings: JQueryAjaxSettings): JQueryXHR;
  function get(url: string, data?: any, success?: function, dataType?: string): JQueryXHR;
  function post(url: string, data?: any, success?: function, dataType?: string): JQueryXHR;
  function getJSON(url: string, data?: any, success?: function): JQueryXHR;
  function getScript(url: string, success?: function): JQueryXHR;
}

interface JQueryAjaxSettings {
  url?: string;
  type?: string;
  data?: any;
  dataType?: string;
  contentType?: string;
  success?: function;
  error?: function;
  complete?: function;
  beforeSend?: function;
  timeout?: number;
  async?: boolean;
  cache?: boolean;
  headers?: object;
}

interface JQueryXHR extends Promise<any> {
  abort(): void;
  getAllResponseHeaders(): string;
  getResponseHeader(header: string): string;
  status: number;
  statusText: string;
  responseText: string;
  responseJSON?: any;
}

AJAX

Utilities and Core Functions

Essential utility functions for object manipulation, type checking, iteration, and cross-browser compatibility.

declare namespace $ {
  // Object utilities
  function extend(deep: boolean, target: object, ...sources: object[]): object;
  function extend(target: object, ...sources: object[]): object;
  function each(collection: any[] | object, callback: function): any[] | object;
  function map(collection: any[] | object, callback: function): any[];
  function grep(array: any[], callback: function, invert?: boolean): any[];
  
  // Type checking
  function isPlainObject(obj: any): boolean;
  function isEmptyObject(obj: any): boolean;
  function isFunction(obj: any): boolean;
  function isArray(obj: any): boolean;
  function type(obj: any): string;
  
  // Array utilities
  function makeArray(obj: any): any[];
  function merge(first: any[], second: any[]): any[];
  function inArray(value: any, array: any[], fromIndex?: number): number;
  function unique(array: any[]): any[];
}

Utilities and Core Functions

Data Storage

Client-side data storage system for associating arbitrary data with DOM elements safely and efficiently.

// Static data methods
declare namespace $ {
  function data(element: Element, key?: string, value?: any): any;
  function removeData(element: Element, key?: string): void;
  function hasData(element: Element): boolean;
}

// Instance data methods
interface jQuery {
  data(key: string, value: any): jQuery;
  data(key: string): any;
  data(obj: object): jQuery;
  data(): object;
  removeData(key?: string): jQuery;
}

Data Storage

Form Processing

Specialized methods for working with form elements, serialization, and form data manipulation.

interface jQuery {
  // Form serialization
  serialize(): string;
  serializeArray(): Array<{name: string, value: string}>;
  
  // Form element values
  val(): string | string[] | number;
  val(value: string | string[] | number): jQuery;
}

// Static form utilities
declare namespace $ {
  function param(obj: object | any[], traditional?: boolean): string;
}

Form Processing

Core Types

// Main jQuery interface
interface jQuery extends ArrayLike<Element> {
  length: number;
  jquery: string;
  
  // Core methods
  get(index?: number): Element | Element[];
  eq(index: number): jQuery;
  first(): jQuery;
  last(): jQuery;
  slice(start: number, end?: number): jQuery;
  each(callback: (index: number, element: Element) => any): jQuery;
  map(callback: (index: number, element: Element) => any): jQuery;
  toArray(): Element[];
  
  // Chaining
  end(): jQuery;
  addBack(selector?: string): jQuery;
  add(selector: string | Element | jQuery, context?: Element): jQuery;
}

// Selector context interface
interface JQueryStatic {
  (selector: string, context?: Element | jQuery): jQuery;
  (element: Element): jQuery;
  (elementArray: Element[]): jQuery;
  (callback: (jq: JQueryStatic) => void): jQuery;
  (): jQuery;
}