jQuery

9mond·2023년 8월 10일

jquery

1. jQuery

1-1. 라이브러리

자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다.
프로그래밍 효율을 높여주는 코드들

1-2. jQuery

DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

2. jQuery 제어 대상 접근 방법

$ : JQuery
JQuery는 제어할 요소를 획득하기 위해여 $() 함수 안에 제어할 대상을 가르키는 CSS셀렉터를 파라미터로 전달한다.

2-1. 태그

let mytag = $("h1");

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

2-2. 클래스

let myclass = $('.hello');

// class
$(".selectClass").addClass('selected');

2-3. id

let myid = $('#hello');

// id
$('#htmlID').addClass('selected');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <style>
        .selected{
            background-color: black;
            color: coral;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>javascript</li>
        <li>PHP</li>
        <li>MySQL</li>
        <li>Oracle</li>
    </ul>
    <script>
        // 여러개
        // list라는 id를 가진 태그 안에 있는 모든 li태그 선택
        $('#list li').addClass('selected');

        // 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자
        // 2라는 숫자 index(0부터 시작)
        $("#list li:eq(2)").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>