jQuery基礎 - まとめ

jQueryとは

  • Javascriptのライブラリ
  • ライブラリとは、汎用性の高いプログラムを再利用可能な形でまとめたもの
jQuery
  • DOMの操作(HTML要素の操作)をよりシンプルに記述可能
  • ブラウザごとの細かな挙動の違いを吸収
  • アニメーションに便利な関数を利用可能
  • Ajaxと呼ばれる処理を簡単に記述可能
JavaScriptjQueryの記述の違い
var element = getElementById('element');
element.innerHTML = '<p>id名「element」内を書き換える</p>';
$('#element').html('<p>id名「element」内を書き換える</p>');
jQuery CDN
  • Content Delivery Network
  • データ配信に特化したネットワーク


3.x snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

2.x snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

1.x snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


スニペット

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){

});
</script>
</body>
</html>

セレクタ

  • 1番めの子要素以外(否定擬似クラス)
$('li:not(:first-child)').css('color', '#F00');
  • 要素の先頭に挿入
$('p').prepend('<strong>要素の先頭に挿入。</strong>');

イベント

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベント</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
#area {
  width: 100px;
  height: 100px;
  background: #E7F18F;
}
</style>
</head>
<body>
<div id="area"></div>
<script>
$(document).ready(function(){
  $('#area').on('mouseover mouseout', function(){
    console.log('マウスが要素の境界を移動しました。');
  });
});
</script>
</body>
</html>
removeClass / addClass
$(document).ready(function(){
  $('li').on('click',function(){
    $('li').removeClass('addColor');
    $(this).addClass('addColor');
  });
});

求職者支援訓練 フェリカテクニカルアカデミー