jQuery メソッドチェーンとメソッドの種類の使い方
jQuery メソッドの種類の使い方
メソッドは何らかの処理を実行するためにあります。
$(“セレクタ”).メソッド(パラメータ);
メソッドの前には.をつけます。
jQueryのメソッドはいろいろな種類に分類できます。
css系のメソッド
css系のメソッドはcssを操作するするメソッドです。
例
$(“セレクタ”)css(パラメータ);
属性系のメソッド
html要素の属性を設定する感じです。
imgのhref属性等。
html系のメソッド
htmlの要素を追加したり削除したりできます。
トラバース系のメソッド
トラバーストは横断です。
htmlを横断して要素を検索したりします。
エフェレクト系のメソッド
アニメーションとかえふぇれくと効果を与えます。
イベント系のメソッド
イベント系は処理を開始するタイニングを指定します。
クリックイベントとか。
ajax系のメソッド
ajaxはajaxを操作するメソッドです。
分類はできますが個別に覚えれば問題ないでしょう。
jQuery メソッドチェーン
メソッドチェーンとは
一つの要素に対してまとめてかくことができます。
いちいちそのたびに要素をしていするの面倒ですよね。
処理をまとめて書くことによりプログラムの呼び出し回数が減り高速化します。
チェーンとは鎖です。
つないでかくのが鎖みたいだからです。
$(“セレクタ”).メソッド(パラメータ).メソッド(パラメータ);
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“.Green ~ h3”).css(“font-size”,”72px”).css(“font-style”,”italic”);
});
</script>
<title>
</title>
</head>
<div>
<h3>red</h3>
<h3 class = “Green”>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</div>
</body>
</html>
cssを二回メソッドチェーンでつなぎました。
同じメソッドではなくて違うメソッドを使えますがよりわかりやすく書きました。
複数のcssをまとめて書くことはできますが次回書くことにします。
