JQUERY - jQuery 기본 문법 및 js와 차이점, 셀렉터 이벤트 등록, jQuery 체이닝

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

yeonee 블로그 : 네이버 블로그

 

 

1. jQuery 기본 문법

$(선택자).동작함수1().동작함수2()

$(선택자).동작함수1().동작함수2()

달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다.

- 선택자를 이용하여 원하는 HTML 요소를 선택하고,
- 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.

 

2. jQuery $객체

​jQuery를 사용하기 위해서는 먼저 jQuery 객체를 생성하여야 합니다.
생성된 jQuery 객체는 다양한 메소드를 가지는데, jQuery를 학습한다고 하는 것은 대체로 이 메소드를 사용하는 방법을 익히는 것입니다.

$() // jQuery() 함수의 축약형

jQuery() 함수는 전달되는 인수의 종류에 따라 다른 움직임을 하지만 결국 jQuery 객체를 반환합니다.
인수의 종류에 따라 jQuery() 함수가 어떻게 동작하는지 살펴보도록 하겠습니다.

 

- CSS 스타일의 selector를 인수로 전달받을 때

jquery 문법

$('#ssd')
$('.hdd')

 

javascript 문법

document.getElementById('ssd')
document.querySelectorAll('.hdd')

 

$() 함수의 인수로 CSS의 태그 선택자를 지정하였습니다.

이때 $() 함수는 선택자에 의해 선택된 요소들을 jQuery 객체로 반환합니다. 또한 선택한 요소가 여러개일경우 자동으로 리스트를 만들어 저장해줍니다.

그래서 여러개 요소 리스트 형태일 경우, 이들을 하나하나 조작할 필요가 있을 경우, 순회하여 일일히 조작해야 하는 js와는 달리,  jquery는 따로 조건 없이 바로 자동으로 지정해 조작 해줄 수 있습니다.

 

- 셀렉터 이벤트 등록

HTML

<button id="b1" class="btn">Button1</button>
<button id="b2" class="btn">Button2</button>
<button id="b3" class="btn">Button3</button>
<button id="b4" class="btn">Button4</button>

 

jquery 문법

//jquery는 여러개 요소 리스트일 경우 자동으로 다 순회해서 등록해준다.
$('.btn').on('click', function() { });

 

javascript 문법

// js는 하나의 요소마다 일일히 click이벤트를 등록해줘야 한다.
const btn = document.querySelectorAll('.btn');
for(let i; i<btn.length; i++){
   btn[i].addEventListener('click', function() { });
}

위에서 말한 $() 함수는 선택자에 의해 선택된 요소들을  jQuery 객체로 반환 해주고, 선택한 요소가 여러개일경우 자동으로 리스트를 만들어 저장해주는 것을 위와 같은 코드를 통해 확인할 수 있습니다.

 

- 셀렉터 이벤트 등록  (※ 주의 사항 ※)

$() 로 반환된 jqeury객체는 당연히 자바스크립트의 함수들을 사용할 수 없고, jquery전용 함수를 사용해야 합니다.

jquery 문법

$("p").on("click", function() {
     $("#jq").css("border", "2px solid orange"); // 아이디가 "jq"인 요소를 선택함.
});

$('h1').text('Hello!');

 

javascript 문법

document.querySelector("p").addEventListener("click", function() {
	document.querySelector("#jq").style.border = "2px solid orange";
})

document.querySelector("h1").textContent = 'Hello!';

jquery 와 javascript 문법은 명확한 차이점을 보입니다. 코드의 간결성과 가독성은 당연히 jquery가 우세합니다.

 

- HTML을 인수로 전달받을 때

HTML 문자열을 인수로 받으면 새로운 HTML 요소를 생성합니다.

$('<p id="test">My <em>new</em> text</p>').appendTo('body');

My new text 가 해당 태그의 속성이 적용되어 화면에 출력된 모습입니다.

 

- JavaScript 객체를 인수로 전달받을 때

var boo = { 
   boo: 'love', 
   hello: 'world' 
};

var $boo = $(boo); // $()함수에 객체boo를 전달
console.log( $boo.prop('boo') ); // love

$boo.prop('boo', 'boom');
console.log( $boo.prop('boo') ); // boom

.prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다.
주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니다.
HTML의 속성은 .attr() 함수를 씁니다.

 

- jQuery 체이닝

$()함수는 자기자신 노드객체를 반환하기떄문에 체이닝 기법 사용이 가능합니다.

$("#list").find("li").eq(1).html("두 번째 아이템을 선택했어요!!");

코드를 분석해보자.

$("#list").find("li").eq(1).html("두 번째 아이템을 선택했어요!!");

 1. id가 list인 요소를 반환 (자식노드가 있다면 같이 딸려옴)
 2. li 요소를 find함. 이 find는 자바스크립트의 고차함수 find와 같으며, 찾고자 하는 게 여러개일 경우 리스트로 반환함.
 3. eq는 노드리스트에서 인덱스가 인수인걸 가져옴.
 4. html()은 innerHTML이라 보면 됨. setter로서 사용됨.

 

 

https://inpa.tistory.com/entry/jQuery-%F0%9F%93%9A-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC
+ 개인 공부 목적으로 해당 게시글을 참고하여 작성하였습니다.