Category Archives: JavaScript

「jQuery入門」親要素と子要素を取得するサンプルコード

htmlコード
<div id=”product”>
<ul>
<li class=”classA″><span class=”demo1″>AA</span></li>
<li class=”classB″><span class=”demo2″>BB</span></li>
<li class=”classC″><span class=”demo3″>CC</span></li>
</ul>
</div>

jQueryコード
親要素を取得
$(“li”).click(function(){
$(this).parent()
$(this).parent(“ul”)
});

子要素を取得
$(“li”).click(function(){
$(this).children(“span”)
$(this).find(“span”)
$(“span”,this)
});

隣接要素を取得
$(“li”).click(function(){
$(this).next(“li”)
$(“+li”,this)
$(this).nextAll(“li”)
$(this).prev(“li”)
$(this).prevAll(“li”)
});

「jQuery開発」正規表現でパスワードの強度をチェックするサンプルコード

jQueryコード:
$(‘#pass’).keyup(function(e) {
var strongRegex = new RegExp(“^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$”, “g”);
var mediumRegex = new RegExp(“^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$”, “g”);
var enoughRegex = new RegExp(“(?=.{6,}).*”, “g”);
if (false == enoughRegex.test($(this).val())) {
$(‘#passstrength’).html(‘More Characters’);
} else if (strongRegex.test($(this).val())) {
$(‘#passstrength’).className = ‘ok’;
$(‘#passstrength’).html(‘強い!’);
} else if (mediumRegex.test($(this).val())) {
$(‘#passstrength’).className = ‘alert’;
$(‘#passstrength’).html(‘普通!’);
} else {
$(‘#passstrength’).className = ‘error’;
$(‘#passstrength’).html(‘弱い!’);
}
return true;
});

「jQuery入門」フルスクリーンDIVを作成するサンプルコード

jQueryコード:
$(‘#content’).css({
‘width’: $(window).width(),
‘height’: $(window).height(),
});
// make sure div stays full width/height on resize
$(window).resize(function(){
var $w = $(window);
$(‘#content’).css({
‘width’: $w.width(),
‘height’: $w.height(),
});
});

「jQuery開発」trimで文字列の先頭と末尾から空白を除去する

jqueryコード:
function providerReg(){
var $username = $.trim($(“#username”).val());
if($username==”) {
ShowMessage(“ユーザIDを入力してください”,”#ff0000″);
return;
}
document.all.form1.submit();
}
htmlコード:
<tr>
<td width=”16%” align=”right”>ユーザ名前:</td>
<td colspan=”3″><s:textfield id=”username” key=”operatorbean.username” size=”30″ value=”%{#request.operatorbean.username}” /> </td>
</tr>

「jquery入門」slice()で要素集合から指定範囲のものを返す方法

サンプルコード
<script src=”/jquery/1.12.4/jquery.min.js”></script>
<ul>
<li>list item 11</li>
<li>list item 22</li>
<li>list item 33</li>
<li>list item 44</li>
<li>list item 55</li>
</ul>
<button id=”btn”>ボタン</button>
<script>
$(‘#btn’).click(function(){
$(‘li’).slice(2,4).css(‘background’, ‘red’);
})
</script>

「jquery入門」filter() で要素をフィルタリングするサンプルコード

サンプルコード
<script src=”/jquery/1.12.4/jquery.min.js”></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id=”btn”>ボタン</button>
<script>
$(‘#btn’).click(function(){
$(‘li’).filter(‘:even’).css(‘border’,’1px solid lightgreen’)
})
</script>

「jQuery入門」複数の要素に対してmap()の使い方

サンプルコード
<script src=”/jquery/1.12.4/jquery.min.js”></script>
<input value=”text”>
<input value=”text”>
<input value=”text”>
<button id=”btn”>ボタン</button>
<script>
$(‘#btn’).click(function(){
$(‘input’).map(function(index,dom){
dom.value += index;
});
})
</script>

「jquery入門」has(selector)で要素を選択するサンプルコード

サンプルコード
<script src=”/jquery/1.12.4/jquery.min.js”></script>
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
</ul>
<button id=”btn”>ボタン</button>
<script>
$(‘#btn’).click(function(){
$(‘li’).has(‘ul’).css(‘border’, ‘1px solid lightblue’);
})
</script>

「jQuery入門」–last()で要素の中で最後の要素を取得する

サンプルコード
<script src=”/jquery/1.12.4/jquery.min.js”></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<button id=”btn1″>ボタン11</button>
<button id=”btn2″>ボタン2</button>
<script>
$(‘#btn1’).click(function(){
$(‘li’).first().css(‘border’,’1px solid red’);
})
$(‘#btn2’).click(function(){
$(‘li’).last().css(‘border’,’1px solid blue’);
})
</script>

「JavaScript入門」親要素、子要素、兄弟要素を取得する方法

1.親要素
element.parentNode

2.子要素
一覧
element.childNodes
最初の子
element.firstChild

最後の子
element.lastChild

3,兄弟要素
element.previousSibling
element.nextSibling