|
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> form object attribute filter selector </title>
<Script src = "jquery-1.6.2.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
// =========== Example 1 =====================================
//: Enabled usage: $ ("input: enabled") returned value set Element
// Description: match all available elements. It means to find all input without disabled = "disabled". It is not disabled,
// Of course it is enabled.
$ ("Input: enabled"). val ("I Am a valid button ");
// =========== Example 2 =====================================
//: Disabled usage: $ ("input: disabled") return value set Element
// Description: matches all the unavailable elements. It corresponds to the one above.
$ ("Input: disabled"). val ("I am an invalid button ");
// =========== Example 3 =====================================
//: Checked usage: $ ("input: checked") return value set Element
// Description: match all selected elements (check box, single-choice, and so on, excluding option in select.
//... <1> extract the check boxes of all selected names = 'love'
$ ("# BtnTest"). click (function (){
ShowElements ($ ("input [name = 'love']: checked"); // method 1
// ShowElements ($ ("[name = 'love']: checked") // method 2
});
// =========== Example 4 =====================================
//: Selected usage: $ ("select option: selected") return value set Element
// Description: matches all selected option elements.
//... <1> all names = 'city' are selected from the drop-down list.
$ ("# BtnTest2"). click (function (){
ShowElements ($ ("select [name = 'city'] option: selected "));
});
//... <2> all names = 'prov' are selected in the drop-down list.
// $ ("# BtnTest2"). click (function (){
// ShowElements ($ ("select [name = 'prov'] option: selected "));
//});
});
Function ShowElements (arr ){
// Alert (arr. length );
Var output = "";
For (var I = 0; I <arr. length; I ++ ){
If (output = ""){
Output = arr. eq (I). val ();
}
Else {
Output + = "," + arr. eq (I). val ();
}
}
Alert (output );
}
</Script>
</Head>
<Body>
<Input type = "button" disabled = "disabled" value = "button1"/>
<Input type = "button" value = "button2"/>
<Input type = "button" value = "button3"/>
<Input type = "button" disabled = "disabled" value = "button4"/>
<Input type = "button" id = "btnTest" value = "click the check box"/>
<Input type = "checkbox" name = "love" value = "1"/> football
<Input type = "checkbox" name = "love" value = "2"/> basketball
<Input type = "checkbox" name = "love" value = "3"/> volleyball
<Input type = "checkbox" name = "Other" value = "3"/> non-Hobby <br/>
I am a drop-down box <input type = "button" id = "btnTest2" value = "click I check the drop-down box"/>
<Select name = "city">
<Option value = 'beijing'> beijing </option>
<Option value = 'shanghai'> shanghai </option>
<Option value = 'shenzhen '> shenzhen </option>
</Select>
<Select name = "prov">
<Option value = 'jiangxi '> jiangxi </option>
<Option value = 'shichuanc'> Sichuan </option>
<Option value = 'guangdong'> guangdong </option>
</Select>
</Body>
</Html>
|