概要
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行目：テキスト値を取り出して表示。
みたいな意味合いになります。
$(function(){
$("#hoge1").value(1);
$("#hoge2").text("aaa");
alert($("#hoge2").text());
});
$(“#[ID名]”) で指定したIDの要素に対しての処理ができます。
$(“.[クラス名]”) で指定したクラスに対して処理したり、 $(“input”)と書いてinputタグ全体に対してなど
要素の指定の仕方もいくつかパターンがあります。
気を付けること＆まとめ
バージョンによってajaxなど、書き方が違ったり廃止されているメソッドが
あったりするので気をつけたほうがいいです。
web開発のいろいろな現場で使われているjquery。
昔からあるライブラリなので検索するといろいろと情報がでてきます。
便利なので使っていきましょう。
コメント