26日目。jQueryでめっちゃ動くホームページができました！
26日目は、ProgateのjQuery上級編をやっつけました。
めっちゃぬるぬる動くホームページが完成して、面白くってあちこち動かしております。
なるほどこうやって作っていたんですね。いろいろ作れそうで楽しみです。
26日目。にんじゃわんこの部屋
http://appdays.herokuapp.com/Day26/
(所要時間４時間！）
メニューの上にマウスをのっけて表示、外して隠す。
lessonの上にマウスを載せたらaddClass、外れたらremoveClass
元のコードを確認して・・・若干ちがう。やっぱり！ほぼカンニング（汗）
$('.lesson').hover(
function() {
$(this).find('.text-contents').addClass('text-active');
},
function() {
$(this).find('.text-contents').removeClass('text-active');
}
);
FAQをアコーディオンで開くー閉じる。
OPENとSlideUPだけで実装できるのだっけ。
いっしょうけんめいOPENというクラスをつくっては詰まっていました。
// アコーディオン
$('.faq-list-item').click(function() {
var $answer = $(this).find('.answer');
if($answer.hasClass('open')) {
$answer.removeClass('open');
$answer.slideUp();
$(this).find('span').text('+');
} else {
$answer.addClass('open');
$answer.slideDown();
$(this).find('span').text('-');
}
});
});
jQuery上級
にんじゃわんこの紙芝居を作りました！
jQueryオブジェクトの構想
配列の「ような」構造をしており、セレクタに合致した要素が配列のように入っています（実際には配列とは異なるものです）。
インデックス番号
配列と同じように0から順にインデックス番号というものが割り振られています。
eqメソッド
jQueryオブジェクトの中から、eqの引数の数字と同じインデックス番号の要素を取得できます。
$('#hide-btn').click(function() {
$('.slide').eq(1).fadeOut();
});
indexメソッド
いま見ている要素が配列の何番目から取得したり、配列の番号を指定したりします。
$('.index-btn').click(function() {
$('.active').removeClass('active');
var clickedIndex = $('.index-btn').index($(this));
$('.slide').eq(clickedIndex).addClass('active');
});
prevとnext
いま見ている要素の１つ前、１つ後の要素を取得する。
if ($(this).hasClass('next-btn')) {
$displaySlide.next().addClass('active');
} else {
$displaySlide.prev().addClass('active');
}
最初と最後のスライドの時、ボタンを隠す。
indexでスライドの番号をとってきて、ifで分岐して消す。
var slideIndex = $('.slide').index($('.active'));
$('.change-btn').show();
if(slideIndex==0) {
$('.prev-btn').hide();
} else if(slideIndex==3) {
$('.next-btn').hide();
}
共通部分の関数化
Javascriptとおなじようにまとめられる。
length
要素の数を取得する
if (slideIndex == $('.slide').length -1) {
$('.next-btn').hide();
}
フォームを操作しよう
textメソッド
HTMLやCSSの内容を取得したり書き換えたりできる。すごい！
var title = $('#title').text();
$('#title-text').text(title);
attrメソッド
HTMLの属性はattrメソッドを用いて「ゲット」と「セット」ができます。
attrってなんて読むんだろう
アトリ？アトレ？あたたぁ？
http://yomikata.org/word/attr
inputの要素取得
.val()で持ってくる。
var text = $('.input').val();
セレクトボックス
<option value = "xxx"> → SELECT値をvalでとってくる。
フォームの入力チェック
option valueが空だったらエラーを返すようにする。
・空だったら・・・「''」シングルクォート２つ
入力欄への自動入力
val()で入力欄にデフォルト値を書き込んでおく。
// 「.option-btn」要素のclickイベントをつくってください。
$('.option-btn').click(function(){
var optionText = $(this).text();
$('#text-form').val( optionText +'が好きな理由は、');
})
``
valとtextの違いがいまいちわからない。。。
###セレクトボックスの自動入力
おなじようにできる。
###カスタムデータ属性
`data-`で始まる属性を任意につける事ができる。
###animateメソッド
アニメーションをつけるにはanimateメソッドを用います。$('セレクタ').animate({'プロパティ':'値'})のように、引数は連想配列で指定します。
```javascript
// SNSボタン
$('.social-icon').hover(
function(){
$(this).children('span').animate({
'font-size':'30px'
}, 300);
},
function(){
$(this).children('span').animate({
'font-size':'24px'
}, 300);
}
);
クリックするとアイコンの文字がぷりっと大小します。
scrollTop
ページ内の指定の場所にスクロールする。
$('#top-btn').click(function(){
$('html, body').scrollTop(0);
//上からゼロ、つまり最上部までスクロール。
});
ぬるっとスクロール
animateメソッドをはさむと、指定の速度で移動します。
'''javascript
$('#top-btn').click(function(){
$('html, body').animate({
'scrollTop':0
//変更するプロパティ
},500);
//アニメーションのはやさ
});
'''
ナビゲーションをつくる
目次をクリックして記事の位置までスクロールします。
offset
要素の表示位置を取得します。
$('header a').click(function(){
var id = $(this).attr('href');
var position = $(id).offset().top;
$('html,body').animate({
'scrollTop': position
}, 500);
})
完成！
Author And Source
この問題について(26日目。jQueryでめっちゃ動くホームページができました！), 我々は、より多くの情報をここで見つけました https://qiita.com/robamimim/items/2f2d6a9cb38d5160e7be著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .