jQueryとは?
Javascriptを簡単に扱うライブラリです。
ファイルの読み込み
HTMLファイルのheadファイル内に下記のように書きます。
今回は、別ファイル(main.js)を読み込んでそこにjQueryのコードを書いていきます。
※スクリプトを読み込む場合は
<head>
...
<title>タイトル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="./main.js"></script>
</head>
基本文法
$(function() {
セレクタ = 処理対象となるDOM要素を指定するやり方
メソッド = 処理
});
メソッドチェーン
メソッドは、ドットで繋げて複数書くことができる
$('#main').css('color', 'blue').fadeOut(3000);
idやclassを指定する
html.index
<ul>
<li id="list">青色文字</li>
<li class="list">赤色文字</li>
<li></li>
</ul>
main.js
$('#lists > .list').css('color', 'blue')
$('.list').css('color', 'red')
その他セレクタの指定方法
$('#list') //直下の子要素
$('.list, p') //複数の要素
$('#main').parent() //親要素を指定する
$('#main').children() //子要素を指定する
$('').next() //その次の要素を指定する
$('').prev() //その前の要素を指定する
$('').siblings() //兄弟要素を指定する
要素にcssを当てる
$('#main').css('color', 'blue')
特定のcssを適用させたり外したり
addClass/removeClass
$("p").addClass("CSSクラス名");
削除する場合
$("p").removeClass("CSSクラス名");
属性の値を指定する
.attr
$('a').attr('href');
$('a').attr('href', 'https://〇〇.jp/'); //書き換え
タグの中身を書き換える
$('p').text('最高です'); //p要素を書き換える
$('p').html('<a href="#">リンク名</a>'); //p要素をaタグに書き換える
値を書き換える
helloがgoodbyeに書き換わる
<input type="text" value="hello">
$('input').val('goodbye');
中身を無くす
$('p').empty //要素の中身を無くす
$('p').remove //要素自体を無くす
新しく要素を作る
var li = $('<li>').text('NEW TEXT');
エフェクト
$('要素').hide(); //要素を隠す
$('要素').show(); //要素を表示
$('要素').fadeIn(); //フワッと表示
$('要素').fadeOut(); //フワッと消す
$('要素').toggle(); //表示<=>消す
引数に時間などを指定できるオプションが使える
コールバック関数
〜が終わった後に処理を行う
$('要素').fadeOut(800, function() {
//フワッと消えたあとの処理を書く
});
イベント
指定された要素が〜されたら処理を実行する
$('要素').click(function) {
//要素がクリックされたときの処理を書く
});
| イベント一覧 | イベント発生タイミング |
|---|---|
| .dblclick() | ダブルクリックされた時 |
| .keydown() | キーを押し下げた時 |
| .keyup() | 押し下げたキーを離した時 |
| .mouseover() | 要素にマウスカーソルに乗った時 |
| .mouseout() | 要素からマウスカーソルが離れた時 |
| 上記の他にもありますので jQuery公式サイト をご確認ください。 |
フォームで使うイベント
nameのフォームがフォーカスが当たった時は背景赤になり、外れたら背景白になるコード
$('#name').focus(function() {
$(this).css('background', 'red');
});
$('#name').blur(function() {
$(this).css('background', 'white');
});