2021/12/13
フロントの開発でちょっとしたギミックがほしくなったときによく利用するのが 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におけるメソッドの使い方は以上です。
Udemyを使ったLaravel学習方法
仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら。