Client-Side Development I - jQuery

jQuery

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.

The jQuery library contains the following features:

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

__________________________________________________________________

jQuery Selectors

Tag Name

Represents a tag name available in the DOM. For example $('p')selects all paragraphs <p> in the document.

Tag ID

Represents a tag available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has an ID of some-id.

Tag Class

Represents a tag available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class.

$("*")    Selects all elements

$(this)    Selects the current HTML element

$(":button")     Selects all <button> elements and <input> elements of type="button"

_______________________________________________________________________

Document Object Model

The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.
With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the internal subset and external subset have not yet been specified.
As a W3C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications.

Events supported by jQuery

.bind()

Attach a handler to an event for the elements.

.blur()

Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.

.change()

Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

.click()

Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

.contextmenu()

Bind an event handler to the “contextmenu” JavaScript event, or trigger that event on an element.

.dblclick()

Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.

.die()

Remove event handlers previously attached using .live() from the elements.

.error()

Bind an event handler to the “error” JavaScript event.

.submit()

Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.

.trigger()

Execute all handlers and behaviors attached to the matched elements for the given event type.

.mousemove()

Bind an event handler to the “mousemove” JavaScript event, or trigger that event on an element.

jQuery.holdReady()

Holds or releases the execution of jQuery’s ready event.

And there are many more other events i didn't mention here.

______________________________________________________

Advanced features of jQuery

_____________________________________________________

References

https://www.tutorialspoint.com/jquery/jquery-selectors.htm

https://www.w3.org/TR/WD-DOM/introduction.html

https://api.jquery.com/category/events/