0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jqualy 実践編

Posted at

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
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?