jQuery - 함수

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

 

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

- 선택자를 이용하여 원하는 HTML 요소를 선택하고,

- 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.

 

​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() { });
}

 

 

 

셀렉터 이벤트 등록

 

$() 로 반환된 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!';

 

 

HTML을 인수로 전달받을 때

 

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

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

 

 

 

 

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

 

var foo = { 
   foo: 'bar', 
   hello: 'world' 
};
 
var $foo = $(foo); // $()함수에 객체foo를 전달
console.log( $foo.prop('foo') ); // bar
 
$foo.prop('foo', 'foobar');
console.log( $foo.prop('foo') ); // foobar

.prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가한다.

주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것이다.

HTML의 속성은 .attr() 함수를 쓴다.