abstrakt:<!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庫,效果不出現(xiàn)并報錯,經過檢查發(fā)現(xiàn)修正了錯誤,對知識的掌握有了更深的印象。看完視頻閉眼睛做作業(yè)花費的時間較長,做了后面好像又忘了前面的知識,此階段大限將至,焦慮焦慮……
Korrigierender Lehrer:天蓬老師Korrekturzeit:2019-01-28 13:33:11
Zusammenfassung des Lehrers:表單選擇器遠不止這幾個, 其它的也要學