Javascript/jquery - 変更履歴

Admin: /* imgがロードできなかった時に処理させる */

2017-01-19T03:25:29Z

‎imgがロードできなかった時に処理させる

Admin: /* imgがロードできなかった時に処理させる */

2016-02-03T23:58:22Z

‎imgがロードできなかった時に処理させる

Admin: /* imgがロードできなかった時に処理させる */

2016-02-03T23:57:53Z

‎imgがロードできなかった時に処理させる

2016年1月27日 (水) 19:39にAdminによる

2016-01-27T19:39:21Z

2016年1月27日 (水) 19:35にAdminによる

2016-01-27T19:35:34Z

127.0.0.1: ページの作成:「==ダウンロード== http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ==講座== http://www.mikage.to/jquery/ ==jqueryを設置せずにjqueryを使う...」

2015-05-19T17:58:33Z

ページの作成:「==ダウンロード== http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ==講座== http://www.mikage.to/jquery/ ==jqueryを設置せずにjqueryを使う...」

新規ページ

==ダウンロード==
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

==講座==
http://www.mikage.to/jquery/

==jqueryを設置せずにjqueryを使う==
googleのapi
<<nowiki />script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
==セレクター選択==
|HTML要素|$("body")|
|id属性を持つ要素|$("#id1")|
|class属性を持つ要素|$(".class1")|

==クリックイベント==
<<nowiki />script type="text/javascript">
$(document).ready(function(){
$("#d1").click(function(e){
alert("test");
});
});
</script>
<<nowiki />div id="d1">
</div>
==自作関数==
$(document).ready(function(){
function test() {
}
}

==Inputの扱い==
<<nowiki />input type='text' id='title' name='title'/>
// データ取得
$("#title").val();
// データ更新
$("#title").val('data1');

==チートシート==
http://phpspot.org/blog/archives/2008/02/javascriptajax_1.html

==基本==
*基本
タグ無いの文字取得
$("q").html();
$("q").text();
class指定
$(".class1").html();
id指定
$("#id1").html();

*書換
$("q").html("書換文字");

*効果
フェードアウト
$("p").fadeOut("slow");
フェードイン
$("p").fadeIn("slow");
フェードアウトイン
$("p").fadeOut("slow").fadeIn("slow");

*css追加
$("p").css("background-color", "#fff0ff");

*class追加排除
$("p").addClass("class1")； // 追加
$("p").removeClass("class1")； // 排除

*表示非表示("slow", "fast")
$("p").hide();
$("p").show();

==ajax==
*ファイルロード表示
$("p").load("import.html");
$("p").get("import.php", {name: "test",id: 1}); // getパラメータ
$("p").post("import.php", {name: "test",id: 1}); // postパラメータ
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
==ロード後実行==
$(function(){
// HTMLロード後に実行
});
==DOM==
*タグの数
$("p").size()
var $target = $("#target1");
$("p" $target).size(); ～タグ内のタグの数

==クリック開閉==
$(function(){
$(".btn").click(function(){
$(".window").toggle("slow");
return false;
})
});
<<nowiki />a href="" class="btn">test</a>
<<nowiki />div class="window">
test
</div>

==タグ属性変更==
$('#hoge').attr('href', 'http://www.example.com/');

==イベントハンドラ例==
$.proxyを使うとコールバックでthisが使える
var Class1 = function(name) {
this.name = name;
}
Class1.prototype = {
post1 : function() {
$.ajax({
url: "/post.php",
data: {
"data1": "hoge1",
"data2": "hoge2"
},
cache: false,
success: $.proxy(this.postOnSuccess, this)
});
},
postOnSuccess : function(jsonhtml) {
console.log(this.name);
}
}
var class1 = new Class1();
class1.post1();

==イベント追加==
$("#test1").bind("click", click1);
function click1(e) {
alert("test");
}

==クリック時した先のmethodのthisを読めるように==
$(function(){
var Car = function(name) {
this.name = name;
}
Car.prototype.getname = function(e) {
console.log(this.name);
}
var car = new Car("taro");
$(".btn").click($.proxy(car.getname, car));
});

==自分自身オブジェクト==
$(this).
$(this).css("display", "none"); // これだと自分自身を非表示とする

==イベントの戻り値に同クラスを指定する==
bind(this)を使う。
function Favorite(){
}
Favorite.prototype.onclick = function(url) {
$.get('/regist?url='+url, this.oncomplete_regist.bind(this));
};
Favorite.prototype.oncomplete_regist = function(data){
this.view_regist(); // bind(this)を使うと内部メソッドを指定できる
};
Favorite.prototype.view_regist = function(){
console.log("view_regist");
};

==TypeError: $.browser is undefinedエラーが出る場合==
jQuery1.9系以上で$.browserが廃止されたため以下のように切り替える
$.browser.msie
↓
$.support.msie

←前の版		2017年1月19日 (木) 03:25時点における版
行184:		行184:
	</script>		</script>
	参考：http://semooh.jp/jquery/api/events/error/fn/		参考：http://semooh.jp/jquery/api/events/error/fn/
		+
		+	==すべてのクラスを取得==
		+	$(".class1").each( function() {
		+	alert($(this).val());
		+	});

@@ 行176: / 行176: @@
 ==imgがロードできなかった時に処理させる==
   <img src="/assets/img/test.jpg" class="img1" />
-  <script>
+  <script type="text/javascript">
   $("img.img1").error(function(){
     $(this).hide();

@@ 行176: / 行176: @@
 ==imgがロードできなかった時に処理させる==
   <img src="/assets/img/test.jpg" class="img1" />
   $("img.img1").error(function(){
     $(this).hide();
@@ 行181: / 行182: @@
     return true;
   });
-http://semooh.jp/jquery/api/events/error/fn/
+ </script>

←前の版		2016年1月27日 (水) 19:39時点における版
行181:		行181:
	return true;		return true;
	});		});
		+	http://semooh.jp/jquery/api/events/error/fn/

←前の版		2016年1月27日 (水) 19:35時点における版
行173:		行173:
	↓		↓
	$.support.msie		$.support.msie
		+
		+	==imgがロードできなかった時に処理させる==
		+	<img src="/assets/img/test.jpg" class="img1" />
		+	$("img.img1").error(function(){
		+	$(this).hide();
		+	alert("Not Found");
		+	return true;
		+	});