jQuery教程10-表单元素选择器
生活随笔
收集整理的這篇文章主要介紹了
jQuery教程10-表单元素选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
無論是提交還是傳遞數據，表單元素在動態交互頁面的作用是非常重要的。jQuery中專門加入了表單選擇器，從而能夠極其方便地獲取到某個類型的表單元素。
表單選擇器的具體方法描述：
注意：
- 除了input篩選選擇器，幾乎每個表單類別篩選器都對應一個input元素的type值。大部分表單類別篩選器可以使用屬性篩選器替換。比如:
代碼示例：
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title>子元素篩選選擇器</title><style> input{display: block;margin: 10px;padding:10px;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head><body><h2>子元素篩選選擇器</h2><h3>input、text、password、radio、checkbox</h3><h3>submit、image、reset、button、file</h3><div class="left first-div"><form><input type="text" value="text類型"/><input type="password" value="password"/><input type="radio"/> <input type="checkbox"/><input type="submit" /><input type="image" /><input type="reset" /><input type="button" value="Button" /><input type="file" /></form></div><script type="text/javascript">//查找所有 input, textarea, select 和 button 元素//:input 選擇器基本上選擇所有表單控件$(':input').css("border", "1px groove red"); </script><script type="text/javascript">//匹配所有input元素中類型為text的input元素$('input:text').css("background", "#A2CD5A");</script><script type="text/javascript">//匹配所有input元素中類型為password的input元素$('input:password').css("background", "yellow");</script><script type="text/javascript">//匹配所有input元素中的單選按鈕,并選中$('input:radio').attr('checked','true');</script><script type="text/javascript">//匹配所有input元素中的復選按鈕,并選中$('input:checkbox').attr('checked','true'); </script><script type="text/javascript">//匹配所有input元素中的提交的按鈕,修改背景顏色$('input:submit').css("background", "#C6E2FF");</script><script type="text/javascript">//匹配所有input元素中的圖像類型的元素,修改背景顏色$('input:image').css("background", "#F4A460");</script><script type="text/javascript">//匹配所有input元素中類型為按鈕的元素$('input:button').css("background", "red");</script><script type="text/javascript">//匹配所有input元素中類型為file的元素$('input:file').css("background", "#CD1076");</script></body> </html>總結
以上是生活随笔為你收集整理的jQuery教程10-表单元素选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hdfs查看目录大小文件大小
- 下一篇： phpMyAdmin4.4.10安装