[JavaScript] jQuery 메서드 종류와 이론 설명

Notice

Recent Posts

Recent Comments

Link

개인 유튜브 채널

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

개발나라 스용공주

[JavaScript] jQuery 메서드 종류와 이론 설명 본문

WEB/JavaScript

[JavaScript] jQuery 메서드 종류와 이론 설명

스용공주 2024. 10. 26. 12:18

728x90

이번 글은 jQuery의 종류와 이론에 대한 설명글이다.

[ 메서드 기능 ]

메서드 종류	메서드 기능
이펙트 (effect)	요소를 보거나 감추거나 등
클래스 제어	클래스를 넣거나 지우거나 등
요소 탐색	선택한 요소의 부모, 자식(자손) 등을 찾기

[ 메서드 종류 ]

slideDown(), slideUp(), stop(), show(), hide(), fadeIn(), fadeOut(), addClass(), removeClass(), children(), siblings() 등 ..

[ 메서드 - 이펙트 ]

이펙트 종류	메서드 명	설명
보이기-감추기 효과	show()	요소를 나타내서 보여주는 효과
	hide()	요소를 사라지게해서 없애주는 효과
	toggle()	show() + hide() 의 반복
페이드(fade) 효과 * 괄호 안에는 지속시간을 넣어줄 수 있음.	fadeIn()	요소를 아래로 슬라이드하며 나타나는 효과
	fadeOut()	요소를 위로 슬라이드하며 사라지는 효과
	fadeToggl()	fadeIn() + fadeOut() 의 반복

=> fade 효과에서 () 안에 들어가는 지속시간은 'fast', 'slow' 등으로 나타내거나 500(0.5초), 3000(3초) 등으로 표현할 수 있다. (이때 1초는 1000이다.)

[ 메서드 - 클래스 제어 ]

클래스 제어란, 클래스를 강제로 넣고 빼는 것을 의미한다.

메서드 종류	메서드 명	설명
클래스 제어	addClass()	선택요소에 클래스 넣기
	removeClass()	선택요소에 클래스 빼기
	toggleClass()	addClass() + removeClass()의 반복

예제)

아래 코드를 보면 css에 html 부분에 존재하지 않는 클래스인 active가 존재한다.

addClass(), removeClass(), toggleClass()를 이용해 클래스 active를 넣었다 뺐다를 하여 클래스 active안에 있는 실행 코드 기능을 사용할 수 있다.

* 주의사항 : addClass(), removeClass(), toggleClass()는 모두 클래스를 넣었다 빼는 기능이므로 ()안에는 클래스명만 사용하고 클래스명 앞에 .(온점)을 붙이지 않는다.

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css\style.css">
</head>
<body>

    <a class="add" href="#none">넣기</a>
    <a class="rem" href="#none">빼기</a>
    <a class="tog" href="#none">토글</a>

    <div>box</div>

    <script src="script\jquery-1.12.4.js"></script>
    <script src="script\custom.js"></script>

</body>
</html>

[ css ]

a {
    width: 100px;
    height: 30px;
    background-color: grey;
    border-radius: 5px;
    display: inline-block;
    color: white;
    text-align: center;
}

div {
    width: 312px;
    height: 50px;
    background-color: blue;
    color : white;
}

.active {
    background-color: red;
}

[ js ]

$('.add').click(function(){
    $('div').addClass('active');
});

$('.rem').click(function(){
    $('div').removeClass('active');
});

$('.tog').click(function(){
    $('div').toggleClass('active')
})

[ 메서드 - 탐색 ]

메서드의 탐색이란, 메서드가 적용되는 선택요소를 기준점으로 놓고 해당 기준점의 자식 혹은 형제 요소를 찾는 것을 의미한다.

메서드 종류	메서드 명	설명
탐색	children()	선택요소 바로 아래 단계 자식 요소만 선택
탐색	siblings()	선택요소의 형제 요소 선택

children() 예제)

다음은 예제의 코드와 예제 실행결과이다.

예제의 풀이는 아래에 있다.

[ 실행결과 ]

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css\style.css">
</head>
<body>

    <ul class="menu">
        <li>
            <a href="#none">MEMU 1</a>
            <div class="sub-menu">
                <a href="#none">SUB MENU 1</a>
                <a href="#none">SUB MENU 2</a>
                <a href="#none">SUB MENU 3</a>
                <a href="#none">SUB MENU 4</a>
            </div>
        </li>
        <li>
            <a href="#none">MEMU 1</a>
            <div class="sub-menu">
                <a href="#none">SUB MENU 1</a>
                <a href="#none">SUB MENU 2</a>
                <a href="#none">SUB MENU 3</a>
                <a href="#none">SUB MENU 4</a>
            </div>
        </li>
    </ul>

    <script src="script\jquery-1.12.4.js"></script>
    <script src="script\custom.js"></script>

</body>
</html>

[ css ]

.sub-menu에 display:none을 통해 안보이게 한 것은 .sub-menu a에 해주게되면 네비게이션 바 하나하나 다 display: none의 적용으로 인해 sub-menu 안에 잠시 안보이는 것이 아닌 아예 보이는 요소 자체가 없이 사라지게 만드는 격이 되기 때문에 sub-menu에만 적용한 것이다.

.menu {
    padding : 0;
    list-style: none;
    width : 200px;
    border : 1px solid red;
    text-align: center;
}

.menu li > a {
    background-color: #000;
    color : #fff;
    display: block;
    padding : 5px;
}

.sub-menu {
    border : 1px solid #000;
    display: none; /*.sub-menu a에 하면 sub-menu에 든게 없어짐*/
}

.sub-menu a {
    display : block;
    padding : 5px;
}

[ js ]

이 예제의 경우 menu에 마우스를 올려두면 하위에 있는 네비게이션이 펼쳐지게 되는 구조이다.

따라서 마우스를 올려두는 태그인 .menu li에 마우스를 올려두면(mouseenter) .menu li의 하위에 있는 sub-menu가 slideDown() 되어야한다.

이때 menu li가 해당 html에는 2개가 있으므로 현재 마우스가 올려진 menu li를 구별하기 위해 this로 구별해주었다.

그리고 menu li가 아닌 menu li의 하위에 있는 네비게이션이 내려오는 것이므로 이것(현재 this로 정해둔 것)의 하위에 있는 태그를 표시해줘야하는데 이 방법은 2가지가 있다.

첫번째는 네비게이션을 구성하는 태그인 a를 직접 언급하는 것이고 두번째는 children()을 통해 언급하는 것인데 a를 직접 언급하게 되면 우리가 마우스를 올리는 부모가 되는 네비게이션도 포함하기 때문에 두번째 children()을 사용하고 선택하는 자식요소가 sub-menu임을 표시해야 a태그와 혼선이 없으므로 children('.sub-menu')라고 작성해줘야한다.

$('.menu li').mouseenter(function(){
    $(this).children('.sub-menu').stop().slideDown();
});

$('.menu li').mouseleave(function(){
    $(this).children('.sub-menu').stop().slideUp();
});

siblings() 예제)

다음은 예제의 코드와 예제 실행결과이다.

예제의 풀이는 아래에 있다.

[ 실행결과 ]

마우스 커서를 올리면 버튼 모양이 변형되는 예제

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css\style.css">
</head>
<body>

    <div class="btn">
        <span>공지사항</span>
        <span>갤러리</span>
    </div>

    <script src="script\jquery-1.12.4.js"></script>
    <script src="script\custom.js"></script>

</body>
</html>

[ css ]

버튼 모양을 변형시켜active 클래스를 만들어 html이 아닌 js에서만 실행시켜준다.

.btn {
    width: 300px;
}

.btn span {
    background-color: #ccc;
    padding : 5px;
    width : 100px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
}

.btn span.active {
    border : 1px solid black;
    background-color: white;
}

[ js ]

마우스를 올린 버튼 쪽에 만들어준 클래스 active를 적용해준다.

그리고 동등한 위치에 있는 나머지 버튼은 siblings이므로 현재 마우스 커서가 있는 위치의 siblings()에는 클래스 active를 제거해준다.

$('.btn span').mouseenter(function(){
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
})

728x90

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] NULL과 Undefined 차이점 / NULL 병합 연산자 (0)	2024.11.22
[JavaScript] 비주얼스튜디오 코드(Visual Studio Code) - 유용한 플러그인 설치 (0)	2024.11.21
[JavaScript] jQuery 기본 구조 설명 (3)	2024.10.26
[생활코딩] JavaScript 왕기초 12장 - Visual Studio Code / 객체 (Object) 데이터 모두 가져오기 (1)	2024.09.10
[생활코딩] JavaScript 왕기초 11장 - Visual Studio Code / 객체 (Object) (1)	2024.09.04