abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jq_
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jq_3.3.1_mi.js"></script> </head> <body> <form > 输入框1<input type="text" name=""><br> 输入框2<input type="text" name=""><br> 输入框3<input type="text" name="" disabled><br> 输入框4<input type="text" name=""><br> <select> <option>广西</option> <option>广东</option> <option selected>四川</option> <option>湖南</option> </select><br> 爱好: <label><input type="checkbox" name="">旅游</label> <label><input type="checkbox" name="" checked>看书</label> <label><input type="checkbox" name="">游戏</label> </form> <script type="text/javascript" > $(document).ready(function(){ $(':enabled').css('background','pink')//选取到所有被激活的input元素 $(':disabled').css('background','blue')//匹配到禁用的input元素 $(':selected').css('color','red')//匹配到所有被选中的元素,针对select元素 $(':checked').parent().css('color','orange')//匹配包含子元素或者文本的元素 }) </script> </script> </body> </html>
本案例涉及的知识点:
Jq的表单选择器
语法:
$(‘:enabled’)所有激活的inp元素(可以使用input元素)
$(‘:disable’)所有禁用的input元素(不可以使用的input元素)
$(‘:selected’)所有被选取的元素,针对于select元素
$(':checked').parent()//匹配包含子元素或者文本的元素
js,jq刚开始学,非常不熟练,本练习刚开始忘了引入jq库,效果不出现并报错,经过检查发现修正了错误,对知识的掌握有了更深的印象。看完视频闭眼睛做作业花费的时间较长,做了后面好像又忘了前面的知识,此阶段大限将至,焦虑焦虑……
Correcting teacher:天蓬老师Correction time:2019-01-28 13:33:11
Teacher's summary:表单选择器远不止这几个, 其它的也要学