プログラミングの世界

jQuery 「メソッド」「 イベント」 一覧

初期設定jQueryファイルの 読み込み</body>の直前に書くことで、WEBページの表示速度をより早めることが出来ます
<script src=”ファイルのURL”></script>

jQuery メソッド一覧

classとidをセレクタにする場合class名の前にはドット(.)、id名の前にはシャープ(#)を付けましょう

下記のコードの「’」は小文字に変換して下さい 小文字で掲載してるのですが何故かコピペすると大文字になります?shift+capsloock の問題では無く記事のソースは小文字なんですが 投稿しコピペすると大文字に?解決しましたら編集します

var
変数宣言
「var $変数」 代入「var $変数 = $(‘オブジェクト’);」
メソッドチェーン 「$(‘セレクタ’).メソッド().メソッド();」
attrメソッド
HTMLの属性「ゲット」と「セット」
「$(‘要素’).attr(‘属性名’, ‘属性値’);」属性値を指定することで属性をセットすることができます。そして、第二引数を指定しない場合は、その属性の値を取得できます
animateメソッド
マウスを乗せたらアイコンザイズが変わる
「$(‘セレクタ’).animate({‘プロパティ’:’値’},ミリ秒);」スクロールにアニメーションをつける「$(‘html, body’).animate({‘scrollTop’: 0}, 時間); 」
addClassメソッド
指定した要素にクラスを追加
「$(‘.クラス’).addClass(‘追加したいクラス’);」 追加したいクラスに「.」は不要
cssメソッド
CSSを変更
「$(‘セレクタ’).css(‘プロパティ’, ‘値’);」
childrenメソッド
指定した子要素を取得
「$(“セレクタ”).children(‘要素’);」指定したセレクタが持つ子要素(一階層だけ下)の中から指定したセレクタに合致した要素を取得
 
eqメソッド
オブジェクトの中から、eqの引数の数字と同じインデックス番号の要素を取得
「$(‘オブジェクト’).eq(インデックス番号);」
fadeOutメソッド
アニメーション付きで 要素を隠す
「$(‘セレクタ’).fadeOut();」 ()内アニメーション速度指定 ミリ秒での指定や、文字列での指定が可能 (‘slow’)でゆっくり指定
fadeInメソッド
アニメーション付きで 要素を徐々に表示
「$(‘セレクタ’).fadeIn();」 ()内アニメーション速度指定 ミリ秒での指定や、文字列での指定が可能 (‘slow’)でゆっくり指定
findメソッド
指定したセレクタを持つ要素を取得したいとき
「$(‘セレクタ’).find(‘要素’);」
hideメソッド
要素を隠す
「$(‘セレクタ’).hide();」
 
hasClassメソッド
引数に指定したクラスを、オブジェクトが持っているか判定するときに使用
「対象要素.hasClass( ‘クラス名’ );」 
htmlメソッド
要素の中身のHTMLを書き換える
「$(‘セレクタ’).html(‘タグが使える’);」
 
indexメソッド
クラスがついた要素のインデックス番号を取得する
「$(‘.要素’).index($(this));」
 
lengthメソッド
オブジェクトの要素の個数を取得
「$(‘.オブジェクト’).length;」
 
nextメソッド
同じ階層の要素の中から一つ後ろの要素を取得
「$(‘.オブジェクト’).next();」
offsetメソッド
要素の表示位置を取得する
「$(‘要素’).offset().top;」
 
prevメソッド
同じ階層の要素の中から一つ前の要素を獲得
「$(‘.オブジェクト’).prev();」
 
removeClassメソッド
指定した要素から指定したクラスを取り除く
「$(‘.クラス’).removeClass(‘除きたいクラス’);」 除きたいクラスに「.」は不要
slideUpメソッド
アニメーション付きで 要素を隠す(下から上)
「$(‘セレクタ’).slideUp();」 ()内アニメーション速度指定(‘slow’)でゆっくり指定
scrollTopメソッド
移動にアニメーションをつけたりする
「$(‘html, body’).scrollTop(値);」
slideDownメソッド
アニメーション付きで 要素を隠す(上から下)
「$(‘セレクタ’).slideUp();」 ()内アニメーション速度指定(‘slow’)でゆっくり指定
showメソッド
隠れた要素を表示する
「$(‘セレクタ’).show();」
textメソッド
HTMLそのものを変更する
「$(‘セレクタ’).text(書き換える文字列);」「$(‘セレクタ’).html(‘タグが使える’);」
this.findメソッド
すべての子要素を取得
「$(this).find(‘要素’);」
 
val メソッド
value 属性の値を取得したり 設定したりすることができる
「$(‘セレクタ’).val();」「$(‘セレクタ’).val( value );」「$(‘セレクタ’).val( function( index, value ) ); 」

jQuery イベント一覧

イベントの構文は、$(‘セレクタ’).イベント名(function(){ });のように書きます{ }内に実行したい処理を書きます

thisの構文 $(this)はイベントの中で、そのイベントが起こった要素を取得することができます。$()の中でthisをクオート(”や’)で囲まないことに注意してください
readyイベント
jQueryによる操作を開始
「$(function(){ここにjQueryを書く });」
submitイベント
フォームが送信されたときのイベント
「$(‘#要素’).submit(function() { });」
clickイベント
セレクタがクリックされた時に処理をする
「$(‘セレクタ’).click(function() { });」
hoverイベント
要素にマウスが乗った時、外れた時に指定した処理を行う
$(‘セレクタ’).hover(
function() {
//マウスカーソルが重なった時の処理
},
function() {
//マウスカーソルが離れた時の処理
});