jQuery

jQuery HTML 要素名や属性名を指定して取得する

2014年5月16日

jQuery オブジェクトとして HTML 要素の名前を指定することで DOM 上の HTML 要素を簡単に取得することができます。なお、この方法では DOM 上の該当する要素すべてを取得します。

構文：
$('要素名')

特定の属性を持つ要素のみを取得する場合、要素名の後に属性を指定します。

構文：
$('要素名:属性')

例：HTML の select タグの選択アイテムを取得する場合

<script type="text/javascript">
    function selectionChanged()
    {
        // すべての option 要素を取得
        var all = $('option');
        // 選択されている option 要素を取得
        var selected = $('option:selected');

        // 各要素の値を表示
        $(all ).each(
            function (e) {
                alert($(this).val());
            }
        );
        $(selected).each(
            function (e) {
                alert($(this).val());
            }
        );
    }
</script>
    
<body>
    <select multiple="multiple" onchange="selectionChanged()">
        <option>Item 1</option>
        <option selected="selected">Item 2</option>
        <option>Item 3</option>
        <option>Item 4</option>
        <option>Item 5</option>
    </select>
</body>

-jQuery