반응형

흔히들 jQuery와 javascript의 차이점을 대답할 때,

'제이쿼리' 는 자바스크립트를 기반으로 만들어진 라이브러리 라고 많이들 대답하곤 한다.

 

자바스크립트는 크게 4가지 요소로 구성돼 있다.

1. 자바스크립트 core 문법

2. 자바스크립트 core 라이브러리

3. 자바스크립트 BOM (Browser Object Model)

4. 자바스크립트 DOM (Document Object Model)

 

제이쿼리는 이중 자바스크립트 DOM작업을 쉽게 처리할 수 있도록 도와주는 라이브러리다.

또한 제이쿼리는 DOM작업을 쉽게 도와주는 라이브러리 일뿐, 자바스크립트 문법이나 라이브러리를 대체하는

프로그래밍 언어가 절대 아님을 인지해야 한다.

 

* javascript와 jQuery의 문법차이

 

- html

<body>
	<ul id="menu">
    	<li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
    </ul>
</body>

- javascript

//menu 노트 찾기
var menu = document.getElementById("menu");
//li 리스트 구하기
var liList = menu.getElementsByTagName("li");
//li 개수만큼 루프 돌며 스타일 변경
for(var i=0;i<liList.length;i++){
	//i번째 li 접근
    var li = liList[i];
    //스타일 변경
    li.style.color="#f00";
}

- jquery

$("#menu li").css("color", "#f00");

 

위와같이 document의 html 구성이 있을때, javascript 코드와 jquery의 코드는 같은 뜻을 가지고 있다.

무분별하게 jquery를 남발하기 보다는, 해당 소스가 javascropt DOM 문법으로 어떻게 이루어지는지

이해를 가지면서 공부하는게 좋다.

 

참고문헌 : '자바스크립트 + jQuery 완정정복 스터디' 2편

반응형
저작자표시

'jQuery' 카테고리의 다른 글

[jQuery] css/jquery로 tab메뉴 구현  (0) 2020.02.08
반응형

dataTab.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/dataTab.css">
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="../js/dataTab.js"></script>
</head>
<body>
    <div class="container">
        <h1>css/jquery 데이터 탭</h1>
        <div class="content">
            <ul class="tab_wrap">
                <li class="active" data-tab="tab1">
                    <a href="javascript:void(0);">Tab1</a>
                </li>
                <li data-tab="tab2">
                    <a href="javascript:void(0);">Tab2</a>
                </li>
                <li data-tab="tab3">
                    <a href="javascript:void(0);">Tab3</a>
                </li>
                <li data-tab="tab4">
                    <a href="javascript:void(0);">Tab4</a>
                </li>
            </ul>
            <div id="tab1" class="tab_cont active">1번탭에 대한내용입니다.</div>
            <div id="tab2" class="tab_cont">2번탭에 대한내용입니다.</div>
            <div id="tab3" class="tab_cont">3번탭에 대한내용입니다.</div>
            <div id="tab4" class="tab_cont">4번탭에 대한내용입니다.</div>
        </div>
    </div>
</body>
</html>

dataTab.scss

@charset 'UTF-8';

.container{
    width:1080px; margin:0 auto;
    h1{padding:20px;border-bottom:1px solid #ccc;}
    .content{
        padding:40px;
        .tab_wrap{
            overflow:hidden;
            li{
                float:left;
                &.active{
                    background:#bababa;
                }
                a{
                    display:inline-block;
                    text-align:center;
                    padding:14px 16px;
                    font-size:17px;
                    transition:0.3s;
                }
            }
        }
        .tab_cont{
            display:none;
            background:#bababa;
            padding:6px 16px;
            min-height:300px;
            &.active{
                display:block;
            }
        }
    }
}

dataTab.js

$(function() {
    $('ul.tab_wrap li').click(function() {
        var activeTab = $(this).attr('data-tab');
        $('.tab_wrap li').removeClass('active');
        $('.tab_cont').removeClass('active');
        $(this).addClass('active');
        $('#' + activeTab).addClass('active');
    })
});

 

반응형
저작자표시

'jQuery' 카테고리의 다른 글

jQuery와 javascript의 차이점?  (1) 2020.10.21

+ Recent posts

티스토리툴바