Category Archives: jquery

「jQuery入門」attr()でクリックされたid値を取得する

サンプルコード

「jQuery入門」セレクタでオブジェクトを指定する方法

1.最初の要素
$(‘:first’)
$(‘.targetObject:first’)

2.最後の要素
$(‘:last’)
$(‘.targetObject:last’)

3.偶数番目の要素
$(:even’)
$(tr:even’)

4.奇数番目の要素
$(‘:odd’)
$(‘tr:odd’)

5.ラジオボタン
$(‘:radio’)
$(‘.targetObject:radio’)

6.テキストボックス
$(‘:text’)
$(‘.targetObject:text’)

7.チェックボックス
$(‘:checkbox’)
$(‘.targetObject:checkbox’)

8.親要素
$(‘:parent’)
$(‘div:parent’)

「jQuery入門」 filter()を使って正規表現でセレクタ指定をする方法

1.htmlコード
<ul>
<li class=”changfa-11″>テストデータ1</li>
<li class=”changfa-kdf”>サンプルデータ2</li>
<li class=”changfa-33″>サンプルデータ3</li>
<li class=”changfa-44″>サンプルデータ4</li>
<li class=”changfa-55″>サンプルデータ5</li>
</ul>

2.JSコード
<script>
var mk = $(‘li’).filter(function(index, element) {
return element.className.match(/changfa-\d+/);
})
console.log(“出力メッセージ:”+ mk );
</script>

「ajax入門」return falseでsubmit処理を中断させるサンプル

JSコード
$(‘button[type=submit]’).click(function () {
var errFlg = false;

$.ajax({
url: ‘/xxx.do’,
type: ‘POST’,
async: false,
error : function(data) {
console.log(data);
},
data: {
address: $(‘#address’).val()
},
success: function (data) {
if (data.result == “success”) {
//処理コード
}else {
errFlg = true;
}
}
});

if (errFlg ) {
return false;
}
}

「jQuery入門」テーブルの行列位置を取得するサンプル

1.htmlコード
<table border=”1″>
<tr>
<td>テストデータAA</td>
<td>テストデータBB</td>
<td>テストデータCC</td>
</tr>
</table>

2.JSコード
$(‘td’).click(function(){
var row = $(this).closest(‘tr’).index();
var col = this.cellIndex;
console.log(‘行: ‘ + row + ‘, 列: ‘ + col);
});

「jQuery入門」not()で複数の属性を指定する

htmlコード
<ul>
<li id=”kaA”>data 11</li>
<li class=”kaB”>data 22</li>
<li>data 33</li>
<li class=”kaB”>data 44</li>
<li class=”kaC”>data 55</li>
</ul>

JSコード
var cft = $(‘li’).not(‘#kaA, .kaB’);

//要素を出力する
cft.each(function(value, element) {
console.log(element)
})

「jQuery入門」not()でclass属性を指定するサンプル

1.htmlコード
<p>test data11</p>
<p class=”cft”>test data22</p>
<p>test data33</p>
<p>test data44</p>

2.JSコード
var r = $(‘p’).not(‘.cft’);
//すべてのp要素を出力する
r.each(function(value, element) {
console.log(element)
})

結果
<p>test data11</p>
<p>test data22</p>
<p>test data44</p>

「jQuery入門」hiddenのフォームの内容を取得するコード

htmlコード
<input name=”username” type=”hidden” value=”yamada” />
JSコード
var val = $(‘:hidden[name=”username”]’).val();

「jQuery入門」prependTo()と.attr()の使い方

1.ラジオボタンの値を選択
$(“userId”).attr(“checked”, “checked”);

2.チェックボックスの値を選択
$(“addressId”).attr(“checked”, “checked”);

3.prependTo()
指定された要素に追加
<button id=”testBtn”>prependTo</button>
<ul id=”addressLst”>
<li>データ1</li>
<li>データ2</li>
<li>データ3</li>
</ul>

$(“#testBtn”).click(function(){
$(“<li>データ4</li>”).prependTo(“#addressLst”);
});

「jQuery入門」:not( セレクタ)で指定した属性以外の要素を取得

①htmlコード
<ul>
<li class=”changfa1″>dddd。</li>
<li class=”hao2″>4444。</li>
<li class=”sample”>44444。</li>
<li class=”dedao”>44444。</li>
</ul>

②JSコード
var hh = $(‘li:not(.changfa1)’).text();
console.log(“出力:”+hh);