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