Web言語マスター復活への道/11日目

alice

2021年8月1日 00:16

とうとう連続記録途切れました笑　でもまだ気持ちは切れてないです😤
机が散らかっていたので、もう一つ机購入して、それをコード書く専用の机にしたく、ポチりました。明日届きます。

目標

・jQuery DOM

本日の作業

・jQuery DOM

・書き換え
htmlやcssの要素を指定し、上書きしてあげることができます。htmlのclassには特に文章が記載されていませんが、出力結果には"hello"と表示されています。※htmlとjsファイル分けた記述にしてます

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>JavaScript</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="main.js"></script>
</head>

<body>
   <div class="item"></div>

</body>

</html>

main.js

$(document).ready(function () {
   $(".item").html("<p>hello</p>");
});

結果

この書き換えには変数も指定することができます。これは使えそう

index.html

<p>goodmorning</p>

main.js

$(document).ready(function () {
   var greeding = "p";
   $(greeding).css("color", "red");
});

結果

・cssのプロパティ複数変更
cssから先ほどは1つだけでしたが、複数変更して元のcssにオブジェクトを渡してあげることもできるようです。便利だとはおもったけど、これなら最初からcssファイルの中身変えた方がよいのでは？

・選択対象の変更
オブジェクトの親子孫..と階層になっているケースは、その内部の子孫や親を.parent もしくは.children　で移動することができる。.findとかもありましたが、使うことになりそうであれば適宜別サイト見ようと思います。今は概念だけ。

・要素追加/削除値セット
この先何かと使いそうだったので書いてみました。

main.js

$("item").append();
$("item").remove();
$("item").val(value);

・イベント

リンク先がクリックされると、処理が走るようにするために、clickを使用する。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>JavaScript</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="main.js"></script>
</head>

<body>
   <a class="mylink" href="https://test">test</a>
</body>

</html>

main.js

$(document).ready(function () {
   $(".mylink").click(function () {
       alert("クリック完了");
       return false;
   });
});

結果

所感

jQueryDOMやってて感じたのは、javascriptより理解しやすいなあということです。同じ言語のライブラリなので、2回目をやっているようなものなのですが、なんかわかりやすかったです。
明日の方がしんどそうなので、明日で終わるかな〜？って感じです。

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