开发者学堂课程【jQuery 开发教程:jQuery_表单】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/362/detail/4281
jQuery_表单
1、:button Selector
描述∶选择所有按钮元素和类型为按钮的元素。
语法:jQuery( ":button")
2、:checkbox Selector
描述∶选择所有类型为复选框的元素。
语法:jQuery( ":checkbox" )
3、:checked selector
描述∶匹配所有勾选的元素。
语法:jQuery( ":checked" )
4、:disabled Selector
描述∶选择所有被禁用的元素。
语法:jQuery( ":disabled" )
5、:enabled Selector
描述∶选择所有可用的(注∶未被禁用的元素)元素。
语法:jQuery( ":enabled" )
6、:file Selector
描述∶选择所有类型为文件( file )的元素。
语法:jQuery( ":file" )
7、:focus Selector
描述∶选择当前获取焦点的元素。
语法:jQuery( ":focus”)
8、:image Selector
描述∶选择所有图像类型的元素。
语法:jQuery( ".image")
9.:input Selector
描述∶选择所有input, textarea, select和 button元素。
语法∶jQuery( ":.input" )
10、:password Selector
描述∶选择所有类型为密码的元素。
语法:jQuery( ":password" )
11、:radio Selector
描述︰选择所有类型为单选框的元素。
语法:jQuery( ":radio" )
12、:submit Selector
描述∶选择所有类型为提交的元素。
语法: jQuery( ":submit" )
表单有很多个,这里只列举12个,在代码中写一个例子分别演示一下:
引入jQuery:<script src="jquery-2.2.1.min.js">< /script>
之后写入一大堆标签:
<body> <form> <fieldset> <input type="button" value="Input Button" / > <input type="checkbox" / > <input type=""file"> <input type="hidden"> <input type="image"> <input type="password"> <input type="radio"> <input type="reset"> <input type="submit"> <input type="text"> <select><option>option</option>< / select> <textarea></ textarea> <button>Botton< /button> < /fieldset>
之后写入空的<div>:
< / form> <div> <ldiv>
执行,是一个提交的表格
设置一下<textarea></ textarea>高度,它是一个多行文本的输入框之后定义样式颜色为红色:
<style> textarea{ height: 35px; } div{ color: red;}
加入< /fieldset>标签样式,内外边距为零:
fieldset{ margin: 0; padding: 0; border-width: 0;}
然后添加一个类并调整样式:
.marked{ background-color: yellow; border: 3px solid red;}
准备工作完成后,查找出所有按钮并标记出来:
<script> $ ( function(){ var input=$ ( ": button" ).addClass ( "marked");}
执行,表格里所有的 button 都已经被标记,效果如下:
这就是第1个选择器。
第8个选择所有图像类型的元素:
将 button 换成 input:image,执行效果如下:
第9个选择所有input, textarea, select和 button元素:
将 input:image 换成:input,执行效果如下:
第4个选择所有被禁用的元素:
写入:<form> <input name="email" disabled="disabled" /> <input name="id"/> < / form> 查找所有被禁用的 input 元素: $ ( function()i $ ( "input: disabled" ).val( "haha" );
执行,第一个被禁用的 disabled 上被添加了内容:haha,执行结果如下: