【JavaScript】jQueryの基礎 #JavaScript

jQueryとは

JavaScriptでできることをより簡単に書けるように設計したライブラリ

基本構文

JavaScript

$(function() {
/* コード実装部 */
});

セレクタとメソッドで構成されている

$("セレクタ").メソッド("パラメータ[引数]");

セレクタ

操作対象となるHTML要素が入る

基本形
$("セレクタ")
IDセレクタ
$("#Selector")
クラスセレクタ
$(".Selector")
要素セレクタ
$("h1")

例）h1要素のテキストを動的に変更する

JavaScript

$('h1').text('Hello');

メソッド＆イベント

指定した要素に対して何を行うかを記載する
パラメータ付与でより具体的で細かく指定可能
よく使用するメソッド一覧

• addClass
    ○ 要素にクラスを追加する
• attr
    ○ 属性を取得、書き換える
• bind
    ○ onと一緒
• change
    ○ select要素、input要素、text要素が変更されたらイベント発火
• click
    ○ 要素をクリックしたらイベント発火
• data
    ○ データ属性を取得する
• find
    ○ 指定した要素から、指定した条件に合致する子孫要素を選択する
• hide
    ○ 要素を非表示にする
• on
    ○ 動的に作られた要素に対して、イベントを追加していく
• removeClass
    ○ 要素からクラスを削除する
• show
    ○ 非表示状態にある要素を表示する
• text
    ○ 要素内のテキストを取得、書き換える
• toggle
    ○ showとhideの機能をまとめたもの

サンプル

addClass
addClassメソッドを用いて、クリック時pタグに色付け

<!-- addClass -->
<style>
  .color{
    font-size: 10px;
    color: red;
  }
</style>
<p>Hello</p>
<script>
  $("p").click(function(){
    $(this).addClass('color');
  })
</script>

on
onメソッドを用いて、セレクトボックスで選択されたときに処理を発生させる

<body>
  <select>
    <option value='aaa'>aaa</option>
    <option value='bbb'>bbb</option>
    <option value='ccc'>ccc</option>
  </select>
  <span></span>
</body>
<script>
$("select").on("change", function(evt){
  selected = ($(evt.target));
  if(selected.val() === "aaa"){
    $("span")
    .stop()
    .css("opacity", 1)
    .text("selected.val()")
    .fadeIn(30)
    .fadeOut(1000);  
  }else if(selected.val() === "bbb"){
    $("span")
    .stop()
    .css("opacity", 1)
    .text("selected.val()")
    .fadeIn(30)
    .fadeOut(1000);
  }else if(selected.val() === "ccc"){
    $("span")
    .stop()
    .css("opacity", 1)
    .text("selected.val()")
    .fadeIn(30)
    .fadeOut(1000);   
  }
})
</script>

まとめ

基本構文を抑えれば概要はつかむことができると思った
メソッド・イベントについては細かく覚えることよりも実務で出てきたものを調べて対応していきたい

【JavaScript】jQueryの基礎

jQueryとは

基本構文

セレクタ

メソッド＆イベント

サンプル

まとめ

参考