jQuery入門(メソッド編)

2019/06/20

フロントの開発でちょっとしたギミックがほしくなったときによく利用するのが jQuery 。

しかし、Laravel の勉強で手いっぱいになり jQuery まで手が回らなかったりします。

そんなわけで前回、jQuery のセレクタ編をエントリーしました。

今回はその続きで jQuery のメソッドについてエントリーします。

 

メソッドとは?

メソッドとは?PHPのオブジェクト指向でも出てきますよね?

jQuery に限らず、ほとんどのスクリプト言語では「メソッド」という仕組みが必要です。

これによってオブジェクトを操作します。jQuery オブジェクトもメソッドで操作します。

 

書式

jQueryオブジェクト(セレクタを含む)とメソッドは以下のようにドットを挟んで記述します。

このような構文を「ドットシンタックス」と呼びます。

これで「誰(オブジェクト)」が何をする(メソッド)という最小限の処理が完成します。


$( セレクタ ).メソッド( 引数 )

ポイント

メソッドによっては引数は必要はありません。セレクタとメソッドの間にはドットを忘れずに!

それでは実際にどのように使うのかサンプルを通して学んでいきます。

 
INDEX

 

textメソッド

要素内のテキストを取得、書き換えをするメソッドです。


$('p').text('こんにちは');

 

ポイント

HTMLタグも書けるようにするには htmlメソッドを使います。


$('p').html('<h1>こんにちは</h1>');

 

clickメソッド

要素をクリックしたらイベントを起こすメソッドです。

先ほどの text メソッドを使用しています。


$("p").click(function(){
  $(this).text("textメソッドでテキストが書き換わりました");
})

 

 

addClassメソッド

要素にクラスを追加するメソッドです。


$("p").addClass('color');

 

ポイント

逆に要素からクラスを削除する場合はremoveClassメソッドを使います。


<p class="color">こんにちは!</p>
<script>
  $("p").click(function(){
    $(this).removeClass('color');
  })
</script>

 

attrメソッド

HTML要素の属性を取得したり設定することができるメソッドです。

text メソッドを使って変数を出力しました。


var result = $('p').attr('id');
$("#output").text("p要素のIDは" + result + "です。");

 

 

changeメソッド

select 要素、input 要素、textarea 要素の値が変更されたらイベントを発生させます。


$("select").change(function(){
  var result = $('option:selected').val();
  $("#output").text("セレクトボックスで " + result + " が選択されました。");
})

 

 

dataメソッド

データ属性を取得します。


var result = $('p').data('name');

 

 

cssメソッド

CSSを設定・追加・取得・変更などが出来るメソッドです。


$('p').css('color', '#f00');

 

findメソッド

指定した要素から、指定した条件に合致する子孫要素を選択します。

先ほどのcssメソッドをチェーンして使いました。


$("ul").find("li").css("color", "red");

 

 

hideメソッド

指定した要素(セレクタ)を非表示にするメソッドです。


$("button").click(function(){
  $("p").hide();
});

 

ポイント

逆に非表示状態にある要素を表示するメソッドはshowメソッドを使います。


<div id="show">みなさん!</div>
<div style="display: none;">こんにちは!</div>

<script>
  $("#show").click(function(){
    $("div").show();
  });
</script>

 
また、showメソッドとhideメソッドの機能をまとめたメソッドにtoggleメソッドがあります。

 
jQueryにおけるメソッドの使い方は以上です。

 

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

Stack Overflow によると、よく使われているプログラミング言語はJavaScriptが7年連続で第1位だそうです。(2019年現在)わからない箇所だけネットで調べるやり方は知識が断片化するので、いつか、本を読んでJavaScriptの知識を体系的に整理したいと思っていました。この本はAmazonでも評価が高く、以前から気になっていた本です。図解と実行結果、短めのサンプルプログラムと見やすく解りやすかったのでおススメですね。「超」入門と書いてありますが、後半になると jQueryAjax の内容が出てきます。Ajaxの情報はネットでもあまりなかったので僕にとってはよかったです。

Amazonで詳細を見る

オススメ

 

本庄マサノリ

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら

>> Twitter をフォローする

 

-周辺知識