<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> </title>
<Script type = "text/javascript" src = "lib/jquery-1.5.2.js"> </script>
<Style type = "text/css">
. Red {
Background-color: red;
}
. Green {
Background: green;
}
</Style>
<Script type = "text/javascript">
$ (Function (){
// All child elements under the pre element.
// $ ("Form input") select [<input name = "name"/>, <input name = "newsletter"/>]
/*
$ ("Form input"). hover (function (){
$ (This). addClass ("green ");
}, Function (){
$ (This). removeClass ("green ");
});
*/
// Subelement under the pre element.
// [<Input name = "name"/>]
/*
$ ("Form> input"). hover (function (){
$ (This). addClass ("green ");
}, Function (){
$ (This). removeClass ("green ");
});
*/
// The next element after the pre element. Pre and next
// [<Input name = "name"/>, <input name = "newsletter"/>]
/* $ ("Label + input"). hover (function (){
$ (This). addClass ("green ");
}, Function (){
$ (This). removeClass ("green ");
});
*/
// [<Input name = "none"/>]
// All the sibings elements after the prev Element
// Different from next, siblings returns a set of all peer elements. Next, only one.
/*
$ ("Form ~ Input "). hover (function (){
$ (This). addClass ("green ");
}, Function (){
$ (This). removeClass ("green ");
});
*/
// This is the next method. Only one of them is selected.
$ ("Form + input"). hover (function (){
$ (This). addClass ("green ");
}, Function (){
$ (This). removeClass ("green ");
});
});
</Script>
</Head>
<Body>
<Form>
<Label> Name: </label> <input name = "name"/>
<Fieldset>
<Label> Newsletter: </label> <input name = "newsletter"/>
</Fieldset>
</Form>
<Input name = "none"/>
<Input name = "second"/>
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> </title>
<Script type = "text/javascript" src = "lib/jquery-1.5.2.js"> </script>
<Style type = "text/css">
. Red {
Background-color: red;
}
. Green {
Background: green;
}
</Style>
<Script type = "text/javascript">
$ (Function (){
// Match the first element found
// [<Tr> <td> Header 1 </td> </tr>]
/*
$ ("Tr: first"). hover (function (){
$ (This). addClass ("green ");
}, Function (){
$ (This). removeClass ("green ");
});
*/
// Match the last element found
// [<Tr> <td> Value 2 </td> </tr>]
/*
$ ("Tr: last"). hover (function (){
$ (This). addClass ("green ");
}, Function (){
$ (This). removeClass ("green ");
});
*/
// Only the input that can be checked has: checked
/*
$ ("Input: not (: checked)"). hover (function (){
$ (This). addClass ("green ");
}, Function (){
$ (This). removeClass ("green ");
});
*/
// Even number of elements, counted from 0
/*
$ ("Tr: even"). hover (function (){
$ (This). addClass ("green ");
}, Function (){
$ (This). removeClass ("green ");
});*/
// An odd number of elements, counted from 0.
/*
$ ("Tr: odd"). hover (function (){
$ (This). addClas