Category Archives: jquery

「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”);

「jquery入門」$(‘table tr’).click()と $(this).children(‘td’)の使い方

1.htmlコード
<table>
<tr>
<td><input type=”checkbox” /></td>
<td>data11</td>
</tr>
<tr>
<td><input type=”checkbox” /></td>
<td>data22</td>
</tr>
</table>

2.JSコード
$(document).ready(function() {
$(‘table tr’).click(function() {
var $tt = $(this).children(‘td’).children(‘input[type=checkbox]’);
if($tt.prop(‘checked’))
//処理コード1
else
//処理コード2
});
});

nth-child(odd)で奇数(偶数)番目の要素を取得するコード

1.htmlコード
<ul>
<li>test data item1</li>
<li>test data item2</li>
<li>test data item3</li>
</ul>

2.CSSコード
最初の要素
li:first-child{
}
最後の要素
li:last-child{
}
奇数番目の要素
li:nth-child(odd){
}
偶数番目の要素
li:nth-child(even){
}
上からn番目の要素
li:nth-child(n){
}
下からn番目の要素
li:nth-last-child(n){
}

「jquery入門」css(‘display’, ‘none’)、css(‘display’, ‘block’)で要素の非表示、表示

1.非表示
$(function() {
$(‘button’).click(function(){
$(‘p’).css(‘display’, ‘none’);
});
});

2.表示
$(function() {
$(‘button’).click(function(){
$(‘p’).css(‘display’, ‘block’);
});
});

「jQuery入門」$.each()メソッドの使い方

①htmlコード
<button name=”ss” name=”ss”>テスト</button>

②JSコード
<script src=”js/jquery-3.0.0.min.js”></script>
<script>
var station = [ “oosaki”, “gotanda”, “shibuya” ,”tokyo”];
$(“button”).click(function() {
$.each(station, function(){
alert(this);
});
});
</script>

11 / 11« 先頭...7891011