jQuery

HTMLの変更と取得｜html()

HTMLの変更

HTMLのタグを含むテキストを操作したい場合、html()という命令を使う。

html()を使ってHTMLを変更するには、html(…)の内側に変更後のHTMLを記述する。

$(function(){
   $(div#first).html("<strong>変更後</strong>");
});

<div id="first">変更前</div>

上のコードを実行すると、id属性に「first」が設定されているp要素の内容が、
<strong>変更後</strong>に変更される。

HTMLの取得

HTMLの取得にも、html()を使う。
text()でテキストを取得する場合と同じく()内には何も記述しない。

<script type="text/javascript">
   $(function)({
      $("p#second").html($(p#first).html());
   });
</script>

<p id="first"><strong>変更後</strong></p>
<p id="second">変更前</p>

上記のソースコードを実行すると、
<p id="first">〜</p>の内側のHTMLを取得し、<p id="second">〜</p>内を書き換える。

※ 今回の記事のコードはWordPress上では上手く表示されないので、
　 ソースコードの結果は割愛させて頂きます。

2012/09/12　9:21 PM｜ カテゴリー ： jQuery｜ コメント

テキストの変更と取得｜text()

HTML要素に含まれるテキストをjQueryで変更または、取得するにはtext()という命令を使う。

テキストの変更

text()を使ってテキストを変更するには、text(…)の内側に変更後のテキストを記述する。
テキストは“（ダブルクォーテーション）で包む必要がある。

<script type="text/javascript">
   $(function(){
      $("p#first").text("変更後");
   });
</script>

   <p id="first">変更前</p>

セレクターで指定した要素(id属性がfirstのp要素)が下記のように「変更後」というテキストに変わる。

変更前

テキストの取得

text()の括弧内に何も記述しない場合は、セレクターで指定した要素に含まれるテキストを取得する。

$("p#first").text();

上のスクリプトでは、id属性に「first」が設定されているp要素のテキストを取得できる。

テキストを変更する命令と組み合わせて使い、
特定の要素に含まれるテキストを読み込んで別の要素に書き込んでいく。

<script type="text/javascript">
$("p#second").text($("p#first").text());
</script>

<p id="first">取得する文字列</p>
<p id="second">変更前</p>

取得する文字列

変更前

2012/09/12　7:59 PM｜ カテゴリー ： jQuery｜ コメント

HTML／CSSを操るjQueryの命令

jQueryを利用したスクリプトは、

  1. どのHTMLの要素を操作するか指定する「セレクター」
  2. 操作する内容（命令）

今回はready関数を使い、ページの読み込みが終わったタイミングで
HTML/CSSを操作する方法を使い、jQueryの命令部分を学んでいきます。

<script type="text/javascript">
   $(function(){
      $("セレクター").jQueryの命令
   });
</script>

2012/09/02　6:58 AM｜ カテゴリー ： jQuery｜ コメント

containsフィルター／hasフィルター

「containsフィルター」は、特定の文字列が含まれている要素を、
「hasフィルター」は特定の要素が含まれている要素を選択できる。

<script type="text/javascript">
   $(function(){
      $("li:contains('サンプル')").css("color","#9cf");
      $("li:has(strong)").css("color","#6F9");
   })
</script>

<ul>
   <li><strong>テキスト1</strong>テキスト1テキスト1</li>
   <li>テキスト2テキスト2テキスト2</li>
   <li>テキスト3テキスト3テキスト3</li>
   <li>サンプル1サンプル1サンプル1</li>
</ul>

「サンプル」という文字列が含まれる4番目のli要素が#9cfの色になり、
strong要素を含む1番目の要素が#6f9の色になる。

  • テキスト1テキスト1テキスト1
  • テキスト2テキスト2テキスト2
  • テキスト3テキスト3テキスト3
  • サンプル1サンプル1サンプル1

2012/09/02　6:45 AM｜ カテゴリー ： jQuery｜ コメント

parentフィルター

「parentフィルター」は、何らかの子要素やテキストを含む要素を選択できるフェルター。
CSS3セレクターで紹介したempty疑似クラスと逆のフィルター。

<script type="text/css">
   $(function(){
      $("li:parent").css("color","#9cf");
   });
</script>

<ul>
   <li>テキスト1テキスト1テキスト1</li>
   <li></li>
   <li>テキスト2テキスト2テキスト2</li>
   <li></li>
</ul>

空のli要素以外のli要素、つまり1番目と3番目が#9cfの色になる。

  • テキスト1テキスト1テキスト1
  • テキスト2テキスト2テキスト2

2012/09/02　6:22 AM｜ カテゴリー ： jQuery｜ コメント

« 古い記事