Edited at

jQuery よく使うメソッドまとめ

More than 5 years have passed since last update.

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>