【jQuery】基礎知識のまとめ
はじめに
どうも、NNCの石上です。
今回は、jQueryの超初歩の知識についてまとめたいと思います。
セレクタの指定
HTMLから特定の要素を取得する機能を「セレクタ」と呼びます。
記述形式は以下のようになります。
$(function(){
$(“対象要素”).jQueryの命令を記述
})$(“対象要素”)に続けてjQueryメソッド等を記入することで、その要素に対して命令を実行させることが出来ます。
以下によく利用するセレクタをまとめておきます。
// よく利用するセレクタ
$('*') // 全称セレクタ
$('element') // 要素名セレクタ
$('#id') // idセレクタ
$('.class') // クラスセレクタ
$('親要素 子要素') // 子孫セレクタ
$("要素,要素,要素") // グループセレクタ
$("要素 + 要素") // 隣接セレクタ
$("要素:nth-of-type(番号)") // nth-of-type擬似セレクタ
$("要素:first-of-type") // first-of-type擬似セレクタ
$("要素:last-of-type") // last-of-type擬似セレクタ
$("要素:odd") // 0番目から数えて奇数番目の要素を選択
$("要素:even") // 0番目から数えて偶数番目の要素を選択
$("[href^=’#’]") // href属性の値が#から始まる要素を選択セレクタに対する命令
セレクタで取得した要素に対して、様々な命令を出すことが出来ます。
例えば、CSSの操作やテキストの取得・書き換え、classを追加したり削除したりも出来ます。
// CSSの操作
// 一行の操作
$(function(){
$(“対象要素”).css(“CSSセレクタ”,”値”)
})
// 複数行のCSSを操作
$(function(){
$(“対象要素”).css({
“CSSセレクタ”:”値”,
“CSSセレクタ”:”値”,
“CSSセレクタ”:”値”
})
})// テキストの操作
// テキストを取得
$(function(){
$(“セレクタの指定”).text()
})
// テキストを変更
$(function(){
$(“セレクタの指定”).text(“変更したいテキスト”)
})
$(function(){
$(“セレクタの指定”).text(変数名)
})// HTMLの追加
// 要素の先頭に情報を追加する
$(function(){
$(“セレクタの指定”).prepend(<要素名>テキスト</要素名>)
})
// 要素の最後に情報を追加する
$(function(){
$(“セレクタの指定”).append(<要素名>テキスト</要素名>)
})
// 要素の前に情報を追加する
$(function(){
$(“セレクタの指定”).before(<要素名>テキスト</要素名>)
})
// 要素の後に情報を追加する
$(function(){
$(“セレクタの指定”).after(<要素名>テキスト</要素名>)
})
// 要素の先頭に移動する
$(function(){
$(“セレクタの指定”).prependTo(“移動先セレクタの指定”)
})
// 要素の最後に移動する
$(function(){
$(“セレクタの指定”).appendTo(“移動先セレクタの指定”)
})// 要素を削除する
$(function(){
$(“セレクタの指定”).remove()
})// 配列の長さを取得
$(function(){
$("セレクタ").length;
})
// セレクタがHTML上にいくつ存在するか取得。// スクロール量を取得
$(function(){
$("セレクタ").scrollTop();
})// コンソールログへ値を出力
console.log(文字列や変数);
// 文字列の場合はクォーテーション記号を使う// 属性の操作
// 属性を変更する
$(function(){
$(“セレクタの指定”).attr(“属性名”,“値”)
})
// 属性を取得する
$(function(){
$(“セレクタの指定”).attr(“属性名”)
})
// date属性の取得
<img src="test.jpg" alt="テスト用の写真" data-任意の文字列="test.jpg">
$(function(){
$(“セレクタの指定”).data(“任意の文字列”)
})
// HTML上に記述した「date-」から始まる任意の属性値を取得する// class操作
// class属性の値を削除する
$(function(){
$("セレクタの指定").removeClass("クラス属性の値");
})
// class属性の値を追加する
$(function(){
$("セレクタの指定").addClass("クラス属性の値");
})メソッドチェーン
以下のように記述することで、一つのセレクタに対して連続して命令を出すことが出来ます。
// メソッドチェーン
$(function(){
$("セレクタ").命令().命令().命令();
})イベント
何らかのイベント（クリックやマウスオーバーなど）が発生した時、特定の処理を施すことが出来ます。
// イベント
// セレクタにマウスを乗せた時に実行する命令
$("セレクタ").mouseover(function(){
命令文
})
// セレクタからマウスを外した時に実行する命令
$("セレクタ").mouseout(function(){
命令文
})
// セレクタをクリックした時に実行する命令
$("セレクタ").click(function(){
命令文
})
// セレクタの内容が変わった時に実行する命令
$("セレクタ").change(function(){
命令文
})
// スクロールされるたびに実行する命令
$(window).scroll(function(){
命令文
})
// a要素に指定したhref属性の動きを無効化する
$("a").click(function(){
命令文;
return false;
})変数
変数とはプログラミング上で「値が変わるもの」を入れるための「箱のようなもの」になります。
例えば選んだ商品の数によって「金額が変わる」などのプログラミングを作る場合、この変数を用意する必要があります。
// 変数の定義
// 初期値がある場合
var 変数名（任意） = 初期値（文字列、数値、計算式）;
let 変数名（任意） = 初期値（文字列、数値、計算式）;
// 初期値がない場合
var 変数名（任意）;
let 変数名（任意）;
// 変数名は任意の半角英数字で指定する
// let ではなく var で定義される場合もある
//（letで指定した場合、重複した変数名は使用できない）変数を呼び出す際には呼び出したい場所に変数名を記述、すでに定義した変数の値を上書きする際には「変数名 = 値;」を記述すればOKです。
関数
関数は複数（または単独）の命令をまとめ、任意の場所に何度でも呼び出すことができる記述です。頻繁に記述する命令などを関数にまとめ、必要な箇所に関数名を指定して呼び出します。「関数名();」で呼び出し可能です
function 任意の関数名(){
実行したい内容
}読み込まれてすぐに実行される関数「即時関数」というものもあります。以下のように記述します。
(function(){
実行したい内容
});条件分岐
条件に当てはまる場合とそうでない場合で処理を分けるための記述です。
// If文
if(条件){
条件に当てはまった場合の命令
}
// if・else文
if(条件){
条件に当てはまった場合の命令
}else{
当てはまらない場合の命令
}// 比較演算子
// 条件を作る際に用いられる記述
if( A > B ){
AがBより大きい場合に実行される
}
if( A >= B ){
AがB以上の場合に実行される
}
if( A < B ){
AがBより小さい場合に実行される
}
if( A <= B ){
AがB以下の場合に実行される
}
if( A == B ){
AとBが等しい場合に実行される
}
if( A !== B ){
AとBが等しくない場合に実行される
}
// 論理演算子
if( !A ){
Aに値が存在しない場合に実行される
}こちらの記事はいかがでしたか？
+1
+1
+1
+1
