用途
新着
履歴
分類

jQuery よく使うメソッド

jQuery よく使うメソッド

jQueryでコードを読むときや簡単なギミックを作るときなど、よく使われるメソッド(手法)をまとめてみました。

ここにない記述もたくさんありますが、独断で選別しています。

また詳しく書くとややこしくなるので、なるべく一文で説明しています。

とっかかりの参考になれば幸いです。

初級者向けにJavaScriptの記述の基本も記載します。

var abc;

abcは変数ですという宣言です。

変数:アルファベットの単語、造語でもいい半角英数字です。

var my_value = "abc";

変数に文字列をセットしてます。

文字列内に「"」を使うとエラーになります。

var my_value = 'abc';

シングルクォート「'」で囲うと「"」が使えます。

var my_width = 10+20;

演算:足し算、引き算などの結果がセットされます。


発動、発火系

$(document).ready(function(){
});

HTMLが読み込まれたら発動
(imgやiframeはそのあと読み込まれる)

$(window).load(function(){
});

HTMLとimg,iframeなどの要素がすべて読み込まれたら発動


デバッグ系

console.log(my_width);

変数をコンソールに出力する


主語、セレクタ

$("#hoge")

IDがhogeの要素、ページ内に1つ

$(".hoge")

クラスがhogeの要素、ページ内に複数

$(".hoge li p")

hogeクラスの子のli要素の子のp要素

hlp = ".hoge li p"
$(hlp)

変数で指定することも可能


きっかけ、トリガー、引き金

.click()
.on("click",function(){
});

どちらもクリックされたら発動する処理を間に書きます。


値の追加、削除

.html()

要素の(間の)値を取得

.html(123)

要素の(間に)値をセット

.append('hoge')

要素の最後に値を追加

.empty()

hogeクラスの(間の)値を削除

.remove('.hoge')

hogeクラスごと削除


演出、アニメーション

.slideUp()

スライドアップして閉じる

.slideDown()

スライドダウンして開く

.fadeIn()

フェードインで現れる

.fadeOut()

フェードアウトで消える

.animate({ height: 100px}, 700 );

heightを0.7秒かけて100pxにする


クラスの操作

.hasClass("hoge")

hogeクラスを持っていたら

.removeClass()

クラスを削除する

.addClass()

クラスを追加する


属性の操作

.attr("id")

id属性の値を読み込む

.attr("href","abc")

href属性の値を書き込む

.removeAttr("id")

id属性を削除する


よく使う数値、数値型

.width()

幅を取得

.height()

高さを取得

.css('width',100)

cssのwidthに100pxを指定する

.offset().top;

要素のHTMLの縦位置を取得

.length

要素の文字数を取得

.parseInt(aaa,10)

aaaの値を10進数にする


主語、セレクタの応用

.parent()

1つ上の親の要素を

.closest(".slide")

親の要素たちの中の最も近いslideクラスを

.children('ul')

子供のul要素を

.find(".txt")

配下のtxtクラスを探す


複数の要素の操作

$('.slide_box').each(function() { 
});

slide_boxクラスがついている要素すべてに対して

.index('li')

何番目のliか数字をとる

.eq(i)

i番目の要素の


条件分岐

if(a > 0){
...もしaが0より大きければ実行
}else{
...それ以外なら実行
}
if(a > 0 && f > 0){
}

さらに...ならば


関数、機能のまとめ書き

function hoge(){ ... }

hoge();と書いて実行される命令文の塊

function hoge(a){ ... }

falseを返す、functionを抜ける

return true;

true(またはfalse)を返して、functionを抜ける

return hoge;

変数hogeの値を返す、functionを抜ける

公開 2019-07-28 15:19:17
このページの二次元コード
jQuery よく使うメソッド

人気のサンプル

search -  category -  about
© 2024 kipure
Top