トップ 差分 一覧 ping ソース 検索 ヘルプ PDF RSS ログイン

jQuery はじめに


RSS 無料英単語

目次



記事一覧

キーワード

jQueryはじめに

[jQuery][JavaScript]

ドキュメント操作



<html>
    <head>
        <script type="text/javascript" src="http://typea-mixi01.appspot.com/js/jquery-1.3.2.js"></script>
        <script type="text/javascript">
        
            // document が準備できたら実行する処理
            $(document).ready(function(){
                //
                // $('#[要素のid]') で参照(ただしjQueryオブジェクト)
                //
                // HTMLタグを含む文字を出力するには html()メソッドを使う(innerHTMLではない)
                $('#msg_area').html("<span style='font-weight:bold'>document is ready.</span>");
                // プレーンテキストを出力するには text()メソッドを使う
                $('#msg_text').text("<span style='font-weight:bold'>document is ready.2</span>");
            });
            
        </script>
    </head>
    <body>
        <div id='msg_area'></div>
        <div id='msg_text'></div>
        <br/>
        
        <div class="cls1"></div>
        <span class="cls1"></span>
        <!-- 
            // $('.classs_element_name') 要素をclass属性名で参照
            // $('tag_type.classs_element_name') 要素をタグ+class属性名で参照
        -->
        <br/>
        <input type="button" value="同じclass属性"  onclick="javascript:$('.cls1').text('class element no1.');">
        <input type="button" value="タグ+class属性" onclick="javascript:$('span.cls1').text('class element no1 span tag only.');">
        <br/>
        
        <!--
            // $('tag_type') 同じタグ全てを参照する
            // カンマ区切で同時に複数、* ですべて参照
        -->
        <input type="button" value="同一タグ種" onclick="javascript:$('div').css('border', 'solid 1px black');"/>
        <input type="button" value="複数タグ種" onclick="javascript:$('span,input').css('border', 'solid 2px blue');"/>
        
        <div>
            <span>子供階層</span>
            <p>
                <span>孫階層</span>
            </p>
            <span>子供階層2</span>
        </div>
        <input type="button" value="包含タグすべて" onclick="javascript:$('div span').css('background-color', 'red');"/><br/>
        <input type="button" value="子タグのみ"     onclick="javascript:$('div>span').css('background-color', 'blue');"/>
        <input type="button" value="隣接"           onclick="javascript:$('p+span').css('background-color', 'green');"/>
        
    </body>
</html>



YAGI Hiroto (piroto@a-net.email.ne.jp)
twitter http://twitter.com/pppiroto

Copyright© 矢木 浩人 All Rights Reserved.