Category Archives: jquery

「jQuery入門」属性の値の部分一致で取得するサンプル

1.書式
*=
部分一致 指定したname属性の値を「含む」要素

^=
前方一致 指定したname属性の値から「始まる」要素

$=
後方一致 指定したname属性の値で「終わる」要素

!=
否定 指定したname属性の値を「除く」要素

2.JSサンプルコード

「Jquery入門」text()、html() と val()のコールバック(callback)関数

JSコード:
$(“#btn1”).click(function(){
$(“#test1”).text(function(i,orgTxt){
return “元テキスト: ” + orgTxt + ” 新テキスト: Hello world! (index: ” + i + “)”;
});
});

$(“#btn2”).click(function(){
$(“#test2”).html(function(i,orgHml){
return “元html: ” + orgHml + ” 新 html: Hello <b>world!</b> (index: ” + i + “)”;
});
});

「jQuery入門」jQueryオブジェクトを指定するサンプル

1.htmlコード
<div class=”changfa”>data–11</div>
<div class=”changfa”>data–22</div>
<div class=”changfa”>data–33</div>
<div class=”changfa”>data–44</div>
2.JSコード
$.each($(“.changfa”), function(i, val) {
console.log(i + ‘: ‘ + $(val).text());
});

「jQuery入門」同じイベントを複数登録するサンプル

JSコード
$(“#testForm input, #testForm select, #testForm textarea”).each(function(i, m) {
$(m.change(function(){
//some code
});
});

「jQuery入門」eq()で複数要素を取得するサンプル

1.htmlコード
<div>項目AA</div>
<div>項目BB</div>
<div>項目CC</div>

2.JSコード
var len = $(‘div’).length;
for(var j=0; j < len; j++) {
var cft = $(‘div’).eq(j).text();
console.log(‘result: ‘ + cft );
}
3.結果
result: 項目AA
result: 項目BB
result: 項目CC

「jQuery入門」セレクタにeq()を利用するサンプル

①htmlコード
<div>test data AA</div>
<div>test data BB</div>
<div>test data CC</div>
<div>test data DD</div>
<div>test data EE</div>

②JSコード
var ctn = $(‘div:eq(2)’).text();
console.log(“result:” ctn );

③結果
result:test data CC

「jQuery入門」要素の属性を設定する方法

①属性の現在値を取得する
$(‘#cft’).attr(‘width’);

②既存の属性を削除する
// title属性を削除
$(‘#cft’).removeAttr(‘width’);

// 属性を削除
$(‘#cft’).removeAttr(‘width height’);

「jquery入門」each()でulの要素数を取得するコード

①htmlコード
<ul>
<li>test data 11</li>
<li>test data 22</li>
<li>test data 33</li>
</ul>

②JSコード
$(function() {
var cft = 0;
$(‘li’).each(function(){
cft++;
});
console.log(cft);
});

「jquery入門」parent().is()と$(“tr:hidden”)の使い方

1.Booleanis(expr)
htmlコード
<form><input type=”checkbox” /></form>
JSコード
$(“input[type=’checkbox’]”).parent().is(“form”)
結果
true

2.Array<Element(s)>:hidden
htmlコード
<table> <tr style=”display:none”><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table>

JSコード
$(“tr:hidden”)

結果
[ <tr style=”display:none”><td>Value 1</td></tr> ]

3.(“input:hidden”)
htmlコード
<form> <input type=”text” name=”email” /> <input type=”hidden” name=”id” /> </form>

JSコード
$(“input:hidden”)
結果
[ <input type=”hidden” name=”id” /> ]

jQueryのfilterメソッドを利用するサンプル

htmlコード

JSコード