Progate jQueryコース３
前回の記事はこちら↓
ProgateでjQueryを学ぶコース３は【スライドの実装他】
その他の記事は↓になります
前回もProgate jQueryコース３の内容をまとめているのですが前回の内容が長くなりすぎたのでこの記事は続きです。
attr()メソッド
attr()メソッドはhtmlの属性と値を指定することによって。指定した属性に指定した値をセットできるものです。もしくは属性名だけ引数にセットした場合はその属性の値を取得することができます。
| $(“セレクタ”).attr(“属性名”, “値”) | 指定したセレクタに属性と値をセットする |
|---|---|
| $(“セレクタ”).attr(“属性名”) | attr()の引数が属性のみの場合は指定したセレクタの属性の値を取得する |
たとえば【 $(“p”).attr(“id”, “sample”) 】とすると
p要素のid属性にsampleという値を設定したということになります。htmlの属性とはなにかというとちょっとわかりにくい可能性もありますので図↓
属性はidだけじゃなくてたくさんあります。classとかsrcとかhrefとかまだまだたくさんあります。
submitイベントとval()
valメソッドはformのvalue=”” value属性の値を取得したりvalue属性に値をセットしたりします。
submitイベントは送信したとき（button type=”submit”）におこります。
以下はjQueryのサンプルです。
$(function() {
$("#form").submit(function(){
var textValue = $("#text-form").val();
$("#output-text").text(textValue);
return false;
});
});
セレクトボックスとval()
htmlのセレクトボックスは
<select>
タグの中に
<option>
タグがあり複数の選択肢から選択できるような構造になっています。
<form> <select id="fruits"> <option value="0">りんご</option> <option value="1">ばなな</option> <option value="2"> みかん</option> </select> </form>
セレクトボックスにval()を用いると選択されているoptionタグのvalue属性の値を取得することができます。
【 $(“#fruits”).val(); 】
たとえば上のセレクトボックスでりんごを選択している状態で
【 $(“#fruits”).val(); 】この構文をよぶと、
“0”が取得できるわけですね
フォームが空かどうかをチェックする
フォームが空かどうかをチェックするには条件分岐とval()を組み合わせます。
<from id="frm"> <textarea id="text-form" class="text-form"></textarea> <button type="submit">送信</button> </form>
$(function(){
$("#frm").submit(function(){
var textValue = $("#text-from").val();
if(textValue == ""){
//空文字かどうか
}
});
});
セレクトボックスの自動入力
セレクトボックスは先ほどもふれたようにselectタグとoptionタグで構成されています。
<form id="frm"> <select> <option value="0">りんご</option> <option value="1">ばなな</option> <option value="2">みかん</option> </select> </form>
たとえば上のフォームでバナナを自動選択させたい場合は以下のようにします。
【 $(“#frm”).val(“1”) 】val()で指定した値とoptionvalueが一緒のものが選択されるということですね。val(“2”)だったらみかんが選択されます。実際に自動入力させるにはdata-option属性を設定して行うようですが、ここでは省略します。
animate()
animate()メソッドは第一引数に{}オブジェクト、第二引数にはやさを設定して。セレクタにアニメーション効果をつけます。
【 $(“p”).animate({‘font-size’, ’16px’}, 300) 】
これだったらp要素を300ミリ秒かけてfont-sizeを16pxにします。
以下はhover()イベントの組み合わせたサンプルコードになります。
$(function(){
$('.social-icon').hover(
function(){
$(this).children('span').animate({
'font-size':'30px'
}, 300);
},
function(){
$(this).children('span').animate({
'font-size':'24px'
}, 300);
}
);
});
scrollTop()
$(“セレクタ”)scrollTop()は引数にセレクタからの距離を指定してその位置までスクロールさせます。
たとえば【 $(“html body”).scrollTop(0); 】はページ最上部にスクロールします。
ページ最上部にスクロールするサンプルコードです。↓
$(function(){
$("#top-btn").click(function(){
$("html,body").scrollTop(0);
})
});
animate()を使ったScroll
アニメーションを使った書き方は下記のようになります。↓
$(function(){
$('#top-btn').click(function(){
$('html, body').animate({
"scrollTop" : 0
}, 500);
});
});
offset()メソッド
offset()メソッドはセレクターの表示位置を取得します。
【 $(“h1”).offset(); 】とした場合は {top: xx, left: xx}のようにオブジェクトでかえってきます。
【 $(“h1”).offset().top; 】とした場合はtopの数値が返ってきます。
aタグのhref属性をattr()メソッドで取得して変数に格納し、その変数をoffset().topで取得するとリンク先までスクロールさせるようなことができます。
$('header a').click(function(){
var id = $(this).attr('href');
var position = $(id).offset().top;
$('html,body').animate({
'scrollTop': position
}, 500)
})
こちらのサンプルコードで$(id)となっているのはhtmlを指定しているからみたいだが、よくわからないけど、offset()を使うときは$()をつけないといけないと認識するようにしましょう。
Progate JQueryコース３まとめ
ProgateのJQueryコースはこれで終わりになります。コース３は内容が結構多岐にわたったので後日まとめ。
以上。
コメント