jQuery

1. 라이브러리

• 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 함
• 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드

2. jQuery

• jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구
• 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트를 효율적으로 제어할 수 있는 다양하는 수단을 제공하는 자바스크립트 라이브러리

3. api doc

• https://api.jquery.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input type="button" id="execute_btn" value="execute">
    
    <script>
        $("#execute_btn").click(function(){
            $("#list li").text('happy');
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <input type="button" id="pure" value="pure">
    <input type="button" id="jquery" value="jquery">

    <script>
        // pure 버튼을 클릭했을 때, alert으로 'pure' 띄우기
        let target = document.getElementById("pure");
        target.addEventListener('click', function(event){
            alert("pure");
        });

        // jquery
        $("#jquery").on('click', function(event){
            alert('jquery');
        });
    </script>
</body>
</html>

4. jQuery 제어의 대상 찾기

• jQuery -> $(jQuery 시작할 때
• h1 태그 요소에 대한 획득
  let mytag = $("h1");
• hello라는 css 클래스를 갖는 요소에 대한 획득
  let mytag = $(".hello");
• hello라는 id 속성을 갖는 요소에 대한 획득
  let mytag = $("#hello");
• 여러개 선택
  $('a, b')
• 자식/자손 선택자
  $('a, b;)
• 태그 속성
  $('tag_naem[name = 태그명]')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .selected {
            background-color: tomato;
            color: white;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <ul>
        <li id="htmlID">HTML</li>
        <li class="selectClass">CSS</li>
        <li>Javascript</li>
        <li>PHP</li>
        <li id="mysqlid">My Sql</li>
    </ul>
    <script>
        // id로 접근
        // $("#htmlID").addClass('selected');

        // class로 접근
        // $('.selectClass').addClass('selected');

        // tag
        // $('li').addClass('selected');

        // 여러개
        $('#htmlID, .selectClass').addClass('selected');
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .selected {
            background-color: tomato;
            color: white;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>PHP</li>
        <li>My sql</li>
    </ul>
    <script>
        // 여러개
        // list라는 id를 가진 태그 안에 있는 모든 li 태그 선택
        // $('#list li').addClass('selected');

        // 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자
        // 2라는 숫자 index(0부터 시작)
        // $('#list li').addClass('selected');

        // 인자보다 인덱스가 큰 엘리먼트를 찾아내는 선택자
        // index값이 1을 초과하는(1보다 큰) 값을 가져온다
        // $('#list li:gt(1)').addClass('selected');

        // 인자보다 인덱스가 작은 엘리먼트를 찾아내는 선택자
        // index 값이 2보다 작은 값
        // $('#list li:lt(2)').addClass('selected');

        // 짝수 인덱스 값을 가진 엘리먼트에 대한 선택자
        // $('#list li:even').addClass('selected');

        // 홀수 인덱스 값을 가진 엘리먼트에 대한 선택자
        // $('#list li:odd').addClass('selected');

        // 첫번쨰 인덱스 엘리먼트에 대한 선택자
        // $('#list li:first').addClass('selected');

        // 마지막 인덱스 엘리먼트에 대한 선택자
        $('#list li:last').addClass('selected');
    </script>
</body>
</html>