【学習48日】jQueryの実践2【応用10日】

完全にメモ！！

間違い

  let list =$("#list");

  function appendList(word){

    list.append(word)

  }

正解

  let list = $("#list");

  function appendList(word) {
    let item = $('<li class="list">').append(word);
    list.append(item);
  }

$(function() {
　
//ID名がlistのオブジェクトを取得し、変数listに入れる
  let list = $("#list");

//appendListの関数を定義（実際には、呼び出された時に発動
//HTML内のlistクラスのオブジェクトに、wordの引数でもらったもをの追加。それを変数itemに入れる
//ID名がlistのオブジェクトが入った変数listに、itemを追加する
//append(★)　は引数★オブジェクトを追加するメソッド

  function appendList(word) {
    let item = $('<li class="list">').append(word);
    list.append(item);
  }


  $("#submit").on("click", function() {
    let input = $("#keyword").val();
// new RegExp(★)で、引数★を、jQueryで使える正規表現で使えるオブジェクトに変換
// ＾●●　→　●●で始まる文字列と前方一致

    let reg = new RegExp("^" + input)；

    $(".list").remove();

    $.each(fruits, function(i, fruit) {
      if (fruit.match(reg)) {
        appendList(fruit);
      }
    });

    if ($(".list").length === 0) {
      appendList("一致する果物はありませんでした");
    }
  });
});

http://www.tohoho-web.com/js/regexp.htm

// 正規表現オブジェクトを生成して、変数regに格納する
let reg = new RegExp("^" + input);

【参考記事】

http://semooh.jp/jquery/api/utilities/jQuery.map/array%2C+callback/

主語.map（”　”）

新たな配列を作成する

http://js.studio-kingdom.com/javascript/array/join

配列内の全ての要素を文字列として連結

https://kigiroku.com/frontend/jquery_split.html 

splitメソッドを使用して文字列を分割。

split('')のカッコ内に書いた文字を基準に分割されます。