読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

セレクタを使う

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>

セレクタ(どの箇所に対して)

ClassよりもIDを指定する
  • idで指定した方が、classで指定するよりも3倍速いことが実証されています
セレクタはシンプルに書く
  • 継承のルートをすべて記述しない
  • セレクタを指定する時はターゲットまで最小限の指定をする
HTML要素で指定
  • 特定要素の指定は、子孫セレクタよりも子セレクタで指定する
  • 子孫セレクタは、子要素(子要素の子要素:孫要素も対象)すべてを対象
  • セレクタは、直下の子要素のみを対象
  • 子孫セレクタで設定する必要がある場合は、全ての継承を記述しないでシンプルに記述する
同じセレクタは変数化する
  • その都度同じセレクタを指定すると、jQueryは、毎回そ処理を行います
  • その分遅くなるので、一度指定したセレクタを変数に入れて再利用します

メソッド(何をさせる)

  • CSSで記述できるものはCSSで記述する
  • CSSではできない動きを実現するのがメソッド
  • つまり、jQueryを使うということは「メソッドをどう記述するか」につきます
DOMの操作は最小限に抑える
  • DOMの操作は重いのでタグのスタイルを変更したい場合は、直接操作するのではなく、スタイルシートにスタイルを記述してクラスを変えるようにします
連続処理はメソッドチェーンを使う
  • 「同じセレクタは変数化する」処理は、メソッドチェーンを使って処理を実行をすることもできます
  • ただし、変数化するよりも必ず処理速度が早いわけではありません

イベント(どのタイミングで)

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

JavaScriptの読み込み順序

  • HTMLをすべて読み込み後に、jQueryの処理を実行する
<script>
$(document).ready(function(){
  //この中に処理を記述
});
</script>


この記述であれば、bodyの終了タグの前でも、script内でも問題なく動作します。


短縮形

<script>
$(function(){
  //この中に処理を記述
});
</script>

デバッグ

  • jQueryJavaScriptの動作確認やエラーチェックをする作業
  • 変数の値を確認するには、console.log( 変数名 ) を記述する




HTML要素を指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:要素に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('要素名')に対してstyle='color:#f00;'を設定
  $('div').css('color','#f00');  //文字を赤色に

});
</script>
</head>
<body>
<div name="test"> 
<p>これはdiv要素の子要素</p>
</div> 
<p>これはp要素</p>
</body>
</html>




name属性を指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:name属性に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('name属性=name属性値')に対してstyle='color:#f00;'を設定
  $('[name="test"]').css('color','#f00');  //文字を赤色に

});
</script>
</head>
<body>
<!-- name=testにのみ、赤色のスタイルが設定される -->
<div name="test"> 
<p>これはname属性”test”の子要素。</p>
<p>これはname属性”test”の子要素。</p>
</div>
<!-- name=demoには、赤色のスタイルが設定されない -->
<div name="demo"> 
<p>これはname属性”demo”の子要素。</p>
<p>これはname属性”demo”の子要素。</p>
</div>
</body>
</html>




id属性を指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:id属性に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('#id名')に対してstyle='color:#f00;'を設定
  $('#test_id').css('color','#f00');  //文字を赤色に
	
});
</script>
</head>
<body>
<!-- #test_idに対してのみ、赤色のスタイルが設定される -->
<div id="test_id">
<p>これはid属性”test_id”の子要素。</p>
<p>これはid属性”test_id”の子要素。</p>
</div>
<!-- #demoに対しては、赤色のスタイルが設定されない -->
<div id="demo"> 
<p>これはid属性”demo”の子要素。</p>
<p>これはid属性”demo”の子要素。</p>
</div>
</body>
</html>




cass属性を指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:class属性に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('.class名')に対してstyle='color:#f00;'を設定
  $('.test_class').css('color','#f00');  //文字を赤色に
	
});
</script>
</head>
<body>
<!-- .test_classに対してのみ、赤色のスタイルが設定される -->
<div class="test_class">
<p>これはclass属性”test_class”の子要素。</p>
<p>これはclass属性”test_class”の子要素。</p>
</div>
<!-- #test_classに対しては、赤色のスタイルが設定されない -->
<div id="test_class"> 
<p>これはid属性”test_class”の子要素。</p>
<p>これはid属性”test_class”の子要素。</p>
</div>
</body>
</html>




すべての要素を指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:class属性に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('すべての要素')に対してstyle='color:#f00;'を設定
  $('*').css('color','#f00');  //文字を赤色に

});
</script>
</head>
<body>
<div>
<p>すべての要素が対象になる(div要素のなかのp要素)</p>
<p>すべての要素が対象になる(div要素のなかのp要素)</p>
</div>
<p>すべての要素が対象になる(p要素)</p>
<ul>
<li>すべての要素が対象になる(ul要素のなかのli要素)</li>
<li>すべての要素が対象になる(ul要素のなかのli要素)</li>
</ul>
</body>
</html>




要素名もしくはid名に一致する要素を指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:要素名もしくはid名に一致する要素に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('要素名, #id名')に対してstyle='color:#f00;'を設定
  $('div, #test').css('color','#f00');  //文字を赤色に

});
</script>
</head>
<body>
<!-- div要素もしくは#testに対してのみ、赤色のスタイルが設定される -->
<div>div要素</div>
<p id="test">p要素のid属性=”test”</p>
<!-- #no2に対しては、赤色のスタイルが設定されない -->
<p id="no2">p要素のid属性=”no2”</p>
</body>
</html>




id名の子である特定の要素を指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:id名の子である特定の要素に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('#id名 要素名')に対してstyle='color:#f00;'を設定
  $('#test div').css('color','#f00');  //文字を赤色に

});
</script>
</head>
<body>
<div id="test">
<!-- #testの子要素divに対してのみ、赤色のスタイルが設定される -->
<div>これはid属性”test”の子要素(div要素)</div>
<p>これはid属性”test”の子要素(p要素)</p>
<div>これはid属性”test”の子要素(div要素)</div>
<p>これはid属性”test”の子要素(p要素)</p>
</div>
</body>
</html>




id名の子である特定の要素すべてに対して

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:id名の子である特定の要素すべてに対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
  
  //$('#id名 > 要素名')に対してstyle='color:#f00;'を設定
  $('#test > p').css('color','#f00');  //文字を赤色に

});
</script>
</head>
<body>
<div id="test">
<!-- #testの子要素pに対してのみ、赤色のスタイルが設定される -->
<div>これはid属性”test”の子要素(div要素)</div>
<p>これはid属性”test”の子要素(p要素)</p>
<div>これはid属性”test”の子要素(div要素)</div>
<p>これはid属性”test”の子要素(p要素)</p>
</div>
</body>
</html>




class名1の要素以下にあるclass名2の要素に対して

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:class名1の要素以下にあるclass名2の要素に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('.Class名1 .Class名2')に対してstyle='color:#f00;'を設定
  $('.test .demo').css('color','#f00');  //文字を赤色に

});
</script>
</head>
<body>
<div class="test">
<!-- .testの子要素.demoに対してのみ、赤色のスタイルが設定される -->
<div class="demo">これはclass属性”test”の子要素(クラス名demo)</div>
<p>これはclass属性”test”の子要素(クラス名なし)</p>
<div class="demo">これはclass属性”test”の子要素(クラス名demo)</div>
<p>これはclass属性”test”の子要素(クラス名なし)</p>
</div>
</body>
</html>




class名1・class名2の両方をもつ要素に対して

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:class名1・class名2の両方をもつ要素に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('.Class名1.Class名2')に対してstyle='color:#f00;'を設定
  $('.test.demo').css('color','#f00');	//文字を赤色に

});
</script>
</head>
<body>
<div>
<!-- .testと.demoが両方指定されている箇所に対してのみ、赤色のスタイルが設定される -->
<div class="test demo">これはdiv要素の子要素(クラス名:test、demo)</div>
<p class="test">これはdiv要素の子要素(クラス名:test)</p>
<div class="demo test">これはdiv要素の子要素(クラス名:demo、test)</div>
<p class="test">これはdiv要素の子要素(クラス名:test)</p>
</div>
</body>
</html>




最初の対象要素に対して

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:最初の対象要素に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('要素名:first')に対してstyle='color:#f00;'を設定
  $('p:first').css('color','#f00');	//文字を赤色に

});
</script>
</head>
<body>
<div>
<!-- p要素の一番最初の要素に対してのみ、赤色のスタイルが設定される -->
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
<p>6番目のp要素</p>
</div>
</body>
</html>




最後の対象要素に対して

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:最後の対象要素に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('要素名:last')に対してstyle='color:#f00;'を設定
  $('p:last').css('color','#f00');	//文字を赤色に

});
</script>
</head>
<body>
<div>
<!-- p要素の一番最初の要素に対してのみ、赤色のスタイルが設定される -->
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
<p>6番目のp要素</p>
</div>
</body>
</html>




対象要素名が複数ある場合、indexで偶数番目に対して

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:対象要素名が複数ある場合、indexで偶数番目に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('要素名:even')に対してstyle='color:#f00;'を設定
  $('p:even').css('color','#f00');	//文字を赤色に

});
</script>
</head>
<body>
<div>
<!-- p要素の偶数番目の要素に対してのみ、赤色のスタイルが設定される -->
<p>0番目のp要素</p>
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
</div>
</body>
</html>




対象要素名が複数ある場合、indexで奇数番目に対して

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セレクタ:対象要素名が複数ある場合、indexで奇数番目に対して</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

  //$('要素名:odd')に対してstyle='color:#f00;'を設定
  $('p:odd').css('color','#f00');	//文字を赤色に

});
</script>
</head>
<body>
<div>
<!-- p要素の奇数番目の要素に対してのみ、赤色のスタイルが設定される -->
<p>0番目のp要素</p>
<p>1番目のp要素</p>
<p>2番目のp要素</p>
<p>3番目のp要素</p>
<p>4番目のp要素</p>
<p>5番目のp要素</p>
</div>
</body>
</html>