오늘 배운 것

JQuery

OpenSource 기반의 Javascript library
짧고 단순한 코드로 Webpage에서 다양한 효과나 연출을 적용
가장 많이 사용되던 JS라이브러리 지금은 줄어드는 추세

JQuery 사용법

1. CDN을 이용 ( https://code.jquery.com/ )

2. 직접 다운로드하여 파일주소 링크 ( https://jquery.com/download/ 가서 링크 클릭 후 Webpage 저장)

$("선택자") OR JQUery("선택자")로 사용 (선택자는 HTML태그, id, class 등이 될 수 있음

class는 $(".class")로 사용 , id는 $("#id")로 사용, HTML태그는 $('div')로 사용

  <body>
    <header>
      <h1>jQuery 시작하기</h1>
    </header>
    <div id="container">
      <h1 id="heading1">Heading One</h1>
      <p id="para1">
        Lorem ipsum dolor sit amet <span>consectetur</span> adipisicing elit. In commodi doloremque consequatur aliquam,
        quae sed voluptate quia fugiat repudiandae corrupti quod consectetur sunt doloribus quidem accusamus odio at
        nostrum ea.
      </p>
      <h1 class="heading2">Heading Two</h1>
      <p class="para2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. In commodi doloremque consequatur aliquam, quae sed
        voluptate quia fugiat repudiandae corrupti quod consectetur sunt doloribus quidem accusamus odio at nostrum ea.
      </p>
      <ul id="list">
        <li>리스트 아이템</li>
        <li>리스트 아이템</li>
        <li>리스트 아이템</li>
        <li>리스트 아이템</li>
        <li>리스트 아이템</li>
        <li>리스트 아이템</li>
        <li>리스트 아이템</li>
        <li>리스트 아이템</li>
      </ul>
      <!-- input 태그 -->
      <input type="button" value="버튼" />
      <input type="submit" value="전송" />
      <input type="text" />
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.js">
      // JQuery 사용해보기
      // $('h1').hide(); // h1태그들을 찾아서 숨김
      // $('h1#heading1').hide();
      // $('h1.heading2').hide();
      $('p span').css('color', 'red');
      $('ul#list li:even').css('background-color', 'yellow');
      $('ul#list li:nth-child(3)').css('list-style', 'none');
      $('input:button').hide();
    </script>
  </body>

  <body>
    <header>
      <h1>jQuery 이벤트</h1>
    </header>
    <div id="container">
      <h3>마우스 이벤트</h3>
      <button id="btn1">버튼 1</button>
      <button id="btn2">버튼 2</button>
      <button id="btn3">버튼 3</button>
      <p class="para1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut earum quidem quae saepe. Nostrum sit minus sunt
        deleniti autem, cum nemo. Quas earum porro dolor assumenda nostrum sed nam esse!
      </p>
      <h1 id="coords"></h1>
      <hr />
      <form action="">
        <label for="name">Name</label><br />
        <input type="text" id="name" name="name" />
        <br />
        <label for="email">Email</label><br />
        <input type="email" id="email" name="email" />
        <br />
        <label for="gender">Gender</label><br />
        <select name="gender" id="gender">
          <option value="maie">Male</option>
          <option value="femaie">Female</option>
        </select>
        <br />
        <input type="submit" value="Submit" />
      </form>
    </div>
    <script>
      $(document).ready(function () {
        // html이 준비된 다음 실행
        $('#btn1').on('dblclick', function () {
          $('.para1').hide();
        });
        $('#btn2').hover(function () {
          $('.para1').show();
        });
        $('#btn3').click(function () {
          $('.para1').toggle();
        });
      });

      // $(document).on('mousemove', function (e) {
      //   // console.log(e.clientX, e.clientY);
      //   $('#coords').text('x좌표 : ' + e.clientX + ' y좌표 : ' + e.clientY);
      // });

      $('input').focus(function () {
        // input창을 클릭해서 커서가 나올 때
        $(this).css('background-color', 'pink');
        // this는 이벤트가 발생한 객체
      });
      $('input').blur(function () {
        // input창에서 커서를 이동했을 때
        $(this).css('background-color', 'white');
      });
      $('select').change(function (e) {
        alert('변경됨');
        alert(e.target.value);
      });
    </script>
  </body>

  <body>
    <header>
      <h1>jQuery DOM응용실습</h1>
    </header>
    <div id="container">
      <button id="btn1">버튼 1</button>
      <p class="para1">첫번째 문장입니다.</p>
      <p class="para2">두번째 문장입니다.</p>
      <div id="myDiv"></div>
      <ul>
        <li>리스트 아이템 1</li>
        <li>리스트 아이템 2</li>
        <li>리스트 아이템 3</li>
        <li>리스트 아이템 4</li>
      </ul>
    </div>
    <script>
      // $('p.para1').css('color', 'red');
      // $('p.para1').css('background-color', 'yellow');
      // 객체 형식으로 여러개의 css를 넣을 수 있음
      // 하지만 css속성이 많을 경우 class를 추천
      $('p.para1').css({ color: 'red', backgroundColor: 'yellow' });
      $('p.para2').addClass('myclass');
      // toggleClass
      $('#btn1').on('click', function () {
        $('p.para2').toggleClass('myclass');
      });
      // text 내용 vs html + text 수정
      // $('#myDiv').text('문자열 내용 입력');
      $('#myDiv').html('<h1>첫번째</h1><h2>두번째</h2><h3>세번째</h3>');
      // 태그를 추가하는 방법 append, prepend
      // append 마지막 위치에 추가
      // prepend 처음 위치에 추가
      $('ul').append('<li>append 추가</li>');
      $('ul').prepend('<li>prepend 추가</li>');

      // 배열 처리 반복문
      const 과일 = ['사과', '당근', '배', '수박'];
      $.each(과일, function (i, val) {
        $('ul').append('<li>' + val + '</li>');
      });
      과일.forEach(function (val) {
        $('ul').append('<li>' + val + '</li>');
      });
      // JQuery로 가능한것은 JS로 다 가능
      // JQuery와 JS 동시에 사용가능
    </script>
  </body>

Author And Source

이 문제에 관하여(1월 27일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tutu10000/1월-27일

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

1월 27일