Selectors and Events

Selectors

The most basic concept of jQuery

jQuery's purpose (via name)

To select some elements and do something with them

jQuery selectors support

Most CSS3 selectors, as well as some non-standard selectors

jQuery syntax structure

$\text{(selector).action()}$

$\text{\$ Sign}$

Denotes the jQuery function

$\text{Selector}$

Selects the HTML element in jQuery syntax

$\text{action()}$

Performs action on the selected element in jQuery syntax

jQuery selectors beginning

All start with the dollar sign and parentheses $\text{\$()}$ followed by action

$\text{\$("*\")}$

Selects all elements

$\text{\$("#id")}$

Selects an element having identifier as id

$\text{\$(".class-name")}$

Selects element with class as class-name

$\text{\$("p:first")}$

Selects first element in a paragraph

$\text{\$("ul li:first")}$

Selects the first $\text{

}$ element of the first $\text{

}$

$\text{\$("[href]")}$

Selects all elements with an $\text{href}$ attribute

$\text{\$:("::button")}$

Selects all $\text{}$ elements and $\text{}$ elements of type="button"

$\text{\$("tr:even")}$

Selects all even $\text{}$ elements

$\text{\$("tr:odd")}$

Selects all odd $\text{}$ elements

$\text{\$("div:gt( 2 )")}$

Selects all $\text{

}$ elements except the first three

Events

Play important role in bringing interactivity with users

Source of events

Many peripherals (ex: mouse)

Event Handling

Appropriate handling that needs to be done upon events

Vanilla JavaScript event handling implementation

Done by implementing methods in the HTML element itself

jQuery event handling approach

Provides better facility to handle events by de-coupling from HTML

$\text{\$ (document).ready()}$

A function used in examples to ensure code runs after the document is ready

$\text{\$ (this).hide();}$

Example action taken upon an event, which hides the selected element

Mouse example events

click

Keyboard example events

keypress

Form example events

focus

Window (BOM) example events

load

$\text{\$ ("#first").text("This is first paragraph");}$

Example usage to select an element with ID "first" and modify its text

$\text{blur event}$

Used in an exercise example to change the background colour of input boxes to grey