[jQuery] 제어 대상 접근 방법

형이·2023년 8월 17일

jquery

jQuery

목록 보기

2/14

📝 jQuery

🖥️ 1. jQuery 제어 대상 접근 방법

$(선택자).동작함수();

$ : jQuery를 사용하겠다고 선언하는 것과 같음

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

1-1. 태그

let mytag = $('태그 이름');

1-2. 클래스

let myclass = $('.클래스 이름');

1-3. id

let myid = $('#id값');

1-4. 조합형

$('a, b'); → 쉼표로 구분

1-5. 자식 요소 접근

$('a b'); → 띄어쓰기로 구분

🖥️ 2. chain

jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. 연속적인 제어가 가능하다.

attr은 'attribute'의 약자로 속성이라는 뜻, element의 id나 href 같은 속성들을 편리하게 바꿀 수 있도록 jQuery가 제공하는 것이다.

2-1. chain 장점

코드가 간결해진다.

중복을 제거

하나의 주어가 있으면, 그 안에 주어를 꾸며주는 여러개의 서술어가 나열된다.

📝 예제

EX)

<head>
	...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/
    		3.7.0/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="btn" value="btn" />
    <script>
        $("#btn").click(function(){
            $("#list li").text('happy');
        });

        // javascript에서 btn 버튼 클릭 시 empty -> happy 변경

    </script>
</body>

EX) 태그 이름

<head>
	...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/
    		3.7.0/jquery.min.js"></script>
</head>
<body>
    <p> Hello jQuery </p>
    <script>
        $('p').css('color', 'red');
    </script>
</body>

EX)

<head>
	...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/
    		3.7.0/jquery.min.js"></script>
    <style>
        .selected{
            background-color: black;
            color: tomato;
        }
    </style>
</head>
<body>
    <ul>
        <li id="htmlID">HTML</li>
        <li class="selectClass">CSS</li>
        <li>JavaScript</li>
        <li>PHP</li>
        <li id="mysqlID">MySQL</li>
    </ul>
    <script>
        // id
        $('#htmlID').addClass('selected');

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

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

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

EX)

<head>
	...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/
    		3.7.0/jquery.min.js"></script>
    <style>
        .selected{
            background-color: black;
            color: beige;
        }
    </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');

        // 짝수 index
        $('#list li:even').addClass('selected');

        // 홀수 index
        $('#list li:odd').addClass('selected');

        // 첫 번째 index
        $('#list li:first').addClass('selected');

        // 마지막 index
        $('#list li:last').addClass('selected');
    </script>
</body>

EX) chain

<head>
	...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/
    		3.7.0/jquery.min.js"></script>
</head>
<body>
    <a id="tutorial" href="https://jquery.com" target="_self">
    	jQuery
    </a>
    
    <script>
        // attr : 속성
        $('#tutorial').attr('href', 'https://www.naver.com')
           // href 속성 값을 'http://www.naver.com'으로 변경한다는 뜻
                      .attr('target', '_blank')
           			  // element의 target 속성 값을 변경한다는 뜻
                      .css('color', 'red');
           			  // color의 값이 red로 지정
    </script>
</body>