Period 3 notes

 The <em> tag indicates emphasized text, such as text having an

emphasized pronunciation when spoken, and is italicized by default.
 The <strong> tag indicates text that has strong importance, and is
bolded by default.
 The <cite> tag denotes a title, such a book or song title, and is
italicized by default. Ex: <cite>Spaceballs</cite> is a
parody of the <cite>Star Wars</cite>
trilogy. yields: Spaceballs is a parody of the Star Wars trilogy.
 The <mark> tag denotes important content that should be
semantically highlighted and is rendered with a yellow background by
default. Ex: <mark>Highlight</mark> what is
important. yields: Highlight what is important.
 The <b> tag indicates text that needs attention, like key words in a
document abstract or product names in a review, and renders the text
in bold. Ex: Mix the flour and oil together.
 The <i> tag indicates text in an alternative voice, such as a word or
phrase in a foreign language, and is rendered using italics.
Ex: Dashi is a stock used in Japanese cooking.
 The <u> tag denotes text that should appear differently from normal
text, such as misspelled words, and is underlined by default. Ex:
Misspelled is often misspelled as mispelled.

A table is an HTML structure surrounded by the <table> opening and

closing tags that allows data to be organized in rows and columns. A cell is
a location in the table at a specific row and column.
 The <tr> opening and closing tags create a table row, which contains
all the row's cells.
 The <th> opening and closing tags create a new table cell
containing table header information about the data. Usually, the
browser will display the table headers centered with a bold font.
 The <td> opening and closing tags create a new table cell containing
a table datum.

A table caption defines a short descriptive text for a table and is created

with <caption> tags. The caption opening and closing tags must
immediately follow the opening table tag. A web browser typically
renders the table caption centered above the table.

The <thead>, <tbody>, and <tfoot> tags do not affect the layout of

the table, but browsers may use the tags to enable the table body to
scroll independently of the header and footer or to print the header and
footer on each page of a multi-page table printout.
  An absolute URL is a complete URL. Ex: <a
href="http://example.com/test.html">test</a> is a
hyperlink using the absolute URL http://example.com/test.html.
 A relative URL specifies the relative path to the web resource with no
scheme or hostname. Ex: <a href="test.html">test</a> uses
the relative URL test.html to refer to an HTML document on the same
website and with the same path as the current HTML document.

<header> Container for introductory content

<footer> Container for content descriptive information about the web

page like author, copyright, or date modified
<address> Container for person's or organization's contact information

<main> Container for the document's primary content

<section> Container for distinct parts of a document, such as a

chapter

<article> Container for self-contained content that can be reused

independently, such as a news article
<nav> Container for content relating to website navigation

<aside> Container for content not directly related to the main topic
of a document

<div> Generic tag for creating block containers

<span> Generic tag for creating inline containers

An inline element fills the minimum space possible in the element's parent
container and can only contain text or other inline elements. Ex:
The <a> element is an inline element that creates a hyperlink container as
big as the link's internal content; a hyperlink does not fill the width or height
of the link's parent paragraph.
The <span> element is the generic element for creating inline containers to
facilitate managing content on the page. Unlike other inline elements, such
as <a> and <em>, the <span> element has no semantic meaning.
The <form> tag allows the web browser to submit information from the user
to the server. The <form> tag has two primary attributes:
1. The action attribute indicates the URL where the form data should
be sent. Typically the URL uses HTTPS so the form data is
encrypted.
2. The method attribute indicates the HTTP request type the browser
will use to communicate with the server. The method is either GET or
POST. GET is the default method if no method is specified.
The <input> tag allows the user to enter information into a web page.
The <input> tag cannot enclose any additional page content, and thus
does not have a closing tag. The <input> tag has five primary attributes:

 The type attribute indicates the widget type. Common types include

text, password, submit, and button.
 The name attribute names the widget and sends the widget's value
when the widget's form is submitted.
 The id attribute is used to give a widget a unique identifier.
 The placeholder attribute specifies text that first appears in a text
widget, typically for giving the user a hint as to the expected value.
 The value attribute specifies a default value for a widget.

- HTML guidelines:

 Closing tags like </p> and </li> are always used.

 Double quotes are used around all attribute values, and boolean
attributes like checked are used appropriately.
 All tags and attributes are lowercase, and tags are indented properly.
 Block elements like <p> and <ol> start on new lines.
 The form uses labels for all widgets.
 Separate CSS and JavaScript files are imported
with <link> and <script> tags instead of placing the CSS and
JavaScript in the HTML document.
 The <table> tag is used for displaying tabular data and not for
laying out the page contents.

- CSS
 1. The element selector matches elements with the specified element
names.
Ex: p { color: blue; } selects all p elements.
2. The class selector, specified with a period character followed by the
class name, matches elements that have the specified class name.
Ex: .notice { color: blue; } selects all elements with
a class="notice" attribute.
3. The ID selector, specified with a hash character followed by the ID
name, matches the element that has the specified ID.
Ex: #byLine { color: blue; } selects the element with
the id="byLine" attribute.
4. The descendant selector, specified with a selector followed by a
space and another selector, matches elements that are contained in
other elements.
Ex: h2 em { color: blue; } selects em elements contained
in h2 elements.
5. The pseudo-class selector, specified with a colon character
followed by a pseudo-class name, matches elements based on user
behavior or element metainformation.
Ex: :hover { color: blue; } selects elements under the
mouse cursor.

The universal selector, specified using an asterisk character (*),

matches all elements in the web page.

The multiple selector, specified using a comma (,) to separate selectors,

matches all listed elements to apply a style rule.

The child selector, specified using a greater than character (>) between

two selectors, matches any elements where the second element is a direct
child of the first element.
The general sibling selector, specified using a tilde character (~) between
two selectors, matches the second element if the second element occurs
after the first element and both elements are siblings.
The adjacent sibling selector, specified using a plus character (+)
between two selectors, matches an element that immediately follows
another element, where both elements have the same parent.
The attribute selector, specified with an attribute name and optional value
comparison enclosed in square brackets ([ and ]), matches elements with
the specified attribute or the specified attribute and value.
The pseudo element selector, specified with two colon characters (::)
followed by a pseudo-element, matches parts of elements.

Add content after the li::after { content:

::after
matched element. "<" }

Add content before the li::before

::before
matched element. { content: "***" }

Match the first line of p::first-line

::first-line
text in a block element. { color: red }

::first- Match the first letter of p::first-letter

letter text in a block element. { font-size:200% }

::selection
::selection Matches the text { background: yellow
selected by user. }

The display property controls the layout of the element on a web page.

Values for the display property include:

 inline - Displays the element as an inline element,

like span or a elements.
 block - Displays the element as a block element, like p, h1,
or div elements.
 none - Hides the element from being displayed, like style elements.
 inline-block - Displays the contents of the element as a block
element, but formats the element as an inline element.
 list-item - Displays the contents of the element as a list item
element.

Fonts:

 The font-family property specifies the font family, such as "Times

New Roman" or serif.
 The font-size property changes the font size, such as 120%, small,
or 12px.
 The font-weight property specifies the font weight, such
as normal or bold.
 The font-style property changes the text style, such
as normal, italic, or oblique.
 The font-variant property specifies the variant of the text, such
as normal or small-caps.
 The font property is shorthand for setting several font properties at
the same time. Ex: font: italic 12pt Georgia, serif;

Text properties:

 The text-align property changes the horizontal alignment of text for

an element. Possible values are: left, right, center,
and justify.
 The text-decoration property can add or remove text decorations
like underlining or a line-through. Possible values
are: overline, line-through, underline, and none.
 The text-transform property converts letters to UPPERCASE,
lowercase, or Capitalizes Initial Letters. Possible values
are: uppercase, lowercase, and capitalize.
 The text-indent property specifies the first line's indentation amount.

Padding/margins:

 One value - Specifies uniform thickness around the box.

Ex: margin: 20px; specifies 20px margin thickness around the
box.
 Two values - Specifies top and bottom, right and left thickness.
Ex: margin: 10px 20px; specifies 10px top and bottom margins
and 20px right and left margins.
 Three values - Specifies top, right and left, and bottom thickness.
Ex: margin: 10px 30px 20px; specifies 10px top margin, 30px
right and left margins, and 20px bottom margin.
 Four values - Specifies top, right, bottom, and left thickness.
Ex: margin: 10px 30px 20px 40px; specifies 10px top margin,
30px right margin, 20px bottom margin, and 40px left margin.

Borderstyles:

 The border-width property specifies the border's width. Ex: border-

width: 5px; specifies a border that is 5px thick.
 The border-style property specifies the border's style. Ex: border-
style: dashed; specifies a border that is dashed.
 The border-color property specifies the border's color. Ex: border-
color: green; specifies a border that is green.
 Media
Description
type
all All devices

For printers and documents viewed on screen in print preview

print
mode

screen For all devices that don't match "print" or "speech"

speech For screenreaders

Media
Description
features
device-height Height of the output device (entire screen)

device-width Width of the output device (entire screen)

height Height of the output device's viewport

width Width of the output device's viewport

orientation portrait or landscape

JAVASCRIPT

Arithmetic
Description Example
operator
// x = 3
x = 1 + 2;
+ Add

// x = 1
x = 2 - 1;
- Subtract

// x = 6
x = 2 * 3;
* Multiply

// x = 0.5
x = 1 / 2;
/ Divide
 Arithmetic
Description Example
operator
// x = 0
x = 4 % 2;
% Modulus (remainder)

// x = 2 * 2 * 2 = 8
x = 2 ** 3;
** Exponentiation

// Same as x = x + 1
x++;
++ Increment

// Same as x = x - 1
-- Decrement x--;

Assignment operator Description Example

// Same as x = x + 2
x += 2;
+= Add to

// Same as x = x - 2
-= Subtract x -= 2;
from

// Same as x = x * 3
x *= 3;
*= Multiply by

// Same as x = x / 3
x /= 3;
/= Divide by

// Same as x = x % 4
%= Mod by x %= 4;

If one operand is a number and the other a string, + performs string

concatenation. The number is converted into a string, and the two strings
are concatenated into a single string. Ex: "2" + 3 = "2" + "3" = "23".

For all other arithmetic operators, combining a number and a string in an

arithmetic expression converts the string operand to a number and then
performs the arithmetic operation. Ex: "2" * 3 = 2 * 3 = 6.
The JavaScript functions parseInt() and parseFloat() convert strings into
numbers. Ex: parseInt("5") + 2 = 5 + 2 = 7,
and parseFloat("2.4") + 6 = 2.4 + 6 = 8.4.

Comparison operator Name Example

2 == 2 // true
"bat" == "bat" // true
== Equality

2 != 3 // true
"bat" != "zoo" // true
!= Inequality

2 === 2 // true
"2" === 2 // false
=== Identity

2 !== 2 // false
"2" !== 2 // true
!== Non-identity

2 < 3 // true
"bat" < "zoo" // true
< Less than

2 <= 3 // true
"bat" <= "bat" // true
<= Less than or equal

3 > 2 // true
"zoo" > "bat" // true
> Greater than

3 >= 2 // true
>= Greater than or equal "zoo" >= "zoo" // true

Logical
Name Description Example
operator
(1 < 2 && 2 < 3) //
true
&& And True if both sides are true

(1 < 2 || 2 < 0) //
true
|| Or True if either side is true
 Logical
Name Description Example
operator

! True if expression is not !(2 == 2) // false

Not
true

Truthy values.
Example Description
if (32) Non-zero number

if ("cat") Non-empty string

if (myObject) Object variable

if (myArray) Array variable

Falsy values.
Example Description
if (0) Zero

if ("") Empty string

if (NaN) Not a number

if (undefined) Variable that has not been assigned a value

if (null) No object value

A function expression is identical to a function declaration, except the

function name may be omitted. A function without a name is called
an anonymous function. Anonymous functions are often used with arrays
and event handlers, discussed elsewhere in this material.
An arrow function is an anonymous function that uses an arrow => to
create a compact function.
A variable declared using var or let that is not inside a function creates a
global variable that is accessible from anywhere in the code. a global
variable called test is accessible as window.test.
Array methods for adding and removing array elements.
 Method Description Example
let nums = [2, 4, 6];
nums.push(8); // nums = [2,
push(value)
Adds a value to the end 4, 6, 8]
of the array

let nums = [2, 4, 6];

Removes the last array let x = nums.pop(); //
pop() element and returns the returns 6, nums = [2, 4]
element

let nums = [2, 4, 6];

nums.unshift(0); // nums =
unshift(value)
Adds a value to the [0, 2, 4, 6]
beginning of the array

let nums = [2, 4, 6];

Removes the first array let x = nums.shift(); //
shift() element and returns the returns 2, nums = [4, 6]
element

let nums = [2, 4, 6, 8, 10];

// Deletes all elements from

index 3 to the end
nums.splice(3); // nums =
[2, 4, 6]

Adds or removes // Deletes 2 elements

starting at index 0
splice(startingIndex, elements from nums.splice(0, 2); // nums
anywhere in the array = [6]
totalElementsToDelete, and returns the
valuesToAdd) // Adds 3, 5 starting at
deleted elements (if
index 0
any) nums.splice(0, 0, 3, 5); //
nums = [3, 5, 6]

// Adds 7, 9, 11 starting at
index 2
nums.splice(2, 0, 7, 9, 11);
// nums = [3, 5, 7, 9, 11, 6]

The array property length contains the number of elements in the array.

The length property is helpful for looping through an array using a for
loop.

The for-of loop is a simplified for loop that loops through an entire array.
The array name is placed after the of keyword in a for-of loop. Each
time through the loop, the next array element is assigned to the variable
in front of the of keyword.
 The Array method forEach() also loops through an array.
The forEach() method takes a function as an argument. The function
is called for each array element in order, passing the element and the
element index to the function.

The array methods indexOf() and lastIndexOf() search an array and

return the index of the first found value or -1 if the value is not found.

1. A primitive is data that is not an object and includes no methods.

Primitive types include: boolean, number, string, null, and undefined.
2. A reference is a logical memory address. Only objects are reference
types.

Get number of elements. The Object.keys() method returns an array

of an object's property names. The array's length property returns the
number of elements in the object map.
Check for key. The in operator returns true if an object contains the
given property and returns false otherwise.
Remove element. The delete operator removes a key/property from a
map or object.
 The set(key, value) method sets a key/value pair. If the key is new, a
new element is added to the map. If the key already exists, the new
value replaces the existing value.
 The get(key) method gets a key's associated value.
 The has(key) method returns true if a map contains a key, false
otherwise.
 The delete(key) method removes a map element.
 The size property is the number of elements in the map.

Method Description Example

Returns the substring that
substr() begins at a given index and
has a given length.
s = "As you wish.";
s.substr(3, 3); // "you"
s.substr(3); // "you
wish." (length optional)

s = "As you wish.";

Returns an array of strings s.split(" "); // ["As",
split() formed by splitting the string "you", "wish."]

into substrings.
s = "What?";
s.toLowerCase(); //
toLowerCase() Returns the string converted "what?"
to lowercase characters.
 s = "What?";
s.toUpperCase(); //
toUpperCase() Returns the string converted "WHAT?"
to uppercase characters.

Returns the string with s = " test ";

trim() leading and trailing s.trim(); // "test"
whitespace removed.

Method Description Example

let day = new Date(2016, 0,

getDate() Gets or sets the 30);

day.getDate(); // 30
setDate() day relative to the day.setDate(21); // 30 -> 21
current set month

let day = new Date(2016, 0,

30);
getDay() Returns the day of day.getDay(); // 6 =
Saturday
the week (0-6)

let day = new Date(2016, 0,

30);
getFullYear() Gets or sets the 4 day.getFullYear(); // 2016
day.setFullYear(2017); // 2016
setFullYear() digit year -> 2017

let day = new Date(2016, 0, 30,

5, 0);
getHours() Gets or sets the day.getHours(); // 5
setHours() hour (0-23) day.setHours(2); // 5 -> 2

let day = new Date(2016, 0, 1,

5, 20, 10, 250);

getMilliseconds() Gets or sets the

day.getMilliseconds(); //
250
setMilliseconds() milliseconds (0- day.setMilliseconds(500); //
999) 250 -> 500

let day = new Date(2016, 0, 30,

5, 20);
getMinutes() Gets or sets the day.getMinutes(); // 20
day.setMinutes(35); // 20 ->
setMinutes() minutes (0-59) 35
 Method Description Example
let day = new Date(2016, 0, 30,
5, 20);
getMonth() Gets or sets the day.getMonth(); // 0
day.setMonth(3); // 0 (Jan) ->
setMonth() month (0-11) 3 (Apr)

let day = new Date(2016, 0, 1,

5, 20, 10, 250);
getSeconds() Gets or sets the day.getSeconds(); // 10
day.setSeconds(45); // 10 ->
setSeconds() seconds (0-59) 45

let day = new Date(2016, 0, 30,

Gets or sets the 5, 20);
getTime() number of day.getTime(); //
1454152800000
setTime() milliseconds since day.setTime(1454153700000); //
Jan 1, 1970, Sat Jan 30 2016 05:35:00 GMT-
0600
00:00:00 UTC

MATH

Method Description Example

Math.abs(-5); // 5
abs(x) Returns the absolute value of
x
Math.ceil(2.1); // 3
ceil(x) Returns x rounded up to the
nearest integer
Math.cos(Math.PI) //
cos(x) Returns the cosine of the -1
radians x

Math.floor(2.9) // 2
floor(x) Returns x rounded down to
the nearest integer
Math.log(Math.E) // 1
log(x) Returns the natural logarithm
of x
Math.max(5, 2, 8, 1)
max(n1, n2, // 8
n3, ...) Returns the largest number

min(n1, n2, Returns the smallest number Math.min(5, 2, 8, 1)

// 1
n3, ...)
 Math.pow(2, 3) // 8
pow(x, y) Returns x to the power of y

Math.round(3.5) // 4
round(x) Returns x rounded to the
nearest integer
Math.sin(Math.PI) //
0
sin(x) Returns the sine of radians x

Math.sqrt(25) // 5
sqrt(x) Returns the square root of x

tan(x) Returns the tangent of Math.tan(Math.PI / 4)

// 1
radians x

 RangeError - Thrown when a numeric variable or parameter is

outside the valid range.
 InternalError - Thrown when an internal error occurs in the
JavaScript interpreter.
 TypeError - Thrown when a variable or parameter is not the
expected data type.

 window.location is a location object that contains information about

the window's current URL. Ex: window.location.hostname is the
URL's hostname.
 window.navigator is a navigator object that contains information
about the browser. Ex: window.navigator.userAgent returns
the browser's user agent string.
 window.innerHeight and window.innerWidth are the height and
width in pixels of the window's content area.
Ex: window.innerWidth returns 600 if the browser's content area
is 600 pixels wide.
The window object defines some useful methods:
 window.alert() displays an alert dialog box.
Ex: window.alert("Hello") displays a dialog box with the
message "Hello".
 window.confirm() displays a confirmation dialog box with OK and
Cancel buttons. confirm() returns true if OK is pressed and false if
Cancel is pressed. Ex: window.confirm("Are you
sure?") displays a dialog box with the question.
  window.open() opens a new browser window.
Ex: window.open("http://www.twitter.com/") opens a new
browser that loads the Twitter web page.
The document object provides five primary methods that search the DOM
for specific nodes:
1. The document.getElementById() method returns the DOM node
whose id attribute is the same as the method's parameter.
Ex: document.getElementById("early_languages") returns
the p node in the HTML below.
2. The document.getElementsByTagName() method returns an array
of all the DOM nodes whose type is the same as the method's
parameter.
Ex: document.getElementsByTagName("li") returns a list of
the four li nodes from in the HTML below.
3. The document.getElementsByClassName() method returns an
array containing all the DOM nodes whose class attribute matches
the method's parameter.
Ex: document.getElementsByClassName("traditional") ret
urns an array containing the ol node with the class attribute
matching the word traditional.
4. The document.querySelectorAll() method returns an array
containing all the DOM nodes that match the CSS selector passed as
the method's parameter.
Ex: document.querySelectorAll("li a") returns an array
containing the two anchor nodes in the HTML below.
5. The document.querySelector() method returns the first element
found in the DOM that matches the CSS selector passed as the
method's parameter. querySelector() expects the same types of
parameters as querySelectorAll() but only returns the first
element found while navigating the DOM tree in a depth-first
traversal.
Ex: document.querySelector("li") returns the li node about
Fortran.
The parentNode property refers to the node's parent. Ex: In the
figure below, the ol node is the parentNode for all li nodes.
The childNodes property is an array-like collection of objects for
each of the node's children. Ex: In the figure below, the li nodes and
whitespace text nodes are the ol node's childNodes.
The children property is similar to the childNodes except the array
contains only element nodes and no text nodes. Ex: In the figure
below, the li nodes are the ol node's children.
 The nextElementSibling property refers to the element node with the
same parent following the current node in the document. Ex: In the
figure below, the ol node is the p node's nextElementSibling.
The previousElementSibling property refers to the element node
with the same parent preceding the current node in the document. Ex:
In the figure below, the p node is the ol
node's previousElementSibling.
 The appendChild() method appends a DOM node to the object's
child nodes. The code below moves the ordered list's first list item to
the last list item of the same ordered list.
 ol = document.getElementsByTagName("ol")[0];
 li = ol.getElementsByTagName("li")[0];
 ol.appendChild(li);
 The insertBefore() method inserts a DOM node as a child node
before an object's existing child node. The code below moves the
ordered list's first list item before the fourth list item.
 ol = document.getElementsByTagName("ol")[0];
 items = ol.getElementsByTagName("li");
 ol.insertBefore(items[0], items[3]);
 The removeChild() method removes a node from the object's
children. The most common usage pattern is to get a DOM node, n,
and call removeChild() on n's parent passing n as an argument.
Ex: n.parentNode.removeChild(n)

The following methods are for creating new nodes or duplicating existing
nodes:
 The document method createElement() returns a new element
node, created from a string argument that names the HTML element.
Ex: document.createElement("p") creates a new paragraph
node.
 The document method createTextNode() returns a new text node
containing the text specified by a string argument.
Ex: document.createTextNode("Hello there!") creates the
text node with "Hello there!", which can then be appended to an
element node.
 The node method cloneNode() returns an identical copy of a DOM
node. The method's boolean argument indicates whether the method
should also clone the node's children.
Ex: x.cloneNode(true) creates an identical tree rooted at x,
but x.cloneNode(false) creates only a single node identical to
x. A common error is to forget to modify any id attributes in the cloned
 tree. The cloneNode() method does not ensure that new nodes
have unique id attributes.
Events:

 A change event is caused by an element value being modified. Ex:

Selecting an item in a radio button group causes a change event.
 An input event is caused when the value of an input or textarea
element is changed.
 A load event is caused when the browser completes loading a
resource and dependent resources. Usually load is used with the
body element to execute code once all the web page's CSS,
JavaScript, images, etc. have finished loading.
 A DOMContentLoaded event is caused when the HTML file has
been loaded and parsed, although other related resources such as
CSS, JavaScript, and image files may not yet be loaded.
 A focus event is caused when an element becomes the current
receiver of keyboard input. Ex: Clicking in an input field causes a
focus event.
 A blur event is caused when an element loses focus and the element
will no longer receive future keyboard input.
 A submit event is caused when the user submits a form to the web
server.

Event phases

 In the event capturing phase, the browser traverses the DOM tree

from the root to the event target node, at each node calling any event-
specific handlers that were explicitly registered for activation during
the capturing phase.
 In the at target phase, the browser calls all event-specific handlers
registered on the target node.
 In the event bubbling phase, the browser traverses the DOM tree
from the event target node back to the root node, at each node calling
all event-specific handlers registered for the bubbling phase on the
current node.
Modifying CSS (7.6)
 The getPropertyValue() method returns the value of an element's
CSS property or an empty string if the property is not set.
Ex: elem.style.getPropertyValue("color") gets the
element's color value.
 The setProperty() method sets the value of an element's CSS
property. Ex: elem.style.setProperty("color",
"blue") sets the element's color to blue.
  The removeProperty() method removes an element's CSS property.
Ex: elem.style.removeProperty("color") removes the
element's color property.

Common tasks performed by jQuery.

DOM manipulation Find, alter, add, or remove DOM elements

User interaction Respond to mouse clicks, mouse movement, or typing

Animation Smoothly show, hide, or move web page elements

Widgets Display and manage the interaction of complex GUI elements

Ajax Issue asynchronous HTTP requests and handle responses

Browser quirks Handle inconsistencies across different browsers

 Attribute selector - Selects elements based on an element attribute.

 Basic filter selector - Selects elements based on a variety of
properties.
 Child filter selector - Selects child elements based on location or
other properties.
 Content filter selector - Selects elements based on an element's
contents.
 Hierarchy selector - Selects elements based on an element's
location within the DOM hierarchy.

 Additional jQuery selectors.

Selector
Example Explanation
Type
$("span[id]")
Attribute Selects all <span> that have an id attribute

$("a[href$='.pdf']") Selects all <a> with href attributes ending

Attribute
in .pdf

$("p:first")
Basic filter Selects the first <p> element

$("tr:even")
Selects the first, third, fifth, etc. table rows (zero-
Basic filter
indexed)
 Selector
Example Explanation
Type
$("li:eq(1)")
Basic filter Selects the second <li> element (index n)

$("li:last-child")
Child filter Selects the last <li> in each group

$("p:contains('bye')")
Content
Selects all <p> that contain the word "bye"
filter

$("li span")
Hierarchy Selects all <span> that are descendants of <li>