Category Archives: jquery

「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入門」aリンクにクリックイベントを設定する

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

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

 

 

「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入門」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入門」 $(“input”).blur()、$(“input”).focus()で要素を処理する

1.JSコード
<script type=”text/javascript” src=”/common/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“input”).focus(function(){
$(“input”).css(“background-color”,”#FFFFCC”);
});
$(“input”).blur(function(){
$(“input”).css(“background-color”,”#D6D6FF”);
});
});
</script>
</head>

2.htmlコード
名前を入力してください:
<input type=”text” id=”username” name=”username” />

「jQuery入門」remove()で要素を削除するサンプル

JSコード
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).remove(“.cft”);
});
});
</script>
</head>
<body>

htmlコード
<p>test data11</p>
<p class=”cft”><i>test data12</i></p>
<p class=”cft”><i>test data12</i></p>
<button>test3</button>

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