jquery javascriptメソッド

TOPページに戻る > jquery入門

スポンサード リンク

javascriptの基本

jqueryを扱う上で、知っておくと便利なjavascriptのメソッドです
jqueryはjavascriptで書かれています。javascriptのメソッドもjqueryの中で使うことができます

置換え

最初にマッチした文字列のみの置換します
第一引数を第二引数で置き換えます
jqueryのセレクタだけでなく変数のなかの文字列を置き換えることもできます

$("セレクタ").replace("置き換えられるテキスト","置き換えるテキスト")

全てを置換える
正規表現で全て置き換える

$("セレクタ").replace(/置き換えられるテキスト/g,"置き換えるテキスト")

スポーツを趣味に置き換えます

$(function() {
	$("#button").click(function(){
	var piyo="趣味はスポーツです"; 
	$("#hoge").text(piyo.replace("スポーツ","読書"))
	});
});

html

<button id="button">ボタン</button>
<div id="hoge">趣味はスポーツです</div>

css

#hoge {
 border: 1px solid;
 font-size: 20px;
 margin-top: 10px;
 padding: 5px;
}
趣味はスポーツです

一定時間で処理を実行

setTimeoutメソッドは設定した時間後に処理を呼び出します
第一引数に読み出す処理を記述します
第二引数に呼び出す時間を設定します
時間はミリ秒です。1000が1秒、500が0.5秒

setTimeout(function(){処理},3000)

ボランをクリックして3秒後にテキストを変えます

$(function() {
	$("#button2").click(function(){
	setTimeout(function(){
	   $("#hoge2").text("3秒たちました");
	   },3000);
	});
});

html

<button id="button2">ボタン</button>
<div id="hoge2">ちょっと待ってね</div>

css

#hoge2 {
 border: 1px solid;
 font-size: 20px;
 margin-top: 10px;
 padding: 5px;
}
ちょっと待ってね


一定時間で処理を繰り返し実行する

setIntervalメソッドは設定した時間ごとに繰り返し処理を呼び出します
第一引数に読み出す処理を記述します
第二引数に呼び出す時間を設定します
時間はミリ秒です。1000が1秒、500が0.5秒

setInterval(function(){処理},3000)

タイマーを停止するclearInterval()メソッド

var timerID = setInterval(function(){処理},3000);
clearInterval(timerID);

ボランをクリックして3秒ごとにテキストを変えます

$(function() {
	$("#button3").click(function(){
	var foo = 3;
	setInterval(function(){
	   $("#hoge3").text(foo + "秒たちました");
	   foo += 3;
	   },3000);
	});
});

html

<button id="button3">ボタン</button>
<div id="hoge3">ちょっと待ってね</div>

css

#hoge3 {
 border: 1px solid;
 font-size: 20px;
 margin-top: 10px;
 padding: 5px;
}
ちょっと待ってね






(C)2012 ホームページ作成無料