JQ表单选择器和CSS3表单选择器

时间：2023-03-09 00:35:28
JQ表单选择器和CSS3表单选择器

　　　　　　　　　　JQ表单选择器和CSS3表单选择器

　　JQ表单选择器

　　　　为了使用户能够更加灵活地操作表单，jQuery中加入了表单选择器，利用这个选择器能极其方便的获取到表单的某个或者某类型的元素。表单选择器的介绍如图：

　　　　　　　　JQ表单选择器和CSS3表单选择器

　　　　我们要着重强调的是:input, :submit, :reset, :button, :hidden选择器。因为有一些细节需要我们特别注意（并不能顾名思义）。

　　　　测试HTML代码：

　　　　

 　　<input type="text" name="text" value="">

     <input type="radio" name="radio" value="">

     <input type="checkbox" name="checkbox" value="">

     <input type="hidden" name="hidden" value="">

     <input type="text" name="textHidden" hidden>

     <input type="text" name="textVisility" style="visibility: hidden">

     <input type="text" name="textDisplay" style="display: none">

     <input type="submit" name="submit" value="submit">

     <input type="button" name="button" value="button">

     <input type="reset" name="reset" value="reset">

     <button type="button">buttonBtn</button>

     <textarea>textarea</textarea>

     <select name="section">

         <option value="one">one</option>

         <option value="two">two</option>

         <option value="three">three</option>

         <option value="four">four</option>

     </select>
19     <button type="submit">submitBtn</button>
20     <button type="reset">resetBtn</button>




　　　　首先是:input 选择器选取所有的<input>, <textarea>, <select>, <button>元素。JQ代码:


$(':input').css('border', '1px solid red');   测试效果如图：


　　JQ表单选择器和CSS3表单选择器


　　　　结果： 所有的<input>, <textarea>, <select>, <button>元素都被添加边框。


　　　　接着测试:submit选择器, JQ代码：   $(':submit').css('border', '1px solid red');   测试效果如图：


　　　　JQ表单选择器和CSS3表单选择器


　　　　　结果： 不管是<input>,还是<button>元素，type值等于"submit"，就会被添加边框。


　　　　　接着测试:reset选择器， JQ代码：  $(':reset').css('border', '1px solid red');   测试效果图：


　　　　JQ表单选择器和CSS3表单选择器


　　　　　结果： 不管是<input>,还是<button>元素，type值等于"reset"，就会被添加边框。


　　　　　接着测试:button选择器,  JQ代码：   $(':button').css('backgroundColor', 'orange');   测试效果图：


　　　　JQ表单选择器和CSS3表单选择器


　　　　　结果： 我们发现只有<button>元素以及是<input>且type值等于"button"的元素才被添加背景色为橙色。


　　　　　最后测试的是:hidden 选择器，  JQ代码：  $(':hidden').css('backgroundColor' 'green');  测试效果图：


　　　　　JQ表单选择器和CSS3表单选择器


　　　　　结果： 只有<input>且type值是"hidden", 具有HTML5属性 hidden的， display: none的元素才会被添加背景色为绿色，注意visibility: hidden的元素并不会被设置背景色。JQ有一个:visible选择器，可以扩展下。地址


　　CSS3表单选择器


　　　　CSS3新增的表单选择器有三个 :enabled  选择每个启用的 <input> 元素。, :disabled 选择每个禁用的 <input> 元素, :checked 选择每个被选中的<input> 元素。特别注意：这三个表单选择器只针对<input>元素，而且:checked选择器只有欧朋浏览器支持。具体的移步W3C底部。
相关文章