abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>jquery表单选择器</title> <script type="text/javascript" src="jquery-3.3.1.min.js&qu
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery表单选择器</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css"> </style> </head> <body> <script type="text/javascript"> // 表单选择器 // 语法: // $(':enabled')所有激活的input元素(可以使用的input元素) // $(':disabled')所有禁用的input元素(不可以使用的input元素) // $(':selected')所有被选取的元素,针对于select元素 // $(':checked')所有被选中的input元素 $(document).ready(function(){ $(':enabled').css('background','pink'); $(':disabled').css('background','blue'); $(':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=""><br> 输入4<input type="text" name="" disabled><br> 输入5<input type="text" name=""><br> <select> <option>摩羯座</option> <option selected>双鱼座</option> <option>射手座</option> <option>天蝎座</option> </select> <label><input type="checkbox" name="">1</label> <label><input type="checkbox" name=""checked>2</label> <label><input type="checkbox" name="">3</label> </form> </body> </html>
Correcting teacher:查无此人Correction time:2019-02-22 16:18:34
Teacher's summary:完成的不错。下次把代码缩进,看着整齐。jquery选择器功能很强大,要多练习,继续加油。