Test

Page 38

header $(":header") Selects all elements that are headers, like h1, h2, h3 and so on. Added in version 1.2

$(":header")

Example 1:

Adds a background and text color to all the headers on the page.

Javascript $(":header").css({ background:'#CCC', color:'blue' });

HTML <h1>Header 1</h1> <p>Contents 1</p> <h2>Header 2</h2> <p>Contents 2</p>

CSS body { font-size: 10px; font-family: Arial; } h1, h2 { margin: 3px 0; }

lt $(":lt(index)") Select all elements at an index less than index within the matched set. Added in version 1.0

$(":lt(index)") index:Number

Zero-based index.

index-related selectors The index-related selectors (including this "less than" selector) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors. Note that since JavaScript arrays use 0-based indexing, these selectors reflect that fact. This is why $('.myclass:lt(1)') selects the first element in the document with the class myclass, rather than selecting no elements. In contrast, :nth-child(n) uses 1-based indexing to conform to the CSS specification. Example 1:

Finds TDs less than the one with the 4th index (TD#4).

Javascript $("td:lt(4)").css("color", "red");

HTML <table border="1"> <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr> <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr> <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr> </table>

gt $(":gt(index)") Select all elements at an index greater than index within the matched set. Added in version 1.0

$(":gt(index)") index:Number

index-related selectors

Zero-based index.


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.