제이쿼리(jQuery) - 기본내용

KimJH_94·2022년 9월 26일
0

제이쿼리

목록 보기
2/9
post-thumbnail

💻 제이쿼리 기본 문법


🔥 기본문법

// $('선택자').동작함수();
$('.welcome').html('hello jQuery');

$ 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자 입니다. 이를 이용해 HTML의 태그나 선택자로 접근이 가능하며, 이후 동작함수에 여러가지 이벤트를 붙이거나 CSS를 추가해 줄 수 있습니다.

🔥 Document 객체의 ready()메소드

자바스크립트를 배울 때 window.onload = function(){}를 배웠습니다. onload()메소드는 돔과 이미지등이 모두 로드되었을 때 코드가 실행하도록 설정을 해주어, HTML과 자바스크립트의 위치 때문에 실행되지 않는 경우를 막아줍니다.

window.onload = function(){
	// 자바스크립트 코드;
}

제이쿼리에도 비슷한 메소드가 있습니다. ready()메소드인데, 레디 메소드는 모든 돔이 로드되면 실행되어, 자바스크립트의 onload메소드보다 조금 더 빠르게 실행되는 특징이 있습니다. 또 ready() 메소드는 더욱 짧게 줄여 사용할 수도 있습니다.

$('document').ready(function(){
	// 제이쿼리코드;
});

$(function(){
	// 제이쿼리코드;
});

💻 제이쿼리 선택자


제이쿼리를 사용하여 HTML요소를 손쉽게 선택할 수 있으며, 동작 또한 선택할 수 있습니다. 제이쿼리에서는 대부분의 CSS선택자와 몇몇 비표준 선택자를 제공합니다.


⭐️ CSS 선택자를 이용한 선택


<!--공통사항-->
<style>
    .selected{
        background-color: tomato !important;
        color: white;
        border: 2px solid red !important;
    }
</style>
<body>
    <ul>
        <li id="htmlID">HTML</li>
        <li class="selectClass">CSS</li>
        <li>javascript</li>
        <li>PHP</li>
        <li id="mysqlID">mySql</li>
    </ul>
</body>

🔥 tag

제이쿼리에서는 태그 이름을 사용하여 같은 태그 이름을 가지는 요소를 모두 선택할 수 있습니다.

$('li').addClass('selected'); 

🔥 class

클래스는 앞에 .을 붙여 표현해줍니다.

$(.selectClass).addClass('selected');

🔥 id

아이디는 앞에 #을 붙여 표현해줍니다.

$(#htmlID).addClass('selected');

🔥 여러개의 선택자를 동시에 선택

, 를 이용하여 여러 개의 선택자를 나열해줄 수도 있습니다.

$('#htmlID,.selectClass').addClass('selected');

🔥 조합형 셀렉터

id값이나 class값을 태그 이름과 함께 명시하여 적용하는 형태로, 독립적으로 명시할 때 보다 우선적으로 적용된다. (tag.class / tag#id)

$('li.selectClass').addClass('selected');

🔥 자식선택자를 선택

$('부모클래스 자식클래스') 와 같이 띄어쓰기로 구분하여 자식클래스를 표현해 줍니다.

$('#list li').addClass('selected');

⭐️ 비표준 선택자를 이용한 선택


제이쿼리에서는 선택한 요소들을 더욱 세분화 시켜 선택하기 위해 필터링을 진행할 수 있습니다. 이에 해당하는 선택자는 여러가지가 있는데 대표적인 것 몇 가지만 소개하겠습니다.

<!--공통 사항-->
<style>
	.selected{
        background-color: tomato !important;
        color: white;
        border: 2px solid red !important;
    }
</style>
<body>
	<ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>javascript</li>
        <li>PHP</li>
        <li>mySql</li>
	</ul>
</body>

🔥 eq(n)

인자와 인덱스가 동일한 엘리먼트 찾는 선택자

$('#list li:eq(2)').addClass('selected');
// javascript에만 색칠됨

🔥 gt(n)

인자보다 인덱스가 큰 엘리먼트 찾는 선택자

$('#list li:gt(1)').addClass('selected');
// javascript아래로 전부 색칠됨

🔥 lt(n)

인자보다 인덱스가 작은 엘리먼트 찾는 선택자

$('#list li:lt(2)').addClass('selected');
// javascript위로 전부 색칠됨

🔥 even

짝수의 인덱스 값을 가진 엘리먼트 선택자

$('#list li:even').addClass('selected');
// HTML, javascript, mySql 색칠됨

🔥 odd

홀수의 인덱스 값을 가진 엘리먼트 선택자

$('#list li:odd').addClass('selected');
// CSS, PHP 색칠됨

🔥 first

첫 번째 인덱스 엘리먼트에 대한 선택자

$('#list li:first').addClass('selected');
// HTML에만 색칠됨

🔥 last

마지막 인덱스 엘리먼트에 대한 선택자

$('#list li:last').addClass('selected');
// mySql에만 색칠됨

💻 메소드 체이닝


여러 개의 메소드가 연속으로 호출되는것을 메소드 체이닝이라고 합니다. 이는 선택자의 중복작성을 막아주어 코드를 깔끔하게 유지할 수 있도록 해줍니다.

<a href="http://jquery.com" id="tuto" target="_self">jQuery</a>
$('tuto').attr('href', 'http://www.naver.com')
		 .attr('target', '_blank')
         .attr('color', 'tomato');

이처럼 체인기법을 사용하면 대상을 여러 번 작성할 필요가 없습니다.

profile
안녕하세요.

0개의 댓글