jQuery表單元素選擇器代碼實(shí)例
更新時間:2017年02月06日 10:50:20 投稿:lijiao
這篇文章主要為大家詳細(xì)介紹了jQuery表單元素選擇器代碼實(shí)例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery表單元素選擇器的具體代碼,供大家參考,具體內(nèi)容如下
<!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", "3px groove blue"); </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元素中的復(fù)選按鈕,并選中 $('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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航,代碼實(shí)現(xiàn)效果簡單精致,推薦給大家,有需要的小伙伴可以參考下。2015-08-08jQuery實(shí)現(xiàn)側(cè)邊導(dǎo)航欄及滑動電梯效果(仿淘寶)
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實(shí)現(xiàn)側(cè)邊導(dǎo)航欄以及滑動電梯效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動手試一試2022-03-03讓新消息在網(wǎng)頁標(biāo)題閃爍提示的jQuery代碼
可能有一些站長會注意到這樣的效果,到收到的新消息會閃爍標(biāo)題提示,那么新消息在網(wǎng)頁標(biāo)題閃爍顯示的效果如何實(shí)現(xiàn),下面有個不錯的示例,感興趣的朋友可以參考下2013-11-11jquery focus(fn),blur(fn)方法實(shí)例代碼
jquery focus(fn),blur(fn)方法實(shí)例代碼,需要的朋友可以參考下。2011-12-12jQuery Ajax方法調(diào)用 Asp.Net WebService 的詳細(xì)實(shí)例代碼
我在這里將jQuery Ajax 調(diào)用Aspx.Net WebService 的幾個常用的方法做了一個整理,提供給正在找這方面內(nèi)容的博友,希望能給學(xué)習(xí)jQuery的朋友一點(diǎn)幫助,可以直接復(fù)制代碼運(yùn)行。2011-04-04