最近の更新

2013年10月30日水曜日

DIVの中身に出力する方法

【目的】
jQueryで、DIVの中身に出力します。



【手順】
1.「jQuery1.8.1のダウンロード方法」の手順で、jQuery1.8.1をダウンロードしておきます。
2.「030-DIVの中身に出力.html」というファイルを作成。
3.「030-DIVの中身に出力.html」を以下の様に入力。
<html>
<head>
    <script type="text/javascript" src="./jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#button1").click(function(){
            $("#area1").html("中身を変更しました。");
        });
    })
    </script>
</head>
<body>
    <div id="area1" style="width:100px; height:100px; background-color:red;">
        中身
    </div>
    <input id="button1" type="button" value="出力">
</body>
</html>

4.ダウンロードした「jquery-1.8.1.min.js」と「030-DIVの中身に出力.html」を同一ディレクトリに配置します。
5.「030-DIVの中身に出力.html」をブラウザで開きます。
6.以下の様に表示されれば成功です。




































以上です。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

関連記事