Webページにテキストを挿入するjQueryの命令load()

Ajaxライブラリの「jQuery」。

jQueryの命令の1つで、セレクターで指定した要素内のテキストを書き換えるload()をご紹介します。

まず、Ajaxの注意点がいくつかあるので、確認しましょう。

  • 文字コードは基本的にはutf-8を推奨
  • セキュリティの問題で、同一ドメインのファイルしか読み込めない

今回はボタンを押すとサイドバーのプロフィールの文章を表示するスクリプトを書いてみました。

ここにサイドバーのプロフィールテキストを読み込みます。

ソースです。

このソースの前に、jQueryをheadタグ内に読み込ませて下さい。

<script type="text/javascript">
	$(function(){
		$("#load button").click(function(){
			$("#load div").load("http://blog.doubleside-web.jp/ p#side-face-text");
		});
	})
</script>
<div id="load">
	<button>読み込みボタン</button>
	<div><p>ここにサイドバーのプロフィールテキストを読み込みます。</p></div>
</div>

Webネタのタグ

jQueryとprototype.js を同時に使う際の注意点

Ajaxライブラリとして人気のある、jQueryとPrototype.js。

ただ、この両ライブラリを同時に使うと、書式が似てることに起因して、コンフリクト(=競合)をひきおこしてしまいます。

こうした問題を回避するために、jQuery側で使用する $(); を違うモノに変えてしまうのです。

headタグの中にjQueryとPrototype.jsを読み込ませます。


この下に、たった2行JavaScriptを追加することで、このコンフリクトを回避できます。

記述の順番は、Prototype.js、jQuery、スクリプトの順になりますので、注意しましょう。

1

doubleside-webについて

doubleside-web

神本哲哉(tkamimoto)

東京で活動するSOHOのWeb制作者です。

企画・ディレクション・マークアップ・SEOまで幅広く対応します。

最近の記事(Recent Article)

カテゴリ(Categories)

月別アーカイブ(Archive)

ブログ内検索(Search)

関連リンク(Link)

その他ブログパーツなど(Others)

あわせて読みたいブログパーツ