[제이쿼리] - 제이쿼리 기본 구조 / 제이쿼리로 태그 요소 불러오기

제이쿼리  기본 구조

제이쿼리를 사용하려면 먼저 제이쿼리를 연결한 후에 먼저 기본 구조를 작성해줘야한다.
말그대로 기본 구조라서 한번만 작성해주는 것이다. html의 !하고 엔터치는 그것이다.
제이쿼리에서 $기호는 '제이쿼리'를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자 역할을 한다.

$()는 두가지 역할을 한다. 

1. $()는 '제이쿼리 함수'를 뜻하며 기본형의 가장 바깥에 쓰인다.
2. $()는 css 선택자를 전달하여 특정 html 요소를 선택할 수 있도록 해준다.

 

$()를 통해서 생성된 요소를 '제이쿼리 객체'라고 부른다.
$()함수에 전달되는 인수는 반드시 ' '를 사용한 문자열 형태로 전달되어야 한다.

 [기본형]

1.
$(document).ready(function(){
    자바스크립트 코드;
});


2. 축약형
$(function(){
     자바스크립트 코드;
});

 

---

제이쿼리로 태그 요소 불러오기

제이쿼리로 태그에 특정 css를 적용하고 싶다면 아래 문법을 사용한다. 

모든 태그들은 문자열로 쓴다.

문자열이기때문에 css코드 그대로 - 하이픈이 들어가도 상관없다.

 [기본형]

1. 선택한 요소에 지정한 css 스타일을 적용한다.
$('css선택자').css('스타일 속성명', '값');
   
   ex)  $('a').css('color', 'red');
        $("#title").css("color", "blue");


2. 선택한 요소에 지정한 속성을 적용한다. 속성이 없다면 추가되고, 있다면 속성을 바꿔준다.
$('css선택자').attr('속성', '값');
    
    ex)  $('a').attr('target', '_blank');

+ 태그를 변수에 넣고 싶을 때
let aTag = $('a')

 

   //제이쿼리

      // 이어서 연결할 수 있다. 제이쿼리에선 카멜표기법 아니고 css 고대로 적으면 된다.

      $(function () {

        $("#title").css("color", "blue").css("background-color", "lightblue");

        $("#naver")

          .attr("href", "https://www.naver.com/")

          .attr("target", "_blank");

      });