jQuery Selectors and Events PDF

**Basic syntax of jQuery** - With jQuery you select (query) HTML elements and perform \"actions\" on them. - The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). A screenshot of a computer program Description automatically generate...

**Basic syntax of jQuery** - With jQuery you select (query) HTML elements and perform \"actions\" on them. - The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). A screenshot of a computer program Description automatically generated **Concept of jQuery Selectors** - jQuery selectors are one of the most important parts of the jQuery library. - jQuery selectors allow you to select and manipulate HTML element(s). - jQuery selectors are used to \"find\" (or select) HTML elements based on their name, 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. - All selectors in jQuery start with the dollar sign and parentheses: \$(). **Concept and Syntax of The element Selector** - The jQuery element selector selects elements based on the element name. - You can select all elements on the page like this.  **Examples of The element Selector** - When a user clicks on a button, all \"p1\" elements will be hidden. A screenshot of a computer program Description automatically generated **Concept and Syntax of The \#id Selector** - The jQuery \#id selector uses the id attribute of an HTML tag to find the specific element. - An id should be unique within a page, so you should use the \#id selector when you want to find a single, unique element. - To find an element with a specific id, write a hash character, followed by the id of the HTML element.  **Examples of The \#id Selector** - When a user clicks on a button, the elements with id=\"p1\" will be hidden. A screenshot of a computer code Description automatically generated **Concept and Syntax of The.class Selector** - The jQuery.class selector finds elements with a specific class. - To find elements with a specific class, write a period character, followed by the name of the class.  **Examples of The.class Selector** - When a user clicks on a button, the elements with class=\"ps\" will be hidden. A screenshot of a computer program Description automatically generated **More Examples of jQuery Selectors:**  A screenshot of a computer Description automatically generated **Concept of jQuery Events** - All the different visitors\' actions that a web page can respond to are called events. - An event represents the precise moment when something happens.  **DOM events** A white and grey table with text Description automatically generated **jQuery Syntax For Event Methods** - In jQuery, most DOM events have an equivalent jQuery method. - To assign a click event to all paragraphs on a page, you can do this.  - The next step is to define what should happen when the event fires. - You must pass a function to the event: A white rectangular sign with green and blue text Description automatically generated **1. \$(document).ready()** - You might have noticed that all jQuery methods in our examples, are inside a document ready event. - This is to prevent any jQuery code from running before the document is finished loading (is ready). - It is good practice to wait for the document to be fully loaded and ready before working with it. - This also allows you to have your JavaScript code before the body of your document, in the head section.  **2. click()** - The click() method attaches an event handler function to an HTML element. - The function is executed when the user clicks on the HTML element. - The following example says: When a click event fires on a \ element; hide the current \ element: A screenshot of a computer program Description automatically generated **3. dblclick()** - -The dblclick() method attaches an event handler function to an HTML element. - -The function is executed when the user double-clicks on the HTML element.  **4. hover()** - The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. - The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element. A screenshot of a computer code Description automatically generated **Learning Summary** **1. jQuery Selectors** - jQuery selectors are one of the most important parts of the jQuery library. - jQuery selectors allow you to select and manipulate HTML element(s). - jQuery selectors are used to \"find\" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. **2. jQuery Events** - All the different visitors\' actions that a web page can respond to are called events. - The click() method attaches an event handler function to an HTML element. - The dblclick() method attaches an event handler function to an HTML element. - The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.