Category Archives: jquery

「jquery入門」$(“p”).css(“background-color”)のサンプル

①JSコード
<script>
$(document).ready(function(){
$(“button”).click(function(){
alert(“背景色: ” + $(“p”).css(“background-color”));
});
});
</script>

②htmlコード
<body>
<h2>test title</h2>
<p style=”background-color:#ff0000″>data11</p>
<p style=”background-color:#00ff00″>data12</p>
<p style=”background-color:#0000ff”>data13</p>
<button>検証ボタン</button>
</body>

「jQuery入門」$(“#id”).load()のサンプル

1.JSコード

<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#cftone”).$(“#cftone”).load((“/sikao/ajax/info.txt”);
});
});
</script>
2.htmlコード
<body>
<div id=”cftone”><h2>data</h2></div>
<button>getdata</button>
</body>

「jquery入門」on()メソッドで複数のイベントを定義するサンプル

1.htmlコード
<input type=”text” id=”txtAddress” value=”tokyo”>
<div id=”addrDetailShow”> </div>

2.JSコード
$(function(){
$(‘#txtAddress’).on({
keydown: function(){
$(‘#addrDetailShow’).text(‘address-data-11’);
},
keyup: function(){
$(‘#addrDetailShow’).text(‘address-data-12’);
},
blur: function(){
$(‘#addrDetailShow’).text(‘address-data-14’);
},
focus: function(){
$(‘#addrDetailShow’).text(‘address-data-13’);
}
});
});

「jQuery入門」 $.each()でオブジェクトループ処理をするサンプル

JSコード
$(function() {
var cft = {key1:’testAA’, key2:’testBB’, key3:’testCC’};
$.each(cft, function(key, val) {
console.log(key+’:’+val);

});
});

「jQuery入門」eq(インデックス番号)からhtml要素を取得する

サンプル
<ul>
<li>oosaka</li>
<li>tokyo</li>
<li>fukuoka</li>
<li>daa11</li>
<li>daa21</li>

</ul>

var cft = $(‘li’).eq(1).text();
console.log( cft );

結果
tokyo

「jQuery入門」URLのクエリ文字列の配列から値を取得するコード

JSコード
var getResult = function() {
var result = [];

// クエリ文字列を取得して「&」で分割
var urlLst = window.location.search.substring(1).split(‘&’);
var chkTt;

urlLst.forEach( function(e, i, a) {
chkTt = e.split(‘=’);
result[ chkTt[0] ] = chkTt[1];
})

return result;
}

使い方
var ctnVars = getResult();
var username = ctnVars[‘username’];

「jQuery入門」選択されたラジオボタンの値を取得するコード

1.htmlコード
<input type=”radio” name=”uuu” value=”data11″ checked=”checked”>test data11
<input type=”radio” name=”uuu” value=”data22″>test data22
<button type=”button” name=”cft”>テスト</button>

2.JSコード
$(function() {
$(‘[name=cft]’).click(function() {
paVal = $(“input[name=’uuu’]:checked”).val();
alert(paVal);
});
});

「jQuery入門」セレクトボックス内のoptionタグを削除する

1.セレクトボックスのoptionの数を取得
cpCount = $(‘#cftLst’).children(‘option’).length;

2.選択項目を一つだけ削除
$(‘select#kdfId’).children(‘option:first-child’).remove();
$(‘select#kdfId option:first-child’).remove();

3.選択項目を全部削除
$(‘select#kdfId option’).remove();
$(‘select#kdfId’).children().remove();

「jquery入門」JSON.parse()で外部ファイルを読み込むコード

サンプルコード
<p id=”cft”></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById(“cft”).innerHTML = myObj.name;
}
};
xmlhttp.open(“GET”, “testinfo.txt”, true);
xmlhttp.send();

</script>

<p><a href=”testinfo.txt” target=”_blank”>ダウンロード</a></p>

「jquery入門」attr(key,value)で要素に属性を設定する

1.htmlコード
<button>Button11</button>
<button>Button12</button>
<button>Button13</button>
2.JSコード
$(“button:gt(1)”).attr(“disabled”,”disabled”);

10 / 11« 先頭...7891011