Category Archives: JavaScript

「jQuery」attr()でボタンの属性にdisabledを設定するメモ

サンプルコード:
<input type=’button’ id=’test’ value=’disabled’>
$(“#test”).attr(‘disabled’,false);

$(‘#button’).attr(‘disabled’,”true”);
$(‘#button’).removeAttr(“disabled”);

「jQuery」$(“#id1”).removeAttr(xx)と$(“#id2”).css(xxx)を利用するコード

jQueryコード
function demoAttrCss() {
if ($(“#conditionOne”).val()==”Cft”) {
$(“#conditionOneCft”).removeAttr(“disabled”).css(“background-color”, “xxx”);
$(“#changfaId”).css(“display”, “block”);
} else {
$(“#conditionOneCft”).attr(“disabled”,”disabled”).css(“background-color”, “xxx”);
$(“#changfaId”).css(“display”, “none”);
}
}

「jquery」keyup()でtextboxに入力文字が数字のみをするコード

JavaScriptコード
$(‘input#changfa’).keyup(function(){
var c=$(this);
if(/[^\d]/.test(c.val())){
var cftAmnt=c.val().replace(/[^\d]/g,”);
$(this).val(cftAmnt);
}
})

「jQuery開発」$.each()と$.ajax()を利用するサンプルコード

サンプルコード

$(function(){

$(‘#send’).click(function(){

$.ajax({

type: “GET”,

url: “demo.json”,

data: {username:$(“#username”).val(), content:$(“#profile”).val()},

dataType: “json”,

success: function(data){

$(‘#ctnTxt’).empty();   //ctnTxtのコンテンツをクリア
var html = ”;

$.each(data, function(commentIndex, comment){

html += ‘<div class=”comment”><h6>’ +comment[‘username’]

+ ‘:</h6><p class=”para”‘ + comment[‘profile’]

+ ‘</p></div>’;

});

$(‘#ctnTxt’).html(html);

}

});

});

});

「jQuery」append()とhtml()を利用するサンプルコード

1.append(content)
$(selector).append(function(index,html))
サンプルコード:
<script src=”/jquery.min.js” type=”text/javascript”></script>
<style>
.imgFocus{border: 1px solid #eee;}
</style>
<p> </p>
<script type=”text/javascript”>
var cftImg = “<div class=’imgFocus’>sample</div>”;
$(“p”).append(cftImg);
</script>

2.$(selector).html()
サンプルコード:
$(“.btnInfo”).click(function(){
$(“p”).html(“Hello <b>world</b>!”);

});

要素をクリア
$(“a[href$=’logout.jsp’]”).click(function(event) {
event.preventDefault();
$.get(“/xxx/Logout.jsp”,””,function(data, textStatus) {
if (data == 1) { //ログアウト
$(‘#message’).html(“”);
$(“#userlogin>div”).show();
}
else {
$(‘#message’).append(“<p><strong>ログアウト失敗、もう一度行ってください</strong></p>”);
}
});
});

「JavaScript」文字列がnullまたは空白チェックする簡単方法

方法1
if (var1 !== null || var1 !== undefined || var1 !== ”) {
var var2 = var1;
}

方法2
var var2 = var1 || ”;

「JavaScript」正規表現で文字列の空白をチェックするコード

サンプルコード
var strUser = ‘ ‘;
if (strUser.replace(/(^s*)|(s*$)/g, “”).length ==0)
{
alert(‘ユーザ名は空白ではありません’);
}

「JavaScript」html画面にタグ要素を削除するサンプルコード

Javasriptコード:
<script type=”text/javascript”>
function deleteE(){
var father = document.getElementById(“tagelement”);
var child = document.getElementById(“p1″);
father.removeChild(child);
}
</script>
</head>
<body>
<div id=”tagelement”>
<p id=”p1″>test data parameter</p>
<p id=”p2″>test data parameter</p>
</div>
<input type=”button” value=”削除” onclick=”deleteE()” />

「JavaScript」html画面にタグ要素を追加するサンプルコード

JavaScriptコード:
<script type=”text/javascript”>
function add(){
var element = document.createElement(“p”);
var node = document.createTextNode(“情報追加”);
element.appendChild(node);
x = document.getElementById(“tagelement”);
x.appendChild(element);
}
</script>
</head>
<body>
<div id=”tagelement”>
<p>test data paramater</p>
</div>
<input type=”button” value=”追加” onclick=”add()” />

「ajax」$(“#formのid”).serialize()のサンプルコード

サンプルコード
$.ajax({
type: “POST”,
data:$(“#cftId”).serialize(),
url: “${basePath}/public/changfa/xxx/xxxx”,
dataType: “text”,
cache: false,
success: function(data){
if(1==data){
alert(“削除成功”);

}else{

}
}
});