초보 개발자

[jQuery] 정의 / 라이브러리 추가 / 선택자

부자는나야나 2020. 7. 10. 15:41

jQuery란?

자바스크립트에서 자주 사용되는 기능들을 미리 만들어둔 라이브러리 언어이며, 자바스크립트를 쉽게 사용하게 도와준다!

 

특징

  • 가볍다 ⇒  자바스크립트에 코드 1~2줄만 추가하면 바로 사용가능하다

  • 비동기 통신(ajax)을 할 수 있도록 구현해두었다

  • 동적으로 html이나 css 조작하는 것이 편리하다

  • html 요소를 선택하고 css속성을 변경하는 함수를 포함하고 있다

라이브러리 추가방법

제이쿼리를 사용하기 위해서는 먼저 라이브러리를 추가해야한다! (2가지 방법)

  1. jQuery.js 파일 다운 후, <script src="js/jquery-3.4.1.js"> 태그 추가하기
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>

  2. 네트워크 환경에서 js 불러서 사용하기 (인터넷 환경에서만 사용가능)
    (CDN : Content Delivery Network, 네트워크 환경에서 문서를 다운받는 작업방식)
    <script src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>

jQuery 선택자

원래는 자바스크립트에서 사용하는 키워드지만, 제이쿼리로 사용하고 싶다면 jQuery(  ) 또는$(   ) 로 감싸준다.

그러면 jQuery 객체가 생성된다!!


기본 선택자 

  • 전체 선택자 : $(“*”)

  • 태그선택자 : $(“태그 이름”)

  • 클래스 선택자 : $(“.클래스이름”)

  • 아이디 선택자 : $(“#아이디 이름”)


인접관계 선택자

하나의 요소를 선택하고, 해당요소를 기준으로 자식요소, 부모요소, 형제요소를 선택하는 방법

  • 부모요소 선택자 : $("요소").parent() : 요소의 부모요소 선택

  • 상위요소 선택자 " $("요소").parents() : 요소의 상위요소를 모두 선택

  • 자식요소 선택자 : $("요소 1>요소2") : 요소1의 자식요소인 요소2를 선택

  • 하위요소 선택자 : $("요소1 요소2") : 요소1의 하위요소인 요소2를 모두 선택

  • 자식들요소 선택자 : $("요소").children() : 요소의 자식요소를 모두 선택

  • 형 요소들 선택자 : $("요소").preAll() : 요소보다 먼저 선언된 형제 요소 모두 선택

  • 형 요소 선택자 : $("요소").prev() : 요소보다 먼저 선언된 형제 요소를 선택 

  • last(), first()
    $("li:first").css("border","1px solid red");
    $("li:odd").css("border","1px solid red");
    ⇒ 이와 같이 요소에 바로 선택자를 적용해서 사용도 가능하다!

  • find()
    특정요소의 하위요소중에  선택자에 해당하는 요소 선택
    form.find("input[name='name']")

속성선택자

  • $(“요소[속성 ~= ‘값’]”) : 속성에 값이 포함하는 요소 선택(단어 단위)

  • $(“요소[속성 ^= ‘값’]”) : 속성이 지정한 ‘값’으로 시작하는 요소

  • $(“요소[속성 $= ‘값’]”) : 속성이 지정한 ‘값’으로 끝나는 요소

  • $(“요소[속성 *= ‘값’]”) : 속성이 지정한 ‘값을 포함하는 요소 (부분 포함)

 

저작자표시