jQueryでよく使う関数

目次

1.css()
2.fadeOut()
3.prepend()
4.append()
5.before()
6.after()
7.addClass()
8.animate()
9.find()
10.index()
11.hover()
12.data()
13.eq()

1.css()

jQueryからスタイルシートを設定・追加・取得・変更などが出来る便利なメソッド

$("p").css("background-color","pink");

↑例だと、Pタグに対して背景色ピンクを指定することができる。

$("p").css({"background-color":"pink","font-size":"10px"});

↑複数のプロパティを指定する場合は{}で囲み【"セレクタ":"値"】のように指定する。

2.fadeOut()

要素を少しづつ非表示にするメソッド

$("h1").fadeOut();

↑HTML要素に対して指定すると徐々に非表示にすることができる。
秒数を指定したい場合は、引数に時間を入力する

$("h1").fadeOut(2000);

↑時間は『ミリ秒』で指定する必要があるため、上記の例だと２秒かけて非表示にするアニメーションが作れる。

3.prepend()

指定した要素の先頭にテキストやHTML要素を追加するメソッド

<p>こんにちは</p>

↑この要素にテキストを追記したい場合

$("p").prepend("山田さん");

↑引数に追加したいテキストを指定すると

<p>山田さんこんにちは</p>

↑実行結果。テキストを追記できる。

4.append()

指定した要素の最後にテキストやHTML要素を追加するメソッド

<p>こんにちは</p>

↑この要素にテキストを追記したい場合

$("p").append("山田さん");

↑引数に追加したいテキストを指定すると

<p>こんにちは山田さん</p>

↑実行結果。テキストを追記できる。

5.before()

指定要素の直前にHTMLを挿入できる」メソッド

<div>
  <p>こんにちは</p>
</div>

↑こちらにHTMLを挿入してみる。

$("div p").before("<h1>初めまして</h1>");

↑引数にh1タグを指定する。

<div>
  <h1>初めまして</h1>
  <p>こんにちは</p>
</div>

↑実行結果。指定したpタグの前にh1タグが挿入される。

6.after()

指定要素の直後にHTMLを挿入できる」メソッド

<div>
  <p>こんにちは</p>
</div>

↑こちらにHTMLを挿入してみる。

$("div p").after("<h1>初めまして</h1>");

↑引数にh1タグを指定する。

<div>
  <p>こんにちは</p>
  <h1>初めまして</h1>
</div>

↑実行結果。指定したpタグの次にh1タグが挿入される。

7.addClass()

任意の要素にclass属性を追加することができるメソッド

.colorPink {
  color: pink;
}

↑例として文字色をピンクにするcolorPinkクラスを作成。

<div>
  <p>こんにちは</p>
  <h1>初めまして</h1>
</div>

↑このHTML要素にクラスを追加してみる。

$("h1,p").addClass("colorPink");

↑h1とpタグに『colorPink』を追加。

<div>
  <p　class="colorPink">こんにちは</p>
  <h1 class="colorPink">初めまして</h1>
</div>

↑実行結果。h1とpタグにクラスが追加される。

8.animate()

cssのプロパティを一定時間かけて変更するメソッドである。

<div>
  <p>こんにちは</p>
  <h1>初めまして</h1>
</div>

↑このHTML要素にanimate()を使ってみる。

$("p").animate({"font-size": "10px",color: blue},2000);

↑第一引数にフォントサイズが10pxで文字色が青、第二引数に秒数を指定。（ミリ秒指定）。
pタグが２秒かけて、フォントサイズが10pxで文字色が青に変化するアニメーションが作成される。

9.find()

対象となる要素から下にある階層をすべて辿って目的の「子要素」を取得することができるメソッド

<ul>
  <li>こんにちは</li>
  <li>初めまして</li>
  <li>こんばんわ</li>
</ul>

↑このHTML要素にfind()を使ってみる。

var test = $("ul").find("li");

console.log( test[0] );

↑ulタグに対して、find("li")とすることで、ulの階層下のliを取得できる。
上記では取得した値を変数に挿入している。
コンソールで見てみると

<li>こんにちは</li>

↑liを取得できている。

10.index()

指定したセレクタの順番を取得するメソッド

<ul>
  <li>こんにちは</li>
  <li>初めまして</li>
  <li>こんばんわ</li>
</ul>

↑このHTML要素にindex()を使ってみる。

$("#ul").find("li").click(function(){
    var number = $(this).index();
    console.log(number);
    });

↑ul内のliをクリックしたら、indexで順番を取得し、numberに格納している。
最初のliをクリックすると

0

↑実行結果。　

11.hover()

マウスが要素にホバーした時に、アクションを加えることができるメソッド。

  <p>こんにちは</p>
  <h1>初めまして</h1>

↑このHTML要素にhover()を使ってみる。

$("p").hover(function(){

  //マウスオーバー時の処理
  $(this).css("color",red);

},function(){

  //マウスアウト時の処理
  $(this).css("color",blue);

});

↑引数は関数を指定し、その中に第一引数にマウスオーバー時、第二引数にアウト時の処理を指定。
pタグにカーソルを合わすと文字が赤になり、離すと文字が青になるアクションを加えることができる。

12.data()

HTML要素内に付与されたdata属性に対して、取得・設定・変更などが簡単に行えるメソッド

<p data-name="kazuo" data-age="25" data-tel="080-1234-5678">私はカズオです</p>

↑任意で設定したdata属性を取得してみる。

const result = $('p').data();
 
    console.log( result );

↑pタグに対してdata()を実行し変数に格納し、コンソールに結果を出してみる。

{age: 25, name: "kazuo", tel: "080-1234-5678"}

↑実行結果。data属性を取得できる

const result = $('p').data("name");
 
    console.log( result );

↑引数にdata属性名を指定すれば個別に取得することも可能。

kazuo

↑実行結果。
次にdata属性を設定してみる。

$('p').data("mail","[e-mail]");

const result = $('p').data("mail");
 
    console.log( result );

引数に(データ属性名,値)とすることで新しくdata-mail属性名の[e-mail]が値のdata属性を設定できる。

[e-mail]

↑実行結果。
次にdata属性を変更してみる。

 $('p').data('drink', 'water');
 
    console.log( $('p').data('drink') );
 
 
    $('p').data('drink', 'soda');
 
    console.log( $('p').data('drink') );

↑引数に変更したいデータ属性名とその値を指定する。
data-drink属性の値はwaterからdata-drink属性の値はsodaに変更している。

water
soda

↑実行結果。

13.eq()

複数のHTML要素の中からインデックス番号を指定することで特定の要素だけを取得できるメソッド

<ul>
  <li>こんにちは</li>
  <li>初めまして</li>
  <li>こんばんわ</li>
</ul>

↑このHTML要素から特定の要素を取得してみる

var test = $("li").eq(1).text();
console.rog(test);

↑引数に取得したい要素のインデックス番号を指定。

初めまして

↑実行結果。liのインデックス番号１の『初めまして』が取得できる。

var test = $("li").eq(-1).text();
console.rog(test);

↑負の値を指定することもできる。-1は最後、-2は最後から数えて２番目の要素を取得できる。

初めまして

↑実行結果。