hoverメソッド
.hover()
【 対象要素.hover( 関数１, 関数２ ) 】
「関数１」が対象要素とマウスカーソルが重なった時の処理で、「関数２」が離れた時の処理を記述する
侍エンジニアブログ
jQueryのhover()を活用したマウス操作まとめ！ | 侍エンジニアブログ
この記事では「 jQueryのhover()を活用したマウス操作まとめ！ 」について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃなく、...
// 例
<div id="main" class="main">
<ul class="main-menu">
<li class="main-menu-li">メニュー1</li>
<li class="main-menu-li">メニュー2
<ul class="sub-menu">
<li class="sub-menu-li"><a href="#">メニュー2-1</a></li>
<li class="sub-menu-li"><a href="#">メニュー2-2</a></li>
</ul>
</li>
<li class="main-menu-li">メニュー3
<ul class="sub-menu">
<li class="sub-menu-li"><a href="#">メニュー3-1</a></li>
<li class="sub-menu-li"><a href="#">メニュー3-2</a></li>
</ul>
</li>
<li class="main-menu-li">メニュー4
<ul class="sub-menu">
<li class="sub-menu-li"><a href="#">メニュー4-1</a></li>
<li class="sub-menu-li"><a href="#">メニュー4-2</a></li>
<li class="sub-menu-li"><a href="#">メニュー4-3</a></li>
</ul>
</li>
</ul>
</div>// 例
$('.main-menu-li').hover(function(){// .hover（hoverイベント）は第一引数が対象要素とマウスカーソルが重なった時の処理で、
$('.sub-menu:not(:animated)', this).slideDown();// thisは「.sub-menu:not(:animated)」を指す
}, function(){// 第二引数が離れた時の処理を記述することになっている。
$('.sub-menu', this).slideUp();// thisは「.sub-menu:not(:animated)」を指す
});lengthプロパティ
.length
配列の要素数を取得する
//例
const arr = ["あか", "あお", "きいろ"]
console.log(arr.length); //-> 3innerWidthメソッド
.innnerWidth()
要素の内部の幅（borderは除く／paddingは含める）を取得する
https://www.jquerystudy.info/reference/css/innerWidth.html （参考）
// 例
<ul class="slider__container">
<li class="slider__item slider__item1">IMG1</li>
<li class="slider__item slider__item2">IMG2</li>
<li class="slider__item slider__item3">IMG3</li>
<li class="slider__item slider__item4">IMG4</li>
<li class="slider__item slider__item5">IMG5</li>
</ul>// 例
.slider__item {
width: 980px;
height: 400px;
background: #333;
color: #fff;
float: left;
text-align: center;
line-height: 400px;
font-size: 5em;
}// 例
var slideItemWidth = $('.slider__item').innnerWidth();//-> 980pxattrメソッド
attr();
HTML要素の属性を取得したり設定することができるメソッド
【 対象要素.attr( 属性, （変更する値） ) 】のように引数へ任意の属性を指定。属性を変更する場合のみ第2引数へ変更したい値を指定する。
侍エンジニアブログ
30分で理解！jQueryのattr()で属性操作を極めるコツ！ | 侍エンジニアブログ
この記事では「 30分で理解！jQueryのattr()で属性操作を極めるコツ！ 」について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃ...
var $slideContainer = $('.slider__container');// DOMを取ってくる
var slideItemNum = $('.slider__item').length();// length()...配列の要素の数を設定または取得（今回5）
var slideItemWidth = $('.slider__item').innnerWidth();// （今回980px）
var slideContainerWidth = slideItemWidth * slideItemNum;// （今回980px * 5 = 4900px）
$slideContainer.attr('style', 'width:' + slideContainerWidth + 'px');// （今回4900pxにして横並びになるようにしている）onメソッド
.on()
さまざまなイベント処理を記述するために使われるメソッド
（例）クリックイベント処理
$('button').on('click', function() {
console.log('クリックされました！');
});
侍エンジニアブログ
【jQuery入門】on()によるイベント処理の使い方まとめ！ | 侍エンジニアブログ
この記事では「 【jQuery入門】on()によるイベント処理の使い方まとめ！ 」について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじ...
animateメソッド
.animate()
特定のHTML要素のCSSプロパティを連続して変化させることでアニメーションを実現する
// animateの使い方
.animate({
プロパティ名1: 値,
プロパティ名2: 値,
...
}, アニメーションさせる時間「ミリ秒」);
コメント