HTML and CSS Reference
In-Depth Information
Suppose you're building a photo album web application that displays photos in various formats
including
.png
,
.jpg
, and
.gif
. Based on the image format, you may allow certain special effects to be
added. In such cases, you may want to select images with a particular file extension. The following
attribute ends with
selector does that by selecting all the images whose
src
attribute ends with
.gif
:
alert($("img[src $= '.gif']").length);
Suppose a multilingual web site needs to render its content in different languages. The
lang
attribute
is used to mark the language of a section of the page. If you wish to select all the
<div>
elements having
their
lang
attribute set to some value, you can use this
has attribute
selector:
alert($("div[lang]").length);
Now, let's develop a more realistic example that uses attribute selectors, as shown in Figure 2-7.
Figure 2-7.
Filtering download links using attribute selectors
In Figure 2-7, the web form consists of a
GridView
control that displays links to files that can be
downloaded. The download categories are listed in a
DropDownList
at the top. When the user selects a
particular category, only downloads belonging to the selected category are displayed. The rest are kept
hidden. The download links have a specific pattern:
• All download links for products contain the
Products
folder in the URL: for example,
products/Product1Setup.exe
.
• All download links for white papers are of the form
paper-
xxxx
, where
xxxx
is the
title of the paper: for example,
Paper-Topic1.pdf
.
