よく使われているjQueryの単語の意味や使い方の事例をまとめました。
要素を取得する・見つける
●parent（指定した要素の親要素を取得する）
$(‘.accordion’).parent().addClass(‘active’); //.accordionの親要素を取得してactiveクラスを追加する
●children（指定した要素の子要素を取得する）
$(‘.accordion’).children().addClass(‘active’); //.accordionの子要素を取得してactiveクラスを追加する
●find（指定した子要素から条件に合致するものを見つける）
$(“.forcus-btn”).click(function () { //forcus-btnをクリックしたら
$(“table”).find(“.forcus”).css(“backgroundColor”, “#ccc”); //tableの中にある.forcusクラスがついている要素の背景を灰色にする
});
要素を動かす・変化を加える
●fadeIn（時間をかけて表示する）
$(‘.article-list’).fadeIn(900); //.article-listが0.9秒かけてフェードイン
●fadeOut（時間をかけて非表示にする）
$(“#splash-logo”).fadeOut(1200); //#splash-logoを1.2秒でフェードアウト
●show（表示にする）
$(‘.btn’).click(function (){
$(‘.article-block’).show(); //.btnをクリックしたら.article-blockを表示
});
$(‘.article-block’).show(); //.btnをクリックしたら.article-blockを表示
});
●hide（非表示にする）
$(‘.btn’).click(function (){
$(‘.article-block’).hide(); //.btnをクリックしたら.article-blockが非表示
});
●slideDown（スライドしながら表示にする）
$(‘.title’).on(‘click’, function(){ //.titleをクリックしたら
$(‘.box’).slideDown(500); //.boxを0.5秒かけてスライドしながら表示
});
$(‘.box’).slideDown(500); //.boxを0.5秒かけてスライドしながら表示
});
●slideUp（スライドしながら非表示にする）
$(‘.title’).on(‘click’, function(){ //.titleをクリックしたら
$(‘.box’).slideUp(500); //.boxを0.5秒かけてスライドしながら非表示
});
$(‘.box’).slideUp(500); //.boxを0.5秒かけてスライドしながら非表示
});
●slideToggle（スライドしながら表示・非表示を切り替える）
$(‘.title’).on(‘click’, function(){ //.titleをクリックしたら
$(‘.box’).slideToggle(500); //.boxを0.5秒かけてスライドしながら表示・非表示
});
$(‘.box’).slideToggle(500); //.boxを0.5秒かけてスライドしながら表示・非表示
});
●animate（値を指定して、アニメーションを実行する）
$(‘#page-top’).click(function () { //#page-topをクリックしたら
$(‘body,html’).animate({ //bodyとhtmlの
scrollTop: 0 //スクロールの位置を0にするアニメーションを実行
}, 500); //ページトップスクロールの速さは0.5秒。
return false; //リンク自体は無効化
});
$(‘body,html’).animate({ //bodyとhtmlの
scrollTop: 0 //スクロールの位置を0にするアニメーションを実行
}, 500); //ページトップスクロールの速さは0.5秒。
return false; //リンク自体は無効化
});
●css（jQueryを使いCSSを操作する）
$(‘.has-child’).children(‘ul’).css(“display”,”block”); //.has-childがついた子要素のulのdisplayをblockにする
値を設定・追加する
●attr（要素に値を設定する、または設定されている値を取得する）
$(‘#page-link a’).click(function (){
var elmHash = $(this).attr(‘href’); //ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得
var pos = $(elmHash).offset().top; //idの上部の距離を取得
$(‘body,html’).animate({scrollTop: pos}, 500); //取得した位置に0.5秒でスクロール
return false; //リンク自体は無効化
});
●append（要素に値を追加する）
$(“#box”).append(‘<ul class=”pagination”>’);// #boxの中身の最後に<ul class=”pagination”>を追加
●appendTo（要素の中身を他の要素に追加する）
$(“.navigation”).appendTo(“.wrapper”) //navigationの内容全てをwrapperの中身の最後に追加
値を取得する
●$(window).width();（ウィンドウの横幅を取得する）
var winw = $(window).width(); //ウィンドウの横幅を取得してwinwという変数に格納する
●$(window).height();（ウィンドウの縦幅を取得する）
var winh = $(window).height(); //ウィンドウの縦幅を取得してwinhという変数に格納する
●outerHeight()（border,paddingを含む要素の外部の高さを取得する）
※()にtrueを指定することで、高さにmarginを含めることもできる。
var headerH = $(“#header”).outerHeight(true); //headerの高さを取得してheaderHという変数に格納する
●scrollTop（スクロール位置を取得・設定する）
var scroll = $(window).scrollTop(); //スクロール値を取得してscrollという変数に格納する
●offset（画面上に配置したHTML要素の表示位置を座標（上からの距離と左からの距離）で取得する。）
var offsetTop = $(‘#area-2’).offset().top; //#area-2のtopの位置を取得し、offsetTopという変数に格納する
var offsetLeft = $(‘#area-2’).offset().left; //#area-2のleftの位置を取得し、offsetLeftという変数に格納する
●Math.round(数値,桁数)（小数点以下を四捨五入する）
var contentsTop = Math.round($(‘#area-3’).offset().top); //#area-3までの高さを四捨五入した値で取得してContentsTopという変数に格納する
●text（HTML要素内にあるテキスト情報を取得・追加・変更する）
var counter = $(“.count-up”).text(); //.count-upのテキスト情報をcounterという変数に格納する
●prop（HTML要素内にあるid,class,nameといった属性や、フォームなどで使われるchecked,selectedなどのプロパティを取得する）
$(“input#join-btn”).prop(“disabled”, true); //#join-btnがついたinputタグの操作を無効化する
●split（文字列を分割する）
var className = $(“.sort-btn li”).attr(“class”); //.sort-btn liのクラス名を取得し
classNameという配列に格納する
className = className.split(”); //クラス名を分割して配列にする
$(“.”+className[0]).addClass(“active”); //上記で取得した配列の0番目にactiveクラスを付与
classNameという配列に格納する
className = className.split(”); //クラス名を分割して配列にする
$(“.”+className[0]).addClass(“active”); //上記で取得した配列の0番目にactiveクラスを付与
