[jquery]jqueryとは? 読み込み方・cdnの使い方など

概要

jqueryのあれこれを記載します。

jqueryとは?

javascriptでもできますが、HTMLなどのタグ操作を簡単にできるようにしたライブラリです。
jqueryの中身もjavascriptで書かれていて、ソースを読むこともできます。

準備

読み込む

ダウンロードして読み込み

jqueryのjsファイルをダウンロードして、scriptタグで絶対または相対パスでリンクします。
こちらからダウンロードして、好きなディレクトリに配置します。

CDN

外部サーバーのパスを書きます。headタグの中に下記のように書いておけばいいかと思います。

jqueryのサーバー

<script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous"></script>

googleのサーバー

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

jqueryを書く

ページ読み込み時の処理

下記のように記述すると、ページ読み込み時に実行されます。

$(function(){
  alert("hoge");
});

HTML要素の操作

<input id="hoge1" type="text" value="" />
<div id="hoge2"></div>

上記のようなHTMLがあった場合に、下記で
1行目:id=”hoge1″のテキストに値をセットする。
2行目:id=”hoge2″に文字列をセットする。
3行目:テキスト値を取り出して表示。
みたいな意味合いになります。

$(“#[ID名]”) で指定したIDの要素に対しての処理ができます。
$(“.[クラス名]”) で指定したクラスに対して処理したり、 $(“input”)と書いてinputタグ全体に対してなど
要素の指定の仕方もいくつかパターンがあります。

$(function(){
  $("#hoge1").value(1);
  $("#hoge2").text("aaa");
  alert($("#hoge2").text());
});

気を付けること&まとめ

バージョンによってajaxなど、書き方が違ったり廃止されているメソッドがあったりするので気をつけたほうがいいです。
web開発のいろいろな現場で使われているjquery。昔からある(10年くらい前に流行った気がします?)ライブラリなので検索すると沢山情報がでてきます。
便利なので使っていきましょう。

参考

CDNでWEBサイトを高速化!CDNを利用する場合のメリットとデメリット

コメント

タイトルとURLをコピーしました