1, attribute selector:
<script> $(function(){ $("#btn1").click(function(){ $("div[id]").css("background-color","red"); }); // id attribute of div $ ( " # btn2 " ) .click ( function () { $("div[id='two']").css("background-color","red"); }); // id attribute and the value of the two div }); </ Script >
. 1 $ ( "div [id]") // all div id attribute elements contained 2 $ ( "div [id = '123']") // div id attribute value of the element 123 . 3 $ ( "div [id ! = '123'] ") // id attribute value 123 is not equal to the div element . 4 $ (" div [ID = ^ 'qq'] ") // ID attribute value begins qq div element . 5 $ (" div [id $ = 'zz'] ") // id attribute value zz div element end . 6 $ (" div [ID = * 'bb'] ") // div element containing attribute value ID and bb 7 $ (" element input [id] [name $ = 'man'] ") // attribute selected from the multiple filters, that satisfies both conditions attributes
2, sheet selectors:
(1) Form:
<form> <input type="text" value="1"/><br /> <input type="text" value="2"/><br /> <input type="checkbox" /><br /> <input type="radio" /><br /> <input type="image" /><br /> <input type="file" /><br /> <input type="submit" /> <input type="reset" /><br /> <input type="password" value="123456"/><br /> <input type="button" /><br /> <select><option/></select><br /> <textarea></textarea><br /> <button></button> </form>
(2) Specific operation:
. 1 $ ( ": INPUT") // match all input, textarea, select and button element 2 $ ( ": text") // all line text boxes, $ ( ": text") is equivalent to $ ( "[ type = text] "), is recommended to use $ (" input: text ") more efficient, the same below 3 $ (": password ") // All password box 4 $ (": radio ") // All radio button 5 $ ( ": the checkBox") // all boxes 6 $ ( ": the submit") // all submit buttons 7 $ ( ": the rESET") // reset button all 8 $ ( ": the button") / / All button buttons 9 $ ( ": file") // all domain file
Select element type = text in input, the result is 2.
$(function () {
$("#btn1").click(function(){
alert($(':input[type=text]').size());
});
});
Gets a value in the input box password, the result is: 123456
$(function () {
$("#btn1").click(function(){
alert($(':input[type=password]').val());
});
});
3, form object attribute selector:
(1) Form:
<form> <input type="text" value="1"/><br /> <input type="text" value="2"/><br /> <input type="checkbox" /><br /> <input type="radio" /><br /> <input type="image" /><br /> <input type="file" /><br /> <input type="submit" /> <input type="reset" /><br /> <input type="password" value="123456"/><br /> <input type="button" /><br /> </form>
(2) Specific operation:
. 1 $ ( "INPUT: Enabled") // matching available INPUT 2 $ ( "INPUT: Disabled") // matching unavailable INPUT . 3 $ ( "INPUT: the checked") // matches the checked INPUT . 4 $ ( " option: selected ") // match the selected option
Get all the available elements, a value of 10
$(function () {
alert($('form :enabled').size());
});