LoginSignup
3

More than 3 years have passed since last update.

jQuery メソッド イベント まとめ

Posted at

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');
});

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3