2.11 Ajax quiz3

5468 ワード
テキストリンク
ボタンをクリックすると、ずっと変化している猫の写真が表示されます.
つまり、今回はurlを導入しなければなりません.
$('#img-cat').attr('src',imgurl)
jqueryイメージタスク画像アドレスの変更
(jquery imgラベルsrcの変更)-->Google検索によるjquery関数の検索
attrこれは不思議ですね.

JQueryの練習が終わってから行きます!
<style type="text/css">
  div.question-box {
    margin: 10px 0 20px 0;
  }
  div.question-box > div {
    margin-top: 30px;
  }

</style>

<script>
  function q1() {
    $.ajax({
            type: "GET",
            url: "https://api.thecatapi.com/v1/images/search",
            data: {},
            success: function (response) {
             let imgurl = response[0]['url']
              $('#img-cat').attr('src',imgurl)
               }
},)
}
</script>

JQuery+Ajaxの組み合わせを練習しましょう!

<hr/>

<div class="question-box">
  <h2>3. 랜덤 고양이 사진 API를 이용하기</h2>
  <p>예쁜 고양이 사진을 보여주세요</p>
  <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
  <button onclick="q1()">고양이를 보자</button>
  <div>
    <img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
  </div>
</div>
Junit 4使用要約(五)suite
rValue, lValue