jQueryのセレクタの書式とメソッドによるHTMLの編集方法について説明します。

jQueryのセレクタの書式

「jQueryのready、セレクタ、メソッドチェーンの構文の記述方法」で示したように、セレクタは、構文「$( )」のカッコ内で利用できます。次のように記述した場合、セレクタは「”img”」となります。

$(function () {
    $("img").hide();
});

次のセレクタの指定方法について説明します。

  • HTMLタグ
  • 子要素
  • id属性
  • クラス属性
  • name属性

セレクタ – HTMLタグ

セレクタとしてpタグを指定し、textメソッドでpタグのtext部分を変数「pTag」に保存します。変数「pTag」には、「tomosoft」が保存されます。

<p>tomosoft</p>
<script>
  var pTag = $('p').text();
</script>

セレクタ – 子要素

セレクタとしてdivタグの子要素であるpタグを指定し、textメソッドで子要素のpタグのtext部分を変数「pTag」に保存します。変数「pTag」には、「tomosoft」が保存されます。

<div>
  <p>tomosoft</p>
</div>
<p>control</p>
<script>
  var pTag = $('div > p').text();
</script>

セレクタ – id属性

「#」に続けてid属性値を記述すればセレクタ指定になります。セレクタとして、pタグ内に記述されているid属性「pid」指定し、textメソッドでpタグのtext部分を変数「pTag」に保存します。変数「pTag」には、「tomosoft」が保存されます。

<p id="pid">tomosoft</p>
<script>
  var pTag = $('#pid').text();
</script>

セレクタ – クラス属性

「.」に続けてクラス属性値を記述すればセレクタ指定になります。セレクタとして、pタグ内に記述されているクラス属性「pclass」指定し、textメソッドでpタグのtext部分を変数「pTag」に保存します。変数「pTag」には、「tomosoft」が保存されます。

<p class="pclass">tomosoft</p>
<script>
  var pTag = $('.pclass').text();
</script>

セレクタ – name属性

name属性は一般的にフォーム部品などのHTMLタグに記述され、次のようなセレクタの書式になります。

HTML要素 [ 属性 = 属性値 ]

input要素のname属性のセレクタでは、次の書式を使用すると、変数「name 」には「tomosoft」が保存されます。

<input type="text" name="user-name" value="tomosoft">
<script>
  var name = $('input[name="user-name"]').val();
</script>

jQueryのメソッドによるHTMLの編集

ユーザーの操作に応じて、HTMLの内容を変えたいとき等、jQueryを利用してHTMLを編集できます。主要なHTMLの編集方法を次に示します。詳細については、「[jQuery] メソッド・プロパティ一覧」のメソッド・プロパティ一覧を参照してください。

要素にクラスを追加

クラス「example」を追加して背景色を変更します。

<style>
.example{
  background-color:#ffffe0;
  border:1px solid #0000ff;
  color:#ff0000;
}
</style>
<div id="#sample'">tomosoft</div>
$('#sample'').addClass('example');

要素を差替え

「＜p＞sample＜/p＞」に要素が置き換わります。

<div id="sample">tomosoft</div>
$('#sample').html('<p>sample</p>');

要素の属性値を削除

入力項目のplaceholderを削除します。

<input type="text" id="sample" placeholder="ここが削除されます。">
$('#sample').removeAttr(’placeholder’);

要素のクラスを削除

クラス「example」を削除して背景色を変更します。

<style>
.example{
  background-color:#ffffe0;
  border:1px solid #0000ff;
  color:#ff0000;
}
</style>
<div id="sample" class="example"></div>
$('#sample').removeClass('example');

要素を削除

要素が削除され、「tomosoft」が表示されなくなります。

<div id="dv1">tomosoft</div>
$("#dv1").remove();                        //d="dv1"の要素を削除する
//$("div").remove("#dv1");               //他の方法
//$("div").remove(":contains('tomosoft')"); //他の方法

要素を1秒間かけて非表示

「tomosoft」を1秒間かけて非表示します。

<div id="view">tomosoft</div>
$('#view').hide(1000);

要素を1秒間かけて表示

「tomosoft」を1秒間かけて表示します。

<div id="view">tomosoft</div>
$('#view').show(1000);

GETリクエストを送信

hoge.phpにGETデータを送信し、結果をコンソールに出力します。

 $.get("hoge.php",  {"cd":"100", "name":"Taro"},
  function(dt){
    console.log(dt);
  }
);

POSTリクエストを送信

hoge.phpにPOSTデータを送信し、結果をコンソールに出力します。

$.post("hoge.php",  {"cd":"100", "name":"Taro"},
  function(dt){
    console.log(dt);
  }
);