定番
新着

jQuery よく使うメソッド

jQuery よく使うメソッド

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

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

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

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

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

abc

変数:アルファベットの単語、造語でもいい

var my_width = 250;

変数「my_width」に数値「250」をセット

"abc"

文字列:「"」ダブルクオートを使っているので「"」が使えない

'abc’

文字列:「"」が使える

123

数値:足し算、引き算など演算ができる


発動、発火系

$(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){ ... }

hoge('abc');と書くとfunction内で変数aに'abc'が入る(引数という)。複数の場合はカンマで区切る。

return false;

falseを返す、functionを抜ける

return true;

trueを返す、functionを抜ける

return hoge;

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

2018-01-24 07:18:16
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top