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

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

## 動きをつける
addClass  removeClass toggleClass

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

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

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_filter
```
$(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
```