加载中...

:submit

概述    submit selector

返回值：Array<Element(s)>

描述：选择所有类型为提交的元素。

  • V : 1.0jQuery( ":submit" )

:submit选择通常适用于按钮或input元素。请注意，一些浏览器将<button>元素作为type="default"默认处理，而其他浏览器（如Internet Explorer）并非如此。 为了确保标签能在所有浏览器下正常工作，并保证一致，它始终选择能提交表单的按钮，总是指定一个type属性。

Additional Notes（其他注意事项）:

  • 因为:submit 是一个 jQuery 延伸出来的选择器，并不是的CSS规范的一部分，使用:submit 查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了当使用:submit 的时候在现代浏览器上获得更佳的性能，首先使用纯CSS选择器选择元素，然后使用[type="submit"]代替.

示例

实例

查找所有提交按钮

HTML 代码: 
  1. <form>
  2.   <input type="text" />
  3.   <input type="checkbox" />
  4.   <input type="radio" />
  5.   <input type="image" />
  6.   <input type="file" />
  7.   <input type="submit" />
  8.   <input type="reset" />
  9.   <input type="password" />
  10.   <input type="button" />
  11.   <select><option/></select>
  12.   <textarea></textarea>
  13.   <button></button>
  14. </form>
jQuery 代码: 
  1. $(":submit")
结果: 
  1. [ <input type="submit" /> ]

实例

查找所有作为 td 元素后代的提交按钮。 

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>submit demo</title>
  6.   <style>
  7.   textarea {
  8.     height: 45px;
  9.   }
  10.   </style>
  11.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  12. </head>
  13. <body>
  14.  
  15. <form>
  16. <table id="exampleTable" border="1" cellpadding="10" align="center">
  17.   <tr>
  18.     <th>
  19.       Element Type
  20.     </th>
  21.     <th>
  22.       Element
  23.     </th>
  24.   </tr>
  25.   <tr>
  26.     <td>
  27.       <input type="button" value="Input Button">
  28.     </td>
  29.   </tr>
  30.   <tr>
  31.     <td>
  32.       <input type="checkbox">
  33.     </td>
  34.   </tr>
  35.   <tr>
  36.     <td>
  37.       <input type="file">
  38.     </td>
  39.   </tr>
  40.   <tr>
  41.     <td>
  42.       <input type="hidden">
  43.     </td>
  44.   </tr>
  45.   <tr>
  46.     <td>
  47.       <input type="image">
  48.     </td>
  49.   </tr>
  50.   <tr>
  51.     <td>
  52.       <input type="password">
  53.     </td>
  54.   </tr>
  55.   <tr>
  56.     <td>
  57.       <input type="radio">
  58.     </td>
  59.   </tr>
  60.   <tr>
  61.     <td>
  62.       <input type="reset">
  63.     </td>
  64.   </tr>
  65.   <tr>
  66.     <td>
  67.       <input type="submit">
  68.     </td>
  69.   </tr>
  70.   <tr>
  71.     <td>
  72.       <input type="text">
  73.     </td>
  74.   </tr>
  75.   <tr>
  76.     <td>
  77.       <select><option>Option</option></select>
  78.     </td>
  79.   </tr>
  80.   <tr>
  81.     <td>
  82.       <textarea></textarea>
  83.     </td>
  84.   </tr>
  85.   <tr>
  86.     <td>
  87.       <button>Button</button>
  88.     </td>
  89.   </tr>
  90.   <tr>
  91.     <td>
  92.       <button type="submit">Button type="submit"</button>
  93.     </td>
  94.   </tr>
  95. </table>
  96. </form>
  97. <div id="result"></div>
  98.  
  99. <script>
  100. var submitEl = $( "td :submit" )
  101.   .parent( "td" )
  102.     .css({
  103.       background: "yellow",
  104.       border: "3px red solid"
  105.     })
  106.   .end();
  107.  
  108. $( "#result" ).text( "jQuery matched " + submitEl.length + " elements." );
  109.  
  110. // Prevent form submission
  111. $( "form" ).submit(function( event ) {
  112.   event.preventDefault();
  113. });
  114.  
  115. // Extra JS to make the HTML easier to edit (None of this is relevant to the ':submit' selector)
  116. $( "#exampleTable" ).find( "td" ).each(function( i, el ) {
  117.   var inputEl = $( el ).children(),
  118.     inputType = inputEl.attr( "type" ) ? " type='" + inputEl.attr( "type" ) + "'" : "" ;
  119.   $( el ).before( "<td>" + inputEl[ 0 ].nodeName + inputType + "</td>" );
  120. })
  121. </script>
  122.  
  123. </body>
  124. </html>
运行一下

还没有评论.