jqualy 実践編

ready

function() 引数ありなし

塊
$(document).ready(function(){
どこを？ どのタイミングで？ $("p").click(function(){
どのように $(this).hide();
    });
})

指定できるモノ

タグ
クラス
id

$("button")
$(".btn")
$("#btn")

this

自身

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(this).hide();
    });
});
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_this

イベント

.click(function(){
})
.dblclick()
.hover()

.focus  efoに使える

hide show

display:noneで管理している

toggle

on off　切り替える

$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle();
    });
});

parant

js
$(document).ready(function(){
    $(".ex .hide").click(function(){
        $(this).parents(".ex").hide("slow");
    });
});

html
<div class="ex">
  <button class="hide">Hide me</button>
  <p>Contact: Helen Bennett<br> 
  Garden House Crowther Way<br>
  London</p>
</div>

サイドメニュー　出てくるやーつ

.slideDown .slideUp .slideToggle

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_down

画像を動かす animate

passingとかで動かしてる

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            height: 'toggle'
        });
    });
});

val

$(document).ready(function(){
    $("button").click(function(){
        alert("Value: " + $("#test").val());
    });
});

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_val_get

attr

属性操作

var result = $('input').attr({
    id: 'text',
    class: 'form',
    type: 'checkbox',
    value: 'one',
    checked: true
});

値を代入

html text val

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){
        $("#test3").val("Dolly Duck");
    });
});

値を代入　append prepend

html textとの違い
前と後ろに入れる

$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
    });

    $("#btn2").click(function(){
        $("ol").append("<li>Appended item</li>");
    });
});

要素を代入　複数

function appendText() {
    var txt1 = "<p>Text.</p>";              // Create text with HTML
    var txt2 = $("<p></p>").text("Text.");  // Create text with jQuery
    var txt3 = document.createElement("p");
    txt3.innerHTML = "Text.";               // Create text with DOM
    $("body").append(txt1, txt2, txt3);     // Append new elements
}

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append2

削除

remove empty

動きをつける

addClass removeClass toggleClass

複数要素の指定　　fast last ep filter .not

$(document).ready(function(){
    $("p").filter(".intro").css("background-color", "yellow");
});

インクリメンタル

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_filters_table