开发者学堂课程【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></span></code></div><div data-lake-id="1165f2583c36adaa83991f03b1fa52fd"><span class="lake-fontsize-1515">之后写入一大堆标签：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="5c1c174da176899fbfdf8fb1c3d29240"><code><span class="lake-fontsize-1515"><body></span></code></div><div data-lake-id="d45f792e9e56796cada3ec9e9d1d6b60"><code><span class="lake-fontsize-1515"><form></span></code></div><div data-lake-id="b3dcd4240bd4c8927a69fb80e270c43a"><code><span class="lake-fontsize-1515"><fieldset></span></code></div><div data-lake-id="b1f0829ede9641233ed98ca882e027d8"><code><span class="lake-fontsize-1515"><input type="button" value="Input Button" / > </span></code></div><div data-lake-id="523f06b9e8c2bfd1b2f49e84f7860d83"><code><span class="lake-fontsize-1515"><input type="checkbox" / ></span></code></div><div data-lake-id="e3841431a0d8dac33e1451b0f0353e0c"><code><span class="lake-fontsize-1515"><input type=""file"></span></code></div><div data-lake-id="7c1bc8acb89d90c7dae588ea8d6f3a0c"><code><span class="lake-fontsize-1515"><input type="hidden"></span></code></div><div data-lake-id="27ddb7c1853d42eb70efd4fed3550b62"><code><span class="lake-fontsize-1515"><input type="image"></span></code></div><div data-lake-id="95f55fc086431ac1ca72c0e73b01ce47"><code><span class="lake-fontsize-1515"><input type="password"></span></code></div><div data-lake-id="272435adb13957f167d450933ad3ab47"><code><span class="lake-fontsize-1515"><input type="radio"></span></code></div><div data-lake-id="25d92f1f360cf5925fe1b1a7e825f613"><code><span class="lake-fontsize-1515"><input type="reset"></span></code></div><div data-lake-id="7166708c64536fb2bd9f2ceccd60ae41"><code><span class="lake-fontsize-1515"><input type="submit"></span></code></div><div data-lake-id="e91835092fcc2f14a03b4087372a4696"><code><span class="lake-fontsize-1515"><input type="text"></span></code></div><div data-lake-id="1c344a767359fee168605f96ae970fcc"><code><span class="lake-fontsize-1515"><select><option>option</option>< / select></span></code></div><div data-lake-id="1b4db0805a657cdb87b6b95cc9bc1bb6"><code><span class="lake-fontsize-1515"><textarea></ textarea></span></code></div><div data-lake-id="a60f92722280ee81a54d114843db15b3"><code><span class="lake-fontsize-1515"><button>Botton< /button></span></code></div><div data-lake-id="99f066dc29f92bcf3b135301e824d8db"><code><span class="lake-fontsize-1515">< /fieldset></span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="352a1a886c6fc0b0e4f8e2b3cf0d0bdc"><span class="lake-fontsize-1515">之后写入空的 </span><code><span class="lake-fontsize-1515"><div>:</span></code></div><div data-lake-id="329e197e3a544efd316066043b4d4632"><code><span class="lake-fontsize-1515">< / form></span></code></div><div data-lake-id="2582c99bdd6fce7c1053b4bb2380d457"><code><span class="lake-fontsize-1515"><div> <ldiv></span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="349cf5d5568312e6f99483ffc927e5fc"><span class="lake-fontsize-1515">执行，是一个提交的表格</span><span class="lake-fontsize-14"></span></div><div data-lake-id="c0bff90944ca6527ad94143e04b59cb8"><span class="lake-fontsize-1515">设置一下 <textarea></ textarea> 高度，它是一个多行文本的输入框之后定义样式颜色为红色：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="bda133009870ba2a7df54c9aae34aa09"><code><span class="lake-fontsize-1515"><style></span></code></div><div data-lake-id="1fa74fc40a3d72ac6bdfe4770a1f1d72"><code><span class="lake-fontsize-1515">textarea{</span></code></div><div data-lake-id="9bf3cd1a8fae3ea7f02c7a3bf792a815"><code><span class="lake-fontsize-1515">height: 35px;</span></code></div><div data-lake-id="3a243fab541cc165efa3c96d357b57c2"><code><span class="lake-fontsize-1515">}</span></code></div><div data-lake-id="72961c5be9d4b74f2064debc19036815"><code><span class="lake-fontsize-1515">div{</span></code></div><div data-lake-id="73732709bf4b93370722d77d6faf37ae"><code><span class="lake-fontsize-1515">color: red;}</span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="6378474678a615dc01c4753bd55c75a2"><span class="lake-fontsize-1515">加入 < /fieldset> 标签样式，内外边距为零：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="9428f0e3cab6217d8bea581ca58b3fcc"><code><span class="lake-fontsize-1515">fieldset{</span></code></div><div data-lake-id="bb9a9f4a15bd3efcf59f1f698e353a46"><code><span class="lake-fontsize-1515">margin: 0;</span></code></div><div data-lake-id="d8f76d4c8fb86681a41478049ba0fac6"><code><span class="lake-fontsize-1515">padding: 0;</span></code></div><div data-lake-id="3a0cb014dc53bb5d5bf4b53ab561dd9b"><code><span class="lake-fontsize-1515">border-width: 0;}</span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="061dc99a38b3f03ad360ab9a32eb7e97"><span class="lake-fontsize-1515">然后添加一个类并调整样式：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="0a20c9c12eab079db546c6f18316a21a"><code><span class="lake-fontsize-1515">.marked{</span></code></div><div data-lake-id="1ae5f1b17816c4246ab4f85febd9bb17"><code><span class="lake-fontsize-1515">background-color: yellow;</span></code></div><div data-lake-id="00468737d703fd61926c783a1cc3368e"><code><span class="lake-fontsize-1515">border: 3px solid red;}</span></code></div><div data-lake-id="8d9b4f51ac8a18a0c4cf2bcfa0b91828"><span class="lake-fontsize-1515">准备工作完成后，查找出所有按钮</span><span class="lake-fontsize-1515">并标记出来：</span></div><div data-lake-id="e5192d4c1825580658a7acc539ca0784"><code><span class="lake-fontsize-1515"><script></span></code></div><div data-lake-id="1c78358a0c2eaa18a687c153c6123e78"><code><span class="lake-fontsize-1515">$ ( function(){</span></code></div><div data-lake-id="905c6849f49339a6183466b8a3f1833a"><code><span class="lake-fontsize-1515">var input=$ ( ": button" ).addClass ( "marked");}</span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="0f5cd3fe41e41b37e75deb54c9a53110"><span class="lake-fontsize-1515">执行，表格里所有的 button 都已经被标记</span><span class="lake-fontsize-1515">，效果如下：</span></div><div data-lake-id="c8dd6503a7c334f8164005b4d3d5c819"><span class="lake-fontsize-1515">这就是第1个选择器。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="795a645557835094a57213ac52143224"><span class="lake-fontsize-1515">第8个选择所有图像类型的元素：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="d7c496225580097cfb2d6f1979d40143"><span class="lake-fontsize-1515">将 button 换成 input：image</span><span class="lake-fontsize-1515">，执行效果如下：</span></div><div data-lake-id="0564cc138840fc2dd58738099b389adc"><span class="lake-fontsize-1515">第9个选择所有 input, textarea, select和 button 元素：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="571094d128835a245a817b8cc575602f"><span class="lake-fontsize-1515">将 input：image 换成：input</span><span class="lake-fontsize-1515">，执行效果如下：</span></div><div data-lake-id="d1a2a0c0bebf548920d8660f233b113c"><span class="lake-fontsize-1515">第4个选择所有被禁用的元素：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="7d840a4a6da2d345f1c1c6fa50d78928"><span class="lake-fontsize-1515">写入：</span><code><span class="lake-fontsize-1515"><form></span></code></div><div data-lake-id="64ceba78f8fe0636d8fbff89add355da"><code><span class="lake-fontsize-1515"><input name="email" disabled="disabled" /></span></code></div><div data-lake-id="9b61ee2c466110e1449f6fa3dd84f524"><code><span class="lake-fontsize-1515"><input name="id"/></span></code></div><div data-lake-id="e1be66938223266f95c4c6eda5096842"><code><span class="lake-fontsize-1515">< / form></span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="7c5e31c29490dde2e4d58e75e95dca62"><span class="lake-fontsize-1515">查找所有被禁用的 input 元素：</span><span class="lake-fontsize-14"></span></div><div data-lake-id="5f313c59560b3c421e4532b3d71bdafd"><code><span class="lake-fontsize-1515">$ ( function()i</span></code></div><div data-lake-id="b2a2092670a57e0ef747fbd76340a153"><code><span class="lake-fontsize-1515">$ ( "input: disabled" ).val( "haha" );</span></code><span class="lake-fontsize-14"></span></div><div data-lake-id="a230a79a27b778d302ea0717b593bbdd"><span class="lake-fontsize-1515">执行，第一个被禁用的 disabled 上被添加了内容：haha</span><span class="lake-fontsize-1515">，执行结果如下：</span><span class="lake-fontsize-14"></span></div>