<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="前端课件/jQuery/jquery-3.3.1.min.js"></script> </head> <body> <script> //$(':enabled')所有被选中的input元素(可以使用的input元素) //$(':disabled')所有禁用的input元素(不可以使用的input元素) //$(':selected')所有被选取的input元素,针对select元素 //$(':checked')所有被选中input元素 $(document).ready(function(){ //$(':enabled').css('background','pink') //$(':disabled').css('background','red') //$(':selected').css('color','blue') $(':checked').parent().css('color','red') }) </script> <form> 输入框1<input type="text" name=""><br> 输入框2<input type="text" name=""><br> 输入框3<input type="text" name="" disabled="disabled"><br> 输入框4<input type="text" name=""><br> </form> <select> <option>魔蝎座</option> <option selected="selected">双鱼座</option> <option>射手座</option> <option>天蝎座</option> </select> <br> 爱好 <label><input type="checkbox" name="">看书</label> <label><input type="checkbox" name="" checked>游泳</label> <label><input type="checkbox" name="">游戏</label> </body> </html>
本节主要介绍了jQuery表单选择器$(':enabled')、$(':disabled')、$(':selected')、$(':checked')的用法
,运用了三个常见表单案例分别是form表单、select表单、多选框,以及介绍了disabled、selected、checked是可以简写的,还有重温了<label>标签的使用方法,<label>标签当元素被点击,元素前面的多选框会自动被选中。