jQuery: 장점, 사용법, 선택자(직접 선택자, 인접선택자, 탐색선택자, 속성선택자, form필터 선택자)

 

jQuery

자바스크립트의 라이브러리 중 하나

라이브러리 : 함수를 여러개 모아둬서 필요 시 불러서 사용할 수 있도록

 

장점

- 적은 코드로 많은 작업 실행 가능

- 크로스 브라우징 가능

- 자유로운 css 구현

 

사용법

1. 다운로드

- compressed : 디자이너 버젼, 연결만 하면 사용 가능

- uncompressed : 개발자 버젼, 소스 수정 용이

 

2.CDN(CDN Content Delibery Network)

: 콘텐츠를 효율적으로 사용하기 위해

: 로딩속도 향상

    - 구글  https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js

    - 네이버

    - 마이크로 소트프사 https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0

    - 제이쿼리사이트

 

 

    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
//        $(document).ready(function(){
//            console.log("jQuery");
//        })
//둘 다 사용 가능        
        $(function(){
            console.log("jQuery");
        })
    </script>

 

 

선택자

css와 동일하게 사용

$("선택자").속성;
$("선택자").메서드();
$("선택자").이벤트;

 

직접 선택자

        $(document).ready(function(){
            //전체 선택자
            $("*").css("color","skyblue");
            
            //태그 선택자
            $("p").css("text-decoration","underline");
            
            //클래스 선택자
            $(".text").css("font-size","50px");
            
            //ID 선택자
            $("#idText").css("background","pink");
            
            //다중 선택자
            $(".text,.text2").css("color","green");
        })

 

인접 선택자

1. 부모선택자>자식선택자 :자식선택자

2. 조상선택자 후손선택자 :후손선택자

3. 선택자1 + 선택자2  : 선택자1 바로 다음에오는 선택자2을 선택해라  바로다음형제선택자

4. 선택자1 ~ 선택자2 : 선택자1 이후에 오는 모든 선택자2를 선택해라

        $(function() {
            //자식 선택자
            $(".nav>li>a").css("color", "skyblue");
            //후손 선택자
            $(".nav>li a").css("text-decoration", "none");
            //+ 다음 형제 선택자
            $("h2+p").css("color", "pink");
            //~ 이후에 오는 모든 형제 선택자
            $("h2 ~p").css("font-size", "30px");
        })

5. next() : 바로 다음 형제

6. nextAll() : 다음에 오는 모든 형제

7. nextUntil() : 지정된 위치 전까지의 다음 형제

8. prev() : 이전에 오는 형제

9. prevAll() : 이전에 오는 모든 형제

10. prevUntil() : 지정된 위치 전 까지의 이전 형제

11. parent() : 바로 부모

12. parents() : 모든 조상

13. parentsUntil() : 지정된 위치 전까지의 조상

14. children() : 자식선택자

15. siblings() : 형제들

16. closest() : 가장 인접한 요소 찾기-부모나 형제 요소 

        $(function(){
            $(".list4").next().css("color","lightgreen");
            $(".list4").nextAll().css("font-size","25px");
            $(".list4").nextUntil(".list7").css("text-decoration","underline");
            
            $(".menu4").prev().css("text-decoration","underline");
            $(".menu4").prevAll().css("background","pink");
            $(".menu4").prevUntil(".menu1").css("font-size","25px");
            
            $(".me").siblings().css("background","green");
        })

 $(function(){
            $("p").parent("div").css("border","1px solid red");
            $("p").parents("div").css("text-decoration","underline");
            $(".menu").children("li").css("border","1px solid green");
            $(".sub1-1").closest("ul").css("border","5px solid skyblue");
        })

탐색선택자

1. 첫번째자식 : $("선택자").first() - jQuery

                     $("선택자:first") - jQuery

                     $("선택자:first-child")

                          $("선택자:first-of-type")

2. 마지막자식 : $("선택자").last() - jQuery

                     $("선택자:last") - jQuery

                     $("선택자:last-child")

                          $("선택자:last-of-type")

3. 순서번째 : $("선택자:nth-child(순서)")

4. 짝수번째 자식 : $("선택자:nth-child(2n)")

                         $("선택자:even")  순서가 0부터 시작된다. - jQuery

5. 홀수번째 자식 : $("선택자:nth-chil(2n+1)")

                         $("선택자:odd") 순서가 0부터 시작된다.  - jQuery

6. 타입중 첫번째 요소 : $("선택자:first-of-type")

7. 타입중 n번째 요소 : $("선택자:nth-of-type(순서)")

8. 유일한 자식 (자식이 하나인 요소): $("선택자:only-child")  - jQuery

9. 순서번째 :  $("선택자:eq(순서)") - jQuery

                  $("선택자").eq(순서) - jQuery * 순서는 0부터 시작

10. 선택한 요소보다 앞에 오는 요소들 : $("선택자:lt(순서)") - jQuery

11. 선택한 요소보다 뒤에 오는 요소들 : $("선택자:gt(순서)") - jQuery

12. 지정 구간내에 있는 영역 :$("선택자").slice(시작위치,끝위치) 끝위치-1번째까지

 $(function() {
            $(".menu>li:first-child").css("color", "pink");
            $(".menu>li:last-child").css("font-size", "25px");
            $(".menu>li:nth-child(3)").css("text-decoration", "underline");

            $(".list>li").first().css("background", "yellow");
            $(".list>li:first").css("color", "grey");
            $("dl>dd:first-of-type").css("font-size", "30px");

            $(".list>li:even").css("background", "green");
            $(".list>li:odd").css("background", "orange");

            $("ul>li:only-child").css("border", "1px solid black");

            // $(".test>li").eq(3).css("font-size","50px");
            $(".test>li:eq(3)").css("font-size", "50px");

            $(".test>li:lt(3)").css("text-decoration","underline");
            $(".test>li:gt(3)").css("background","antiquewhite");
            
            $(".test>li").slice(1,6).css("font-weight","bolder");
        })

 

 

속성 선택자

1. 요소[속성 = 값] : 속성과 값이 같은 요소

2. 요소[속성 != 값] :  속성이 "값"이  아닌요소

3. 요소[속성 ^= 값 ] : 값으로 시작하는

4. 요소[속성 ~= 값] : 독립된 단어를 포함하는것

5. 요소[속성 $= 값 ] : 값으로 끝나는것

6. 요소[속성 *= 값 ] : 값을 포함하는것

7. :visible : 보여지는 속성이 요소

8. :hidden : 숨겨진 속성 요소

9. $(":selected")

10. $(":checked")

 

        $(function(){
            $("a[target]").css("background","green");
            $("a[href^=http]").css("font-size","40px");
            $("a[href$=com]").css("border","1px solid skyblue");
            $("a[href*=um]").css("font-style","italic");
        })

        $(function(){
            $("h2:hidden").css("display","block");
            $("h1:visible").css("display","none");
            console.log($("select>option:selected").val());
            console.log($("input:checked").val());
        })

 

Form 필터 선택자

1. 요소:text

2. 요소:password

3. 요소:checkbox : type 속성이 checkbox

4. 요소:file

5 요소:image

6. 요소:radio

7. 요소:submit

8. 요소:button : type 속성이 button 또는 button

9. 요소:checked : 체크된 입력양식

10. 요소:selected : option중에 선택된 태그

11. 요소:focus : 커서가(초점)이 들어간 입력양식

12. 요소:enabled : 활성화된 입력양식

13. 요소: disabled : 비활성화된 입력양식

 

        $(function(){
            $("input:text").css("border","2px dotted blue");
            $("input:password").css("background","antiquewhite");
            $("input:checkbox").next().css("background","pink");
            $("input:file").css("background","skyblue");
            $("input:submit").css("background","beige");
        })

 

 

기타

1. 선택자:contains("문자열") : 특정 문자열을 포함하는 선택자

- 선택자.contents(): 선택자의 후손으로 있는 모든 요소를 찾아서 메서드 적용

2. 선택자:has(선택자2) : 선택자2를 가지는 선택자를 찾아서 메서드 적용

3. 선택자.is(선택자2): 선택자가 선택자2가 맞는지 조건문

4. 선택자:not(선택자2) : 선택자가 없는 요소(css가능)

5. 선택자:empty : 내용물이 없는 빈 요소

6. 선택자1.find("선택자2") : 선택자2 태그를 가지는 선택자1를 찾아서 선택자2에 메서드적용

- 선택자.filter("선택자2"):선택자1중에서 선택자2의 조건을 가지는 요소를 선택

7. 선택자.closest(조상선택자) : 선택자에 가장 인접한 조상선택자를 찾아라

 

       $(function() {
            $("p:contains('문장')").css("background", "pink");
            $("p:has(strong)").css("border", "2px solid black");
            $("p").find("strong").css("border","1px dotted red");
            $("p:empty").css("height","100px");
            
            console.log($(".text").is("p"));
            console.log($(".text").is("p:has(strong)"));
        })