:submit 非推奨
- $(':submit') 1.0追加
- 補足事項
- デモ
$(':submit') 1.0追加
補足事項
:submitはjQueryが独自に拡張した仕組みでCSSには存在しない概念です。 そのため、querySelectorAll()によって提供されるパフォーマンスを享受することが出来ません。 モダンブラウザでは、[type="submit"]を使用することを推奨します。
デモ
submit要素を含むTDを選択し、マークします。
<!DOCTYPE html>
<html>
<head>
<style>
textarea { height:45px; }
table { font-size:12px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table>
<form>
<table id="exampleTable" border="1" cellpadding="5" align="center">
<tr>
<th>タイプ</th>
<th>要素</th>
</tr>
<tr>
<td><input type="button" value="Input Button"/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="file" /></td>
</tr>
<tr>
<td><input type="hidden" /></td>
</tr>
<tr>
<td><input type="image" /></td>
</tr>
<tr>
<td><input type="password" /></td>
</tr>
<tr>
<td><input type="radio" /></td>
</tr>
<tr>
<td><input type="reset" /></td>
</tr>
<tr>
<td><input type="submit" /></td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td><select><option>Option</option></select></td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><button>Button</button></td>
</tr>
<tr>
<td><button type="submit">Button type="submit"</button></td>
</tr>
</table>
</form>
<div id="result"></div>
<script>
//対象をマーク
var submitEl = $("td :submit")
.parent('td')
.css({background:"yellow", border:"3px red solid"})
.end();
//対象要素数を取得
$('#result').text('対象要素の数は' + submitEl.length + '個です。');
// submit無効
$("form").submit(function () { return false; });
// 1列目のセルにタグとtype属性名を出力
$('#exampleTable').find('td').each(function(i, el) {
var inputEl = $(el).children(),
inputType = inputEl.attr('type') ? ' type="' + inputEl.attr('type') + '"' : '';
$(el).before('<td>' + inputEl[0].nodeName + inputType + '</td>');
})
</script>
</body>
</html>
© 2010 - 2017 STUDIO KINGDOM