jQueryの「メソッド一覧」と使い方

2020年4月6日

jQueryの沢山あるメソッドの一覧を解説してほしい

jQueryのメソッド一覧を確認して、jQueryを自由に操れるようになろう！

jQueryの命令文にあたるメソッドには便利な機能が数多く存在するので、一覧で確認しながら順番にその機能をマスターしていこう！

jQuery・JavaScriptを自由に書けるようになりたい！

JavaScriptを自在に操ってゴリゴリ動きのあるサイトを作れるスキルが欲しい！と思った事はないだろうか？

そんな方は実際に私も受講したCodeCamp（コードキャンプ）というオンラインスクールがおすすめ！ JavaScript等のフロントエンドはもちろん、全30以上のカリキュラムを学び放題で値段そのままという神コースが登場し、私も速攻受講したので、私の受講体験をチェックしてみよう↓↓

私が実際｢コードキャンプ｣を受講した結果・評判を解説！

「LINEや、ガンホー、アクサ生命」など大企業も社員研修として利用しているお墨付きのスクールとは？

jQueryの基本構文のおさらい

ｊQueryの基本構文をおさらいすると、jQueryでは「いつ・何を・どうする」という形式で記述していくのが基本だ。

メソッドの基本形は.メソッド("パラメータ[引数]")という形だ。

jQueryのメソッドとは

上記の基本構文の中で「どうする」にあたるのがメソッド。つまりjQueryの命令文にあたるメソッドは、jQueryで何をしたいかという一番大事な部分なので、メソッドを数多く理解する事で、jQueryで「できる事の幅が広がる」という事になる！

jQueryのメソッド一覧

まずはメソッドの一覧を見ながら、jQueryにはどういう機能があるのがを確認していこう！

具体的な使い方は表の中の「リンク」から確認してみよう。

メソッド	意味	パラメータ追加時
.css()	CSSの値を取得or書き換え	指定のCSSスタイルに変更
.html()	要素の値をHTMLとして取得or書き換え	指定のhtmlに書き換える
.text()	要素の値をテキストとして取得or書き換え	指定のテキストに書き換える
.prepend()	要素内の先頭にHTMLを挿入	【必須】挿入するhtmlの指定
.append()	要素内の末尾にHTMLを挿入	【必須】挿入するhtmlの指定
.prependTo()	要素内の先頭にHTMLを挿入	【必須】移動先の指定
.appendTo()	要素内の末尾にHTMLを挿入	【必須】移動先の指定
.before()	指定した要素の前にHTMLを挿入	【必須】挿入するhtmlの指定
.after()	指定した要素の後にHTMLを挿入	【必須】挿入するhtmlの指定
.insertBefore()	指定した要素を、任意の要素の前に移動	【必須】移動先の指定
.insertAfter()	指定した要素を、任意の要素の後に移動	【必須】移動先の指定
.wrap()	指定した要素を、任意の要素で包む	【必須】包む要素の指定
.unwrap()	指定した要素を囲んでいるタグを削除する
.wrapAll()	指定した要素が複数ある場合に、任意の要素で包む	【必須】包む要素の指定
.wrapInner()	指定した要素の子要素やテキストを、任意の要素で包む	【必須】包む要素の指定
.replaceWith()	指定した要素そのものを、任意の要素に置き換える	【必須】置き換える要素を指定
.replaceAll()	指定した要素そのものを、任意の要素に置き換える	【必須】置き換える対象をセレクタで指定
.remove()	指定した要素を削除
.attr()	属性値の取得or設定	指定の値に設定・変更
.vall()	指定した要素のvalueの値を取得or設定する	指定の値に設定・変更
.prop()	指定した要素のプロパティを取得or設定する	指定の値に設定・変更
.removeAttr()	指定した要素の任意の属性を削除	【必須】削除する属性を指定
.addClass()	クラスを追加	【必須】追加するクラスを指定
.removeClass()	クラスの削除	【必須】削除するクラスを指定
.toggleClass()	クラスの追加・削除を切り替える
.reverse()	指定した配列の順序を逆順にする
.makeArray()	jQueryオブジェクトを配列に変換する	【必須】変換するjQueryオブジェクトを指定
.has()	指定した要素が子要素を持っているかを判定する	【必須】判定する子要素を指定
length	指定した要素の数を取得する
.parent() .parents()	親要素を取得する
.find()	指定した要素の子要素をすべて取得する
.children()	指定した要素の直下の子要素を取得する
.clone()	指定した要素のコピーを作成する
.eq()	指定した要素において、その順番で指定して取得する	要素の順番を０から始まる数字で指定
.get()	指定した要素をDOMオブジェクトとして取得する	指定した順番の要素を取得
.prev()	指定した要素の直前の兄弟要素を取得	さらに限定して要素の条件を指定
.prevAll()	指定した要素の前にある兄弟要素を全て取得する
.prevUntil()	指定した要素の前にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得	どこまで取得するかの条件を指定
.next()	指定した要素の直後の兄弟要素を取得
.nextAll()	指定した要素の後にある兄弟要素を全て取得する
.nextUntil()	指定した要素の後にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得	どこまで取得するかの条件を指定
.siblings()	指定した要素の兄弟要素を全て取得	さらに限定して要素の条件を指定
.closest()	指定した要素から最も近い指定の親要素を取得	【必須】要素の条件を指定
.contents()	指定した要素の子要素・テキストノードを全て取得
.hide()/.fadeOut	要素を非表示にする	ミリ秒でスピードを指定
.show()/fadeIn	非表示要素を表示する	ミリ秒でスピードを指定
.fadeTo()	透明度を変更する	【必須】ミリ秒でスピードを指定、変更する透明度を指定
.sildeUp()	スライドアップさせて非表示にする	ミリ秒でスピードを指定
.slideDown()	スライドダウンさせて表示させる	ミリ秒でスピードを指定
.slideToggle()	スライドアップ・ダウンを切り替えて表示・非表示させる	ミリ秒でスピードを指定

jQueryのメソッドチェーンの使い方

jQueryでは、ひとつのセレクタで指定した要素に対して、複数のメソッドを適用する、メソッドチェーンという記述方法がある。メソッドチェーンに関する詳しい使い方はこちらの記事を参考にしてみよう。

▶ jQueryのメソッドチェーンの使い方

jQueryで同じ要素に対して複数のメソッド（命令）を適用させていた時に、便利な記述方法は無いだろうか？ …

jQueryのセレクターおさらい

jQueryのセレクターは普段使うもの以外にも結構さまざまな便利なセレクターがあるので、復習しておきたい方はこちらの記事をチェックしておこう↓

▶ jQueryの全セレクタのまとめ「完全マスター辞典！」

jQueryのセレクタは数がお多いので、ひと通りまとめられたものが見たい！確かに数が多いが、普段良く使うものは限られて…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント