jQuery : 제이쿼리 선언 (local, cdn) / 선택자

jQuery (제이쿼리)

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리로 간단하게 자바스크립트를 이용하도록 하는 것이다.

제이쿼리 선언

라이브러리를 가져와 사용할 때는 로컬에 다운로드하거나 웹의 주소를 입력해야 한다.

1. local

    <script src="jquery-3.6.0.js"></script>

로컬에 저장한 jQuery 파일을 사용하도록 script src로 선언하였다.

    <script src="jquery-3.6.0.js"></script>
    <script>
        $(function(){
            alert('제이쿼리 로드 완료')
        });
    </script>

$( ); 은 자바스크립트의 window.onload와 동일하게 페이지 로딩 완료 후에 함수를 실행하도록 하는 것이다. 로딩 이후 alert 경고창을 나타내는 function을 실행하도록 했다.

2. cdn (content delivery nerwork)

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function(){
            alert('제이쿼리 로드 완료')
        });
    </script>

cdn 웹사이트의 접속자가 자동으로 가장 가까운 서버에서 컨텐츠를 다운로드할 수 있도록 하는 기술이다.

src에 구글 cdn 주소를 입력해서 선언했다. 실행은 위와 동일하다.

선택자 (selector)

선택자 사용방법 : $('선택자')

$('선택자') 로 해당 html 요소들을 선택한다.

태그선택자

<body>
    <h2>제목</h2>
    <p>내용</p>
    <p>내용</p>
    <p>내용</p>
    <div>
        <p>div 내부 내용</p>
    </div>
    <p>내용</p>
    <p>내용</p>
</body>

위 html에 예시를 적용해본다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function(){
            $("p").css("text-decoration","underline red");
            $("h2").css("color","blue");
        });
    </script>

태그를 선택해서 css를 변경했다.

p 태그를 선택해서 text-decoration 값을 underline red로 하여 빨간 밑줄을 지정하도록 했다.

h2 태그는 글자색을 파란색으로 주었다.

자식태그 관계 없이 모든 태그에 적용된 것을 확인하였다.

클래스 선택자

    <script>
        $(function () {
            //클래스 under를 선택, 밑줄을 지정
            $(".under").css("text-decoration","underline");
            //클래스 skyblue 선택, 배경색 skyblue로 지정
            $('.skyblue').css('background-color','skyblue');
        });
    </script>

동일한 방식에서 클래스를 표시하기위해 .클래스명 으로 구분해주었다.

해당 클래스의 css를 지정해주었다.

id 선택자

id선택자도 동일한 형식에서 #id명으로 구분해서 선택한다.

<input type="text" id="id"> <input type="password" id="password">
    <button>로그인</button>
    <hr>
    <div id="result"></div> 

<script>
        $(function(){
            $('button').click(function(){
                //아이디 선택후 아이디에 입력된 값을 읽어옴
                var id = $("#id").val();
                //password 선택후 password에 입력된 값을 읽어옴
                var pass = $("#password").val();
                $('#result').html(`입력하신 아이디는 ${id}<br> 입력하신 암호는 ${pass}`);
            })
        });
    </script>

button태그를 선택해서 클릭 event일 때 함수를 실행하도록 했다.

함수는 #id로 id명이 id인 태그를 선택하고 val()으로 입력된 값을 가져와 변수에 저장, id명이 password인 태그에 입력된 값(val())을 변수 pass에 저장하였다.

#result 태그에 html으로 태그 안에 내용을 추가했다.

자식 선택자

    <script>
        $(function(){
            //아이디 wrap의 자식인 h1 제목태그 선택 / 배경색 노랑, 밑줄
            $('#wrap > h1').css("text-decoration","underline");
            $('#wrap > h1').css("background-color","yellow");          
        });
    </script>

#wrap 의 자식인 h1을 선택하고 속성을 하나씩 변경해주었다.

    <script>
        $(function(){
            $('#wrap h1').css("text-decoration","underline").css("background-color","yellow");           
        });
    </script>

한번에 두가지 이상의 속성을 . 으로 연결해서 지정할 수도 있다. (체인 함수)

    <script>
        $(function(){
            $('#wrap h1').css({
                'background-color' : 'yellow',
                'text-decoration' : 'underline'
            });
        });
    </script>

체인함수 대신에 { } 으로 묶어서 한번에 지정할 수도 있다.

인접 관계 선택자 (인접 형제 선택자)

    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <p class="txt">내용2</p>
        <p>내용3</p>
        <p>내용4</p>
     </div>

위 html으로 인접 형제 선택자 예시를 확인한다.

인접한 요소중에 다음 태그 (형), 이전 태그 (동생)을 선택해본다.

형 요소 next

    <script>
        $(function(){
            $('.txt + p').css('background-color','yellow'); //txt 다음 p태그
        });
    </script>

+ 으로 인접형제선택자를 사용하면 앞의 선택자 바로 뒤에 나오는 것이 지정된다.

.txt 클래스 태그의 바로 뒤 p태그(내용3)가 선택된다.

    <script>
        $(function(){
            $('.txt').next().css('background-color','yellow'); 
        });
    </script>

바로 뒤에 오는 태그를 next()로도 지정할 수 있다. 동일하게 내용3이 적힌 .txt 바로 뒤 p 태그가 선택되었다.

    <script>
        $(function(){
            $('.txt').next().next().css('background-color','yellow'); 
        });
    </script>

next()를 두번 선언해서 내용4가 적힌 p태그가 선택되었다.

동생 요소 prev

    <script>
        $(function(){
            $('.txt').prev().css('color','red');
        });
    </script>

클래스로 선택한 요소의 인접한 앞 요소(이전 태그)인 동생 요소는 prev()로 지정할 수 있다. 내용1이 적힌 .txt 앞 p태그가 선택되었다.

    <script>
        $(function(){
            $('.txt').prev().prev().css('color','red');
        });
    </script>

prev()를 두번 지정해주어서 h1 태그가 선택되었다.

nextAll(), prevAll()

    <script>
        $(function(){
            $('.txt').nextAll().css('color','blue');   
            $('.txt').prevAll().css('color','green');
        });
    </script>

선택요소의 모든 형요소 : nextAll()

선택요소의 형제 관계에 있는 요소 중에 선택요소 전에 나온 것들을 모두 선택한다.

선택요소의 모든 동생요소 : prevAll()

선택요소의 형제 관계에 있는 요소 중에 선택요소 다음에 나온 것들을 모두 선택한다.

형제요소 선택은 자신을 제외한다.

siblings()

    <script>
        $(function(){
	$('.txt').siblings().css('color','green');
        });
    </script>

선택요소의 모든 형제요소(형,동생) : siblings()

자신을 제외한 형제 관계에 있는 모든 요소를 선택한다.

prevUntil(), nextUntil()

    <div id="wrap">
        <h1 class="title">선택자</h1>
        <p>내용1</p>
        <p>내용2</p>
        <p class="txt3">내용3</p>
        <p>내용4</p>
        <p>내용5</p>
        <p class="txt6">내용6</p>
    </div>
    
    <script>
       $(function(){
      $('.txt3').prevUntil(".title").css('color','orange');
      $('.txt3').prevUntil().css('text-decoration','underline');
      $('.txt3').nextUntil('.txt6').css('color','red');
      $('.txt3').nextUntil().css('font-weight','bold');
    });
    </script>

형제 관계의 요소 중 자신의 이전 요소는 prev(형), 다음 요소는 next(동생)로 표현했다.

prevUntil(선택자)은 자신의 이전 요소부터 해당 선택자까지를 선택할 수 있고, nextUntil(선택자)은 자신의 다음요소부터 해당선택자까지 선택할 수 있다. ()에 아무것도 적지 않으면 prevAll, nextAll과 동일하게 끝까지 선택된다.

부모선택자

parent

    <h1 class="title">선택자</h1>
   <section>
    섹션영역 시작
      <div>
        div영역시작
         <p class="txt1">div 내 p 태그 내용</p>
         div영역 끝
      </div>
      섹션영역 끝
   </section>

    <script>
        $(function(){
            $('.txt1').parent().css('border','1px solid black');
            $('.txt1').parent().parent().css('border','1px solid red');
        });
    </script>

parent()로 부모요소를 선택할 수 있다. txt1클래스 요소의 부모요소인 div에 검정 테두리를 적용, txt1클래스 요소의 부모의 부모인 section 영역에 빨간 테두리가 적용되었다.

parents()

    <script>
        $(function(){
            $('.txt2').parents().css('border','1px dashed blue');
            $('.txt2').parents('div').css('border','5px dashed green');
        });
    </script>

parents()으로 .txt2선택자의 부모들 중에 모든 부모들을 선택하였고, (all의 의미)

parents('div')처럼 ()안에 선택자를 넣으면 부모요소중에 ()안의 요소까지만 선택된다. (until의 의미)

first, last / first-of-type, last-of-type

    <ul>
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
    </ul>
    <ul>
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
    </ul>
    <ul>
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
    </ul>

li 목록 태그 3개씩 가지고 있는 ul 묶음이 3개 있다.

    <script>
            $(function(){
                $('ul li:first').css('color', 'red');
                $('ul li:last').css('color', 'blue');
            });
    </script>

ul li:first는 ul의 자손 li의 첫번째 요소를 말한다. 모든 li중에 가장 첫번째 하나만 선택된다.

이와 마찬가지로 last는 마지막 요소 하나만 선택된다.

    <script>
            $(function(){
                $('ul li:first-of-type').css('font-weight', 'bold');
                $('ul li:last-of-type').css('text-decoration', 'underline');
                });
    </script>

first-of-type을 이용하면 각 ul 그룹마다 첫번째 li 요소가 선택된다. last-of-type은 마찬가지로 각 ul 그룹 별 마지막 요소가 선택된다.

first : 빨간색 / last : 파란색

first-of-type : bold / last-of-type : 밑줄

even, odd

    <script>
            $(function(){
                $('li:even').css('color','red');
                $('li:odd').css('background-color','yellow');
            });
    </script>

같은 html에 기존의 스타일을 모두 없애고 even과 odd를 확인하였다.

even(짝수)에는 빨간글씨, odd(홀수)에는 노란 배경 스타일을 적용했는데 첫번째 요소에 짝수 스타일이 적용되었다. 이것은 인덱스 번호 기준으로 홀수, 짝수를 지정했기 때문이다.

또한 그룹별로 적용되지 않고 선택자 전체를 기준으로 한다.

nth-child()

    <script>
        $(function(){
            $('li:nth-child(2n)').css('background-color','green');
            $('li:nth-child(2n+1)').css('background-color','yellow');
        });
    </script>

2n+1에 노란색, 2n에 초록색을 지정했다. 홀수 짝수와 달리 눈에 보이는 기준으로 첫번째 요소에 2n+1이 적용되었고, 두번째 요소에 2n이 적용되었다.

여기서는 ul 그룹별로 선택된 것을 확인할 수 있다. 두번째 ul의 메뉴1은 전체에서 4번째요소지만 그룹의 첫번째요소로 2n+1 스타일이 적용되었다.

인덱스 번호 (eq, lt, gt)

eq() : equal

    <script>
        $(function(){
           $('ul li').eq(2).css('color','red');
        });
    </script>

ul 자손 li 태그를 선택하고, 인덱스 2번에 스타일을 적용했다. li 세번째 요소만 선택된 것을 확인하였다.

    <script>
        $(function(){
           $('ul li').eq(5).css('color','red');
        });
    </script>

동일하게 5번 인덱스를 지정했을 때 여섯번째 요소가 나오는 것을 보고 그룹별이 아닌 전체를 기준으로 인덱스를 잡는 것을 확인했다.

    <script>
        $(function(){
           $('ul li:eq(5)').css('color','red');
        });
    </script>

이렇게 표현해도 동일하다.

lt() : little

    <script>
        $(function(){
           $('ul li:lt(5)').css('color','red');
        });
    </script>

lt()는 인덱스번호가 작은 요소를 선택한다. lt(5)는 5보다 작은 인덱스를 가진 요소를 선택하고, 5번인덱스는 포함되지 않았다.

gt() : greater

    <script>
        $(function(){
           $('ul li:gt(5)').css('color','red');
        });
    </script>

gt()는 인덱스번호가 큰 요소를 선택한다. gt(5)는 5보다 큰 인덱스를 가진 요소를 선택하고, 5번인덱스는 포함되지 않았다.

only-child / slice()

    <ul id="ul_1">
        <li>메뉴1</li>
        <li>메뉴2</li>
        <li>메뉴3</li>
        <li>메뉴4</li>
        <li>메뉴5</li>
        <li>메뉴6</li>
    </ul>
    <ul id="ul_2">
        <li>메뉴1</li>
    </ul>

    <script>
        $(function () {
            // 유일한 자식요소일때만
            $('li:only-child').css('color', 'red');
            // 3번인덱스 전까지만
            $('#ul_1 li').slice(1, 3).css('color', 'blue');
        });
    </script>

only-child 는 자신이 유일한 자식요소인 것을 선택한다. 형제요소가 없는 것으로 외동이라고 생각하면 된다.

li 중에, 오직 하나만 있는 태그를 선택한다.

자식요소 li가 두 그룹이 있지만 li 요소가 하나만 있는 밑의 메뉴1에만 스타일이 지정되었다.

slice(x,y)는 인덱스 값 x부터 y전까지를 선택하는 것이다. #ul_1의 자식 li중에 인덱스 1부터 3전까지로 인덱스 1, 인덱스 2가 선택되었다.

속성 선택자 (attribute)

속성 조건에 맞는 선택자를 지정한다.

1. 해당 속성이 있는 경우

선택자['속성']

$('a[download]').css('background-color','coral');

a 태그에 download 속성을 가진 것이 선택된다.

2. 일치하는 속성 값 (=)

선택자['속성=값']

$('a[target=_blank]').css('background-color','yellow');

a 태그에 target 속성이 _blank인 것 선택된다.

3. 시작하는 속성값 (^=)

선택자['속성^=값']

$('a[href^=http]').css('color','red');

href 속성이 http로 시작하는 a 태그만 선택한다.

4. 포함하는 속성값 (*=)

선택자['속성*=값']

$('a[href*=lib]').css('border','1px solid black');

href 속성에 lib가 포함되는 a 태그만 선택한다.

5. 끝나는 속성값 ($=)

선택자['속성$=값']

$('a[href$=jpg]').css('text-decoration','line-through');

href 속성값이 jpg로 끝나는 a 태그가 선택된다.

    <script>
      $(function(){
           $('a[download]').css('background-color','coral');
           $('a[target=_blank]').css('background-color','yellow');
           $('a[href^=http]').css('color','red');
           $('a[href*=lib]').css('border','1px solid black');
           $('a[href$=jpg]').css('text-decoration','line-through');
        });
    </script>

    <a href="http://www.google.co.kr" target="_blank">1번 구글로 이동</a><br>
    <a href="/resource/img/grill1.jpg" download>2번 첨부파일 다운로드</a><br>
    <a href="/resource/lib/jquery-3.6.0.min.js" download>3번 제이쿼리 다운로드</a>

속성 선택자로 스타일이 반영된 것을 확인할 수 있다.

'WEB > jQuery' 카테고리의 다른 글

너비, 높이 - width, height / innerWidth, innerHeight / outerWidth, outerHeight (0)	2022.06.20
jQuery 좌표 : offset() , position() (0)	2022.06.20
val() - attr('value') , html() - text() (0)	2022.06.20
attr('class'), addClass, removeClass, toggleClass, hasClass - 적용된 클래스 조회, 클래스 추가, 클래스 삭제, 클래스 확인 (0)	2022.06.20
attr : 속성 값 가져오기, 속성 추가 / removeAttr : 속성 제거 (0)	2022.06.20

Develop Me