Category Archives: jquery

「jQuery入門」aリンクにクリックイベントを設定する

①htmlコード
<a id=”fileDL” href=”#” >ダウンロード
</a>

②JSコード
$(‘a[id=fileDL]’).on(‘click’, function() {
//処理コード
}
});

 

 

「jQuery入門」複数のフォームの値を出力するサンプル

1.htmlコード
<input type=”text” name=”emp[]” value=”山田”>
<input type=”text” name=”emp[]” value=”村上”>
<input type=”text” name=”emp[]” value=”西川”>
<input type=”text” name=”emp[]” value=”重田”>

2.jQueryコード
// eachループ処理
$(‘input[name=”emp[]”]’).each(function(i) {
// eq(i)で要素を出力する
$(‘input[name=”emp[]”]’).eq(i).text($(this).val());
});

「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の has( )メソッドを利用するサンプル

1.htmlコード

2.JSコード

「jQuery入門」div要素の高さを変更するサンプル

1.div要素の高さを変更する
①padding内側の高さ
$(‘#cftA’).height(200);

②border内側の高さ
$(‘#cftB’).innerHeight(300);

③paddingとborderを含めた高さ
$(‘#cftC’).outerHeight(400);

2.ブラウザの高さを取得
var cft = $(window).height();
console.log(cft);

3.ドキュメントの高さを取得
var cft = $(document).height();
console.log(cft);

 

「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)
})

10 / 12« 先頭...89101112