情報を取得してみよう

投稿者: | 2020年5月24日

要素に何が書かれているか?
入力エリアにどんな情報が書かれているか?
これを取得してその他の動作につなげることが多々あります。
基本的動作にして王道の命令になります。

テキスト・HTMLを取得する

変数で情報を取得してみましょう。

<p class="text">
    <span>表示されたテキスト</span>
  </p>
  <script>
    let textVal = $(".text").text();
    let textHtml = $(".text").html();
    console.log(textVal);
    console.log(textHtml);
  </script>

html / textの命令で()を空にすることで「取得する」という意味になります。

インプットの情報を取得する

よく使う入力エリアの情報取得は以下のように行います。

 <input class="input" type="text" value="インプットの情報">
  <script>
    let inputVal = $(".input").val();
    let inputType = $(".input").attr("type");
    console.log(inputVal);
    console.log(inputType);
  </script>
  <input class="checkbox" type="checkbox" checked>
  <script>
    let checkboxProp = $(".checkbox").prop('checked');
    console.log(checkboxProp);
  </script>

こちらもよく使うので覚えておきましょう。

要素のサイズを取得する

let height = $("#element").height();
let width = $("#element").width();

paddingやmarginを含む高さの取得は別の命令になります。

スクロール位置を取得する

トリガーを「スクロール時」にして利用することが多いです。
現在のスクロール位置を取得することができます。

$(window).scroll(function() {
    let sc = $(window).scrollTop();
    console.log(sc);
  });