What Is Jquery?
It is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
The important thing to know is that jQuery is just a JavaScript library.
jQuery Syntax
The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
$ sign to -> define/access jQuery
(selector) -> to “query (or find)” HTML elements
jQuery action() -> to be performed on the element(s).
What are Jquery Events?
All the different visitor’s actions that a web page can respond to are called events. An event represents the precise moment when something happens, like moving a mouse over an element, selecting a radio button and clicking on an element.
The term “fires” is often used with events. Example: “The keypress event gets fired the moment you press a key”.
jQuery provides simple methods for attaching event handlers to selections. When an event occurs, the provided function is executed. Inside the function, this refers to the element that was clicked.
The event handling function can receive an event object. This object can be used to determine the nature of the event, and to prevent the event’s default behavior.
These events are often triggered by the end user’s interaction with the page, such as when text is entered into a form element or the mouse pointer is moved. In some cases, such as the page load and unload events, the browser itself will trigger the event.
jQuery offers convenience methods for most native browser events. These methods — including .click(), .focus(), .blur(), .change(), etc. — are shorthand for jQuery’s .on() method. The on method is useful for binding the same handler function to multiple events, when you want to provide data to the event handler, when you are working with custom events, or when you want to pass an object of multiple events and handlers.
It is important to note that .on() can only create event listeners on elements that exist at the time you set up the listeners Similar elements created after the event listeners are established will not automatically pick up event behaviors you’ve set up previously.
What are Jquery Selectors?
jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to “find” (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors.
For example:
“p”, “h1”, “div” , “span” , “class”, etc.
DOM manipulation using jquery:
The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree.
A few of these methods—such as .attr() , .html() , and .val() — also act as “getters” retrieving information from DOM elements for later use.
All of the methods given above manipulate the DOM in some manner. A few of them simply change one of the attributes of an element (also listed in the Attributes category), while others set an element’s style properties (also listed in the CSS category). Still others modify entire elements (or groups of elements) themselves—inserting, copying, removing, and so on. All of these methods are referred to as “setters” as they change the values of properties.
Three simple, but useful, jQuery methods for DOM manipulation are:
- text() – Sets or returns the text content of selected elements.
- html() – Sets or returns the content of selected elements (including HTML markup).
- val() – Sets or returns the value of form fields.
We will look at four jQuery methods that are used to add new content:
- append() – Inserts content at the end of the selected elements
- prepend() – Inserts content at the beginning of the selected elements
- after() – Inserts content after the selected elements
- before() – Inserts content before the selected elements