自分のためのjQuery学習コース1メモ
jQueryのProgate学習コース1をメモ。
jQueryの書き方
基本はJavaScriptなので、jsファイルに記述する。
// 基本の書き方
$('セレクタ').メソッド名(引数);
// 例:
$('h1').hide();
$('セレクタ')
の部分をjQueryオブジェクト、.メソッド名(引数)
をメソッドという。
主なメソッド1
.hide
要素を隠す
.show
要素を現す(CSSでdisplay: none;と指定したものなど)
.fadeOut
フェードアウトして隠す
.fadeIn
フェードイン
.slideUp
下のほうから消えていく
.slideDown
上のほうから現れる
セレクタの指定方法
HTML内に記述した要素をセレクタにする。CSSと基本的に一緒と思えばOK。
- HTMLタグ
- タグ名をそのまま指定(例:
$('h1')
)
- タグ名をそのまま指定(例:
- class
- クラス名にドットをつけて指定(例:
$('.class')
) - ページ内で複数設定できる
- クラス名にドットをつけて指定(例:
- id
- id名に#をつけて指定(例:
$('#id')
) - ページ内で重複させないので、jQueryの処理早くなるので推奨
- id名に#をつけて指定(例:
イベントを使う
発動するタイミングをコントロールする方法。
$('セレクタ').イベント名(function(){
// 実行する処理
});
// クリックしたらそのセレクタ部分を隠す
$('#button1').click(function(){
$(this).hide();
});
// クリックしたら別のセレクタ部分を隠す
$('#button2').click(function(){
$('#text').hide();
});
主なメソッド2
.css('プロパティ','値')
CSSを変更する
.text('文字列')
セレクタ内を文字列で置き換える
.html('HTMLソース')
セレクタ内をHTMLで置き換える
thisの使い方
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
$('li').click(function(){
$(this).css('color','red');
});
thisはそのイベントが発生した要素を取得できる。上記のように書くと、クリックしたリストの行だけが赤くなる。
省略・高速化
変数やメソッドチェーンを利用することで、コードの省略ができる。また処理速度の高速化にもつながる。
変数
const $div = $('div');
// と宣言することで、
$div.hide();
// のようにjQueryオブジェクトを変数化することができる。
変数の宣言は、主にconst
を使用する。constは再代入できないので、後から変更する必要がある場合はlet
を使う。var
もあるが現在は多くの場合、推奨されていない。
参考:
JavaScript var/let/constによる変数宣言 - Qiita
var/let/constの使い分けのメモ - Qiita
など
メソッドチェーン
$('#method').css('color','red').text('テキスト');
のように .
ドットでつなげることで、ひとつのjQueryオブジェクトに複数のメソッドが使える。
findメソッド
$('#method').find('a').css('color','red');
で、#method
のすべての配下のうち a
セレクタを持つ要素を取得できる。
childrenメソッド
$('#method').children('a').css('color','red');
で、#method
のひとつ下の階層から a
セレクタを持つ要素を取得できる。
hoverイベント
$('div').hover(
function(){
// マウスポインターをのせたときの処理
},
function(){
// マウスポインターを外したときの処理
}
);
引数となる関数は2つ。
Author And Source
この問題について(自分のためのjQuery学習コース1メモ), 我々は、より多くの情報をここで見つけました https://qiita.com/tao829/items/d54f1471547fd1b1c280著者帰属:元の著者の情報は、元の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 .