JQiery选择器中的表单元素
生活随笔
收集整理的這篇文章主要介紹了
JQiery选择器中的表单元素
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
無論是提交還是傳遞數(shù)據(jù)，表單元素在動態(tài)交互頁面的作用是非常重要的。jQuery中專門加入了表單選擇器，從而能夠極其方便地獲取到某個類型的表單元素。
表單選擇器這么方便，讓我們來看一下都可以怎么使用吧：
除了input篩選選擇器，幾乎每個表單類別篩選器都對應一個input元素的type值。大部分表單類別篩選器可以使用屬性篩選器替換。比如 (′:password′)==(‘[type=password]’)
下面我們用一個例子來進行更深一步的了解：
<!DOCTYPE html> <html> <head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><link rel="stylesheet" href="imooc.css" type="text/css"><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>執(zhí)行結(jié)果如下：
好好練習，一句古話說的好：好記性不如爛筆頭。在編程上面，好記性不如敲鍵盤啊！
除了表單元素選擇器外，表單對象屬性篩選選擇器也是專門針對表單元素的選擇器，可以附加在其他選擇器的后面，主要功能是對所選擇的表單元素進行篩選如下表格了解：
注意：
1.選擇器適用于復選框和單選框，對于下拉框元素, 使用 :selected 選擇器
2.在某些瀏覽器中，選擇器:checked可能會錯誤選取到元素，所以保險起見換用選擇器input:checked，確保只會選取元素。
讓我們那個例子練練手吧：
<!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><link rel="stylesheet" href="imooc.css" type="text/css"><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>enabled、disabled</h3><form><input type="text" value="未設置disabled" /><input type="text" value="設置disabled" disabled="disabled" /><input type="text" value="未設置disabled" /></form><script type="text/javascript">//查找所有input所有可用的（未被禁用的元素）input元素。$("input:enabled").css("border", "2px groove red");</script><script type="text/javascript">//查找所有input所有不可用的（被禁用的元素）input元素。$("input:disabled").css("border", "2px groove blue");</script><h3>checked、selected</h3><form><input type="checkbox" checked="checked"><input type="checkbox"><input type="radio" checked> <input type="radio"><select name="garden" multiple="multiple"><option>imooc</option><option selected="selected">慕課網(wǎng)</option><option>aaron</option><option selected="selected">博客園</option></select></form><script type="text/javascript">//查找所有input所有勾選的元素(單選框,復選框)//刪除這個勾選的元素$("input:checked").removeAttr('checked')</script><script type="text/javascript">//查找所有option元素中,有selected屬性被選中的選項//刪除這個選中的元素$("option:selected").removeAttr('selected')</script></body></html>總結(jié)
以上是生活随笔為你收集整理的JQiery选择器中的表单元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中小板个股代码
- 下一篇： JQuery中的特殊选择器--this