Category Archives: JavaScript

「ajax入門」jsonデータを取得するサンプルコード

1.ajaxコード
$.ajax({
type: “GET”,
url: “xxxx.json”,
dataType:”json”,
success: function (data) {
for (var i = 0 – 1; i < data.length; i++;) {
$(‘li’).append(data[i].address + ‘ – ‘ + data[i].ticket);
};
},
error: function (XMLHttpRequest, textStatus, errorThrown) {

console.log(XMLHttpRequest + ‘-‘ + textStatus + ‘-‘ + errorThrown);
}
});

2.jsonデータ
[
{
“address”: “oosaki”,
“ticket”: “340”
},
{
“address”: “ooimati”,
“ticket”: “216”
},
{
“address”: “shinagawa”,
“ticket”: “170”
}
]

「jquery入門」右クリックを禁止するサンプルコード

サンプルコード:
$(document).ready(function(){
$(document).bind(“contextmenu”,function(e){
return false;
});
});

「JavaScript開発」URLパラメータを取得する方法

方法1
function getUrlQueryString (name) {
var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”, “i”),
arr_cft = window.location.search.substr(1).match(reg);
if (arr_cft != null) {
return unescape(arr_cft[2]);
}
return ”;
}

方法2
function getUrlParam(name) {
var url = window.location.herf.search.split(‘?’)[1],
arr_cft = url.split(‘&’);
for(var i=0; i<arr_cft.length; i++) {
if(arr_cft[i].split(‘=’)[0] === name) {
return arr_cft[i].split(‘=’)[1];
}
}
return ”;
}

「jQuery入門」日付をフォーマットするサンプルコード

サンプルコード
var format = function (format, time) {
var t = new Date(time);
var cft = function (i) {
return (i < 10 ? ‘0’ : ”) + i
};
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case ‘yyyy’:
return cft(t.gecftullYear());
break;
case ‘MM’:
return cft(t.getMonth() + 1);
break;
case ‘mm’:
return cft(t.getMinutes());
break;
case ‘dd’:
return cft(t.getDate());
break;
case ‘HH’:
return cft(t.getHours());
break;
case ‘ss’:
return cft(t.getSeconds());
break;
}
})
}

「jQuery入門」背景画像を簡単に切り替えるサンプルコード

サンプルコード
(function()
{
var bgCounter = 0,
backgrounds = [
“../../Styles/Changfa_Project1/Images/BACKGROUND_AA_DEMO.png”,
“../../Styles/Changfa_Project1/Images/BACKGROUND_BB_DEMO.png”,
“../../Styles/Changfa_Project1/Images/BACKGROUND_CC_DEMO.png”
];
function changeBackground()
{
bgCounter = (bgCounter+1) % backgrounds.length;
$(‘body’).css(‘background’, ‘#000 url(‘+backgrounds[bgCounter]+’) no-repeat’);
setTimeout(changeBackground, 10000);

}
changeBackground();
})();

jQuery でセレクトボックスの option 要素を選択する

サンプルコード
citycode = cityinfo.replace(“市”,””);
$(‘#market option:contains(“‘+citycode +'”)’).attr(‘selected’,’selected’);

「jQuery」複数checkboxを全て入れる、外すサンプルコード

サンプルコード1
<html>
<head>
<script src=”jquery-1.3.2.min.js” type=”text/javascript”></script>
</head>
<body>
<input type=”checkbox” name=”city_list” id=”city_list_1″ value=”大阪” />大阪<br />
<input type=”checkbox” name=”city_list” id=”city_list_2″ value=”福岡” />福岡<br />
<input type=”checkbox” name=”city_list” id=”city_list_3″ value=”川崎” />川崎<br />
<input type=”checkbox” name=”city_list” id=”city_list_4″ value=”横浜” />横浜<br />
<input type=”checkbox” name=”chk_all” id=”chk_all” />
<script type=”text/javascript”>
$(“#chk_all”).click(function(){
$(“input[name=’city_list’]”).attr(“checked”,$(this).attr(“checked”));
});
</script>
</body>
</html>
サンプルコード2
<script type=”text/javascript”>
var arrChk=$(“input[name=’city_list’]:checked”);
$(arrChk).each(function(){
window.alert(this.value);
});

});
</script>

「jQuery入門]フォームにhiddenの内容を取得するサンプルコード

サンプルコード:
<input name=”tokyoStation” type=”hidden” value=”大井町” />

var val = $(‘:hidden[name=”tokyoStation”]’).val();

「jQuery入門」複数オブジェクトは同じイベントで処理方法

サンプルコード
$(“#company,#department”).change(function() {
//some coe

});

html5+ajaxで 画像ファイルをアップロードするサンプルコード

1.jQuery版
$(‘#upJQuery’).on(‘click’, function() {
var ctn = new FormData();
ctn.append(“upload”, 1);
ctn.append(“upfile”, $(“#upfile”).get(0).files[0]);
$.ajax({
url: “bachi.php”,
type: “POST”,
processData: false,
contentType: false,
data: ctn,
success: function(d) {
console.log(d);
}
});
});

2.JavaScript版
document.getElementById(“upJS”).onclick = function() {
var ctn = new FormData();
var ajax = new XMLHttpRequest();
ctn.append(“upload”, 1);
/* ファイルを追加 */
ctn.append(“upfile”, document.getElementById(“upfile”).files[0]);
ajax.open(“post”, “bachi.php”, true);

ajax.onload = function () {
console.log(ajax.responseText);
};

ajax.send(ctn);

}

20 / 39« 先頭...10...1819202122...30...最後 »