본문 바로가기

javascript

js11_Query

신기한 쿼리의 세계,,,

  <script>
    $(function(){
      $('h1').css('color','red'); // getElementTagName('h1').css()
      $('p').css('color', 'green');
      $('#target').css('color', 'orange');
      $('h1#target').css('color', 'mediumseagreen');
    });
   
  </script>
  <!-- <style>
    h1{color: red;}
    h1#target{color: green;}

  </style> -->
</head>
<body>
  <h1>"Try it Yourself" 편집기.</h1>
  <p>"Try it Yourself" 편집기를 사용하면 jQuery를 쉽게 배울 수 있습니다.
    코드를 편집하고 브라우저에서 결과를 볼 수 있습니다.</p>
  <p id="target">W3Schools에서 제공하는 무료 "내 학습" 프로그램으로 진행 상황을 추적하세요.
    계정에 로그인하고 포인트 적립을 시작하세요!
    이것은 선택적 기능입니다.
    My Learning을 사용하지 않고 W3Schools를 공부할 수 있습니다.</p>
  <h1 id="target">"Try it Yourself"</h1>
 
</body>
 
 <script>
    // 속성 선택자
    // 1. input 태그의 속성 type이 text의 val을 'Hello jQuery'입력
    // 2. select태그의 선택된 옵션의 값을 3초마다 alert으로 출력
    //    - 3초마다
    //
    $(function(){
      $('input[type=text]').val('Hello jQuery');
      setInterval(()=>{
        let value = $('select > option:selected').val();
      alert(value);
      },3000);
     
    })
  </script>

</head>
<body>
 <input type="text">

 <input type="checkbox">
 <select name="" id="">
    <option value="Apple">Apple</option>
    <option value="Dog">Dog</option>
    <option value="Cat">Cat</option>
    <option value="Horse">Horse</option>
 </select>
  <script>
    //위치선택자->요소:odd, 요소:even, 요소:first, 요소:last
    //함수선택자->요소:eq(n), 요소:gtn(n), 요소: nth-child(3n+1)
    //요소:odd, 요소:even, 요소:first, 요소: last
    $(() => {
      $('tr:odd').css('background','orange');
      $('tr:even').css('background','lightgrey');
      $('tr:eq(0)').css('background','black').css('color','white');
      $('tr:nth-child(3n)').css('background','green').css('color','white');
      $('tr:nth-child(3n+1)').css('background','purple').css('color','blue');
    })
  </script>
</head>
<body>
  <table border="1">
    <colgroup>
    <col style="width: 100px;">
    <col style="width: 50px;">
    <col style="width: 50px;">
    <col style="width: 200px;">
    </colgroup>
    <tr>
      <th>이름</th>
      <th>성별</th>
      <th>나이</th>
      <th>주소</th>
    </tr>
    <tr>
      <td>손흥민</td>
      <td></td>
      <td>30</td>
      <td>토트넘</td>
    </tr>
    <tr>
      <td>홍길동</td>
      <td></td>
      <td></td>
      <td></td>
    </tr><tr>
      <td>홍길순</td>
      <td></td>
      <td></td>
      <td></td>
    </tr><tr>
      <td>홍길자</td>
      <td></td>
      <td></td>
      <td></td>
    </tr><tr>
      <td>홍길성</td>
      <td></td>
      <td></td>
      <td></td>
    </tr><tr>
      <td>홍성훈</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>
  </script>
  <script>
    $(()=>{
      // h1을 선택해서 홀수인 요소의 배경색 = green, 글자색 = white
      // chain method를 이용해서 작성해보기
      //filter(위치선택자).css()
      $('h1').filter(':odd')
      .css('color','white')
      .css('background','green');
      $('h1').filter(':even')
      .css('color','white')
      .css('background','red');
      $('h1').filter((index)=>{
        return index % 3 === 0
      }).css({background:'yellow',color:'black'})
      $('h1').filter(index=>
       index % 3 === 0
      ).css({background:'blue',color:'black'})
    })
  </script>

</head>
<body>
 <h1>header-1</h1>
 <h1>header-2</h1>
 <h1>header-3</h1>
 <h1>header-4</h1>
 <h1>header-5</h1>
 <h1>header-6</h1>
</body>
  </script>
  <style>
    h1.item{color:red;}
    h1.selected{color:blue;}
  </style>
  <script>
    // 문서객체에 속성추가 addClass(), 삭제는 removeClass()
    $(()=>{
      $('h1').removeClass('item');
      $('h1').addClass('selected');
    })
  </script>

</head>
<body>
  <h1 class="item">header-3</h1>
  <h1 class="item">header-3</h1>
  <h1 class="item">header-3</h1>
</body>
  </script>
<script>
  $(()=>{
    // A. attr 추가 or 읽기
    let src = $('img').attr('src'); // 배열이 아니라 첫 번째 객체의 속성만
    // alert(typeof src);
    let wd = $('img').attr('width');
    alert(wd);
    alert(typeof wd);

    // 1. 값
    // $('img').attr('width', 300);
    // $('img').attr('height', 300);

    // 2. function
    $('img').attr('width',(index)=>{
      return (index+1) * 100;
    })
    // 3. object
    $('img').attr({
      // width: 400,
      // width: function(inex) {return(index+1)*100;}
      width: index => (index+1)*100,
      height:100,
    })
     // B. 속성삭제 removeAttr()
     $('h1').removeAttr('data-index');
  })
</script>
</head>
<body>
  <img src="./img/지수.jpg" alt="">
  <img src="./img/지수2.jpg" alt="">
  <img src="./img/지수3.jpg" alt="">

  <h1 data-index = "1">Header-1</h1>
  <h1 data-index = "2">Header-2</h1>
  <h1 data-index = "3">Header-3</h1>
</body>
  </script>

<script>
  // html(), text(), remove(), empty()
  $(()=>{
    // 1. html() : 문서객체
    let h1 = $('h1').html()
    // alert(h1);
    // alert(typeof h1); // string1
   
    // 2. text() : 문서객체의 내부 문자열
    let h1_text = $('h1').text(); // 전체 h1태그의 문자열을 가져오시오
    alert(h1_text)
    // 3. html() : 문서객체에 추가하기
    $('div.html').html('<h3>$().html()매서드</h3>');
    // 4. text() : 문서객체 내부에 문자열 추가
    $('div.text').text('<h3>$().text()매서드</h3>');
    // 5. remove() : 문서객체 삭제
    $('h1').first().remove();
    // 6. empty() : 문서객체 내부문자열을 비움
    $('div.text').first().empty();
  })
</script>
</head>
<body>
  <h1>header-1</h1>
  <h1>header-2</h1>
  <h1>header-3</h1>

  <div class="html"></div>
  <div class="html"></div>
  <div class="html"></div>

  <div class="text"></div>
  <div class="text"></div>
  <div class="text"></div>
</body>
  <script>
    // $('tag') -> 선택자
    // $('<tag>') -> 생성자
      $(()=>{
        // 1. appendTo
        $('<h1></h1>').html('Hello jQuery(1)').appendTo('body');
        $('<h1>Hello jQuery(2)</h1>').appendTo('body');
        // 2. attr().appenTo()
        $('<img>').attr('src','./img/지수.jpg').appendTo('body');
        // 3. 객체 $('<img>', {})
        $('<img>', {
          src: './img/지수2.jpg',
          width: 300,
          height: 300,
        }).appendTo('body');
        // 4. append : 문자열 형태의 태그를 문서객체로 추가
        let h1 = '<h1>hello World(1)</h1>'
        let h2 = '<h1>hello World(2)</h1>'
          $('body').append(h1,h2,h1,h2);

      })
  </script>
<script>
  // 움직이기 효과
  $(()=>{
    // img 크기 조정
    $('img').css({'width':300, 'height':200})

    // 1초마다 객체를 이동
    setInterval(() => {
      $('img').first().appendTo('body');
    }, 1000);
  })
</script>
</head>
<body>
  <img src="./img/지수.jpg" alt="">
  <img src="./img/지수2.jpg" alt="">
  <img src="./img/지수3.jpg" alt="">
</body>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
#container {
  position: absolute;
  width: 600px;
  height: 300px;
  border: 5px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arrow{
  z-index: 100;
  font-size: 2em;
  padding: 10px;
  background-color: black;
  color: white;
  opacity: 0.2;
}
.arrow:hover{
  opacity: 1;
}
 
const container = document.querySelector('#container');
const pics = ['지수jpg','지수2.jpg','지수3.jpg' ];

container.style.backgroundImage = `url(./img/${pics[0]})`;

const arrows = document.querySelectorAll('.arrow');
let i = 0;

arrows.forEach(arrow => {
  arrow.addEventListener('click', e=>{
    if(e.target.id === "left"){
      i--;
      if(i<0) i = pics.length - 1;
    }else if(e.target.id === "right"){
      i++;
      if(i>=pics.length) i = 0;
    }
      container.style.backgroundImage = `url(./img/${pics[i]})`
  })
})
 
 
<link rel="stylesheet" href="./css/js18.css">
</head>
<body>
  <div id ="container">
    <div class="arrow" id="left">&lang;</div>
    <div class="arrow" id="right">&lang;</div>
  </div>
 

  <script src="./js/js18.js"></script>
</body>

'javascript' 카테고리의 다른 글

js13_effect  (0) 2023.06.01
js12_events  (0) 2023.06.01
js10_exception  (0) 2023.06.01
js09_builtin  (0) 2023.06.01
js08_events  (1) 2023.06.01