見出し画像

デイトラDay17 jQuery①

kojo@web制作勉強中 | 山好き

jQueryの基本的な書き方

まずはCDNを読み込み。<body>タグ直前に記載しておく。
ただし自作jsファイルより前にすること。

どれを使ってもOK。今回はgoogleにした。

基本文法。
jQuery("主語").動詞("補語");

//javaScriptの場合
document.querySelector("#js-title").innerText = "Hello, javaScript!";

//jQueryの場合
jQuery("#js-title").text("Hello, jQuery!");
//または
$("#js-title").text("Hello, jQuery!");

javaScriptより簡潔でわかりやすい→ミスも減らせる。
（document.querySelector　→　jQuery　とする感じ。）
注：$マークを使う記述は、ＷordPressだとこのままではエラーになるので覚えておく。

下記の書き方が紹介されていることがあるが、これはHTMLをすべて読み込んだ後に処理を実行するための記述。

//ページの読み込みを待機している
jQuery(function(){
  //処理内容
})

CDNを<body>タグ直前に記載しておけば、そもそもすべて読み込んだ後に実行されるのでこの書き方はしなくてよい。

グループセレクタ（複数セレクタをカンマで区切って同時に指定できる）

//h1とh2を同時に指定する。
jQuery("h1,h2").css("color","red");

その他のグループセレクタ　使い方はcssと同様。

//グループセレクタ
//.hoge と .fuga
jQuery(".hoge, .fuga")

//子孫セレクター
//.hoge 配下の .fuga
jQuery(".hoge .fuga")

//子セレクター
//.hoge 直下の .fuga
jQuery(".hoge > .fuga")

繰り返し処理

jQueryでセレクタを指定すると、一致するすべての要素を取得する。

//index.html
 <p class="text">text1 jsの勉強中</p>
 <p class="text">text2 JavaScript学習中</p>
 <p class="text">text3 jQuery学習中</p>
//script.js

const elements = jQuery(".text");
console.log(elements.text());
 コンソール：テキストが３つつながって出力された。

「each」で一つずつ取り出して出力する。繰り返し処理。
JavaScriptの「forEach」と似ている。

//script.js

const elements = jQuery(".text");

elements.each(function (){
  console.log(jQuery(this).text());
});
コンソール：１つずつ出力された。

メソッドを使った要素の指定

子孫要素、子要素内を検索して指定

//子孫要素から検索
jQuery("#js-section").find("p").css("color", "red");

//直下の子要素から検索
jQuery("#js-section").children("p").css("color", "red");

その他いろいろ　（はしょった。。）

この辺は使いながら慣れていきましょー。


この記事が参加している募集

#勉強記録

8,374件

この記事が気に入ったらサポートをしてみませんか？