セレクタ・メソッド・イベント - まとめ

jQuery高速化

Webサイトのパフォーマンスを重視するために、古いブラウザでは「1.x系」モダンブラウザでは「2.x系」とインクルードするjQueryファイルを分けて記述します

<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!--<![endif]-->

1.x系のみで対応

古いブラウザに対応することが決まっている場合は、1.x系のみの記述でよいでしょう

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

セレクタ（どの箇所に対して）

CSS セレクタと同様の記述

ClassよりもIDを指定する

idで指定した方が、classで指定するよりも3倍速いことが実証されています

セレクタはシンプルに書く

継承のルートをすべて記述しない
セレクタを指定する時はターゲットまで最小限の指定をする

HTML要素で指定

特定要素の指定は、子孫セレクタよりも子セレクタで指定する
子孫セレクタは、子要素（子要素の子要素：孫要素も対象）すべてを対象
子セレクタは、直下の子要素のみを対象
子孫セレクタで設定する必要がある場合は、全ての継承を記述しないでシンプルに記述する

同じセレクタは変数化する

その都度同じセレクタを指定すると、jQueryは、毎回そ処理を行います
その分遅くなるので、一度指定したセレクタを変数に入れて再利用します

メソッド（何をさせる）

CSSで記述できるものはCSSで記述する
CSSではできない動きを実現するのがメソッド
つまり、jQueryを使うということは「メソッドをどう記述するか」につきます

DOMの操作は最小限に抑える

DOMの操作は重いのでタグのスタイルを変更したい場合は、直接操作するのではなく、スタイルシートにスタイルを記述してクラスを変えるようにします

連続処理はメソッドチェーンを使う

「同じセレクタは変数化する」処理は、メソッドチェーンを使って処理を実行をすることもできます
ただし、変数化するよりも必ず処理速度が早いわけではありません

イベント（どのタイミングで）

任意のタイミングでせってしたセレクタに対してメソッドを実行することが可能になります
onメソッド（イベント）が最も重要

「要素」を選ぶ

idセレクタ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>idセレクタ</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('#test').on('click', function() {
    $(this).text("クリックされました");
  });
});
</script>
</head>
<body>
<p id="test"><a href="#">idセレクタ：ココをクリックすると文字が変更されます</a></p>
</body>
</html>

classセレクタ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>classセレクタ</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('.test').on('click', function() {
    $(this).text("クリックされました");
  });
});
</script>
</head>
<body>
<p class="test"><a href="#">classセレクタ：ココをクリックすると文字が変更されます</a></p>
</body>
</html>

要素セレクタ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>要素セレクタ</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('click', function() {
    $(this).text("クリックされました");
  });
});
</script>
</head>
<body>
<p class="test"><a href="#">classセレクタ：ココをクリックすると文字が変更されます</a></p>
<div><a href="#">（これは、divタグ）ココをクリックしても何も起こりません</a></div>
<ul>
<li><a href="#">（これは、liタグ）ココをクリックしても何も起こりません</a></li>
</ul>
</body>
</html>

子孫セレクタ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子孫セレクタ</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('div p').on('click', function() {
    $(this).text("クリックされました");
  });
});
</script>
</head>
<body>
<div><p><a href="#">（divの中のpタグ）ココをクリックすると文字が変わります</a></p></div>
<p class="test"><a href="#">（これは、pタグ）ココをクリックしても何も起こりません</a></p>
</body>
</html>

「実行タイミング」を選ぶ

クリックイベント

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>クリックイベント</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('click', function() {
    $(this).text("クリックされました");
  });
});
</script>
</head>
<body>
<p><a href="#">ココをクリックすると文字が変更されます</a></p>
</body>
</html>

マウスオーバーイベント

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マウスオーバーイベント</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('mouseover', function() {
    $(this).text("マウスオーバーしました");
  });
});
</script>
</head>
<body>
<p><a href="#">ココにマウスを乗せると文字が変更されます</a></p>
</body>
</html>

マウスアウトイベント

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マウスアウトイベント</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('mouseout', function() {
    $(this).text("マウスアウトしました");
  });
});
</script>
</head>
<body>
<p><a href="#">ココからマウスを外すと文字が変更されます</a></p>
</body>
</html>

実行する処理を書く

テキストボックスの色を変更する

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テキストボックスの色を変更する</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('input').on('focus', function(){
    $('input').css('background-color', '#ff0')
  }).on('blur', function(){
    $('input').css('background-color', '#fff')
  });
});
</script>
<style>
input {
  width: 50%;
  height: 30px;
}
</style>
</head>
<body>
<p><input type="text" value="フォーカスすると黄色になって、外すと元に戻ります"></p>
</body>
</html>

マウスオーバーでdivの背景色を変更する

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マウスオーバーでdivの背景色を変更する</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('#bg01').on('mouseover', function () {
    $(this).css("background-color","#666");
  });
  
  $('#bg02').on('mouseover', function () {
    $(this).css("background-color","#999");
  });
  
  $('#bg03').on('mouseover', function () {
    $(this).css("background-color","#ccc");
  });
  
  $('#bg04').on('mouseover', function () {
    $(this).css("background-color","#eee");
  });
});
</script>
<style>
div {
  display: inline-block;
  padding: 18px;
  margin: 10px;
  border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="bg01">01</div>
<div id="bg02">02</div>
<div id="bg03">03</div>
<div id="bg04">04</div>
</body>
</html>

マウスオーバーでdivをフェードアウトする

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マウスオーバーでdivをフェードアウトする</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('#bg01').on('mouseover', function () {
    $(this).fadeOut('slow');
  });
});
</script>
<style>
div {
  display: inline-block;
  padding: 18px;
  margin: 10px;
  border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="bg01">マウスオーバーするとフェードアウトします</div>
</body>
</html>

クリックで新しいdivを作り出す

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マウスオーバーでdivをフェードアウトする</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('click', function () {
    $('p').after('<div>test</div>');
  });
});
</script>
<style>
div {
  display: inline-block;
  padding: 18px;
  margin: 10px;
  border: 1px solid #ccc;
}
</style>
</head>
<body>
<p><a href="#">ココをクリックすると新しいdivが作られます</a></p>
</body>
</html>

クリックでdivの幅と高さを変更する

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>クリックでdivの幅と高さを変更する</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('div').on('click', function () {
    $(this).css('width','40px').css('height','40px');
  });
});
</script>
<style>
div {
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 18px;
  margin: 10px;
  border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="bg01">01</div>
<div id="bg02">02</div>
<div id="bg03">03</div>
<div id="bg04">04</div>
</body>
</html>

クリックでclassの付け替えをする

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>クリックでclassの付け替えをする</title>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  $('p').on('click', function () {
    if($(this).hasClass('on')){
      $(this).removeClass('on');
      $('a',this).text('ココをクリックすると「on」というclassがつきます')
    } else {
      $(this).addClass('on'); 
      $('a',this).text('「on」というclassがつきました。もう一度クリックすると元に戻ります')
    }
  });
});
</script>
<style>
.on {
  background: #ccc;
}
</style>
</head>
<body>
<p><a href="#">ココをクリックすると「on」というclassがつきます</a></p>
</body>
</html>