jQueryでよく使われるメソッド
JavaScriptの基本が分かると読みやすいかもしれません。ここで登場するクラスはHTMLのclassを表しています。
自分が忘れたときに見る用でもあるので、省略が多く説明が分かりずらかったらご了承ください。
こちらのリンクからの内容でメソッドと簡単な説明を引き抜き、分からない部分を一部噛み砕いて説明している内容です。このサイトはjQueryの学習に重宝しそうです。
サイト内でよく使われているjQueryの単語集 | 動くWebデザインアイディア帳
細かな構文
メソッド名はJavaScriptの慣例で頭文字は小文字。2単語つながったものは次の単語の頭文字が大文字になっている。
例：hasClass fadeOut
jQueryのメソッドの引数「()の中身」に、HTMLクラス名を入れるときはクラス前にドットは要らない。クラス名はクオーテーションで括る。セレクタを指定する$('.class')にはドットが必要
。
例
×：hasClass('.class_name')
〇：hasClass('class_name')
クラスについてのメソッド
hasClass
クラスの存在有無を調べる
値はtureかfalseで返す。if文でよく用いられる
addClass
指定した要素にクラスを追加
removeClass
指定した要素からクラスを除去
toggleClass
指定した要素に、そのクラスがあれば除去、無ければ追加
要素についてのメソッド
parent
指定した要素の親要素を取得する
children
指定した要素の子要素を取得する
find
指定した子要素から条件に合致するものを見つける
条件はcssのプロパティと値など
表示・非表示のメソッド
引数には時間(ミリ秒)を入れる
1000で1秒
fadeIn
時間をかけて表示
fadeOut
時間をかけて非表示にする
show
表示
hide
非表示・隠す
slideUp
上にスライドしていきながら非表示に
slideDown
下にスライドしながら表示
slideToggle
スライドしながら表示・非表示
要素に変化を加える
animate
値を指定して、アニメーションを実行
動きを表現！jQueryのanimateメソッドの使い方 | TechAcademyマガジン
css
cssを操作できる。
$('btn').childeren('text').css("color","red")
引数にはcssのプロパティ名と値を入れる。
値の設定・追加
attr
要素に値を設定。もしくは取得。
引数に'id'、'class'、'href'を入れると、その要素のid,class,href属性の値を取得できる。
2つめの引数に変更するときの値を入れると、その値に変更できる。
$(h1).attr('id','new_id') ←HTML上のh1タグidが「new_id」に変更
append
要素の中身の最後に値を追加する
link is <!-- ←pタグの情報 -->
$('p').append('<a herf="#">here</a>') //pタグに要素を追加
link is here
pタグの内部に要素が追加された。
次のappendToメソッドに加えてこちらのサイトの説明が分かりやすかったです。
appendTo
要素の中身(参照したセレクタの中身)を他の要素(引数内の要素)に追加
値を取得
$(Window).width();
Windowの幅を取得するheightも同様。
outerHeight()
border paddingを含む要素の外部の高さを取得
引数にtrueを入れると高さにmarginを含めることが出来る。
scrollTop()
スクロールの位置を取得する。
引数に値を入れるとスクロール位置の設定が可能
offset()
画面に配置したHTML要素の表示位置を座標で取得。
text
HTML要素内にあるテキスト情報を取得・追加・変更
prop
HTML要素内にある といった属性や、checked・selectedなどのプロパティを取得できる。
いまいちイメージしずらく、多くの機能があってここでは説明が長くなりそうです…。
動くきっかけを指定する
load
画面が読み込まれたあとに動く
$(window).on('load', function(){
//読み込まれた後に行う処理
});
resize
画面がリサイズされたら動く。
リサイズは表示要素を拡大・縮小して大きさを変更すること。
click
要素がクリックされたら動く
scroll
$(window).scroll(function(){
//実行する処理
});
スクロールされた後に動作する。
スクロールしていくと下から記事が浮き出てくるヤツはコレで出来てたみたい。
メソッド等は以上です。これらを組み合わせてWEBサイトによくあるモーダルやハンバーグメニュー、ドロップダウンメニューなど動きのある要素が作られているようです。
