読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

jQueryで覚えたこと【セレクタ・メソッド・イベント】

jQuery 備忘録

最近jQueryを勉強しはじめますた。ちょい大事だとおもったこと自分用にメモ。

基本の書き方

<script>
$(function(){
    $("#abc").css("color","red");
});
</script>


ひとつのセレクタ複数の支持を出す

<script>
$(function(){
    $("#abc").css({
    "color" : "red",
    "background" : "blue"
    });
});
</script>

つなげる場合は「,」を忘れずに!


alertの場合の書き方

<script>
$(function(){
    alert($("#abc").html());
});
</script>

セレクタメソッド含めてalertで囲む。


「要素を空に」「要素を削除」

要素を空にする場合はメソッドのかっこの中は""で囲む
削除の場合はかっこの中には何も記述しない。そんなイメージw



メソッドチェーン

<script>
$(function(){
    $("#abc").html("うんこちんこ").css("color","#f00");
});
</script>

「.」でメソッドをつなげる。

イベント記述(onイベント)

<script>
$(function(){
    $("#aaa").on("click",function(){
    alert("ああああ");
    });
});
</script>

onイベントを解除 イベント記述(offイベント)

<script>
$(function(){
    $("#aaa").on("click",function(){
    alert("aaaa");

    $("#aaa").off("click");
    alert("あああ");
    });
});
</script>

clickイベントなど

<script>
$(function(){
    $("#aaa").click(function(){
    alert("あああ");
    });
});
</script>


hoverイベント

<script>
$(function(){
  $("#button").hover(
    function(){
    $("#danraku").css("color","red");
    },
    function(){
    $("#danraku").css("color","blue");
    }
  ); 
});
</script>

イベント記述(中にセレクタメソッドある場合)

<script>
$(function(){
  $(window).resize(function(){
  $("h1").css("color","red");
  });    
});
</script>