Webエンジニア目指して#26

どうもEmonda ALR購入マンです。オークションでディスクブレーキ仕様がめっちゃ安く落とせそうで気軽に入札したら通ってしまった…
防犯面で気疲れしそうで早々に売るか迷いました
さて本題、時間かけすぎてしまいました。書ききってから投稿しようという意気込みが邪魔してましたね。結局一つの投稿で山盛りになってるという
なんか見返したらいつの間にか説明みたいな書き方になってて、手段が目的になっちゃってるので次回は以降さらっと書くようにしたいです

はい、というわけで前回に引き続きProgateのJQuery上級編やっていきます

要素の値を取得

textメソッド

var sample_text = $('セレクタ').text();
対象要素の文字列を取得

htmlメソッド

var sample_html = $('セレクタ').html();
対象要素のhtmlを取得

cssメソッド

var sample_color = $('セレクタ').css('color');
対象要素のcssプロパティを取得

attrメソッド

var sample_attr = $('セレクタ').attr('id');
attributeの略、つまりhtmlの属性の取得です。上記がそれです。
attrメソッドは下記のようにカンマで区切って2値を指定すると付与ができます。
var sample_attr_target = $('セレクタ').attr('id','sample');
複数の属性を取得したい場合は下記のようにします。

var sample_attr_target = $('セレクタ').attr({
  name : 'sample',
  class : 'attr target',
});

オブジェクトみたいな書き方ですね。classは上の例のようにすると複数付与できます。
というよりは半角スペースを入れた文字列が代入された結果、複数の付与になるのかな？
(こまけえこたあいいんだよ)
というわけでここまでのをpenでまとめます。
選択ゾーンの色文字をクリックするとその情報を取得します。

See the Pen GetMethod by 味噌カツサンド (@misokatsu_sand) on CodePen.

結構いいんじゃないですか！？プログラミングって感じになってきましたね

今気づいたんですが変数を宣言する際、名前にハイフン-を使わない方がいいみたいですね。多分減算かなにかと勘違いされるのか、意図しない動作になります。

フォームに入力された値の取得

の前に、フォームについてHTMLでいくつか知らないものが出てきたのでまとめます

• input 要素の placeholder属性

<input id="input-text" type="text" placeholder="文字を入力して下さい">
↓このGIFみたいに入力する前に表示されてるやつですね

• select要素
  プルダウンリストの生成

<select id="select-form" class="select-form">
    <option value="0">選択してください</option>
    <option value="1">1. みかん</option>
    <option value="2">2. りんご</option>
    <option value="3">3. すいか</option>
</select>

こんなもんですかね。さて本題です。

htmlに下記のようなinput要素があるとします。
<input id="name" type="text">
これにより生成されたフォームに入力された値を取得するには、
let name = $('#name').val();
とjsに記述することでできます。

select要素の場合は、
let selectedText = $('#select-form option:selected').text();
こんな感じで取得できます。option:selectedの部分が大事です。
(これがないとselect要素全体を取得してしまう)
また、inputとは違い、 valだとvalueに振り当てた値を取得します。

submitボタン

同一form内の入力が全て終わったらそれらを確定や送信をする役割を持ちます。
jsでクリックイベント化しなくても関数として扱えます。 また、submitイベントはボタンを押したときだけでなくEnterキーを押した際にも動作します。

$('#form名').submit(function(){
    処理;
    return false;
  });

カスタムデータ属性

<div data-sample></div> 自作の属性を指定できるみたいです。
data- に続いて任意の文字列を指定して扱えます。オブジェクトに番号を仕込んでselect要素とリンクさせるなどjQueryで何かと便利だそう

この辺でPenにまとめてみます。カスタムデータは使ってませんが...

See the Pen jQuery_getForm by 味噌カツサンド (@misokatsu_sand) on CodePen.

animateメソッド

$(セレクタ).animate({'プロパティ':'値'},変化までの秒数[ms]);
cssのtransitionと似てますね 下の例だとやることは変わらなそうですがjQueryの方はクリックイベントなど幅広く扱えそう

$('.sample').hover(function(){
    $(this).animate({
      'font-size':'30px'
    },300);
  },function(){
    $(this).animate({
      'font-size':'24px'
    },300);
  });

ページ内リンク

htmlでの方法

a要素にhrefでidを指定すると、ページ内のそのリンクへ移動するようにできます。

<a href="#link1">Link1へ</a>
<div id="Link1">Link1</div>

jQueryでの方法

$('セレクタ').click(function(){
    $('ジャンプ先セレクタ').scrollTop(0をトップとした下方向のY座標);
  });

ページトップへ移動する際はhtml,bodyをセレクタとして使うそうです。
なぜ２つあるのかというと、ブラウザごとにhtmlに対応しているかbodyに対応してるか別れているからどっちもう書いておくとか。
ただ、この場合はセレクタを2つ設定していると関数を仕込む際にコールバックが2回発動してしまいます。
なのでその際はブラウザのユーザーエージェントを参照して分岐させます。
先程のanimateメソッドを合わせる際はこう。

$('#move-top').click(function(){
    $('html,body').animate({
      'scrollTop':0
    });
  });

offsetメソッド

$('セレクタ').offset();
ページの一番左上を基準に、対象要素の座標を取得します。
$('セレクタ').offset().top;とするとページトップ基準でY軸の座標を取得できます。

まとめPenです。もうhtmlとcssはちょちょいのちょいですね

See the Pen jQuery_scroll-offset by 味噌カツサンド (@misokatsu_sand) on CodePen.