jQueryでよく使うメソッドを簡潔にまとめる
##addClass
要素にクラスを追加する
<style>
.color{
font-size: 30px;
color: red;
}
</style>
<p>こんにちは！</p>
<script>
$("p").addClass('color');
</script>
##attr
属性を取得、書き換える
<a href="http://www.google.com">google</a>
<a href="http://www.bing.com/">bing</a>
<script>
// 要素を取得
console.log($('a[href*="google"]').attr("href"))
// 要素を書き換え
$('a[href*="bing"]').attr("href", "http://www.yahoo.com/")
</script>
##bind
onと一緒、onのメソッドを参照
参考URL http://qiita.com/nmta/items/310aa1cf385fa55129c1
##change
select要素、input要素、textarea要素が変更されたらイベントを発生させる
<select>
<option value='aaa'>aaa</option>
<option value='bbb'>bbb</option>
<option value='ccc'>ccc</option>
<option value='ddd'>ddd</option>
</select>
<script>
$("select").change(function(){
var value = $('option:selected').val();
console.log(value)
})
</script>
##click
要素をクリックしたらイベントを起こす
<p>こんにちは！</p>
<script>
$("p").click(function() {
$(this).text("さようなら！");
})
</script>
##data
データ属性を取得する
<p data-str="get">こんにちは！</p>
<script>
console.log($('p').data('str'))
</script>
##find
指定した要素から、指定した条件に合致する子孫要素を選択する
<ul>
<li>OK!</li>
<li>GOOD!</li>
<li>HAPPY!</li>
</ul>
<script>
$("ul").find("li").css("color", "red")
</script>
##hide
ある要素を非表示にする
<button>隠す</button>
<p>Hello</p>
<script>
$("button").click(function(){
$("p").hide();
});
</script>
##on
動的に作られた要素に対してイベントを追加していく
また関数に引数をつけてtargetで要素を補足できる
<body>
<select>
<option value='aaa'>aaa</option>
<option value='bbb'>bbb</option>
<option value='ccc'>ccc</option>
</select>
<span></span>
</body>
<script>
$("select").on("change", function(evt){
selected = ($(evt.target));
if (selected.val() === "aaa"){
$( "span" )
.stop()
.css( "opacity", 1 )
.text( selected.val() )
.fadeIn( 30 )
.fadeOut( 1000 );
}else if(selected.val() === "bbb"){
$( "span" )
.stop()
.css( "opacity", 1 )
.text( selected.val() )
.fadeIn( 30 )
.fadeOut( 1000 );
}else if(selected.val() === "ccc"){
$( "span" )
.stop()
.css( "opacity", 1 )
.text( selected.val() )
.fadeIn( 30 )
.fadeOut( 1000 );
}
});
</script>
##removeClass
要素からクラスを削除する
<style>
.color{
color: red;
}
</style>
<p class="color">こんにちは！</p>
<script>
$("p").click(function(){
$(this).removeClass('color');
})
</script>
##show
非表示状態にある要素を表示する
<div id="show">みなさん！</div>
<div style="display: none;">こんにちは！</div>
<script>
$("#show").click(function(){
$("div").show();
});
</script>
##text
要素内のテキストを取得、書き換える
<p>こんにちは！</p>
<div class="get">明日は？</div>
<script>
// 要素を取得
console.log($("p").text());
// 要素を書き換え
weekArray = [ "月", "火", "水", "木", "金", "土", "日" ]
$(".get").click(function() {
$(this).text(weekArray[new Date().getDay()] + "曜日")
});
</script>
##toggle
showとhideの機能をまとめてひとつにしたもの
ある要素が非表示の場合は表示し、ある要素が表示されている場合は非表示にする
<button>クリックMe!!!</button>
<p>YES</p>
<p style="display: none;">NO</p>
<script>
$("button").click(function(){
$("p").toggle();
});
</script>
##val
input要素のvalue属性を取得する
```html
<form action="">
<input type="text" name="get" value="値をゲット！！！">
</form>
<script>
console.log($("form [name=get]").val());
</script>