jQuery 기초, method, event

JQuery

오픈 소스 기반의 javascript라이브러리 입니다.
JQuery를 사용하면 짧고 단순한 코드로 웹페이지에 다양한 효과를 줄 수 있습니다.

다운로드 방식

- https://jquery.com/download
1. Download 3.x.x클릭
2. 웹페이지에 있는 라이브러리 코드를 저장

CDN (컨텐츠 전송 네트워크, Count Delivery Network)

-여러 노드를 가진 네트워크에 데이터를 저장하여 컨텐츠를 제공하는 시스템입니다.

JQuery 사용법

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$document.ready(finction(){

});
</script>

• ready()는 javascript의 load()이벤트와 유사한 기능입니다.
• JQuery를 사용하는 모든 웹페이지는 $(document).read()로 시작합니다.

기본 선택자

• 태그 선택자
  $("p").css("border","4px solid red");
• id 선택자
  ("#gnb").css("border", "4px solid orange"); -class 선택자(.logo).css("border", "4px solid gold");
• 자식 선택자
  $(#gnb > ul > li").css("border", "4px solid green");
• 하위 선택자
  $("#gnb ul").css("border", "4px solid gold");
• 인접 선택자
  $("#visual + .content").css("border", "4px solid navy");
• 형제 선택자
  $("#visual ~ #footer").css("border", "4px solid pink");
• 종속 선택자
  $("div.util").css("border", "4px solid lightgreen");
• 그룹 선택자
  $(".left, .right, #banner").css("border", "4px solid yellow");